DEV Community

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

Share your portfolio if you want feedback! (CLOSED)

Madza on January 11, 2021

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 a...
Collapse
 
pablohs1986 profile image
Pablo Herrero
Collapse
 
madza profile image
Madza

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

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

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
 
epsi profile image
E.R. Nurwijayadi

Very cool...

Inspiring.

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 • 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

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 • 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
 
ironcladdev profile image
Conner Ow

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

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

Collapse
 
madza profile image
Madza

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
 
enmanuel97 profile image
Jesus Enmanuel De La Cruz
Collapse
 
madza profile image
Madza • 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 • 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

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

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

Collapse
 
goyalaman profile image
goyal-aman

amangoyal.ml

Collapse
 
madza profile image
Madza

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

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

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

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

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

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
 
rishabk7 profile image
Rishab Kumar
Collapse
 
madza profile image
Madza

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

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

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

Happy to help ๐Ÿ˜‰๐Ÿ‘

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 • 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
 
maulik profile image
Maulik

Hi @madza , you have thoroughly analyzed the portfolios of people and given a quality feedback. My friend @shunjid created his portfolio and asked me to review it and I loved it. But can you please check it once and give the feedback?
shunjid.github.io/

Collapse
 
wizlee profile image
Wiz Lee

wizlee.dev
Thanks in advance! ๐Ÿ™Œ

Collapse
 
madza profile image
Madza

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

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

Collapse
 
thomasledoux1 profile image
Thomas Ledoux

thomasledoux.be => there is also a dark mode available (based on your browser preferences). NextJS + Tailwild used!

Collapse
 
madza profile image
Madza

Profile image fits well and awesome feel of the site.

  • Increase the size of the logo, so it's not the same as the navigation items on the right.
  • Set purple underline for nav items depending on the scroll position (not just on hover).
  • Increase the font size for those letter animations. They are on the landing page for a reason, after all.
  • Use rounded borders for all content boxes if you use them on cards.
Collapse
 
thomasledoux1 profile image
Thomas Ledoux

Great feedback! Iโ€™ll look into implementing this asap!

Thread Thread
 
madza profile image
Madza

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

Collapse
 
snazzyai profile image
Abdulsalam Ibrahim
Collapse
 
madza profile image
Madza
  • 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

Glad to help ๐Ÿ‘๐Ÿ˜‰

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

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

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

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

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

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

Collapse
 
bmuskalla profile image
Benjamin Muskalla
Collapse
 
madza profile image
Madza • 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
 
mcdtbo profile image
Thabo Pali

thabopali.co.za

Collapse
 
madza profile image
Madza

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

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

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

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

Collapse
 
willholmes profile image
Will Holmes
Collapse
 
madza profile image
Madza
  • 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

You are welcome ๐Ÿ˜‰๐Ÿ‘

Collapse
 
testgtfsgsfsdfd profile image
ab

This is my developer diary plus portfolio site. I hope you like what you see xD
nikolayivanov.onrender.com/

Collapse
 
madza profile image
Madza
  • It's hard to read, definitely increase the font size for all your content.
  • Add proper padding for navigation and archive items, they are too squeezed.
  • Move the social media icons under the description of yourself.
  • Make all the links, navigation, archive items, and post titles to the shade of blue used in the Choose file button, to give an accent to your site.
  • Make sure to list the preview versions of the articles and then open them on click. Once you have more articles, you will end up facing that anyway.
  • I don't think that validator checks are necessary on the Footer.
Collapse
 
testgtfsgsfsdfd profile image
ab

wow, that was fast XD. thank you so much for your thoughts madza.
yeah, I was kinda scared to use accent colors because images in posts and my portrait art dont blend well sometimes/not consistent, so i went with a gray tone instead. I like the preview articles suggestion, sounds nice and I see it a lot too. yeah the validator checks just look retro to me XD

Thread Thread
 
madza profile image
Madza

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

Collapse
 
dailydevtips1 profile image
Chris Bongers

chrisbongers.com

Collapse
 
madza profile image
Madza

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

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

Collapse
 
stef4nutz profile image
stephen • Edited

sharosky.wtf

i mind changing it but idk really (also i know responsivity is sh*t)

Collapse
 
madza profile image
Madza

What I liked:

  • The color scheme is awesome, goes well together.
  • The originality of the layout.

Some ideas to consider:

  • Distinguish what are your skill icons and what are your social media ones. Currently, it's very easy to mistake and first I thought they are all skills.
  • Add some interactivity for the buttons and add some exciting colors to them.
  • If you want to display projects as cards, I would make them bigger, filling the available space to the right (at least while you don't have more projects). Give them a title and a short description of what each is about.
  • You use large images for your projects. Make sure you lazy load them or find some other alternatives, so they load smoother.
  • Include the live links to the projects and source code links (if available for the public).
  • Add a favicon to your site.
  • Consider including a bit more about yourself and how to contact you.
  • The site is not currently responsive, make sure it looks great on smaller screens.
  • Fix some console errors.
Collapse
 
maybenuts profile image
Maybe Nuts
Collapse
 
madza profile image
Madza

I like the minimalistic approach.

  • Change the terminal background to some dark tone, not completely black, but like some very dark grey to simulate the look of an actual terminal.
  • Make social media icons bigger.
  • Remove the name from the terminal top and place it under your image, increase the font size of it a lot, and set the text color the same as you use in the terminal background in #1.
Collapse
 
maybenuts profile image
Maybe Nuts

Thakyou so much for this detailed review. I will work on the mentioned points. I also wanted to add more content to the page like project details, and my art, without breaking the minimalism but I don't have any ideas. Please help

Collapse
 
vaishnavs profile image
Vaishnav

Would love to here your feedback.
vaishnavs.netlify.app

Collapse
 
madza profile image
Madza

Not the first time I've come across this portfolio. And I like it.

  • Fix each and every page on Dark mode loads through white flash.
  • Try to find a better shade of that grey for Design & Code
  • Also change that background color for Projects to some darker shade, closer to the main background.
  • The same as above for Footer.
  • Use the white font for Projects text
Collapse
 
mymtsai profile image
Mitchell Tsai
Collapse
 
madza profile image
Madza

I like the clean look and feel of the site.

  • I would increase the max-width of the main container a bit.
  • Remove that vertical line under 'I am a full stack developer'. It looks great for sections, but in the landing area, you need to be more general.
  • Add some illustration next to about me, to fill up space and make it more visual.
  • Bold your name beside the profile image, so it is different from nav items.
  • Section titles font sizes should be way bigger, they start new sections after all.
  • Avoid using percentage skill bars. You will be asked how did you measure them.
Collapse
 
mymtsai profile image
Mitchell Tsai

Thanks for the helpful feedback. Really appreciate it :)

Thread Thread
 
madza profile image
Madza

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

Collapse
 
delightfullynerdy profile image
Dalitso Kasonde

dalitsokasonde.com

Collapse
 
madza profile image
Madza

The site can't be reached ๐Ÿ˜’

Collapse
 
delightfullynerdy profile image
Dalitso Kasonde

Sorry about that
dalitsokasonde.com/

Thread Thread
 
madza profile image
Madza

Nice dark mode switch.
I like the fonts and overall feel of the site.

  • Remove Welcome to my portfolio website!
  • Hard code I'm Dalitso and remove that animation. Use black for the name as well.
  • Make Say hello 100% with, otherwise, the footer does not look centered.
  • Add favicon to the site.
  • Clicking on Dalitso on the top left should take users home, currently, it does not work.
Collapse
 
hentaichan profile image
ใƒ˜ใƒณใ‚ฟใ‚คใกใ‚ƒใ‚“
Collapse
 
madza profile image
Madza

I like the landing and the contacts page.
Also, 3D text and glitch effect goes well with your theme.

  • Include images for blog posts,
  • Make sure you can open blog posts on your site,
  • Change Navigation and Footer fonts to something different and increase the size. Try to change their text color to white to increase contrast.,
  • Put that grey to something a bit darker (close to that dark shade at the very top),
  • Customize the buttons - Code, Docs, Read more, etc.... (currently you use some framework, I can tell),
  • And best of luck to create content and include it.
Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
madza profile image
Madza

Nice one to begin with. Use behance.net and dribbble.com to inspire you in the future and find new ideas for UI.

Collapse
 
spruceemma profile image
Spruce Emmanuel
Collapse
 
madza profile image
Madza

Articles, when opened are nicely formatted.
Great use of fonts throughout the site.

  • Increase the height of the landing area (in purple)
  • Add some margin under Get in touch.
  • The images for your articles on that layout would look great.
  • I would show the description right away without hover. Remove that effect, since it's odd.
  • Use some bright green or blue for buttons like View Archives.
  • Use a higher quality image on the About me section.
  • Use icons for social media in the Footer. There are too many links currently.
  • Don't do grey on purple on the Footer. It's hard to read, since no contrast.
Collapse
 
spruceemma profile image
Spruce Emmanuel

Thanks..
I'd definitely work on it

Thread Thread
 
madza profile image
Madza

You are welcome ๐Ÿ˜‰๐Ÿ‘

Collapse
 
jaimesenoret profile image
Jaime

jaimesenoret.web.app/

Made in flutter, not too good but its simple i think. Thanks in advance.

Collapse
 
madza profile image
Madza

It's good to start with. Make sure you set the footer at the bottom and make cursor pointer when hovering over social media icons, so the user knows they are actually clickable ๐Ÿ˜‰

Collapse
 
ekrzeptowski profile image
Ewelina Krzeptowska
Collapse
 
madza profile image
Madza
  • Add some image or illustration in the Hero section (on the right).
  • Make navigation items white while on a purple background. Change them to grey when scrolling and reaching the white.
  • Use different colors for your greeting text. Currently, it's all white.
  • Remove the 'Social' name in Contacts, leave just icons.
  • Use the lighter shade of grey on the borders of Contact input forms.
  • Add some padding and center the Footer content.
Collapse
 
chetanvermaa profile image
Chetan Verma
Collapse
 
madza profile image
Madza • Edited

Moder looking and awesome contrast.
Awesome animations.
Great use of space.
A pleasure to look at.

I would say among the best I've reviewed here.

  • The only thing I would consider to improve is to host the blog on your own site, currently, you are redirecting to Hashnode. Make the content fully yours.
Collapse
 
chetanvermaa profile image
Chetan Verma

Thanks for your awesome feedback.
will surely host the blog on my own.

Thread Thread
 
madza profile image
Madza

Good job on it mate ๐Ÿ˜‰๐Ÿ‘

Collapse
 
devansh07 profile image
Devansh Soni

devansh-07.github.io/
Thank you :)

Collapse
 
madza profile image
Madza

I really like that animation around the profile image. Reminds me of Atom's landing page.
Nice fonts and well-positioned content.
Nice feel to the site.
Easy for the eyes.

  • Add some icons for skills.
  • Add some images for and projects.
  • Remove the blurred image in the Resume. It does not belong to the overall feel of the site.
Collapse
 
stephin007 profile image
stephin007
Collapse
 
madza profile image
Madza
  • Increase the size of the logo.
  • Avoid that yellow on that background, there is no contrast, and hard to read when on grey
  • Increase the size of social media buttons.
  • Try some different fonts.
  • Do not use percentage skill bars. You will be asked how did you measure them.
  • Add the Title and description for each project, without the need to hover. make cursor pointer once hovering over Dark mode toggle.
  • The same as above for live links and GitHub (if available)
  • Use the lazy loading for images in Projects.
  • Add some footer to your site.
Collapse
 
stephin007 profile image
stephin007

Thanks, will consider the points :)

Thread Thread
 
madza profile image
Madza

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

Collapse
 
anduser96 profile image
Andrei Gatej

andreigatej.dev

Thanks for the opportunity!

Collapse
 
madza profile image
Madza
  • Change the font for your greeting message or decrease the letter spacing. Bold it a bit.
  • Use a higher res image if you have one.
  • Stack the text in the landing area. Currently, it stretches and uses just 2 lines, use vertical space more.
  • Change the icons of Work cards and change the content fonts in them. Change the background to what you have in the Header.
  • Remove the Contact in the Footer and center the icons.
Collapse
 
eulier profile image
Eulier Gonzalez
Collapse
 
madza profile image
Madza

Good looking about me section.

  • Make sure your name in the top left is clickable and takes you home.
  • Add some image of yourself in the landing area, or an illustration at least.
  • Consider including navigation in the top right, that scrolls to a specific position of the site.
  • Move the linked in and Contact me to the bottom right.
  • Add title and description for the projects.
  • Add links to opensource (if available) and Live links for the projects.
  • Be more detailed on the services. Currently, you have just four icons, which is too general.
Collapse
 
shriji profile image
Shriji
Collapse
 
madza profile image
Madza
  • The landing area lacks some image or at least an illustration.
  • Make the logo bigger and bold it a bit.
  • Create a title Projects above the images, in the same color you use in the landing desription.
  • Create a Title above each image and add a short Description under each image. Currently, it's hard to understand what they are about without opening them.
  • Add some slight zoom effects once hovered over the images to give some interactivity.
  • Add more links to projects, like to opensource (if available), and add some description for each of them.
  • Remove About us under the last project since you already reference it in The landing area.
Collapse
 
thesabesan profile image
Sabesan Sathananthan
Collapse
 
madza profile image
Madza
  • I'm not a fan of fonts used. Try something like Nunito, Montserrat, Quicksand, and Poppins to make it look more modern.
  • Increase the font size used in the buttons.
  • Increase the top margin for the buttons below Projects and Blog.
  • The about me section feels unfinished and lacks some more images of yourself. Currently, it's just a blob of text.
  • Make sure you use lazy loading for images in the Media section.
  • Re-design your pagination component to look more in the lines with the overall look of the site.
  • Remove the Google calendar embed, it feels odd there.
  • Make sure you include the title and the description of the projects under the image not on top of it. Currently, it is hard to read.
  • Give a proper margin for the items in the Contact section. Currently, everything is a bit squeezed.
Collapse
 
cdthomp1 profile image
Cameron Thompson
Collapse
 
madza profile image
Madza

Looks clean and I like the font you use.
Well executed More about me and Top technologies section.

  • I would remove the background color of What I Do, to stick with the theme.
  • I miss some interactivity on hover. like zoom in cards on hover or change color of menu items when hover.
  • When clicking on Load more, make sure you position the navigation items to right (like you have on the landing page), so you don't confuse the users.
  • Add that lighter shade of blue to your Articles section, so it is easier to distinguish between Projects and Articles. And that way your site would follow the pattern.
  • Consider opening blog posts or projects directly on your site. Currently, you fetch them from DEV or add them manually and point users to outside sources. Use the advantage of your site to give more description of them to create separate pages for all your projects. I would suggest to use Contentful for CMS and start from there.
  • Increase a bottom margin for Articles.
  • Increase a top margin for the footer. And remove the computer icon there, since it feels odd.
Collapse
 
seveshy profile image
Daniel Major • Edited

Your initiative is really cool, here is my portfolio danielmajor.com.br, I need new ideas to improve

Collapse
 
madza profile image
Madza

The landing area font looks good.
Nice background color for white and grey text.

  • Make the logo slightly bigger and the navigation items slightly smaller, to highlight the logo. Try different fonts for the logo, or generate a new SVG with some logo generators.
  • Change the background color for the Header to something darker and based more on grey not brown, since it does not go well with your main background color. Same for other panels you use that shade across the site.
  • Increase the profile image size.
  • Increase the font size of your name and position Frontend Developer directly under it.
  • Make the tags different colors to give some accents.
  • Create a sorting algo, so that clicking on each tag leads to projects specifically built with particular tech.
  • Make the font size of Project descriptions smaller.
  • Can't really evaluate the Blog section, since no genuine content there. I would suggest include some images there and make sure users can open the post directly on your site.
  • The Stack content loads slow, see what you can do with it. I would remove the Stackshare embed and create a custom component for it. If you stick with embed, make sure it opens in full height, so the users can see the content without scrolling.
  • Center the footer content, so it feels right on every section of your site.
Collapse
 
buraksaraloglu profile image
Burak Saraloglu • Edited
Collapse
 
madza profile image
Madza

The project section looks nicely formatted and clean.
Great that users can open the projects directly on your site to read more about them.

  • I need a picture of you in the landing area.
  • Increase the font size of your name and use a dark grey shade to highlight it.
  • Make links of different colors, like light blue or something to highlight them.
  • Use a darker color for the scroll animation, it's hard to see currently, and I would guess there is no more content in the initial launch.
  • Add some background color for the buttons, like a light blue for Live demo and grey for Github. Change the font color accordingly.
  • Use some lazy loading for your images, currently, they do not load smoothly.
  • Include resume link in the landing area and remove it when scrolling
  • Consider including some footer for the site.
Collapse
 
nilmadhabmondal profile image
Nil Madhab
Collapse
 
madza profile image
Madza • Edited

The first is just a Medium profile, so it would not be fair to judge. If you are using it for your Blog that's absolutely fine.

About Webtutsplus:

  • The site needs more content,
  • Use SVG for logo,
  • Create separate links for login and signup,
  • Remove the play button,
  • Format your screenshots in Carousel properly (currently I can see browser tabs on some of them),
  • Make the description about what you do bigger,
  • Add some icons for links,
  • Add some social media info (currently there is no way to contact you).
  • If you are using WordPress, maybe switch some themes, WP has a lot of customization options.
Collapse
 
linuxnerd profile image
Abhishek Prakash
Collapse
 
madza profile image
Madza

What I liked:

  • The image is great and fits well.
  • The overall look and feel of the site.
  • The double-column layout makes it very easy to navigate.
  • Looks awesome on mobile.

Some ideas to consider:

  • Increase both font size and icon size on the left side. It's the main section and all the info there should be highlighted a bit more.
  • Change the section titles to darker shades to accent them more.
  • I'm not a fan of percentage bars for skills. They might look great, but an interviewer will ask you how did you measure it and know that it's exactly 65% or smth.
  • The right panel should end with Contacts (on desktop view). Copyright section there feels odd, whether remove it completely or move it to the left under social media icons. For the mobile view, it fits well at the end of the page.
Collapse
 
chomtana profile image
Chomtana
Collapse
 
madza profile image
Madza

What I liked:

  • The speed and overall UX of the site.
  • The resume layout used to present the info.
  • The fonts look awesome and very clean.
  • URLs with hashes to forward the user to a specific position.
  • The profile sidebar looks great and well-formatted.
  • The way the contact sidebar is stuck for easier access.

Some ideas I would consider:

  • Each time I refresh your page your image loads through the blur. Consider not using any effect for it, since it is very small and could be well compressed for that size. So it would load fast by nature.
  • I'm not a fan of the yellow-brown color currently used for buttons. Try the shades of other colors that would fit well with yellow. Probably that green used in line.me would look neat. Especially for both Send buttons.
  • I would do all the Choose your Question buttons in different bright colors since they represent different questions. You need to highlight them if you want users to click them. Currently, they look pale.
  • I would sort the skills differently. Try to put them into thematic blocks and display them horizontally (use 3 column layout). You can leave them as a list for the mobile screens if you want.
  • Contacts section seems to be missing on the screen-sizes 650-1000px. See how you can implement them without breaking the layout.
  • Fix the console errors and remove the unnecessary console logs.
Collapse
 
terieyenike profile image
oteri • Edited
Collapse
 
gedalyakrycer profile image
Gedalya Krycer

gedalyakrycer.com

Thanks in advanced! Iโ€™m about to do a bit of a redesign/restructure soon, so any feedback before then is much appreciated.

Collapse
 
madza profile image
Madza • Edited
  • View resume button should be more highlighted, use some bright green or blue.
  • Increase the font size of the text of the landing page.
  • Remove the section above Footer. You don't need two footers one above the other. Built with info is enough.
  • Add title and description for projects without the need to click on them.
Collapse
 
inigochoa profile image
Iรฑigo Ochoa

inigochoa.me/

Please don't be too harsh, it's still in development ๐Ÿ˜€

Collapse
 
luckierdodge profile image
Ryan D. Lewis

ryandlewis.dev

I'm not really a web developer by trade, so I would appreciate any feedback! Been slowly iterating on this guy for awhile.

Collapse
 
madza profile image
Madza • Edited
  • Move your image from the top to the available space right to your description and increase the image size after that.
  • If you do #1, add the introduction text above the Navigation, like Hi, I'm Ryan or smth. Make sure the font size is big enough, as it would be your main title.
  • Are you sure you want to use that dark green? If you like green, make try out lighter shades, it will look much cleaner that way.
  • Use 2 column layout for posts, where there is the title is on top and then the image in the first and the description on the other.
  • Add images also when the Posts section is being opened.
  • The projects section looks good if you prefer lists.
  • Position the links horizontally to use the available space on the desktop view.
  • Make the content of the footer bigger, currently, it's too tiny.
Collapse
 
darshkul24 profile image
Darsh

Here is mine :- moderboy.wordpress.com

Collapse
 
sulmanweb profile image
Sulman Baig

sulmanweb.com

Netlify vuejs frontend
Dev.to backend api

Collapse
 
madza profile image
Madza
  • Try darker background shades for those panels. And lighten the body background.
  • Remove the image in the Header. It duplicates the one you have in the top panel.
  • Move navigation items to right (to the point where the content ends on the right)
  • Align the text of the first panel to the right side.
  • Add some different colors to the links to give some accents.
  • Consider using white text color. It would look great if you do #1.
  • Make sure you use white social media icons.
  • Add images for blog posts already on the main page.
  • Use lazy loading for images once you open blog posts.
  • Put posting date and tags under the title and give proper padding for them. *Use some bright green or blue to load more button background.
Collapse
 
darshkul24 profile image
Darsh • Edited

Here is one :- moderboy.wordpress.com

Collapse
 
darkmg73 profile image
DarkMG73 • Edited

This is very nice of you to offer.

glassinteractive.com

Thanks in advance.

Collapse
 
martygo profile image
Martins Gouveia
Collapse
 
abhishekjain35 profile image
Abhishek Jain
Collapse
 
dionarodrigues profile image
Diona Rodrigues

diogorodrigues.dev/

๐Ÿคฉ

Collapse
 
geekboysupreme profile image
Shuvam Manna

Hey there, would love some feedback on mine too. shuvam.xyz