DEV Community

loading...
Cover image for Share your portfolio if you want feedback! (CLOSED)

Share your portfolio if you want feedback! (CLOSED)

Madza
Discussions. ๐Ÿ’ฌ Tools. ๐Ÿ›  Resources. ๐Ÿ“š All things productivity. ๐ŸŽฏ๐Ÿš€๐Ÿ’ฏ
ใƒปUpdated on ใƒป1 min read

So I decided to take a bit of a break from coding this afternoon, to relax my mind and create a discussion, where you could share your portfolios and I could give some feedback on what I like and some ideas to improve it.

Keep in mind that these would all be subjective, and coming from an average user. Sorry in advance if I don't reply to someone.

Share your link below, excited to see what you have come up with!

Discussion (189)

Collapse
pablohs1986 profile image
Pablo Herrero
Collapse
madza profile image
Madza Author

What I liked:

  • The speed of the site.
  • How clean the site is. Dark grey and white have always worked well when it comes to contrast. Your image fits right into the hero area.
  • Animations on load and the ones that show your interests after it has loaded, to make it look interactive.
  • Social links are well placed and with great contrast and I like how they are stuck regardless of a scroll position.
  • Modals to view project, great to get details fast.

Some ideas I would consider:

  • Set the background color to white for your header and increase the z-index so the header is always at the top when on screens around 1000px and scrolling. The same goes for the footer.
  • Set darker top navigation text color, to match the color of your main text in the hero area. I would also bold them, and probably change the font style. I would do the same for the footer text as well in the bottom left.
  • When using media breaks for projects, go from 3-2-1 rather than 3-1 as it is now, somewhere around 580px width, the text on them does not fit.
  • I would build the custom contact form with name, email, message, rather than using 3rd party solution with multiple steps. That way it would be more intuitive, fill up the field you have left for contacts better and users would be more willing to fill it.
  • Also when resizing, you put social media icons and copyright above each other. I would leave them the same size as they are on the desktop version and put proper padding for them, so it goes well with your overall layout of the site.
Collapse
pablohs1986 profile image
Pablo Herrero

Thank you very much for the feedback, Mazda! As soon as I have time I will put your advices into practice :)

Thread Thread
madza profile image
Madza Author

Awesome to hear, hope you find something useful ๐Ÿ‘๐Ÿ˜‰

Collapse
epsi profile image
E.R. Nurwijayadi

Very cool...

Inspiring.

Collapse
luciferchase profile image
Lucifer Chase

Loved your site ๐Ÿฅณ
Just a small thing, when hovering over a link, even though it changes colour, it sometimes feels weird and not sure if it is even a link or not.
So maybe adding an underline or changing the mouse cursor or something like that?

Collapse
cchana profile image
Charanjit Chana

Always open to feedback, so thanks in advance! Mine can be found here: charanj.it

Collapse
madza profile image
Madza Author • Edited

What I liked:

  • Loads almost instantly.
  • Resume type of portfolio. Pretty unique.
  • Your image and position to introduce yourself.
  • The font looks clean.
  • Good for responsive screens.

Some ideas I would consider:

  • The dark brown background is not the best you can get for contrast for the white font. I would try some darker shades.
  • Set the section titles (Experience, Subscribe, and The latest) the same size as your name is at the top. They each start new sections and therefore need to be more highlighted.
  • Try to give some different colors for links you use, rather than white, to give more accents to your site. Do the same for the subscribe button, as well. Set them all to the Red you use. Or step outside and use some bright green or blue.
  • I would remove the background color you use for 1 Thing A Week panel. If you, by all means, want to keep it, set it to a way darker color, so it goes well together with the background, and use it on the Experience and Subscribe blocks too. Leave both Intro paragraphs and 'More from' as they are.
  • The emojis you use would look better if you would use them in native colors. They would look especially good on the darker color background as I noted in #1.
Collapse
cchana profile image
Charanjit Chana

Thank you for the feedback, I have one question though, is your device set to show dark mode? I wonder if any of the feedback around colours changes when viewed in light mode instead?

Some good points you raise I will definitely look at making some changes based on your feedback. Thank you for taking the time to review my site!

Thread Thread
madza profile image
Madza Author

I guess you are using something like this since you ask. Yup, my OS is currently on dark mode. ๐ŸŒ™

You are welcome, hopefully, you find great use of something ๐Ÿ˜‰

Thread Thread
cchana profile image
Charanjit Chana

Thereโ€™s no toggle, it just uses your system preference to decide. Your feedback made me think about it differently though... I should look at it in dark mode more often!

Thread Thread
madza profile image
Madza Author • Edited

Yeah I know ๐Ÿ˜‰ That particular hook uses your system preference to decide as well, that's why I referenced it ๐Ÿ˜‰ I see, you are mostly on light mode and see light mode in your portfolio as well ๐Ÿ˜€

Collapse
epsi profile image
E.R. Nurwijayadi

Lovely.

Collapse
enmanuel97 profile image
Jesus Enmanuel De La Cruz
Collapse
madza profile image
Madza Author • Edited

What I liked:

  • The white and blue used to split the screen.
  • Nice hover effects in the navigation and portfolio items.
  • Section title fonts and creative styling.
  • Clean looking Projects and Contact pages.
  • Great UX thanks to smooth transitions through white.

Some ideas I would consider:

  • That grey shade on the HERO page does not fit with the white and blue you use. Set the text in the hero section to plain black (keep the name blue) and do the same for non-active icons at the right. It would look much more cleaner.
  • Add some hover effects for the 'More' and 'Send Message' buttons as well. Like, change the color to a lighter/darker shade of blue.
  • Set that dark grey you use to a plain black in the About Me section for Personal Information and Main Skills. That is crucial info, that needs to be highlighted.
  • Each project would need some more description. Whether or hover or even better on the modal that pops up when you click on a particular project.
  • Your mobile menu has a Blog section, which does not work. Check your console. Once you fix it include it in the desktop version as well.
Collapse
enmanuel97 profile image
Jesus Enmanuel De La Cruz

Thank you for you review, I will consider your ideas :D

Thread Thread
madza profile image
Madza Author • Edited

You are welcome ๐Ÿ˜‰
Hopefully, you find a use for something ๐Ÿ˜‰

Collapse
epsi profile image
E.R. Nurwijayadi

Awesome. Really Cool.

Collapse
enmanuel97 profile image
Jesus Enmanuel De La Cruz

Thank you :D

Collapse
epsi profile image
E.R. Nurwijayadi • Edited

This is not a portfolio site. Just a blog. Not as good as most people here. But I share it anyway.

๐Ÿ•ท epsi-rns.github.io/

After all. Thank you all for giving such comment. Now I know that I need to enhance the looks of my blog.

Collapse
madza profile image
Madza Author

Good job on laying out the content. HTML side is already there. For CSS I would try to do a full re-design, use dribbble.com, behance.net, and Pinterest to inspire you.

Collapse
epsi profile image
E.R. Nurwijayadi

Thank youuuuu..

Thread Thread
madza profile image
Madza Author

My pleasure ๐Ÿ˜‰ Hopefully you will find some additional inspiration in those resources ๐Ÿ˜‰๐ŸŽจ

Collapse
leviathanprogramming profile image
๐‹๐„๐‘ฝ๐ˆ๐‘จ๐“๐‡๐€๐ Programming

I made this one about two years ago and I will make myself another one later.
conner1115.github.io/

Some of the images got disabled for some reason but the links still work.
Also, the contact form is a fake and doesn't work.

Collapse
madza profile image
Madza Author

I would redo it fully since you have most likely accumulated some new knowledge during those years ๐Ÿ˜‰

Collapse
madza profile image
Madza Author

Good enough for the start. I see you started with FreeCodeCamp, that's a great resource.
To get inspiration for styling try resources like behance.net, dribbble.com, and Pinterest.

Collapse
goyalaman profile image
goyal-aman

amangoyal.ml

Collapse
madza profile image
Madza Author

Overall I like the site, looks very clean and gives great UX.

  • Remove that animation in the Hero area. If you want to display your roles, display them as static text in the same dark grey.
  • Remove the social media buttons from the sidebar. You already use them in the Hero area.
  • Avoid the skills percentages. It's not possible to measure them anyways.
  • The blue used in the Timeline should be the same as in the other sections.
  • There is a typo on the resume title.
Collapse
goyalaman profile image
goyal-aman

Glad you liked it. Have been working on it for weeks. My main goal for designing my own portfolio is to show of my backend skills by making it versatile.. my idea is If I wanna add any new section instead of going through html .. I will add a new section from admin panel ( yups there is an admin panel ).. kind of similar thing CMS.

And, I appreciate suggestion you have given will implement them. Also, What should I replace skill percentages with? Stars? Or maybe score out of 10..?

Thread Thread
madza profile image
Madza Author

The thing I suggested to avoid the percentages is you will be asked in the interviews how did you measure them and why it is 65%, not 73%, for example. Also, I've seen some devs rating some of their skills as 100%, which means they know everything in that tech, which is impossible.

Stars are not great for that either. You don't have to rate your knowledge. That's the interviewer's part.
Simply listing them is enough for the most part.

Thread Thread
goyalaman profile image
goyal-aman

Great!! Thanks for suggestions โค๏ธ

Thread Thread
madza profile image
Madza Author

And if you still want some visuals for the skills, you can add the visual icons of the tech you know ๐Ÿ˜‰

Thread Thread
goyalaman profile image
goyal-aman

Exactly what I was thinking to do..!! ๐Ÿ˜

Thread Thread
madza profile image
Madza Author

Awesome! Best of luck ๐Ÿ‘๐Ÿ˜‰

Collapse
bias profile image
Tobias Nickel

after reading a few other feedback, I also like to ask you to take a look at mine: Tobias Nickel

It is a static page made with hexo. I used a theme, but changed lots of stypes for lighthouse score and a11y with axe.

Collapse
madza profile image
Madza Author • Edited
  • I would put navigation in the same line profile info.
  • Add some rounder border to the Search bar.
  • Add some colorful patterns for the Github card instead of black.
  • Add different background colors for tags.
  • Add different colors for links and Read more buttons.
  • Reduce the line height for titles.
  • Re-design the pagination.
  • Make the font color of your name white in the Footer.
Collapse
rishabk7 profile image
Rishab Kumar
Collapse
madza profile image
Madza Author

Very clean looking.
The content is well-positioned.
Awesome contrast and easy to read.

  • Add some animations for load more (Something similar you use on the Contact button)
  • Use some bright colors to underline the tags. Current pale yellow does not work on white background.
  • Consider hosting the blog content on your own site, to own it fully. That will also enable you to customize the UI you want. Currently, Hashnode design is different than what you use in your site.
  • Make sure you use higher quality images (than HackerNews Clone, for example)
Collapse
rishabk7 profile image
Rishab Kumar

Thanks for the feedback! ๐Ÿ’œ

Thread Thread
madza profile image
Madza Author

Awesome you found it useful ๐Ÿ˜‰

Collapse
nmd2611 profile image
Nimish Dadlani

Hello. Could you please review my portfolio as well ?
nmd2611.netlify.app

Thank you :)

Collapse
madza profile image
Madza Author

I liked it, clean and nice animations.
Content loads too slow if I scroll fast.

Collapse
nmd2611 profile image
Nimish Dadlani

Thanks !!
Will make the necessary changes.

Thread Thread
madza profile image
Madza Author

Happy to help ๐Ÿ˜‰๐Ÿ‘

Collapse
dewaldels profile image
Dewald Els • Edited
Collapse
madza profile image
Madza Author

The site can't be reached ๐Ÿ˜’

Collapse
dewaldels profile image
Dewald Els

Thanks for taking time out of your day to check this! Was in a hurry when I posted yesterday โœŒ๏ธ

Collapse
dewaldels profile image
Dewald Els

Shit sorry! My phone auto corrected with my middle initial ๐Ÿ˜…

Collapse
willholmes profile image
Will Holmes
Collapse
madza profile image
Madza Author
  • Make the hamburger icon plain black.
  • Use brighter blue how highlighter text.
  • Some image or illustration is missing in the Hero section.
  • Reduce the letter spacing of the Hero font.
  • Position socials horizontally.
  • Change the font of the Footer.
  • Center Footer content.
  • Add some more contact details.
Collapse
willholmes profile image
Will Holmes

Thank you!

Thread Thread
madza profile image
Madza Author

You are welcome ๐Ÿ˜‰๐Ÿ‘

Collapse
funbeedev profile image
Fum

It's more of a blog/community than a portfolio but would appreciate your feedback:
inspirezone.tech/

Collapse
madza profile image
Madza Author

I like how clean it looks and the use of animations.

  • Re-design Join our community section (use all the space, it's too squeezed)
  • Decrease the Footer section height and position items horizontally.
Collapse
funbeedev profile image
Fum

I'll keep this in mind at the next redesign. Thanks so much for the feedback!

Thread Thread
madza profile image
Madza Author

Glad to help! ๐Ÿ˜‰๐Ÿ‘

Collapse
dailydevtips1 profile image
Chris Bongers

chrisbongers.com

Collapse
madza profile image
Madza Author

What I liked:

  • Easy to navigate.
  • Hitchhiker's guide to keeping track of progress is unique.
  • URLs with hashes to forward the user to a specific position.
  • Particle background to simulate the night sky.

Some ideas I would consider:

  • 'Things I'm proud of' image content took me a while to load on the initial load. Once the images are catched everything is smooth.
  • In your overall layout of the site, I think the 'Things I'm proud of' items would look better if you would use title, description, and image pattern to display. Currently, it is hard to understand what each project is about without visiting the live link.
  • I miss some more interactive stuff, like zooming skill boxes on hover, changing color on navigation items on hover, etc.
  • Reduce the height of the header once the user starts scrolling, to increase the reading space and set it back to normal once the user is back to the top.
  • Also consider implementing a separate header for the mobile version of the site, to increase the reading space for small screens.
  • The way 'Don't take my word for it' currently swaps the recommendations could be improved. I would most likely create a new custom component for it, so the transitions are cleaner.
  • Maybe consider implementing the light mode switch for the site.
Collapse
dailydevtips1 profile image
Chris Bongers

Hey thanks!

Will definitely take these in consideration! โœŒ๏ธ

Thread Thread
madza profile image
Madza Author

No worries, hope you find something useful ๐Ÿ˜‰

Collapse
mcdtbo profile image
Thabo Pali

thabopali.co.za

Collapse
madza profile image
Madza Author

Great animation across the site.

  • Put your image in About me to replace the placeholder.
  • Avoid the skills percentages, as you will be asked how did you measure them.
  • I would increase the font size for the descriptions, as some of the tiny text is hard to read.

Best of luck with the content creation!

Collapse
mcdtbo profile image
Thabo Pali

Thanks for the feedback, I appreciate it.

Thread Thread
madza profile image
Madza Author

Awesome to hear, you are welcome ๐Ÿ˜‰๐Ÿ‘

Collapse
rajatm544 profile image
Rajat M

rajatm.netlify.app/

Thank you for taking the time out to do this! Would love to hear the feedback.

Collapse
madza profile image
Madza Author

What I liked:

  • Awesome loading animation during the opening.
  • Sleek hamburger menu at the top left.
  • Good looking About me and Footer section.
  • Section titles look good and well highlighted with that bottom border.
  • Looks good on mobile.

Some ideas I would consider:

  • Try some background gradients that are easier for the eyes. If red is your favorite, that's fine too.
  • I would change the fonts used. Try something like Nunito, Montserrat, Quicksand, and Poppins.
  • Currently, you position your social media both in the header and footer + there is another Get in touch section. I would replace the icons in the top right with the menu consisting of the sections you have. And leave the hamburger menu just for the mobile devices.
  • Clicking on 'Get in touch' gives me a white flash before opening mailing options. I'm on latest Chrome.
  • For projects, you currently use GIFs just on hover. I would remove the zoom effect and display GIFs right away, instead of static images.
  • For projects and blog posts I would re-style the cards, giving them proper padding and background color. Or remove the borders at all and leave them open.
  • Increase the font size for the description of the cards.
  • Use more high-quality images for blog cards. Currently, they seem to be compressed or even streched.
  • Add some icons to your skills section, so they are not just plain text.
  • Back to top button should be sticked to the bottom left no matter the scroll position. Currently, you display it only when the user reaches the bottom.
  • Decrease the Get in touch section font size on mobile devices.
Collapse
rajatm544 profile image
Rajat M

Thank you so much for such a detailed feedback, will work on it immediately!

Thread Thread
madza profile image
Madza Author

No worries, hope you find it useful ๐Ÿ‘๐Ÿ˜‰

Collapse
antdp425 profile image
Anthony DiPietrantonio • Edited
Collapse
madza profile image
Madza Author

It's good enough to start with.

  • Add a profile picture or illustration on the top.
  • Add some interactivity for cards on hover.
  • Increase the font size of the section titles and bold them (currently project tiles are bigger than the section title)
Collapse
antdp425 profile image
Anthony DiPietrantonio

Appreciate the feedback!

Thread Thread
madza profile image
Madza Author

Awesome you liked it ๐Ÿ˜‰๐Ÿ‘

Collapse
canro91 profile image
Cesar Aguirre

I'm working on my blog/portfolio: canro91.github.io All comments are welcome. Thanks

Collapse
madza profile image
Madza Author

What I liked:

  • The site is very quick.
  • Clean looking font for the Blog, About, and Project content.
  • Minimal feel and very easy for the eyes.
  • Code formatting theme goes well with the site color palette.
  • Overall the content (right side) looks great.

Some ideas I would consider:

  • I would suggest putting the content that's currently in the About section to Home.
  • Create a new section Blog (under the Home) and put there everything that is now in Home. And then remove the About section as it is left empty now.
  • The landing page should be the introduction. Both points above fix that.
  • I would suggest using all the vertical space in the sidebar, that way you could make more margin between items and they would not be so squeezed.
  • Change font for navigation, make the nav items bigger, highlight them. Currently, it is hard to notice there is navigation at all.
  • Center the social media buttons and put them under copyrights.
  • The date and the tags you use under the blog title need re-design. See how it looks without the tag icon. Consider removing it (since you don't use icons anywhere else) to continue the minimalistic approach.
  • Consider developing separate navigation for mobile screens, like the hamburger menu in the top left or right, that opens in the whole screen with the nav list.
Collapse
canro91 profile image
Cesar Aguirre

Thanks Madza for all your comments. Yes, I'm working on a landing page to replace the content of the Home page. I will put your comments into action. Thanks again. Happy coding!

Thread Thread
madza profile image
Madza Author

Awesome to hear! ๐Ÿ˜‰๐Ÿ‘

Collapse
geobrodas profile image
Georgey

We'll I just made this one for a hackathon recently and it's been like a one year since I learnt web development the only thing I'm disappointed is the responsiveness rest do tell me what you like!
georgey-r9zrh.ondigitalocean.app/

Collapse
ogzhanolguncu profile image
OฤŸuzhan Olguncu

ogzhanolguncu.com/
Not really a portfolio site, but I would like to hear your thoughts.

Collapse
madza profile image
Madza Author

What I liked:

  • The site is very snappy.
  • Clean and professional look.
  • The profile picture fits well.
  • Great color scheme.
  • Colorful tags give an awesome accent.
  • Great dark mode.

Some ideas I would consider:

  • I would change Playfair Display font to something different. The Inter font is beautiful, keep it as it gives an awesome and quality look.
  • I would improve About me and Timeline. Try to add some illustrations or even better - some images of yourself. Some visuals and accents are missing, it feels kind of unfinished and plain at the current state.
  • Add some more line-height to blog titles. Currently, multiple line titles look pretty squeezed. Aim for something like you use in the Hero area description left to your picture.
  • I would probably add some background to the footer (navigation + social media icons). Like some very light grey or smth (like you use in View all button), so it is easier to distinguish where the content ends and the footer begins.
  • Give feedback button currently does not do anything. Add functionality to it.
  • Test your site for smaller screens. Use percentages instead of fixed values in breakpoints (check between 650px to 768px). If you use fixed values, center the elements. Use text-align: justify for the text when resizing.
Collapse
ogzhanolguncu profile image
OฤŸuzhan Olguncu

I'll definitely implement those features. Thank you.

Thread Thread
madza profile image
Madza Author

Awesome, it's among the best I've reviewed today ๐Ÿ˜‰๐Ÿ‘

Collapse
bmuskalla profile image
Benjamin Muskalla
Collapse
madza profile image
Madza Author • Edited

What I liked:

  • The fonts look awesome and very clean.
  • Your photo looks crisp and the oval formatting fits right in.
  • Clean social media icons. Great contrast due to black and white.
  • A nice accent of green here and there thorough the site.
  • List pattern is kept through the site. Simple and minimal, yet effective.
  • Great navigation bar functionality for mobile screens.

Some ideas I would consider:

  • Increase the font-weight for navigation a bit or change their color to a darker shade to match the theme of the hero area. Same for the footer.
  • Remove the extra padding or margin for Blog Archive items, so they keep the same layout pattern as Articles, opensource, and Talks.
  • Use the same font size for the Vitae as you use in previous sections. Currently, Vitae content looks a bit squeezed.
  • Maybe consider using some slight animations between the pages (like fading), so transitions would be smoother.
Collapse
bmuskalla profile image
Benjamin Muskalla

Thanks, Mazda, very appreciated. Lots of good suggestions, I'll include some of them.

Thread Thread
madza profile image
Madza Author

Awesome to hear, glad you found something useful ๐Ÿ‘๐Ÿ˜‰

Collapse
abiolaesther_ profile image
Abiola Esther • Edited
Collapse
madza profile image
Madza Author

Great white-purple color scheme.
Nice animations on Projects cards.

  • I would re-design the logo. Something much easier to read and use SVG for better quality.
  • Increase the font size of your name below the image.
  • Give a nice top margin for your description about you, so you use vertical space more.
  • Make section titles way bigger, they start a new section after all.
  • Remove that flipping animation from Skills.
  • Add images for your Writings list.
  • Create a custom component for Send a message, so it is more intuitive.
Collapse
abiolaesther_ profile image
Abiola Esther

Thanks ๐Ÿ˜Š

Thread Thread
madza profile image
Madza Author

Awesome, happy to help ๐Ÿ˜‰๐Ÿ‘

Collapse
wizlee profile image
Wiz Lee

wizlee.dev
Thanks in advance! ๐Ÿ™Œ

Collapse
madza profile image
Madza Author

What I liked:

  • The color scheme used for the site and the random shapes look clean.
  • The UX when scrolling and using animations to display the content.
  • Clean and great looking About me section, image look great on that white background and well-formatted with that oval shape.
  • The cards are beautifully formatted with a nice hover effect.
  • Social media cards look clean on the white background.
  • Feels good on mobile devices.

Some ideas I would consider:

  • Change the profile pic in the top left to the logo of a text of your full name or initials. Would probably look good on plain white.
  • I'm not a fan of the font used on the landing page. Try some more rounded fonts, or if you stick with the one you have, decrease the letter spacing, and increase the size a bit.
  • Animations that change your skills on the landing page are overlapping your greeting text. Plus each time the different length of the text is switched, it affects the greeting position, which should be intact.
  • If I scroll fast, the writing cards load too slow. I'm at the bottom of the page, yet only the first row of cards is loaded. I expect the same would happen for Projects if there would be more cards.
  • Change the font for the footer to some more rounded fonts, as well (like already mentioned in #2)
  • Fix the 404 in the console and remove the console log output.
Collapse
wizlee profile image
Wiz Lee

Great stuff, appreciate the feedback! Will make improvements according =)

Thread Thread
madza profile image
Madza Author

No worries, hopefully, you find something useful ๐Ÿ‘๐Ÿ˜‰

Collapse
snazzyai profile image
Abdulsalam Ibrahim
Collapse
madza profile image
Madza Author
  • Change the color of navigation items to black.
  • Position experience items on 2 column layout to fill up space.
  • Use all the available horizontal space for positioning the skills items as well.
  • Use a black border for your cards to accent them more. The current white one does not work on a grey background.
Collapse
snazzyai profile image
Abdulsalam Ibrahim

Thanks a ton on your feedback! Vscode here i come!! :)

Thread Thread
madza profile image
Madza Author

Glad to help ๐Ÿ‘๐Ÿ˜‰

Collapse
cmuralisree profile image
Chittoji Murali Sree Krishna
Collapse
madza profile image
Madza Author

Good job on laying out the content. The HTML side is already there. For CSS I would try to do a full re-design, use dribbble.com, behance.net, and Pinterest to inspire you

Collapse
cmuralisree profile image
Chittoji Murali Sree Krishna

Thaks bro, I will definitely look into it

Thread Thread
madza profile image
Madza Author

Awesome to hear! ๐Ÿ˜‰Hopefully, you find something useful ๐Ÿ‘๐Ÿ˜‰