Key Projects

Click an image for a larger view!

A light blue background with black text. The header asks the question "What is the official name for the hashtag symbol?" and there are four multiple-choice answers stacked on top of each other: Number sign, Octothorpe, Pound, and Hash sign. The second answer, octothorpe, is selected and underlined. Below is a large black button asking "Is this your final answer?",A light red background with black text. Centered in the screen is the question "In a game of bingo, what number is represented by the name two little ducks?" with four checkboxes, all unchecked, with labels underneath - 77, 20, 22, and 55. Below is a large black button asking "Is this your final answer?" with dark red text underneath saying "You've got to pick an answer first - no skipping ahead!",A light green background with the header "You made it" centered in the top. Beneath it shows the users final score of 6 / 10, an encouraging statement, and then starts showing each question with the answer the user picked and the correct answer below.

Trivia Quiz

React

CSS

JSON

A small trivia quiz - answer random trivia questions, and see your score and the answers at the end! I tried to style it similar to Typeform's style, and learned a ton about React along the way.

Demo Code Live Site
View Project Case Study
A heading bar with Do I Own This on the left, and a greeting and sign out button on the right. Then, a filter bar, showing a drop down menu and a text box with a search button. Finally, a link to add something new, and a grid view three across and multiple down showing photos of nail polishes with their name below them.,At the top left, a link in black text with a pink underline saying Back to All Items. In the center of the page, a hand holds a bottle of blue nail polish that says Zoya. Underneath the photo, there is data about the polish - the name Sia, brand Zoya, color group blue, and finish gloss.,A heading bar with Do I Own This on the left, and a greeting and sign out button on the right. Then, a filter bar, showing a drop down menu and a text box with a search button. Underneath, there is welcome text, introducing the site and instructing the user to sign in to start their collection.

Do I Own This

Vue

Firebase

CSS

Do I Own This is a personal nail polish inventory tracking site. It's meant to hold information about your collection, so while you're out at a store you can easily see if you already own a polish or not. I built this site to both help my future self, and learn Vue.

Demo Code Live Site
View Project Case Study
Hobbes the Tiger, from the comic strip Calvin and Hobbes, drawn with HTML and CSS.,A small plant with a white stem and light green leaves pokes out of a pastel purple vase with a pastel yellow water tray.,A gray elephant on a blue background, facing forwards, with small white toenails and white tusks.

CSS Images

HTML

CSS

Images created using CSS, following prompts from a daily email. Through working on these drawings, I started to learn more about positioning items with CSS, as well as flexing the creative side of my mind.

Demo Code
View Project Case Study
The title Snake is centered at the top. Below it shows a score of 7 and a gray button saying Game in Progress. A toggle is below with directions of how to play. The game board has a purple border and shows a small green food dot, with a pink snake line heading towards it.,The title Snake is centered at the top. Below it shows a score of 57 and a gray button saying Game in Progress. A toggle is below with directions of how to play. The game board has a purple border and shows a small green food dot, with a long light blue snake line heading towards it. - The title Snake is centered at the top. Below it shows a score of 64, the text "Game over! Hit your body", and a blue button saying Start New Game. A toggle is below with directions of how to play. The game board has a purple border and shows a small green food dot, with a red snake line crossing over it.

Snake!

HTML

CSS

JS

My take on the classic Snake game! Inspired by a project from Wes Bos' Beginner JS course, this uses the canvas element to draw the snake and food. It was good practice for grabbing items from the DOM and updating them as things change!

Demo Code Live Site
View Project Case Study
Title of GitHub User Search is centered across the top. Below is a search bar, with the query lindakat inside, and a gray search button to the right. Three card options show below in a line - each has a photo, underlined named, follower count, and starred repos. The middle card also has a for hire line, profile description, and shows two linked repositories with a short description and language tags.,Three cards with gray borders show three user profiles. Centered in each is a photo, with only the bottom portion visible on screen. Each card has a blue link with a user name, a follower and starred repo count, and some have a description or links to pinned repos. At the bottom of the page, Prev Page and Next Page navigation links are visible. The Next Page link is highlighted in green.,Title of GitHub User Search is centered across the top. Below is a search bar, with the query lmnopqrstuvwxyz inside, and a gray search button to the right. Below the search bar, the text "Sorry, it looks like there's no results for that search! Please try a new name or check your spelling" is visible.

GitHub User Search

Vue

GraphQL

HTML

CSS

Uses the GitHub GraphQL API to search for user profiles! Created for the This Dot Labs job application, but is too neat to only share for that.

Demo Code Live Site
View Project Case Study
Filter bar on top with options for selecting neighborhoods or cuisines, showing three restaurant cards below, each with an image, favorite status, name, neighborhood, address, and a button to view more details.,A blue filter bar with two drop down menus spans the top, with Brooklyn selected on one and Pizza on the other. Below, two cards show, both with a centered image, a heart symbol, the name and address of the restaurant, and a maroon button with the text "View Details",A black bar with yellow text reads "Restaurant Reviews" across the top. A smaller gray bar spans the length underneath, with the text Home / Emily on the left side. Below this is a map on the left side with a location marker centered. On the right side is a picture of pizza, with the label Pizza underneath, an address, and a red heart icon with a yellow circle around it.

Restaurant Reviews

HTML

CSS

JS

Service Workers

IndexedDB / idb

Created during the Udacity Mobile Web Specialist Nanodegree course, this site allows users to favorite a restaurant & add reviews, as well as filter by food type or location. Accessibility, responsiveness & offline capabilities were the main focus!

Demo Code Live Site
View Project Case Study

Extra Side Projects

A black background with 25 white numbers along the right side, each with two gold stars to the right of them. Ascii art creates a map of bracket markers and land masses with a small red pole with a star centered along the top, a purple sea monster in the ocean, and a hurricane spiral along the bottom right.

Advent of Code

JS

Rust

Code
A blue background with a white textbox centered inside, which shows a quote from Ratatouille, with a Twitter icon in the lower left and a new quote button on the lower right.

Random Quote Generator

HTML

CSS

JS

jQuery

Code
A title of Wiki-Search, with a text box to enter your search and a search button, a link to view a random article, and then a list of search results, each showing the title of the wiki article, a short description of the article, and a link to read the full article.

Wikipedia Search

HTML

CSS

JS

jQuery

Code