This Website

design dev

I built a new personal website using Astro, SCSS, and Tailwind (somewhat).

Published on . Last updated on .

This project isn't done yet! Updates are to come!

What is this?

My website. My old one is available to see here.

I wanted to have something I was actually proud of and didn’t take me 5 minutes to make during a French class in high school because I discovered Bootstrap Studio was an easy way to prototype a minimalist website.

How do I view this project?

It’s live. You’re using it right now.

What tech was/is used?

Astro, TypeScript, SCSS, and Tailwind. The last one has got to go though, and will be gradually phased out. I find it useful for prototyping, but don’t like having a lot of classes around, especially as I don’t exactly know how each works. Also, it sometimes messed with my SCSS module files.

All the blog posts, the project posts, the /about page, and most of the pages on /more use markdown.

The bubble animation appearing when the page is clicked uses the Mo.js library.

Project structure

- Astro project/
  - public/
    - images/
    - fonts/
  - src/
    - assets/
      - images that can't be loaded in via /public (idk why)/
    - components/
    - pages/
    - styles/
    - layouts/
    - utils/

Astro integrations used

Entries as the site progressed

07/05/2023 - v1.10.6

Many small updates, including lots of little experiments.

Now includes a Work section.

05/03/2023 - v1.10

I do not know what I was doing last update. It was super ugly. This is the biggest visual update and improvement by far, with gradient backgrounds, a whole new suite of colors, and more pop to everything!

The underlying structure is mostly the same.

This update also introduces the web experiments section, located in /more.

04/26/2023 - v1.9

New color scheme, new background, and less complicated code! Biggest visual update to date!

01/27/2023 - v1.8

Upgraded to Astro 2.0. I now use the content folder to host the blog, project and random posts. I therefore have to use [..slug].astro which is alright? Also, a whiile back images have been changed to use .webp instead of .jpg or .png.

12/09/2022

I added the bubbly click animation with Mo.js. It’s fun! I’m experimenting with page load animations now.

11/17/2022

My roommate told me he was disappointed in my website today. After realizing he meant the landing page, I agreed. It’s time to redo it.

I’ll try to make it look more modern without the typical start-up feel, and maybe add light/dark mode.

11/09/2022

Wow turns out I was dumb and Vercel was lenient.

For ~18 hours this website 404’d. I couldn’t figure out why. Redeployed over 20 times trying out new things. Turns out a path was set wrong and a commit triggered Vercel to realize it? I’m not sure. Here is the link to the issue.

10/22/2022

So far, I hate styling so much. Thank you so so so so much for SCSS.

Alright. V1 of this website is done! Finally! It has been a bumpier ride than I expected, with a very annoying bug (actually a JS compilation uncertainty that therefore isn’t allowed by vite) at the end. But woo! It’s finally done!

or View Other Projects