Project a Month Website
The website I'll be using to display all my projects in 2024
Tech Stack:
I choose astro to make this website in mainly due to its performance. It strips out unused JS and only uses what it needs to. This makes it ideal for primarily static sites (like this one). Also, it offers incredibly flexibility: you can use components from any framework you want, be it React, Vue, Angular, Svelete, or even all of them at the same time, if you want.
I actually did not use any other framework besides Astro to make this site in, though. Originally, I was planning on using React components, and only have one main index.astro page written in Astro, but as far as I can tell an Astro file can do everything a .tsx can (at least when it comes to content/styling). I actually created the NavBar component initially in React, before rewriting it in Astro literally just to see if I could.
When it comes to the file structure of this website, I tried my best to follow the industry standard style of splitting up reusable elements into components and putting all of those in a folder, then having a "pages" folder where the actual content/components would go. I also have a "projects" folder that will eventually contain exactly 12 files: the corresponding breakdown page of each project, for each month. Right now you're viewing src/pages/projects/website.astro.
If noticed something off about the way I structured the project, you're not alone; there's actually a better way to structure the pages, specifically the project pages, so that instead of 12 seperate pages for each project, there's only 1. The way you would do it would be to create one singular page component containing the blueprint of the structure and styling, and then pass the project-specific props into it. Like for example, a title prop, description, image, tech stack, and then a series of 'p' and 'img' tags. This works because all these project pages follow the same structure. Now to be honest I'm not entirely sure it would work, but I think it would because I did something similar for the project card component.
There's only 1 ProjectCard file, not 12. So theoretically, following the same principle, I should be able to have it so that there's only 1 ProjectPage, not 12. The only thing is, the project pages will most likely have a different number of 'img' and 'p' tags, and in a different order, so the pages follow the same general structure, not the same exact structure. One idea for getting around this would be to pass an array of content blocks as a prop, where each block defines the type (paragraph, image, etc.) and its content, then iterate over the blocks and render each block based on its type. I'll most likely attempt to refactor the project pages in this way later on.
One last thing I'd like to touch on is the concept of Astro Islands, which is basically an interactive UI component on the page, with each island running in isolation from the others. It's this feature that allows Astro to support other UI frameworks like React, Angular, etc.
The benefits include performance (of course), since each component does something called "parallel loading", in which components will render in parallel instead of waiting for one to finish first. In the illustration above, for instance, the image carousel (low priority) doesn't block the header (high priority), which means the header loads immediately without having to wait for the carousel to load first
I unfortunately did not have a chance to play around with islands, mainly because I didn't really need to but also because I ran out of time for January and I really want to stick to schedule. However, I do plan on updating the site to add small things as I work on projects for the other months, so hopefully I can play around with islands more at that time.
Well, that's about it for now. See ya in February!
