This one will be a quick one, I think.
So, if you’re seeing this, you’re seeing the new version of the site. However, before this version, there was an identical one that’s similarly designed that was heavily lifted with the WordPress CMS and Elementor. And, for what it was supposed to be, it worked. Visual editors are really cool and powerful and it allowed me to picture a layout before I went and rebuilt the whole goddamn thing (except for the fact that we have wireframe tools for this purpose too, so w/e).
But you’re probably wondering, why change it?
Well, I do intend on getting into (at least) frontend web development a little bit, and developing some skills. And it probably wouldn’t do me very well to have tools behind the scenes do a lot of heavy lifting. I’ve done a handful of smaller projects (it’s nothing to write home about) earlier through a JavaScript introductory course earlier when I was in high school. But now it’s time to put some big boy pants on and do a project completely on my own and off the hook. And I thought it would be a good idea to start with my portfolio website. So, hello, you’re seeing this, which means I’ve mostly succeeded!
What’s this website built with, then? Pretty simple. The site is built using the Astro framework, which is relatively new in a sense. But I think it’s really neat in its approach, with Component Island architecture. Most of the site is static, which makes it really performant cause there’s little overhead, everything about the site is preprocessed and rendered before hand and mostly HTML gets served to web browsers. Things that need to remain interactive are the only pockets of JS that ends up on the user’s browser. And off the top of my head, really the only super interactive portion of this website is when Image Carousels are present in a project write-up, for when I need to showcase a lot of images at once (like level showcases).
I also threw Tailwind CSS in as well cause I found it really helpful even if it does end up a little messy. But to be honest, it doesn’t matter as much because the end user doesn’t care how it’s built and it’s my own personal tech stack that no one else deals with and it’s what I want. But there’s a handful VS Code plugin that helps fold the class list up.
I deploy and host my website on Netlify which offers a great option for no cost and also helps deal with the Contact HTML form component of the site, which would primarily be the only loss since I’m not too well versed in making contact forms that are robust and also protect against botting and spam.
Going back to Astro, it has a pretty good folder structure (loose in some cases, but in other cases it’s strict about it), and I have the site well organized. I keep project write-ups in a content folder, most images in a specific folder for Astro to optimize, and throw re-usable components, page layouts, and actual pages all in their respective folders. And the project write-ups are written in MDX which gets rendered into HTML thanks to the up-front work of page layouts and re-using components. I can toss in components as well for MDX to use when I need them and it’s really neat, so I don’t have to painstakingly write each content page by hand myself. With more advanced layouts, I’m still free to dive into HTML land from MDX and I just think that’s cool. With the entire site set up and the structure set in stone, it should be real easy for me to make new write-ups for any other projects that I work on!
Other than that, there’s not much else to it! I don’t have a need for a heavily interactive website, so the site itself is really performant and Astro suits that quite perfectly. I know I haven’t done much diving into frontend web development yet, but I’d say this is a first good step. And I actually did build something myself, so I figure it’s okay for me to say I’m a web developer now, yeah :)