I started this project by prompting Bolt.new to build a website for a coffee shop given some parameters. I wanted ease of use and mobile optimization, but I also wanted to capture the feel of the shop itself. Taking what Bolt.new gave me, I changed the layout to be more relevant to the shop, and added new features and pages.

I chose Next.js because it will give me the flexibility to add server-side features in the future, such as ordering online. Otherwise, I would have chosen Astro, as that performs better for SEO and static sites.

I used Tailwind CSS for styling, and Shadcn/UI for basic components. I used Vercel for deployment since it's free and links right up to my GitHub repo.

I designed some of the graphics myself, such as the coffee bean dividers and the plant images.

I added parallax scrolling to the home page on larger screens to give the site a bit more depth and personality. I did this by creating a hook for monitoring the scroll position and then using that to set the background position of the images.

Blurb on image optimization

Blurb on SEO

This project has been a work in progress for a long time. I started it in 2021 when I barely knew anything about web development, and I've iterated on it many times since. This is the third version of the site.

I chose Astro because I wanted a mostly static site that would perform well for SEO. I also just wanted to learn more about the framework.

Since Astro isn't meant for server-side rendering, I had to do some fanangaling using server:defer to get the site to work with Clerk authentication, likes, and comments. See more about this on my blog post.

Astro makes it super simple to add new articles, especially compared to the previous implementation where I was writing all my articles in React. With Astro, I can use markdown files and have the content automatically converted to HTML along with proper metadata.

There are some legacy elements in the infrastructure of the site, such as some metadata being stored in AWS Aurora DB, and I am working on migrating it to be hosted on Vercel. The newsletter is also stored in AWS still and is sent out using Lambda and SES.

Bonus info from previous versions: I had some fun with creating a 3D model of my actual hobby room using three.js and react-three-fiber. I added easter eggs to the model that will take you to different parts of the site. Unfortunately, I took down the model with V3. It wasn't optimized for mobile, took forever to load, and I didn't have the skills in Blender to optimize it, but it was a fun learning experience.

I started this project in 2023 when I was just a baby developer, and I've iterated on it many times since. This is the third version of the site.

The functionality of the site has been consistent: users can sign up to create their own journal, and inside the app they can write entries, track mood, track sleep, set goals, and more.

I chose Next.js because it gave me the tools to build a full-stack application with authentication and server-side rendering. I also just wanted to learn more about the framework. I learned a lot about tRPC and Drizzle, and it makes me excited about how powerful the framework can be.

The database has also gone through many iterations. I started with AWS Dynamo DB because I thought, "Oh, a journal, makes sense for it to be stored in a document database." However, once I realized I wanted querying capabilities, I switched to PostgreSQL. I did a migration using Airflow to Vercel postgres since I was already using Vercel for deployment. Now, the data can be queried much more easily and quickly.

The authentication has changed since the start as well. At first, I was using Auth0, but I found it to be a bit overkill for what I needed. I switched to Clerk, and it's been a great fit. It is much simpler to get set up, and the free tier is more than enough for what I need.

The initial deployment pipeline was a bit of a controlled mess. I was using AWS CodePipeline, which deployed my infrastructure and frontend packages separately. I really did not like writing and maintaining the pipeline and its buildspec, so I switched to Vercel, which requires minimal setup.

I've learned a lot about the framework and how to make it work for me. I'm excited to continue iterating on this project and making it even better.

I started this project back in 2022, and I thought it'd be fun to just make a pure HTML/CSS site. It didn't seem worth it to use a framework. This was great for a first pass and thinking differently than React, but the site really needed updating to be more modern. Since I started this project, I've found Astro, which is perfect for this kind of site, so I gave it a good 'ol refactor.

To start, I prompted Bolt.new to build me a single-page static website. I prompted it to make the site styled like Windows 95, then exported the code to a new repository and edited it from there with my unique style. I used Tailwind CSS for styling, and Vercel for deployment since it's free and links right up to my GitHub repo.

I designed all the pixel art graphics myself using a program called Aesprite. Then, it was just a matter of styling to my liking and adding some interactivity.

This is basically just an AI generated site. I used Bolt.new for the initial build, then I adjusted it slightly to fit the needs of the client, who just wanted a simple informational site.

I chose Astro because it's a static site and performs well for SEO.

I used Vercel for deployment since it's free and links right up to my GitHub repo.