TL;DR

2021 brings big updates to my personal website! With this new version 6 comes some really cool features that I have been working towards for years. (Any feedback on more ways to improve it is always welcomed.)

View Deployed Site ↗️

Table Of Contents

1. Introduction
2. v0.1 (Template)
3. v1-v4 Bootstrap Goodness
4. v5 Marks A Big Change
5. v6 Brings It All Together
   • Career Timeline (Draggable)
   • Articles with Animated Thumbnails
   • Dev.to API Intergration
   • Optimized File Structure
   • Rebuilt Navigation
   • Simplified Animations

Introduction

The following is a coding journey that proved incredibly important to my growth as a developer.

As you will see, the first few versions of my site were not what I had in mind. But as my coding skill began to take shape, so did my site.

I share this experience to express an idea. As exciting new projects are, coming back to old ones can be a huge learning experience. Sometimes the intended results come after much refactoring...

Back To Top

v0.1 (Template)

For the longest time, I have had an Adobe Portfolio website that worked great to showcase my design projects. It linked up to my Behance profile, so adding new content was easy. (I actually still use this site for my design specific content.)

I got design jobs through it and even won 3rd place at a digital marketing competition. However, I was limited to a templated layout and have always wanted to truly build my own site.

So, when I started my Full-Stack Development Bootcamp in 2020, I was super excited that our homework included coding out new portfolio sites.

Back To Top

v1-v4 Bootstrap Goodness

I started v1 as a regular static Bootstrap site and over the duration of the course kept adding projects and minor UI tweaks. It was quite generic, but I was happy about having something live that I coded. 🙌 (And getting it submitted in time for a grade.)

I remember being super proud of this little hover effect on my project thumbnails. It took me hours to figure out. 😆

Back To Top

v5 Marks A Big Change

Towards the end of my Bootcamp, I learned enough about code to build my very own React portfolio! This was version v5 and with it came a complete redesign and re-imagination of my brand. 🎉 (Better thumbnails too. 😉)

I designed and coded the whole site in about a week and until this day, a lot of the fundamental elements I kept.

• Dark color scheme so the work examples stand out
• Minimal layout that uses "white space" to segment sections
• Skills section that lists technology I use and example projects
• Links to a simplified version of my Adobe Portfolio site for design projects

Incromental Updates

The months following saw many small or experimental updates to my site.

• Scroll-based animations using GSAP3
• Pinned side sections that held social links and navigations.
• Cards that show my hobbies, with custom hover effects

Back To Top

v6 Brings It All Together

As much fun as it was to experiment with new features, my site was turning into a bit of a Frankenstein.

I also really wanted to start a blog and some way to display posts on my site without fully creating a backend.

Key areas to update...

• Refine and further flesh out the design direction
• Remove/simplify things that were not working like animations
• Add missing core features like the blog and career section
• Restructure both the site navigation and component folders to support future growth.

So without further ado, below are the areas that have changed! ✨

Back To Top

1. Career Timeline (Draggable)

I wanted a way to showcase my work history in a visually interesting way, without making people go to my LinkedIn or resume. The colors play off the tech section, which establishes {development: blue}, {design: red} and {learning/education: green}.

This section is draggable with the mouse or finger on mobile. It was a blast to code it out with CSS Grids & Flexbox!

Back To Top

2. Articles with Animated Thumbnails

I opted to start my blog here on Dev.to and use it to power the "backend" of my site's articles. (More details in the next section.)

It was important for my brand identity to keep a very minimal look for the article cards. I like to have simplistic elements that all have a purpose and then add a small or single "pop" element.

The solution I came up with was having the image thumbnails for the articles appear on hover. And at the same time, have a Call To Action (CTA) link stagger in.

Back To Top

3. Dev.to API Intergration

As mentioned, I used the Dev.to API to power the articles on my site.

I had a lot more plans for filtering and searching through the posts, but the Dev.to API is still in beta and not feature complete.

So at this stage, I have an API call that looks for published articles by my user, grabs 9 at a time, and dynamically indicates which page to request.

I also have a simple "prev/next" pagination system, to cycle through the article groups.

axios.get(`https://dev.to/api/articles?username=gedalyakrycer&per_page=9&page=${currentPage}`)
  .then(res => {
    setArticles(res.data);
  })
  .catch(error => {
      console.log(error);
  })

The above API call lives in a useEffect that also checks to see if the current page is more 1. If so, that means there is content to go back to. This activates the "prev" pagination button.

if (currentPage > 1) {
  setNewContentAvailable(true);
} else {
  setNewContentAvailable(false);
}

In a separate useEffect I am checking to see if the state that stores the API data is empty.

If it is, then I disable the "next" button and display a message to the user.

useEffect(() => {
  if (articles.length === 0) {
    setOldContentAvailable(false);
  } else {
    setOldContentAvailable(true);
  }
}, [articles])

If you would like to see all the code working together, check out my github.

Back To Top

4. Optimized File Structure

The last version of my site only had two pages, Home and About.

On the code side, I for the most part had everything "organized" everything in a huge components folder.

This is not a sustainable solution as the site grows.

So in this latest round, I restructured everything into three main folders.

• /pages folder contains the highest level components that group together all content for a given page. I use these components for my ReactRouter to point to.

• /components folder is now organized with subfolders specific to each page.

  • In addition, each site section has a main "container" component that handles logic and most of the state. They in-turnpass down props to presentational components.
  • There is also a /ui sub-folder that holds any components that might appear on multiple pages. (Like the logo).

• /utils folder holds any helper functions, json, and context files

This folder structure makes it a lot easier to find items and also organize logic.

Check out the full folder structure here.

Back To Top

5. Rebuilt Navigation

With the new multi-page site structure I took the opportunity to rebuild the navigation from the ground up.

I really wanted to do it without react-bootstrap and enjoyed the process of building it from scratch. (In the next update I hope to remove react-bootstrap completely from my site.)

On mobile, I also relayed out the social media icons from a vertical layout to a horizontal one. I felt this was much more user friendly.

Back To Top

6. Simplified Animations

In previous versions on my site, I had almost every element animated with GSAP3. It looked really cool, but to be honest, it was unpredictable and didn't always work.

At best an animation didn't fire and at worse a section would disappear. This is less a problem with the GSAP3 library and more a gap in my knowledge and implementation of it.

I decided to simplify the site down to only animations that will work constantly. I'd much rather use something that gets job done 100% of the time, then something that works amazing only 50% of the time.

As I grow and learn more, I will slowly add back in these extra elements the right way. :)

Back To Top

Summary

Thank you for reading about my portfolio site's journey and these latest updates. I am very happy with how it turned out and at the same time looking forward to making more changes. 😂

Some future additions...

1. Make into a Gatsby site

2. Move all the design projects off Adobe Portfolio and on my own site

3. Master the animations

4. Have articles open in my own site and not link out to dev.to

5. Redo the contact form with my own code (It is one of the few sections I followed the tutorial to the letter.)

Be sure to share your portfolio's below. I would love to see them!

Back To Top

Thumbnail designed with Figma.