It's been a long time coming: a new personal website. I created my first portfolio website during my sophomore year of high school, in 2018. I used Wix because that was the only service that gave me everything I needed for free. But I had no passion for the site I was creating. I didn't like how the site looked, and I knew it was a jumbled mess of mixed-up links and bad UI design. Yet I couldn't do much because I didn't even know the first thing of web design or development. I felt like my work, the things that I took pride in, had no real home to live in. That website has been doing it's job for the past four years — up until yesterday. Today marks a new beginning for my work: a new home.

Purpose

Apart from the overall objective to establish my personal and professional brand, my website serves two purposes: to (1) host my academic projects and (2) showcase my web development skills. The academic projects exemplify my critical thinking skills and passion for academia research. I chose to develop this site now because I will be applying to PhD programs next year and admissions committees often want to see work samples. What better way to provide samples than through a super cool website? Plus, I can showcase my coding skills at the same time. I can never pass up a buy-one-get-one-free deal!

With the launch of this site comes a whole new host of things I never thought I'd be able to do. My website has the capability to seamlessly move to different sections with the click of a button. It automatically filters projects based on a tag I assign. Heck, I have a blog that automatically arranges itself reverse chronologically by date! Now, not only can I show people my work, but I can tell my story to whoever happens to stumble across this site. So, here are a few snippets of my story developing this site.

Design & Development

This project started five months ago when I was still coding my business website. I wanted to ditch my Wix site because even though it treated me well during the four years, it had long outlived its usefulness and was starting to show its age. The beautiful thing about Wix is that you can design a website in literally minutes. Any design element you need is at your fingertips. Developing a website from scratch requires more perserverance throughout the design process. I struggled to design the layout and visual elements because nothing felt right. The beginning stages were frustrating and I felt my perfectionist personality start to hinder my progress. Eventually, however, I settled on this design.

Development began three months after I chose the final design. At that point, I hadn't coded in a while, so I had to reacquaint myself with language syntax and best practices. Thankfully, Kevin Powell helped me review the basic concepts (he is a great resource for anyone starting out in web dev!) I'm also really glad I kept a copy of the class textbook — I don't think I would have been able to complete any of my web development projects without it.

I coded this site using HTML, CSS, JavaScript, Node.js, and Tailwind CSS. This was my first time using Node.js and Tailwind CSS in a project. There was a steep learning curve to learning the ins and outs of a new runtime runtime environment and a new framework. For the layman, Node.js allows developers to use JavaScript for server-side scripts. Tailwind CSS is a Cascading Style Sheets (CSS) framework. When developing a site, CSS gives developers the ability to style each page to their liking. Tailwind CSS elevates regular CSS to the next level by allowing developers to share their design elements and CSS styling with others. For both to work correctly, npm (node package manager) must be installed on the local machine.

I ran into a few snags just installing npm on my computer. The messages that PowerShell gave me during installation were very cryptic and confused me. Apparently I already had Chocolatey (another package manager) installed as part of a previous package, so Node.js refused to update it. After uninstalliing Chocolatey, I redownloaded Node.js and successfully installed npm. Downloading Tailwind was easier because I was familiar with using the command line. When initiating npm and Tailwind in VS Code, I had no clue where to even start. So, I spent the next few days learning about them and how to properly code with each.

I like to think of Tailwind CSS as a cousin of CSS. They're not the same, but they share some of the same syntax. Setting up the config and webpack files for this site was a headache. I didn't realize I had to use the VS Code terminal to execute 'npm start' so that I could see my live code. God forbid I used Notepad++ for this project or I wouldn't have been able to open the compiled project — the horrors!

I finally figured out a system for code efficiency: create a bunch of classes in Tailwind and reuse the heck out of them in every page. I suppose that's why one would use Tailwind in the first place! Not only is this method efficient, but it also makes site maintenance a breeze. No more searching for an individual CSS style declaration for a single HTML element and painstakingly changing declarations for each elements. Now I can quickly look back at my class list and fix or change a specific class, and it will automatically apply to every single element with that class.

This website is deployed through Netlify, which saves me so much time. I don't have to learn backend languages, frameworks, processes, or pipelines. I don't need to do much except stage and commit changes to GitHub, then Netlify takes care of everything else. All three of my sites are deployed through them. For a free hosting, backend, and API service, I can't ask for much more!

I'm excited to continue developing this website and learning more about Node.js and Tailwind — hopefully without as many hiccups and frustrations.

The Future of This Website

Simply put, she's here to stay and I have plans to trick her out even more!

In the future, I want to create a database filled with the blog article tags and then create a dedicated page for users to filter blogs based on tag type. For example, if I have five blogs covering aviation and you only want to see aviation blogs, I want you to have the ability to filter to those five. I also want users to be able to download my CV and resume to their local machine. I currently have both linked to Google Drive, but it adds an extra step to downloading. Right now I am encountering a problem with VS Code incorrectly storing PDF files. Finally, I need to add more projects. However, I am facing a few Tailwind issues where new projects fail to fill their assigned section and instead overflow into the next section.

I've learned that new developers should always focus on perfecting their current website. This is why I don't plan to add new features yet. For now, my focus is on fixing bugs and ensuring the best performance for visitors on all devices. There will come a time when I transition to feature additions though! If you have any tips, advice, suggestions, or new feature requests for this site, I would love to know — shoot me an email using my Contact form.

Until Next Time

From a human factors standpoint, I know that almost none of you have read this entire blog from top to bottom. But that is perfectly okay. Just know that I appreciate you even clicking on this article. I'm thankful for anyone who visits this website. This whole process was pretty difficult, and it took many hours of frustration to finally deliver something I'm proud of. But I would be lying if I said I don't enjoy my new online home. And I hope you do too.