Upgrading my Portfolio - Process (HTML, CSS, JS to ASTRO.js )

A portfolio is something developers use to tell people who they are, and what they can do. It’s a showcase of our best work.

When I started off creating my portfolio, I was eager to show off all the projects I created. However, I didn’t consider maintainability. My files grew larger, it took longer to scroll through a single file to make changes to multiple copies of the same element, and it was eventually just a pain to change things around. I started looking into component-based solutions, and eventually found one that balanced speed and dev experience, which for me -- was Astro.

Old Portfolio

For my first iteration of my portfolio, I started off in pure vanilla HTML, CSS, and JS, eventually adopting Tailwind CSS. I figured since it was mostly a static site, it would be good to practice the fundamentals.

However, as I continued to develop the site, it began to be hard to maintain as the content and site grew. For a landing page style portfolio on a single page, the file ended up having around 600 lines of code. I added Tailwind CSS as well, making the HTML tags even longer to read through.

<article class="py-6 flex flex-col">
  <img src="./img/wewatch.jpeg" alt="wewatch website" class="rounded-lg object-cover object-top h-48 lg:h-64">

  <h1 class="text-3xl py-4">WeWatch</h1>

  <div class="flex py-2 flex-wrap gap-1">
    <p class="inline-block px-2 py-1 text-xs font-semibold rounded-xl bg-blue-400 text-gray-900">
      Node.js
    </p>
    <p class="inline-block px-2 py-1 text-xs font-semibold rounded-xl bg-blue-400 text-gray-900">
      Express.js
    </p>
    <p class="inline-block px-2 py-1 text-xs font-semibold rounded-xl bg-blue-400 text-gray-900">
      MongoDB/Mongoose
    </p>
    <p class="inline-block px-2 py-1 text-xs font-semibold rounded-xl bg-blue-400 text-gray-900">
      EJS
    </p>
    <p class="inline-block px-2 py-1 text-xs font-semibold rounded-xl bg-blue-400 text-gray-900">                                
      API
    </p>
    <p class="inline-block px-2 py-1 text-xs font-semibold rounded-xl bg-blue-400 text-gray-900">
      MVC Pattern
    </p>
    <p class="inline-block px-2 py-1 text-xs font-semibold rounded-xl bg-blue-400 text-gray-900">
      Passport.js/Auth
    </p>
  </div>
  <p class="font-light text-gray-300 text-base py-2">
                            A shared show watch list using Mongoose + MongoDB, Express.js, Node.js and EJS.
  </p>
  <div class="flex gap-2 pt-2 items-center mt-auto justify-self-end">                            
    <a                           
      href="https://wewatch.cyclic.app/"
      target="_blank"
      class="pr-2 text-xl hover:text-orange-400 dark:hover:text-orange-400"
    >
     <i class="fa-solid fa-link"></i>
    </a>                             
    <a href="https://github.com/alabador/wewatch"
       target="_blank"
       class="pr-2 text-xl hover:text-orange-400 dark:hover:text-orange-400"
    ><i class="fa-brands fa-github"></i
                            ></a>
</div>
</article>

Now keep in mind, this code above was formatted for the purpose of readability on the blog. But on the actual codebase before...the formatting was much worse. (in hindsight I should have used a code formatter like Prettier though).

Here's the link to my old branch of my portfolio. The live site is down for it, but the code is all still there.

Component-Like Client-based JS

So at the time of development, I didn't have too much experience with React and other component-based libraries. I was still fairly new to web development, so I used what was in my toolset.

During the process, I knew there had to be an easier way than hardcoding HTML into my website. I tried using JS to declutter the HTML, creating functions that would dynamically create elements then append to the DOM. Essentially doing something like this:

function addElement() {
  const projects = document.querySelector('.projects');
  const newProject = document.createElement("article");
  projects.appendChild(newProject);
}

I skipped a few details, but I also created a JS object that held the information of my projects, then added that for each project within another function.

Moving to React/Astro

Doing things this way was fine for a while. Fast forward a few months, and as I started to grow as a developer, I picked up more experience with React. My portfolio looked like it needed a revamp considering the new things I learned. I started looking towards more component based tech, and considered React and Next.js.

However, these seemed to be too much overhead for a simple mostly-static site. I discovered Astro, and I fell in love with how easy it was to use, how fast it was, and it's ability to have partial hydration. So my site could still be static, and only the parts I needed React on (if I wanted to implement React) would have client-side JS.

Here's the link to the Github for my portfolio if you want to keep up with the progress: Portfolio Link - Github