This content originally appeared on DEV Community and was authored by Madza
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 for 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.
✅ 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.
My 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.
Plus I also configured my CMS (Contentful) to enable or disable any project or article as a highlight by just of a tick of a box.
2. Visual Blog cards
❌Before
The blog cards of the first version consisted 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 do not break the existing card layout, looks good on the dark background and is responsive for the mobile devices.
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 a GIF images that could prescribe not only the design but the main functionality as well.
4. Separate Contact form
❌Before
The contact functionality on the initial version depended on how well the users have set up their systems. It's because used a mailto in href attribute, that could often end up with pop ups like this asking to configure users email client.
✅ 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.
5. Custom 404 page
❌Before
My initial blog used stock NextJS 404 page.
Technically the users were informed about non existing routes, tho it looked too basic and did not match the main theme of the portfolio.
✅ 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.
? LIVE 404
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 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 to use all the feedback you receive. Together we are building better products. And I believe we all learn by sharing the 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!
Visit my Blog for more articles.
This content originally appeared on DEV Community and was authored by Madza
Madza | Sciencx (2021-08-04T19:10:24+00:00) 6 Useful Tips from Visitors To Improve your Portfolio ??. Retrieved from https://www.scien.cx/2021/08/04/6-useful-tips-from-visitors-to-improve-your-portfolio-%f0%9f%8c%b1%f0%9f%9a%80/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.