Audiophile
Used GraphCMS like a database to store images, create relations between data, and test queries. Nest.js to serve as a reverse proxy between GraphCMS and the client. Graphql Codegen to generate types and create code to make api calls. NX, Next.js, and Styled Components to build components and pages.
Memory
This project is created with XState, Styled Components, Jest, and Next.js. I had to use the actor model and state machines to create the logic for the game, and I used radio buttons for the create game form for accessibility purposes. This is still a work in progress. I plan to add more features such as: a score screen after the game is over, a timer and moves display for single player, and using arrow buttons to navigate the board. Afterwards build a back-end using Nest.js and use websockets to create a real-time experience and create lobbies for players to join rooms.
Advice Generator
This project was made as a challenge based on a design file and is part of a monorepo (NX). I used HTML5, along with Styled Components (styling), and React Query paired with Axios for Data Fetching.
Tower of Hanoi
Xstate was used to control state which simplified making the game compared to the out-of-the-box state management given by React. Used Typescript to document the code.
Loopstudios Landing Page
CSS Grid was used to make most of the site responsive. Next.js to make the navigation bar animation run when scrolled past a certain point using observers and closing the mobile navigation bar using the escape key.
Typemaster Landing Page
This project required me to build a fully responsive landing page to the designs provided. I used HTML5 while making sure the site was accessible and SCSS with flexbox to make it responsive. Snowpack is used to create a production build.
Minimalist Portfolio
You are currently on the site. It uses Next.js, NX, Styled components, and GetForms.