Some months ago I posted about how I built my first personal . The feedback was pretty awesome and I got some great ideas on how I could improve it. an article portfolio Thanks to users , , , and for leaving feedback and recommending most of these changes. dyllandry cdthomp1 sufyaan323 zzoukk Lately, I decided to create a new branch on Git and start to work on them. Since the initial version was still deployed, it gave me an opportunity to compare both versions. Hopefully, these revisions with before and after images will spark some ideas on how you can improve your portfolio as well. 1. Scrollable main feed ❌ Before First, my initial portfolio had a fully static landing page. The only way users could access content was to click on the navigation items on the top right, otherwise, they would be left with an impression that the site is empty since there was no scroll. ✅ After During the revision, I made the landing area scrollable, and now it allows me to highlight the work that I want to present the most. The main purpose of the portfolio was to showcase the projects that I've done, thus I decided to showcase both images and the features for 3 projects. Plus there are also 6 highlighted articles. 🔗 LIVE example Plus I also configured my CMS (Contentful) to enable or disable any project or article as a highlight by just a tick of a box. 2. Visual Blog cards ❌ Before The blog cards of the first version consisted of just the title and description with no visual representation of the article. Obviously, this did not help to entertain the reader and keep the visitors' attention. See the initial version below: ✅ After During the revision, I focused on the image cover, so that it does not break the existing card layout, looks good on the dark background, and is responsive for mobile devices. 🔗 LIVE example 3. Animated Project cards ❌ Before Similarly, as the blog cards, project cards did not include any visuals either. This was especially bad for projects, as no one really wanted to click through each and every project just to see what it looks like. ✅ After So, I decided to include an image for each project. I extended it even more by creating GIF images that could prescribe not only the design but the main functionality as well. 🔗 LIVE example 4. Separate Contact form ❌ Before The contact functionality on the initial version depended on how well the users had set up their systems. I used a in href attribute, which could often end up with pop-ups like this asking to configure the email client. mailto ✅ After During the revision, I created an independent route for contact functionality. I used for forms and for actual email service. react-hook-form Sendgrid 🔗 LIVE example 5. Custom 404 page ❌ Before My initial blog used stock NextJS 404 page. Technically the users were informed about non-existing routes, tho they looked too basic and did not match the main theme of the portfolio. ✅ After I took some nice SVG from , created a custom style for the page, created custom warning information, and added a Home button so that users can be redirected to Home. Undraw.co 🔗 LIVE example 6. Other minor changes During the revision, I also fixed scrollbar styling, adjusted code highlighting, added access buttons to source and GitHub in projects, adjusted responsiveness for mobile devices, etc. I've merged the revision branch into the master and it's deployed, so you can check the whole portfolio live at . I will be thankful if have any comments or further feedback. madza.dev My main tip from this article would be to recommend using all the feedback you receive. Together we are building better products. And I believe we all learn by sharing knowledge. Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out! Connect me on , , and ! Twitter LinkedIn GitHub

Twitter

Level Up Your Front-End Game with These 8 Side-Project Ideas 🥇

I Created 500+ Dev Questions and Launched a Quiz Platform 🏆🎉

Hire Me

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Music

Nominated for 2022 - HackerNoon Contributor of the Year - Html

Nominated for 2022 - HackerNoon Contributor of the Year - Job Hunting

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Product

Too Long; Didn't Read

Make resilience your competitive advantage

Real Feedback On My Portfolio That May Help You Improve Yours

Real Feedback On My Portfolio That May Help You Improve Yours

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

10 Best UI/UX Project Ideas to Improve Your Frontend Skills 🎨🧙‍♂️

Tech Politics, Math, and Career

10 Ways Developers Can Make Money Coding

10 Skills You Need For Your Post-Pandemic Career

10 Companies to Bet the Future of Your Career On

10 Best UI/UX Project Ideas to Improve Your Frontend Skills 🎨🧙‍♂️

Tech Politics, Math, and Career

10 Ways Developers Can Make Money Coding

10 Skills You Need For Your Post-Pandemic Career

10 Companies to Bet the Future of Your Career On

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps