DEV Community

Cover image for Portfolio Advice Thread
Ali Spittel
Ali Spittel

Posted on

Portfolio Advice Thread

Having a fun portfolio has been really pivotal for me career-wise. I would love to help some other devs create their own kickass portfolios. I would love to give feedback for anyone who would like some!

Below, post a link to your portfolio, and, optionally, specific things you would like feedback on.

Other devs, feel free to leave feedback too, just remember to make that feedback actionable and kind!

Oldest comments (329)

Collapse
 
jackharner profile image
Jack Harner πŸš€

Would love some feedback! Thanks in advance!

Harner Designs

One thing I've always struggled with is, because it's just me, should the voice of the site be saying like "I am Jack Harner" or "We are Harner Designs". I think, right now the site is kind of a mix of both, and that might be confusing/off putting.

Collapse
 
aspittel profile image
Ali Spittel

I love the console message and the theming! Very "on brand"!

Branding

I think this is more of a business question than a portfolio one. I, personally, would keep it to just you and use "I". Somebody else may have better feedback there though!

Design

The earth jumps around for me after the first paint, but I really like the use of animations! Might be something to look into. I would stick to all navy instead of the navy and black, but that's just me!

I would make the full portfolio images a link instead of just the green button, especially since the pointer finger comes up!

Performance

I'm getting a couple paint issues where things are a little slow. I ran a lighthouse test and it looks like some images could be optimized! There are great instructions right on the test, so I would read through that! The menu dropdowns could maybe be sped up too!

Super cool site, love the space theme!

Collapse
 
jackharner profile image
Jack Harner πŸš€

Thanks for the feedback and compliments!

The earth jumps around for me after the first paint

ya, I think I'm going to try to redo that whole banner animation using Canvas. Hopefully be a little more performant than just animating SVGs.

I would make the full portfolio images a link

Are you talking about the slides in the Recent Clients section on the homepage? Those Images link on my end, but it might be an browser/os issue. Are you on Mac?

Thread Thread
 
aspittel profile image
Ali Spittel

Oh interesting! Yeah, Chrome on Mac.

Collapse
 
phallstrom profile image
Philip Hallstrom

Jack -

Mojave/Safari 12, the images in Recent Clients are all missing. I even tried reloading without my content blocker. Oddly no errors in console I could see, but might double check it's not just me. They load fine in Chrome however.

As for the voice, I'd suggest thinking about how you want yourself to be viewed by others. Are you a one man show or are you a giant company? How do you want to be seen? Is it worse for me to think you're a giant company and find out it's just you in a WeWork space? Is it better for me to know you're solo, but awesome, and that I'm getting your full attention? Both have pros and cons. My advice is to think about how you want to be seen, what questions clients will ask (ie. "what happens if you go on vacation?") and then decide and be consistent.

IMHO I'm not a fan of pretend to be a giant company when you're just one guy. But that's just me and I could be totally wrong :)

Collapse
 
rdumais profile image
Ryan

Jack thank you for your feedback on my portfolio earlier today. I visited your page and was impressed by your graphics and illustrations. One thing that bothered me is how wide your forms are particularly here and towards the bottom of your homepage. For example, I entered my name in the 'Name' field and my full name takes up ~25% of the entire field.

Form example

Great portfolio and projects!

Collapse
 
beau_dev profile image
beau_haus

Dear Jack,

The SVG's are great!.. As Ali has said, there are paint issues with the hero. (I loves me some slow animations, tho). I haven't checked whether they're css...if they are, first, Nice! :D . second... You may wish to try gsapping those babies for a more smooth browser paint. greensock.com/.

I particularly like the "progress background" of the tabs in the menu as I scroll down through your work.

The colors in those might be a bit less saturated or toned down for a bit of subtlety... but overall I think it's a nice touch.

Very nice work!

-Beau

Collapse
 
moopet profile image
Ben Sinclair

I love the header image. The subtle animation of the satellite is a nice effect, and the shadow on the banner text makes it legible against any background colour. The squoval porthole-type image is a nice touch too.

I really like the way the form labels animate out but are still legit HTML label elements. I don't know if that's your design or part of material (after peeking at the class names) but it's nice.

On to the places I think you could improve:

The drop-down menus are a little weird - they take about half a second to pop in, which makes the page feel laggy, and I don't think their look and feel matches the rest of the menu.

Several of the links offer poor accessibility - for example the social links in the header are empty of content.

The blog posts in the footer could either disappear or have a heading, because at first glance it looks like the menu reads "Home", "Coffee Shops...", "Services", etc. which is confusing.

The "Sign up for 10% off" form on your login page does not have the same consistent label effect as the main page and uses a simple placeholder instead of a label which is bad for accessibility.

I agree with @rdumais about the form widths and @phallstrom about the voice. You say "My name is..." and "See what we have to offer" on the same page. Pick one and go with it!

The other pages look unfinished, for instance the contact-us page has different social link style and misaligned radio button labels, so I'm not going to comment further on those.

Collapse
 
nektro profile image
Meghan (she/her)

It’s not done per se (are they ever haha) but I’ve been working on nektro.github.io as my new personal landing page

Collapse
 
aspittel profile image
Ali Spittel

I really love the simplicity of this, it looks great and has all the important information right there for you. Kind of like a living resume! You could maybe further emphasize the stuff that you really want people to see to draw people's eye around the page, but I really like it. One quick thing: I would add an s to the Project I've worked on!

Collapse
 
nektro profile image
Meghan (she/her)

Thank you! Haha good catch on the s and I like the emphasis point you mentioned. I have a big project I’ll be releasing πŸ”œ so I could maybe do a β€œfeatured project” section with pictures or something like that and then have the list below with everything else

Thread Thread
 
aspittel profile image
Ali Spittel

Oh awesome! that sounds like a great idea!

Collapse
 
mazentouati profile image
Mazen Touati

Thanks Ali,
My portfolio is in the furnace right now. Till when this thread will stay open ?

Collapse
 
aspittel profile image
Ali Spittel • Edited

It'll stay up for a while! DW!

Collapse
 
mazentouati profile image
Mazen Touati

Great

Collapse
 
kostar3 profile image
kostar3

Strangely enough, this furnace site was one of the first websites I developed. We're talking many years back now so it's not in my current portfolio as you can imagine :)

Collapse
 
shinyuy profile image
Shinyuy Marcel

Hello Ali, I would be happy to get your feedback on mine, it is shinyuy.github.io/portfolio
Please what do I need to improve ?. I mean I would appreciate any advice, whether on it design, skill set, projects, or if it can get me a job.

Collapse
 
aspittel profile image
Ali Spittel

Hey! On that page, I'm just getting a navbar and that's it -- I wonder if there's an issue with the routing? I would also make the homepage shinyuy.github.io instead of at shinyuy.github.io/portfolio!

Here's what the page looks like for me for context!

Collapse
 
shinyuy profile image
Shinyuy Marcel

Okay thank you very much, I am working on solving that, I don't know what causes this, cause on localhost, its normal showing the full landing page, but immediately I host it on GitHub pages, I get this issue, though clicking on that link portfolio on the navbar then displays the full landing page. As for changing the URL I think I will do that. So please I would appreciate if you clicked on portfolio or the other navbar links on the navbar and give me feed back on the other things that need improvement. Thank you

Thread Thread
 
aspittel profile image
Ali Spittel

Ah okay, if you're using React router or something along those lines, you may need to tweak some settings! I like the boldness of the resume page with the contrast! I would make sure the picture of you isn't stretched out! I would also reduce the space between the years and the titles for your experience. I would add some spacing to your about me. It will make it easier to read and draw people in! Even bold some text and make it bigger, you have space! I would also be consistent on fonts from page to page! Same thing with your projects, draw the person in with an image or something! I would also test the site on different sized pages and make sure it looks the way you want it to in all cases.

Cool design, very clean!

Thread Thread
 
shinyuy profile image
Shinyuy Marcel

Thanks a lot for the detailed feedback, I appreciate it and would make those adjustments while waiting for your test.

Collapse
 
romanpaprotsky profile image
Roman Paprotsky • Edited

I would really appreciate your feedback.
romanpaprotsky.com

Collapse
 
aspittel profile image
Ali Spittel

I really love the simplicity of the site, it looks great and I love the coloring. The one thing I would do, is make everything bigger. You've got space! I just did this in dev tools:

The image is 2x in size, and the fonts are bigger! You could also add color to the links to other sites!

Collapse
 
romanpaprotsky profile image
Roman Paprotsky

Thank you Ali

Collapse
 
rdumais profile image
Ryan

Hi, my portfolio is located at ryanduma.is/

I would love any kind of feedback but a focus on design and usability.
Thank you in advance, everyone!

Collapse
 
jackharner profile image
Jack Harner πŸš€

Just some thoughts:

I like the simplicity. Everything is laid out in an easy to find way. The image lightboxs loads smoothly and swiftly. Good job on that

You might consider reevaluating your color palette. I'm not a big fan of the color you have for the project cards. You've got the dark dark blue background, with purple and red highlights. Obviously colors come down to taste, but I feel like you have too many highlight colors.

One last thought:

Your project tags look like buttons. My first thought was to click on them but since it doesn't do anything, it was kind of confusing.

Cool site though! Good work!

Collapse
 
aspittel profile image
Ali Spittel

Hey! This is cool and has all the relevant info, which is awesome. I like having your resume too. The accordion, for me, wasn't the most obvious. Maybe cards would be better to really highlight your projects? I would also make the linemaster image bigger so it's easier to read! I would also add some more spacing between icons. I really like the red outline! it's a nice touch!

Collapse
 
moopet profile image
Ben Sinclair

I like it, for the most part.

You include your age under your profile picture, and I'm wondering what you're doing that for. Normally this is a place to indicate achievements, skills and contact details. The only people who are going to care about your age are companies... companies that you really don't want to end up working for.

The only other thing I'd suggest improving is the "Resume" button. I suspect this is a U.S. thing, but I'd suggest either changing the text to "RΓ©sumΓ©" or "Resume/CV" because the word "resume" is an action word, and it's on a button. In terms of UI, it looks like you press that button to un-pause something. I know context is everything, but still it looks funny to my British eyes.

Collapse
 
khangtran profile image
Kael Tran

Thank you Ali, I would love to have any feedback on my portfolio.

Collapse
 
aspittel profile image
Ali Spittel

This is super cool and different! I love the stars on the home page, and it's very minimalist, which is good! I like the hamburger nav's animation too. I don't love overriding scrolling. I would prefer a single page I can navigate more easily. I don't think the "I am thinking" is necessary on simple site! I would just feature your stuff in a quicker to navigate way!

Collapse
 
khangtran profile image
Kael Tran

Yes I totally agree that the loading phase is overkill. I remember the reason why I did that was I wanted the site to be totally different, kinda accomplished that :)

Collapse
 
hurric9000 profile image
Hurric

1000% agree with the scroll. I couldn't tell what's going on

Collapse
 
susickypavel profile image
Pavel Susicky

I have to: "say very nice portfolio!". I always wanted make similar and i'm working on it so i hope it will be at least just a little bit awesome like yours. Well done!

Collapse
 
khangtran profile image
Kael Tran • Edited

It actually is the second one so I have a bit of different. If you visit the root url you will see my first portfolio site, the code base is a mess xD

Thread Thread
 
beau_dev profile image
beau_haus

The animations (easings) are sick!!! (really great) snappy. Very well timed.

I love the palette.

Very very impressive. It's nice & clean. You have a great eye. I'm very impressed with this work. Nice.

P.S.
One very minor thing...
You may want to get a friendly --or anonymous(?) third eye on the copy of your descriptions.

It never hurts to have a third eye on it to do editing.

PPS
Thanks for this. It's inspiring. Well done!

Collapse
 
moopet profile image
Ben Sinclair

Hi Khang!

The delays and animations make the experience seem very slow to me. "I am thinking" and progress bars and so on seem unnecessary when it's really not a lot of content. If I use the scroll wheel to go down three sections it takes about six seconds because I have to wait each time. Without these delays it'd take about half a second and that definitely affects my opinion of the site's performance.

The thumbnail image of a site you made ("Natours") is over 2000px wide but you're using the browser to scale it to under 500px wide. That looks like a waste of bandwidth to me (nearly a megabyte), and I definitely noticed the image progressively loading, which adds to the overall slow feeling. Maybe you could preprocess it in the site's build stage to get that down to something more like 50Kb.

You're inconsistent in your language - for example, on the same "Natours" page you use both "css" and "CSS" in the same line. There are a few places where the sentence structure is incorrect such as "WHAT I CAPABLE OF" instead of "WHAT I AM CAPABLE OF", but that's nothing that getting a friend to proofread wouldn't fix. It's often really hard to notice mistakes in things you've written yourself.

I find the animations distracting and inconsistent: why does clicking the hamburger animate the background out to a menu but not back in when you close it?

I can use the scroll wheel to change pages, but it's not clear where I am on the page, whether there's a page before or after the current one, or whether there's content on the page I can't see because I can't scroll to it - if my browser is not tall enough I can't read beyond the top of any page. I have just noticed an animated arrow in the bottom right, but if I click it, nothing happens. I guess it's there to signify that I can use my scroll wheel, but it's not obvious.

I assumed the this was a single-page site where the hamburger menu took you to different lanes, but the names of the pages in the menu don't match up with the headings of the actual lanes. This makes me confused and if I use the menu to navigate and try to click on the current page (I don't know if it's the current page because of the name difference) it simply does nothing.

The whole site is inaccessible by keyboard: I can't change pages with arrow keys or page-up and -down, I can only tab between a few of the elements...

The page doesn't work without javascript enabled and thus there may be problems with SEO - I'm guessing SEO is important to you on a portfolio site! It looks like it's React, right, so maybe you could use next to help with that?

Collapse
 
khangtran profile image
Kael Tran

Wow thanks so much for such a detail feedback. I kinda noticed some of those issues but have not got time to come back. Again, thanks so much for pointing out my mistakes, that helps me a lot.

Collapse
 
psykinetic profile image
Timi

Hi, recently made this timi95.github.io
I'd be very grateful for a quick review and some pointers miss Ali.

Collapse
 
rattanakchea profile image
Rattanak Chea

just some thoughts. You could work on background color, font-color (it is kinda hard to read),
Spacing and alignment of contents.

Collapse
 
psykinetic profile image
Timi

thank you

Collapse
 
aspittel profile image
Ali Spittel

Hi! It looks like this is only working on one screen size! I would work on making it responsive so that it works on differently sized devices! Right now I have to scroll to see all the content. I would add some more contrast too so that the text is easier to read! I love the aqua color, it looks very sharp. I would change the 'about me' text to resume since that's what comes up! I would also specify what the YouTube videos are and make sure the icons are aligned for your technologies!

Collapse
 
psykinetic profile image
Timi

Thank you very much, It shall be done !

Collapse
 
rattanakchea profile image
Rattanak Chea

Yeah would like some feedback on Portfolio site. It is over 2 years old and hope to carry some feedback into new version. Thanks

Collapse
 
aspittel profile image
Ali Spittel

I like it! Looks very clean. I would make your picture bigger, right now it's kind of hard to see. I would also feature the links to your other pages, like work, blog, and resume since you want people to navigate to those! Make sure they're super easy to see and emphasized to the reader. You don't want them to exit after the homepage! Draw them off of there! I would also maybe work on the consistency of your cards, and make the images the same size!

Collapse
 
ben profile image
Ben Halpern

I used this as a chance to offer up some general advice, if folks are interested.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.