DEV Community

loading...
Cover image for 6 Useful Tips from Visitors To Improve your Portfolio πŸŒ±πŸš€

6 Useful Tips from Visitors To Improve your Portfolio πŸŒ±πŸš€

Madza
Discussions. πŸ’¬ Tools. πŸ›  Resources. πŸ“š All things productivity. πŸŽ―πŸš€πŸ’―
Originally published at madza.dev ・Updated on ・4 min read

Some months ago I posted an article about how I built my first personal portfolio. The feedback was pretty awesome and I got some great ideas on how I could improve it.

Thanks to users @dyllandry , @cdthomp1 , @sufyaan323 , and @zzoukk for leaving feedback and recommending most of these changes.

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.

Main

πŸ’‘ Feedback

Looks clean. Biggest critique I have is that I think you should make your projects more easily visible. It was jaring to get to your home page, try scrolling to see more, have it not work, then have to search the UI for where I could see your work. Maybe just put that page of projects additionally at the bottom of your main page. Also I'd suggest adding more visual distinction between your projects. The only difference is their text, which requires reading each one to distingush them. Maybe add a bit of a picture to each one, either a picture of the project or some releated image off of unsplash.

Looks good!

βœ… 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.

Scroll

πŸ”— 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.

img


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:

Blog Page

πŸ’‘ Feedback

Your site looks great! I like the clean look and easy to use interface. It might be helpful to have thumbnail images on your project/article cards, to help visualize what the project/article might be about.

Great work!

βœ… 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.

Blog

πŸ”— 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.

Projects Page

πŸ’‘ Feedback

Your site looks great! I like the clean look and easy to use interface. It might be helpful to have thumbnail images on your project/article cards, to help visualize what the project/article might be about.

Great work!

βœ… 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.

img

πŸ”— 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 mailto in href attribute, which could often end up with pop-ups like this asking to configure the email client.

email

βœ… After

During the revision I created an independent route for contact functionality. I used react-hook-form for forms and Sendgrid for actual email service.

Message

πŸ”— 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.

404

βœ… After

I took some nice SVG from Undraw.co, created a custom style for the page, created a custom warning information, and added a Home button so that users can be redirected to Home.

404

πŸ”— LIVE example


6. Other minor changes

πŸ’‘ Feedback

@madza As a homework, I think you should try changing the y-axis scroll bar colour in the blog page into one that meets the theme of your website.

This is cool !

Psss... Live demo links are missing on project pages.

βœ… After

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 madza.dev. I will be thankful if have any comments or further feedback.

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 Twitter, LinkedIn and GitHub!

Discussion (25)

Collapse
cdthomp1 profile image
Cameron Thompson

This looks awesome! It was great to see that you were able to take some suggestions and improve your site! If you have the time, I recently redid my portfolio site and would love any feedback! cameronthompson.io

Collapse
madza profile image
Madza Author

Here are some recommendations after reviewing your portfolio. πŸ˜‰
These are all fully subjective, hopefully you will find something useful! πŸ˜‰

  1. The current logo in header looks a bit dull, upgrade to better quality one. The rest of the header looks good.
  2. I see you are using standard sans-seriff font thourough the site (and Roboto Mono in some places). Upgrade your fonts to something like Varela Round, Quicksand, Montserrat or Inter, it will make a big difference.
  3. The current project cards are static. Try to implement some interactivity to those cards like zoom in or hover, change button color on hover or smth.
  4. Try to switch the main background. The current one you use makes the text on the page harder to read. Try some very dark shade gradient with no pattern at all.
  5. Leave footer at the bottom at all times. For example articles and projects pages are not filling the whole height of the viewport and footer is in the middle.
  6. Use the same styling for the headers across the pages. Currently you have different one for about me, articles and projects.

An idea for future revisions would be to do a before and after comparision article, publish it and receive a feedback from multiple readers. πŸ˜‰

Collapse
cdthomp1 profile image
Cameron Thompson

Thanks for the feedback, I will be working on improvements soon! I used tailwind for the first time and have plans to add some interactivity to those cards!

Thread Thread
madza profile image
Madza Author

Awesome to help πŸ™πŸ’– Best of luck with everything πŸ˜‰

Collapse
madza profile image
Madza Author • Edited

Thanks a lot for your input! πŸ™πŸ’–
Also, just for the reference I thought your original comment needed some credit, so I embedded it directly in the post for those who did not read the original article πŸ‘
Will review your portfolio during today and leave a feedback here πŸ˜‰

Collapse
dyllandry profile image
Dylan Landry

Absolutely love the animated project thumbnails, and this blog post showing before and after pictures. Definitely somehow link/showcase this blog post as one of your projects. And thanks for mentioning me, It was neat to remember this.

cool:

  • project gif thumbnails, love love love these
  • slide-in animations, snappy enough to not be slow and thus bothersome
  • call-to-action "projects" button

improvements i think:

  • remove the search bar above the projects: The gallery view is good enough when you just have 12 projects. Searching is nice when I know what I'm looking for, but in this situation I'm more in a "discovery" mode.
  • I recommend adding short tags to each project for what tech/packages they use.
  • Consider also providing links to repos for projects so we can see the code.
  • I'd make the social buttons at the bottom of your contact page stand out more.
Collapse
madza profile image
Madza Author • Edited

Thanks a lot for checking out the re-visited version! πŸ™πŸ’–
Also, just for the reference I thought your original comment needed some credit, so I embedded it directly in the post for those who did not read the original article πŸ‘
And so nice to get further feedback, I will see what I can use when I have collected enough ideas to do round 2 πŸ˜‰ Thanks a lot! πŸ™πŸ’–

Collapse
soorajsnblaze333 profile image
Sooraj

Thank you for this article and thank you to all the valuable and real feedback which makes it more useful. I have been thinking for a long time to improve my portfolio and this article has proved to be very helpful.

Collapse
madza profile image
Madza Author

Awesome to hear! πŸ˜‰
Feels great to help someone πŸ™πŸ’–

Collapse
charles84609022 profile image
Charles ken

Thanks for this valuable article

Collapse
madza profile image
Madza Author

You are welcome πŸ™πŸ’–

Collapse
antunesales profile image
antunesales

I'll save this tips for later! Thanks
I just made own portfolio, did something fast, because I'm looking for job and many required a portfolio. So, thank you.
Btw this is my portfolio tiago-sales.me/

Collapse
funbeedev profile image
Fum

Awesome! I'm planning on doing a portfolio soon and this is very inspiring!

Collapse
madza profile image
Madza Author

Thanks a lot! πŸ™πŸ’–

Collapse
rsickenberg profile image
Romain Sickenberg

What would be cool is to have a light mode and maybe a "sticky" scroll like Apple products pages πŸ˜ƒ

Collapse
madza profile image
Madza Author

Thanks a lot for the recomendations πŸ™πŸ’–
Light mode is something I have in mind for the future πŸ˜‰
The scroll you described would be a nice touch as well, I will see where I can go from here πŸ˜‰

Collapse
thomasbnt profile image
Thomas Bnt

Simplicity nice!

Collapse
madza profile image
Madza Author

Thank you so much! πŸ™πŸ’–

Collapse
parth2412 profile image
Parth Patil

Thanks for all the great tips!! I am working on my portfolio right now and it's about to be finished. Will definitely incorporate your advice when I further work on it.

Collapse
madza profile image
Madza Author

Feels great to inspire other people πŸ‘πŸ˜‰

Collapse
albertjokelin profile image
Albert Jokelin

WOW! @madza this is an amazing post and it looks like the comments section also has some amazing tips. Will keep this in mind while building my portfolio.

Collapse
madza profile image
Madza Author

Thanks a lot for the kind words! πŸ™πŸ’–

Collapse
hbakouane profile image
hbakouane

Your portfolio is great! Congrats. Can you review my portfolio please? PS: the projects links are not working properly because I haven’t deployed them yet.
Https://hbakouane.dev

Collapse
luvejo profile image
Luis VelΓ‘squez

So cool! This is definitely worth sharing on Linkedin. Don't you think @graciegregory ? 😁

Collapse
madza profile image
Madza Author

Thanks a lot for the kind words πŸ™πŸ’–