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
- Introduction
v0.1(Template)v1-v4Bootstrap Goodnessv5Marks A Big Change-
v6Brings 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...
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.
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. 😆
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
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! ✨
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!
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.
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.
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.
/pagesfolder contains the highest level components that group together all content for a given page. I use these components for my ReactRouter to point to.-
/componentsfolder 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
/uisub-folder that holds any components that might appear on multiple pages. (Like the logo).
/utilsfolder 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.
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.
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. :)
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...
Make into a Gatsby site
Move all the design projects off Adobe Portfolio and on my own site
Master the animations
Have articles open in my own site and not link out to dev.to
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!
Thumbnail designed with Figma.
Top comments (53)
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.
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. 😉)
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?
Thank you so much. Fingers crossed. :)
And that is great you are looking to get into freelance! Here are some things I found helpful...
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.
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.
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.
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.
Awesome freelance resource for Web designers / developers. youtube.com/c/FluxWithRanSegall
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.
How I Prepare Designs For Development (Complete Guide)
Gedalya Krycer ・ Feb 22 ・ 13 min read
If these tips are beneficial, I’d be happy to do a full article on some more “lessons learned” as a freelancer. :)
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.
My pleasure! Being able to share "lessons learned" and more importantly learn from others is why I joined this platform! :)
Good point the creativity shows.
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?
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.
resume.io/resume-templates/creative
canva.com/tools/resume-maker-v1/
Thanks! I'm not that familiar with Adobe InDesign but I will give it a try.
This is a great course to help you get started. 👍
linkedin.com/learning/indesign-202...
Much appreciated!
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.
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.)
Im using Chrome, when i hover over the languages tags it showing the typing cursor.
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.
drive.google.com/file/d/1jkPBgCuhc...
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.
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!
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.
Nice work🙂
Here is mine
touhidulshawan.github.io/touhiduls...
Thank you and good work as well. I like how you have a night/day mode on your site. Best of luck.
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.
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'. 😆
Great portfolio site! It is pretty simple.
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.
Awasome dude.
looking great my friend. thanks for the post!
Thanks!
How did you ensure such a quick api update dev.to?
Actually, just this week I found a weird glitch that if I specify
&per_pagetwice, 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.
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!
Thanks