DEV Community

loading...
Cover image for How I Built My Dream Portfolio Site

How I Built My Dream Portfolio Site

gedalyakrycer profile image Gedalya Krycer ・7 min read

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

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.)

Adobe Portfolio Site

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. 😆

Thumbnail Hover

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.

Thumbnail Expand

  • 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.

Intro Animation

  • 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!

Draggable Career Section

Back To Top


2. Articles with Animated Thumbnails

Animated Article 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);
  })
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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])
Enter fullscreen mode Exit fullscreen mode

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.)

Desktop Navigation

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.

Mobile Nav

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.

Discussion (55)

Collapse
larsonnn profile image
Lars Feldeisen

You dont need to write that you are creative or are an front end developer. You just showed with your site that you are creative and can build that. Your title should be

I create dreams

Or something like that. Your job title goes to your description.

Collapse
gedalyakrycer profile image
Gedalya Krycer Author • Edited

Thanks for that feedback! It is a great point.

There is definitely something to be said for “benefit focused” messaging.

When my objective was mainly attracting freelance clients the verbiage was more specific to what they could get vs. how I would technically provide it.

Now I’m marketing more towards recruiters/ hiring managers. So I really wanted the h1 tag to contain my name and desired role.
(More potential SEO juice. 😉)

Collapse
brandonmweaver profile image
Brandon Weaver

Your portfolio and resume are stunning. I don't think you'll have much trouble finding a role, but good luck none-the-less. I'm considering getting involved in freelance front end development myself; is there any advice you might have for a freelance newbie?

Thread Thread
gedalyakrycer profile image
Gedalya Krycer Author

Thank you so much. Fingers crossed. :)

And that is great you are looking to get into freelance! Here are some things I found helpful...

  1. Identify a market to focus on. Besides tech proficiency, clients want someone who understands their industry and needs. I work a lot with commercial real estate. Projects parameters are more or less the same and I therefore can make suggestions on content that is missing. This also helps with getting more clients as they can refer you to other people in their network.

  2. Over communicate in a timely manner. I try to not let 24 hours go by without responding. If there isn’t time to answer an email/text, then I like to at least respond with “Question received, I’ll review and respond in full tomorrow”. That way they know you are on it and have set an expedition for the next response.

  3. Create a contract. Google freelancer contracts and use it with everyone, even friends / family / pro-Bono work. It will save a lot of pain later and help communicate expectations.

  4. Set up a sole proprietorship. No one really likes dealing with the business end of freelance, but taxes and state laws are a real concern. I file quarterly earning reports with the IRS, plus track all my expenses and earnings. In my state setting up a business is free, just takes some research. Every state is different though.

  5. Awesome freelance resource for Web designers / developers. youtube.com/c/FluxWithRanSegall

  6. Below is another article I wrote that outlines my typical design processes. The creative brief questions could prove helpful for front end freelance as well.

If these tips are beneficial, I’d be happy to do a full article on some more “lessons learned” as a freelancer. :)

Thread Thread
brandonmweaver profile image
Brandon Weaver

Gedalya, thank you so much for this response. I wasn't truly expecting such a thorough reply. I don't believe that it's necessary to post a full article, although it would undoubtedly help tons of people. I'd certainly be interested in learning more from you, however, you've already provided lots of help.

I really appreciate the time you took to share your knowledge with me, and I am sure that your skills will be able to land you wherever you want to be.

Thank you again, and I hope everything goes well with the search. Please let me know if there's anything I can help with; I'd be glad to.

Thread Thread
gedalyakrycer profile image
Gedalya Krycer Author

My pleasure! Being able to share "lessons learned" and more importantly learn from others is why I joined this platform! :)

Collapse
andrewbaisden profile image
Andrew Baisden

Good point the creativity shows.

Collapse
claudioteodorescu profile image
Claudio Teodorescu

Great work! I like the design, the structure, everything it works smoothly. I also downloaded your Resume and I was wondering if you created that CV Template or it's something you can find on internet?

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Thanks so much for the feedback!

I designed the resume myself with Adobe InDesign and Adobe Illustrator.

However, if you are not familiar with these design tools there are some create template builders online.

While I have not used these personally the below two tools might prove helpful.

Collapse
claudioteodorescu profile image
Claudio Teodorescu

Thanks! I'm not that familiar with Adobe InDesign but I will give it a try.

Thread Thread
gedalyakrycer profile image
Gedalya Krycer Author

This is a great course to help you get started. 👍

linkedin.com/learning/indesign-202...

Thread Thread
claudioteodorescu profile image
Claudio Teodorescu

Much appreciated!

Collapse
spearsdevin profile image
Devin Spears

Amazing portfolio site! just one thing is that when you click on your skills then hover over the tags it changes the cursor to a typing cursor.

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Thanks so much for this feedback!

What browser are you using please? And to confirm this was happening in the “Tech” section when hovering over the tool buttons? (I wasn’t able to recreate this issue on my end.)

Collapse
spearsdevin profile image
Devin Spears

Im using Chrome, when i hover over the languages tags it showing the typing cursor.

Thread Thread
gedalyakrycer profile image
Gedalya Krycer Author

Very odd, I am still seeing the cursor: pointer on Chrome.

But thank you for bringing this to my attention. I will keep an eye on it for the next few days to see if it shows up.

Thread Thread
spearsdevin profile image
Thread Thread
gedalyakrycer profile image
Gedalya Krycer Author

Oh! Haha, we were talking about different sections.

Those items are actually not intended to be clickable. Although perhaps it does require a different design solution if they resemble buttons too much... Something to definitely consider for the future.

Collapse
touhidulshawan profile image
Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Thank you and good work as well. I like how you have a night/day mode on your site. Best of luck.

Collapse
0916dhkim profile image
Donghyeon Kim

You nailed the animations! They look gorgeous and lightweight. I have seen many websites with flashy animations but they often choke my browser and ruin the experience. Your portfolio is as lean as it can be.

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Thank you, that means a lot to hear! I love using GSAP and CSS Animations to add that "little extra something" and tweaking them until it is 'juuuust right'. 😆

Collapse
z2lai profile image
z2lai

Incredible design and animations. I don't know what you call the style of it, but I love the "matte" look and could never find the right colours to produce this look. The overall theme and all the animations are extremely slick and just my cup of tea.

One thing I have to point out is that I felt that the highlight of your design was how clean the UI was with a lot of white space to give each element some room to breathe. However, after scrolling to the very bottom, I felt a little overwhelmed by the number of clickable/navigation elements in view. You have your external links stickied to the left, your resume link stickied to the right, and these same links repeated just above the footer. You also have your logo (very slick design once again) just above the footer and sticked at the top, and both of these are links that don't do anything when clicked on. Not a big deal, but maybe removing the additional logo and external links while keeping the Resume link in the row above the footer might be better.

Overall, I still think this is my favourite portfolio website out of all the ones I've seen!

Collapse
gedalyakrycer profile image
Gedalya Krycer Author • Edited

Thank you so much for your kind words and really fantastic observations!

Now that you point it out, I totally agree that the footer should be simplified. I'll be sure to play with this section in the next version.

Regarding the logo's functionality in the footer, it links back to the homepage component. (Viewable by click on it from the "About" page for example).

However, because I am using React Router, the page doesn't refresh so on the homepage there isn't any noticeable action. This is not really a great user experience.

For the next version, I think I'll make the footer logo an "anchor link" when it is on the homepage. Then clicking on it will at least have the benefit of going back to the top.

Collapse
animanoir profile image
Óscar A. Montiel

looking great my friend. thanks for the post!

Collapse
gedalyakrycer profile image
Collapse
ra1nbow1 profile image
Matvey Romanov

How did you ensure such a quick api update dev.to?

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Actually, just this week I found a weird glitch that if I specify &per_page twice, with the first value being 1000 (max request number) and the second value being the amount I really want (6) — the articles update right away.

Otherwise, they can take up to a day for new reactions/articles to show up.

axios.get('https://dev.to/api/articles?username=gedalyakrycer&per_page=1000&per_page=6')
Enter fullscreen mode Exit fullscreen mode

I have no idea if this a bad practice, but so far I am getting no errors and decent results. lol 🤷


I am also using "Suspense" and "lazy" from React on all my "page" components. These won't load any section components until they are needed.

Example: github.com/GedalyaKrycer/gedalyakr...

Hope that helps!

Collapse
ra1nbow1 profile image
Collapse
cswalker21 profile image
cswalker21

Wow, nice work! My portfolio site is the same “under construction” clip art I’ve had since 1998, but this gives me lots of ideas!

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Awesome, you can do it! Go make something cool and then share it here. I'd love to see what you come up with.

Collapse
muditwt profile image
Mudit Mishra

Great work, loved the minimalistic approach. Just one piece of feedback, the g of 'coding' is coming over the right card. Amazing site man.

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Thanks! And I'll look into that glitch. 👌

Collapse
rotimio profile image
Rotimi Olatunbosun

Great portfolio site! It is pretty simple.

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Thanks! I love the idea of doing more with less. Moving away from templated sites really gave me a lot of freedom to control my section layouts and solutions for presentations.

Collapse
mohammedashkhan profile image
M Ashkhan Ahmed

Super and awesome ui designs.
Thanks for sharing in dev..
Waiting for more websites.

Collapse
richardsprins profile image
Richard S Prins Jr.

Absolutely stunning UI!!

Collapse
pulkitsingh profile image
Pulkit Singh

Good work.

Collapse
gedalyakrycer profile image
Collapse
mak0099 profile image
Maulik Thaker

Awasome dude.

Collapse
jdnichollsc profile image
Juan David Nicholls Cardona

As a Developer, my dream Portfolio is GitHub <3 github.com/jdnichollsc

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Haha #respect

Collapse
jdnichollsc profile image
Juan David Nicholls Cardona

haha thanks mate!

Collapse
anurella profile image
Anurella

Beautiful work done

Collapse
yourdevguy profile image
Mike Haslam

Great job 👨‍💻really liked the expanding cards on mobile. 👍 Good for you way to go.

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Thanks! They were a lot of fun to make. :)

Collapse
charlesmknox profile image
Charles M. Knox

Solid design, has a great feel to it. Thanks for sharing.

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Appreciate that feedback. Thanks!

Collapse
luispinheiro profile image
Luis Pinheiro

Awesome, really cool, that cards effect is nice

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Thanks! Used a bootstrap accordion, combined with absolute/relative positioning on hover.

I found having some reverse movement created added visual interest, with the accordion expanding down and the card cover moving up.

Collapse
michaelpierre profile image
Michael Pierre

TL;DR

This is the best portfolio site I've even seen!

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Wow, that is really motivating to hear. 😊 Glad you liked it.

Collapse
falconnityam profile image
nityam bhangar

It's really impressive... 😍

Collapse
gedalyakrycer profile image
Gedalya Krycer Author

Thank you! 💖🙏

Forem Open with the Forem app