Portfolio Advice Thread

twitter logo github logo ・1 min read

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!

twitter logo DISCUSS (330)
markdown guide
 

What an awesome idea for a thread!

I've definitely gone though a lot of iterations on my portfolio. The latest version is available here: joshuapullen.com/

I'd love to get some feedback! So far I've been keeping it pretty minimal; I'm curious whether you people think that's a good idea of if a more fleshed-out design would be better.

 

I love the look of this site. Simple, elegant, to the point, and the right things are highlighted. I think this is such an excellent example of a minimalist site with great design.

Also, teaching kids to code is the most fun thing ever :)

 

That's great to hear! Design is always a little bit tricky to evaluate on your own, so getting some positive feedback is nice. :)

As you said, teaching kids to code definitely strikes a chord with me. There's something incredibly satisfying about seeing people have eureka moments. Plus, with kids, there's a lot of excitement around elements of programming which I sometimes take for granted.

 

Rocket Spelling rocks. Full-stop.

Design reminds me of everything I've heard/read about marrying the tone/typography/design to the actual content.

The animations are killer. Looks like you've been painstaking in your work on it.

Very nice work.

Wow.

-Beau

The site itself is very understated by comparison to what it links to.

I might, if I were you, consider again, perhaps the black bar at the top.

There isn't one at the bottom and so it distracted me a slight bit as though it might have some functionality--That is, I found myself scrolling up as far as possible because I thought I hadn't revealed the menu, or something.

This might be avoided if you have, say, a similar black bar position: fixed (?) at the bottom... In this way you might achieve symmetry.

-oh! it's just me, but I'd but some kind of fancy schmancy affordance for your blog link at the bottom.

nngroup.com/articles/guidelines-fo...

--It certainly doesn't detract from the design, tho. Very nice!~

PS
favicon is adorable.

 

Glad you like the look of Rocket Spelling! I definitely put a lot of time (and iterations) into it.

Interesting to hear your feedback on the black bar. I'll keep looking for an option to satisfy everyone (definitely getting mixed feedback so far).

Thanks for the thorough response!

 

I'm a big fan of your site's simplicity. It looks and feels really nice, easy to find content and nothing distracting.

My main thing is that it doesn't seem like you've taken into account any devices other than desktop? It doesn't adjust itself to a mobile phone, so it very 'zoomed' out and when resizing the browser on a desktop the icons start to overlap the text content around 640px.

 

Oh, you're right! I had forgotten about that. I'll have to revisit it sometime and aim for responsiveness, particularly in the grid area.

 

I really like the animation that reveals your contact form, but I'd make it launch on a button rather than an anchor link, because that'd be better for accessibility.

I also like the strong black line at the top of the page!

 

Oh, that's a good call. I remember that my reasoning at the time was that I wanted the text of the link/button to be able to be split across multiple lines. You can't set display: inline on a button, but I suppose that's a small price to be paid.

 

There's something about your website that I just can't put my finger on but I love it! the colors, the simplicity and the little details like the small underline under the header. Inspiring :)

 

Nice design! It's fast and minimalist. I did a redesign as well check out this site outdoorgearonly.com

 
 
 

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!

 

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 :)

 

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

 

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?

 

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.

 

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!

 

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

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!

 

Not really a portfolio (yet), but [Momcilo Popov)[momcilo.xyz] design worked pretty well. People call it mysterious, and I am getting contacted via website pretty often. It even got listed in a few online web design collections. Definitively planning to add a blog section and a few case studies. Any other ideas? (besides changing that awful font :D)

 

Oh! This is cool, very different. I wuold maybe make it scale on smaller screens so it's still one page. I also may not do the separate page on hover for the links, you can just leave them as links in my opinion. Really like the overall design!

 

I've never seen anyone do that full screen SHOUTING THE LINK thing you do when you hover a link before. It's... different. Kinda cool I guess? The problems I have with it (apart from the initial surprise) is that it's not there for every link ("touch" vs "here" and "here") and that the link text itself is often just "here", which is bad for accessibility and SEO.

Why is the ellipsis a button? I quite like that effect too - revealing the additional information when clicked - but it's not obvious that'll happen and I'm all about keeping my browsing experience low on surprises!

 

Even tho I totally understand your point, my idea was exactly the opposite: surprises and unconventional interactions :) But I improved accessibility a bit in this newer version :)

 

Mine is on a CV format, so not all that exciting, but was fun to make using Sanity.io (which is a headless CMS) and custom @media print styles to easily create a printable PDF. Being able to edit it in the Sanity content studio has also come in quite handy.

 

cough could I please point something out that's a little ironic?

I'm creative with and eye for detail

Fix that as soon as possible :)

 

Thank you! Fixed it right away.

(Though I actually had to put it into google translate to find the error. Even though I thought I read it word for word I couldn't spot that "and" 😳. I think it's safe to say my "eye for detail" doesn't always work for proofreading.)

 

Cool! I like this -- very professional and clean. It definitely gets the message across and shows your expertise!

 

Thank you, that's nice to hear 😊 That's exactly what I was going for when I started making it.

 

I'm in love with this portfolio. It communicates everything very cleanly, works on every size screen, and the print styles are the icing on the cake.

 

Thanks!😃
I've tried to make it easy for others to clone the project and use it to make thier own CV. You can find it at github.com/arnemahl/skratsj, would be awesome if it could be useful to someone besides myself.

 

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.

 

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!

 

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?

 

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!

 

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 :)

 

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

 

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.

 

I'm actually in the process of redoing my personal site right now. Most of the content on other pages is placeholder and will change soon, but I'm trying out a new idea for presenting projects and talks.

Again, the content for each project is incomplete, but I would love feedback on the functionality and design. Oh, and the button filtering is wonky. This is my staging site and totally should not be viewed as production ready 😅

 

Awesome! I mostly use mine for speaking gigs now too! I'm also a huge fan of the Zen of Python!

I didn't get this exactly how I wanted it, but I changed some sizing/ordering in order to emphasize stuff and use more space!

I also struggled to close the modals, though I love how much info you give on your projects!

 

I found a couple of glitches:

  • The modal doesn't resize when the window changes, so turning your phone could result in broken text.
  • The modal requires a minimum height, which my laptop screen just doesn't have, in order to display enough of its content.

From an accessibility point of view, the links are too low-contrast, and the only way they're distinguished from body text or for their hover states is by a very slight luminosity change.
The social links have no content, so they can't be used with a screenreader, etc.
You can't use the keyboard to navigate through the thumbnails because they're not really links.

The filter buttons could be bigger, because they're a little swamped with the other components on the screen.
It's not obvious that the filters are ANDed together until you experiment. My assumption was that clicking one after another would have removed the first filter. Perhaps they could be made more obvious with some kind of checkbox-like states?

Other suggestions:

  • You could made the esc key dismiss the modal.
  • A different effect for the modal appearing and disappearing? It's slightly disconcerting that it zooms in from the side even when you click on one of the figures from the opposite side.
  • Make the modal background colour use something from the same palette as the clickable thumbnail?
  • Add your name to the page title so people who bookmark it can find it again easily

I actually think that since this is a page about showing off a few things that you've done, and there's a manageable number of them, that just displaying things one after another would be fine, rather than using the modal effect at all.

 

Thank you so much for this thorough review! I’ll definitely take a couple things under advisement, but like I said before, this is a staging site for my portfolio where I sandbox things to play with, so it’s missing a lot of content and listing everything out would not be good.

I have an updated local version that I think already addresses a couple of these issues that I just haven’t pushed up yet. If you’re interested I’d love for you to take a look after I’m done. Thanks again.

All that being said, I’m a data engineer who Is touching JavaScript and CSS again for the first time in 5 years just for this site and a couple doodles, so if you have any advice on how to do things like sizing things from an accessibility standpoint, or places to test contrast between two colors, that would be super helpful!

 

That Now page... Is that inspired from Derek Sivers? 😁

 

In fact it is! I link to his page in the contents there!

 

First off, thank you for doing this!

My portfolio is carmenwright.xyz

I'm in the process of moving from web design to UX design, so a lot of the wording is not correct. However, I want to start applying soon for related jobs (once I'm finished with my course) and wondering if my portfolio is too "basic" to show my skill or doesn't have enough on it (for example, more UX centered case studies and not the newsletter design or branding).

Thanks again for this opportunity!

 

For sure! I love the long form project descriptions, you could almost make them into blog posts and post them here 😉! I would have clear calls to action to contact you and hire you since you will be looking soon! Emphasize those links so that people follow them! The navigation is really smooth. I would make it super obvious that the projects are clickable -- maybe make them into cards or add another visual cue. I would add a max-width to your header text so that it is easier to read on large screens! Looks great!

 

I had originally posted my case studies on Medium, and linked then back, but that irritated me for some reason, so I did that switch. I hadn't thought of posting them here, so thank you for the idea.

I'm definitely going to include those CTA buttons on the next round of adding code.

Thank you so much for this review! It's very much appreciated.

 

Hi Carmen!

Very nice work!

dropbox.com/s/kyrjf37u07egt7o/carm...

Here is a dropbox to your hero image.

My wifi connection is 💩. So I noticed that your hero loaded rather slowly.

If you have photoshop, if you open imgs up and press cmd + alt+ shift+s --it will open in an interface to prompt you to decide the size and dimentions and (most important for performance...) "weight" of the image.

This little feature just may become your best friend if you use images when you develop.

The image I posted above is lighter and of lower quality, but is significantly quicker to load.

I wish I had a good link for more info on this....but... check around. It's actually a bit of fun and an interesting challenge to get all images on your site to about 100 k (?) --Perhaps someone who knows about perf, could weigh in here 😂🤣.

Anyway...

It's a very nice site.

PS Your Richard III cover is amazing on Behance 👍🏼

 

Thank you! I've had problems with that image and the one I used in a previous iteration. To be honest, I thought it was my WiFi, so I hoped it wouldn't affect anyone else's use of the site.

 

It's simple and it works. My only suggestion is to limit the width of your text because on a wider browser it becomes unwieldy. Something like, max-width: 60em; line-height: 1.5;?

 
 

Perfect timing, I've just started to revisit my personal site with a completely custom theme, based on Bulma! I haven't taken it live yet, but because Netlify is wonderful, I've got a preview I can show you.

caseyjbrooks.com

Here are a couple of sepcific's I'd love some feedback on, but any tips are greatly appreciated. It's still very much a work-in-progress, so I'm mostly just looking for general tips for better design and usability.

  • First impression of the homepage. I really like the tiles, making the homepage something of a collage, but can't decide if they are too cluttered or too busy. Also, I'm trying to work out the best colors for it to not be too intense, but still be interesting
  • Blog post layouts. A couple things I'm considering: making the card backgrounds colored subtly, maybe to look like parchment, and using a serif/typewriter font. Any suggestions for good fonts to use?
 

Looks great! I would definitely use caseyjbrooks.com over 5bedafbcdaeb0a2d6bd167db--caseyjbrooks.netlify.com. Netlify has super simple domain settings and free HTTPS setup!

https://app.netlify.com/sites/(site-id)/settings/domain

 

Thank you! I've been using Netlify for a while now, and do have it set up at caseyjbrooks.com/, DNS, SSL, forms, and all! The site I linked is still in progress, in another branch of the same repo, and that nasty URL is a branch preview of it!

 

That's really nice. I like the separation of the section with the grid as its background.

To be honest, my first impression of the homepage was the word, "Christ". It jumped out at me and I immediately wondered what that was about and scanned around the page for any mention of anything that wasn't code. I found stuff in your personal blog ("musings") but that's kind of buried. I expect you were going for the three-word-alliteration that makes a lot of catchy phrases pop out and I know that developers often throw the word "coffee" around in conversation like it's a conjunction but I feel that if you're going to put religion front and centre you could maybe devote more home page space to it?

I don't think the tiles are too cluttered. There aren't too many of them and while there's perhaps not much to distinguish between them they've got their own space and are well-named and easy to glance through.

I think your layouts are nice the way they are; there's pretty much nothing I would change and I think that changing fonts might just be tweaking something for the sake of it. I do think that using a typewriter font would make things harder to read though so I'd advise against that.

 

I really like the cards and the font sizes -- super good looking, and the colors are different but cool! I would remove the background image on the side panel, just keeps the clean theme going. I would also make "about", "blog" and "contact" bigger since you really want people to go to those pages! I would make the fonts on your about page bigger! I would show all your blog posts on a page so that someone can see all of them at once, maybe with images so that people are drawn in to read them! I love the cards though, again!

 

Thanks for the advice, and I'm so glad to hear you like the cards, I was really wavering on that!

I actually chose the colors trying to compliment the sidebar background, but maybe I'm just partial to it because it's one of my favorites from my gallery 😇I had originally used a solid color for the sidebar and didn't like it much, but I also didn't like the original colors at all either, so I might like it much more with a more muted palette. Lots to play around with!

And I do have blog listings, but I have not gotten around to making those look nice yet, it's just a list of links. I do link to these archive pages from the homepage tiles, but I will definitely try to make it more obvious how to view the archives.

Oh, your art work is awesome! I'm just biased against background images in general I think -- just think it usually detracts. I would maybe put the cards on a separate page then, and just have art/your name/links on the home page?

 

This is an awesome idea. I released the first version of my site last night, so timing couldn't be better. I wouldn't call myself a dev, but I appreciate your consideration/review! Here's my site: butnotsimplr.com

Specifically, I'd like feedback on:

  • I have multiple ideas in one place(portfolio, podcast, blog). Is this too confusing?
    • general feedback

Thanks!

 

I love this! So unique!

  • I may speed up the animation a smidge so that people can see content fast.
  • The layout is 🔥 and I love your bio -- so great. I would make the font size for your bio larger so it really catches the eye!
  • I would add spacing between the contact and resume buttons (just a few pixels)
  • I think the skills section looks great, but I'm not sure if the graphs mean much, I would maybe just put experience first, or quantify the skills with projects a little more.
  • I would add a concrete heigh to the passions cards so that they are all equal in height
  • I would increase the font sizes through out -- just easier to read!

I love this site, so unique, and really shows off all your projects in a quick look!

 

Woo! Thanks for checking it out. And for the compliments. Your suggestions make a lot of sense. I've already made the smaller adjustment edits (animation speed, font size, cards height), and will work on another way to communicate skills besides just the bar chart.

Again, I appreciate your consideration :)

 

Thanks, Ali for doing this.
Your portfolio was what got me into doing mine actually!

I'd love any kind of feedback on my portfolio karam-malkon.netlify.com/ you can be cruel, as it's still a WIP.

 

Hey! Awesome. I really like it. The colors, animations, and fonts are great, and it's easy to navigate. I would just hide projects/about until there are a couple things there. I would also add icons to the Contact page! Looks great!

 

Thanks for the feedback!
I totally agree with the icons, will do that!
What sort of things would you suggest to add to the About page?

Oops sorry -- the about page is good -- meant blog/projects!

Oh, that makes sense! No worries.
Have a nice day :)

 

I love this idea and your portfolio site! Mine has been sitting stagnate for a while, and I'd love feedback from anyone. It's viktorkoves.com

I'd love feedback particularly on the homepage. The changing background feels dated at this point, but I'm not sure what I can do instead of it that will still feel interesting. Also, I use overlays a ton for my projects, and I'd love to see if folks think that's fine or I should split it to separate pages.

 

Thank you so much! Yours is super unique! I would maybe have cards that show your photos, gallery, and portfolio instead of changing the background! Your bio gets a little lost right now, I may make it bigger or just emphasize that + navigation on that home page. Your gallery looks great! Super clean, so do your projects, though I may make it so that you don't have to click as much to get all the info on your projects.I would also maybe add images for your blog posts to draw people in! Cool portfolio!

 

Thank you so much for your feedback, I really appreciate it! I hope to take that into consideration when I have some time to get a redesign going.

 

I currently don't have any portfolio and by seeing your thread I am very much interested in making one.
I had thought of making a portfolio previously but I stopped because I am a developer and I haven't designed anything and dont know what to put there
I have worked on 7-8 projects in my two and half years as a Ruby on Rails & Javascript Developer. It was not a freelance job I worked for the companies and they had provided me the oppertunity to work on it. So I get confussed what to put there and how to design things.
Can you advice me on this please.

 

My advice?

Start small. :)

Name 20 nouns, 20 adjectives, 20 verbs that you want to communicate to visitors.

This might give you a hint or two about, color palette, typography and over-all feel & design.

Take a day and look over them. Look at other portfolio sites on this thread! Look for stuff that catches your eye on codepen.io, even! Search for portfolio, for example.


Then for content

Do 4 simple single word menu items.

Home | projects | lessons | CV | contact

Easy-peasy!

Take a screenshot of your 8 projects... (hmm 8 cards 🤔... I see a nice, tidy grid in your future :) ).

Don't get overwhelmed and overdo it. Just keep it simple...

for "lessons" do 5 sentences on smth you learned last week that's been on your mind.

Do one entry a day---Boom~!

CV is a link to a .pdf

&

Contact is what I click on to hire you! :) . --Look at what others you admire have on their "about" section.

Again, don't get overwhelmed & perfectionist about it.

Just do one bit at a time & promise yourself you'll post your progress on DEV.to for example! :)

k... I see I've written a novel.

Good Luck!

 

thanks for the information I will try to make my own by implemnting the advice.

 

Awesome -- here's a post on portfolios, here's one on design! I would maybe just put any personal projects on there!

 

thanks.. i will surely take a look and make my own and again ask you for review if thats okay.

 

Dear All,

This thread is such a great idea.

I have worked on this a great deal & am completion. I would love any feedback on it.

It would be very much appreciated.

beau.haus

-Many thanks,
Beau

 

This is super great, I love the design of it. Agree that it is hard to read on smaller screens. I would also make it so that the links don't move on you! It makes it a little hard to navigate. I might also make the UI for the coded page a little clearer, I was a little confused on how to see everything. I'm not seeing anything on the connect or learning pages as a heads up. Super incredible design!

 

TY Ali!

THANKS so much for the comments! –great advice for the movement of the menu links. It's overkill. 🙄.

I like animations, but perhaps the goal isn't to confuse and frustrate visitors #whoKnew?
:D

Anyway... thanks for this thread.

awesome idea.

 

Oh wow, my instant reaction to that page animating in was that it's great. Even the favicon fits the theme. It's really beautiful but it doesn't work at smaller browser sizes - it quickly becomes too small to read. If your audience was guaranteed to be on a large screen I'd say it's one of the coolest sites I've ever seen.

 

This is one of the nicest things I've read. Thanks so much for the feedback, Ben!

 

I maintain my small blog, where I post my code adventure and my experiences, which I gather at work: My blog. The blog was made with React and GatsbyJS and its hosted on Netlify with a git pipeline behind it to deploy new articles.

 

I was recently considering redoing my current Jekyll portfolio site with a very similar stack, mostly to provide myself with a reason to become more familiar with React.

How has your experience been with it so far?

 

I think the hardest part for me was to start developing. If you are already familiar with React, then learning Gatsby is not that hard at all. But for me, it was the beginning with React. It was pretty confusing to start writing React-specific code... And it still is. :)

 

Cool, this is a little different from a portfolio, but I would make it so the logo and the gradient coordinate. Maybe make the logo purple too? Also, the links on the bottom confused me a little, maybe add icons or spacing!

 

Hey! I love Gatsby! I don't think you need the gradient. I think it looks cleaner all grey! I would also make the links at the bottom clearer. Maybe use icons or add spacing! Cool blog!

 

Great post, I’m loving all the beautiful portfolios of such talented front end and web devs.

I am curious what your thoughts are on portfolios or personal sites of back end or database devs. How do you construct examples of projects that are in the same way visually compelling to describe dev work that is purely back end or unable to be shared because it would be putting company data out on the internet?

 

I think with company work, I would instead just put a description of your job at the company instead of the project. For backend work, I would include descriptions of projects with links and just a minimalist site-- you could even use a template!

 

Good advice... and less work for me to do :)

I like the idea of a simple template, or even just a landing page.

 

Mine is very simple (and needs an update), but I love me a good gradient :D

Wuz

 

I love me a good gradient

Heh, you're not alone there.

The "Final" logo looks bad against it though, so I'd be careful. Maybe you could put the logos against a rectangle with something like padding: 1m; background-color: rgba(0, 0, 0, 0.25);:
links with background

The page title could be something better than "Home - Howdy I'm Wuz." for bookmarking and SEO purposes.

Your site doesn't work at different browser widths - anything under 680px is broken:
breakpoint mountain

Fix those points and it'll get a thumbs-up from me :)

 

Thanks for the note! The Final logo looked better before I updated the gradient, I definitely need to fix that up. Good call on the smaller viewport rendering. I haven't done any sort of SEO optimization on the site - but you are totally right, a better title is a great idea. I need to chunk some time into it and these are all great starting points!

 

I love the gradient! And your logo! Awesome!

I think I like it in a column instead of side by side. I would also add more hierarchy to the text sizes to emphasize different content!

 

Hmm interesting! I like that as well! I'll have to play around with the layout a bit! Thanks for the notes! Text hierarchy is definitely something that could use some work :D

 
 

Great thread! Would love feedback on my portfolio as I am currently breaking into software development. Thanks!

 

Nice job overall! I was looking at the mobile site on Chrome on a Galaxy S8+, large screen. Your portfolio is clean, clear, to the point. Here are a few small things that might help make it better.

  1. I think your link is missing the http://, because it links to a subdomain of dev.to

  2. The social media icons are covered up by the background photo (sorry - my screenshot doesn't seem to want to attach). I'd space them out and give them a background.

  3. I wouldn't say you're "looking to break into" your "first job". It just makes you seem less experienced and more junior than you are. I'd describe what kind of work you do, and what kind of jobs you're looking for, rather than emphasizing that this is your first job. Google "don't say junior developer" for more advice on this.

  4. This is personal preference, but your project cards lead to the GitHub repos. This is great, but are these projects also deployed anywhere? It might be nice to have the live links alongside the code for less technical recruiters or anyone that might want to see your work live.

Again, nice job! Hope this helps :)

 

Thanks Max! All great points -- will loop into the icons and having project cards link to live versions of the site (as well as framing my experience in a more positive light). Appreciate the feedback!

 

Hey! Cool site! I would make it so that the first section takes up 100vh so that you don't see the next section! I would also make the links at the top larger and spaced out so they really draw the eye. I would expand on the "business side of startups" part of your bio-- that will be so helpful for companies, sell that! I would lessen the shadow on the cards, and maybe make them bigger! I would also add your social icons to the footer. Nice portfolio!

 

Thanks so much! Appreciate the feedback -- will incorporate shortly!

 

Thanks for doing this Ali! Just recently started following you and doing the code challenges you post. Great way to start my morning! As a newer dev, I'd love any feedback you or anyone else has! Thanks in advance. Mrjaketomlinson.com. :)

 

Hey! For sure. It looks very professional and clean. I had some performance issues where it was taking a while to load the first time. I'm not sure if that was my network or not, but I would run a lighthouse test on it and see if you can optimize for performance there! It looks really clean and professional. I may up the contrast on the navbar to make it a little easier to read! I wouldn't justify the about text, it can make it a little harder to read. The cards are great, they show off the projects and get you to look at them. I think the skills section is great too. I may add a little spacing to the contact section and add another resume link on the page, think it gets a little lost. Great portfolio!

 

I think the performance issue might be a result of me hosting the site on Heroku. The free version stops the server after 30 minutes of inactivity and the server has to spool back up when someone requests the URL. Do you have a preferred host?

Thanks for taking the time to look it over!

Oh! Okay yep, that would do it. I use Netlify or GH pages for static sites.

 

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.

 

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!

 

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

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!

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

 

What do people think about using the common portfolio templates that are out there?
I had to pull together a quick portfolio for a deadline and used the grayscale bootstrap portfolio template linked below, (yes I haven't changed the url yet since my regular github.io page is linked to a side project).
As a developer I am inclined to say that it is ok to use a template since I am focusing more on my projects and code than I am on a ux/ui or designer experience.
Thoughts?

mmunier44.github.io/mmunier-portfo...

 

I think this looks unique enough that you can't immediately tell it's a template! I personally steer away from them because a portfolio is really where you can show off your skills without any constraints. Also depends on the type of dev you are. If you do Linux mostly, maybe writing a site isn't the most important, but if you are a frontend dev, I would lean towards writing it myself.

 
 

Hi Ali,

I'm game developer and I'm bit confused on how to represent myself on my portfolio.

All texts went through many friends and revisions, so actually they're not mine. Mine sucked to be honest (after comparing it to the revisions of others).

May i ask you if you would be that kind and have a look?

Thanks in advance.

 

Hey! Cool site, I think the descriptions are great. I would make sure they're easy to read, though I would make the font white on the dark background, and maybe make it a little larger. I am not sure if the top image is saying much about you -- I don't think you need it! Maybe just have your name and something about you. Or make your about a little bigger! I would also either make the contrast between sections a little stronger (so some sections darker some lighter) or just make them all a dark grey. The black, dark grey, and dark red are so similar that it doesn't add much. I think it gets the information across really well though! Just make it easier to read!

 

Ah, thank you for your feedback!

Interesting, the contrast would be the last thing I would consider as something that should be changed.

Unfortunately, the site is made through system equivalent to wix.com, so I can't edit the colours. While ago I was "porting" the theme to my custom site. But that is still work in progress.

And you're right about the Jumbotron image, it's big and useless. I think I should spin the design a bit.

I honestly thank you, mainly for the opportunity you gave to devs to have feedback. I hope this will be in the top 7 posts of the week. Have a nice evening.

Chriss.

That's tough! I would maybe use a HTML/CSS template and upload to GitHub pages?

Hmm, sounds easy enough, but my experience were bit different :(

Thanks for the tip

 

I have personal Tech Blog maintained at adityasridhar.com. Would be really happy to get your feedback on this :)

 

I like the fade in for the images! I would make the tags on them easier to read, and I'm not sure if you need the header image on the page! I also may do a big image for your latest post so it is super emphasized. I like it!

 

Thank you for the feedback :)

Will make those changes.

Also is it necessary to have a separate portfolio and blog site?. Or is it fine to have them both in the same site.

Totally up to you and what you're trying to do! My portfolio is mainly for speaking and media engagement at this point, so that's why I have one.

Thanks for the response. Will think about this. For now planning to have them in the same site

 

I think you should re-create your logo image because it looks like it's a little fuzzy compared to the sharp text in the rest of the header.

The tiles have categories overlaid as pill-buttons, but they're inconsistent in their order ("programming" is before "web development" on one and the next is the other way around) which makes it a little harder to scan. They're also difficult to read against the lighter parts of the background pictures.

If you added a little margin under the header or some padding around the logo then I think it would look better at smaller breakpoints. At the moment it's a little cramped:

cramped logo

 

Thank you for the feedback. Will definitely make these changes :)

 

This is an awesome and very inspiring (you are all so creative!) thread! I would also love some feedback, here's my portfolio. And, for context—I'm a student looking for internships. Thanks in advance!

 

Hey Marissa! This is super cool, I love the simplicity -- and the Dev.to link! I would make the font sizes in the nav bar a little larger so that people really see them. I would also add some caption below your name to differentiate yourself i.e. "Computer Science Student and Astrophysics Reader" or something along those lines. The quote will overlap the projects headers on some smaller screens. That quote looks a little off balance to me -- maybe make the rectangle a little smaller? I would also use a lighter brown so that it's easier to read the text! I would make your bio text larger too! It's also a little hard to read the captions on your project tiles, I would make the font larger and maybe darken the brown. I would add the social links to your header, and make that available throughout the whole scroll for easy navigation. I may also do a fade in instead of the circular animation for the brown on the social links. I really like how simple and elegant the site is!

 

I love the idea of adding social links to the header, will definitely implement that change along with the other ones you mentioned. Thank you so much for taking the time to not only look at my portfolio but also give meaningful feedback and ideas, I really appreciate it Ali!

 

It's simple and it gives all the information it needs.

I don't like the splash page - making text jump around is bad from an accessibility point of view and I feel the page serves no real purpose. And why do I click a down arrow to get the site to slide in from the side? I spent a minute using the keyboard and scroll wheel to no avail before clicking the link.

The three big circles are also an example of mystery meat navigation which reduces the overall UX of the site.

I think it would be improved if you removed the splash page, made those links clearer and possibly if you increased the line-height on your left-hand-side text (the bit starting with "Front-end developer...")

You use a lot of font variations and play with text and that's not to my taste; I wouldn't do that on a website for a client but I don't want to say change it on a personal site - it's just your expression. I like the way the text on the right hand side deliberately overflows its background.

 

Awesome advice. Thank you so much for taking the time to check it out!

 

Hello! Front-end dev trying to get a junior or entry position. I just spent a lot of time redoing my portfolio site and would LOVE feedback that might help me get my foot in the door.

gloriacho.com

Thank you!

 

Hey! I love the picture, so many great colors! I would try to use more of those in your site. I would also try to get all of the information above the fold, so that people don't have to scroll, they can just click from section to section! I would also use a very dark grey instead of the black, so that the white text bounces less. I would also use dark grey text on the lavender, the white is a little tricky to read! I would increase the size of your text on your bio so that it's easy to read. I would also put the bio next to the image so that everything fits above the fold! I would add some space so that there isn't the white space on your 'work' page on smaller screens.

 

Loving this discussion! I'd really appreciate some feedback on my portfolio from y'all :)

 

Awesome! Few notes on improving it.

  • When you click "About", the text reformats itself and adjusts its font size to the page. Could you change this to seamlessly load the text?
  • The icons have a cool hover animation but snap back to their default when the cursor is moved off of them. Could you add a hover off animation? This StackOverflow post may be of some help.
  • You have a lot of projects (awesome!), but I would pick your top three and have those on your page -- you want to show off your best!

Hope this helps! Let me know if you have any questions.

 
 

I like the simplicity of your site!

  • I actually prefer the navy theme. I would just use that!

  • I would add text spacing and sizing so it takes up all the whitespace on the landing view.

  • I would make the projects into cards so that you can see more at once and don't have to scroll as much!

  • I think the picture under contact is a little confusing to me, maybe put that in the about? Also, add in your GH/LinkedIn links in that section too to make them easier to get to!

Awesome site!

 

Thanks, Ali! This is really helpful. I've heard a few people like the dark mode better; so I'll probably switch to that. Just so I know, were you looking at the site on mobile or desktop?

 

Hey 👋Ali, great discussion and very timely too. Do you mind checking out mine? Do I get bonus points for the DEV badge 😃

lawyerscode.co.uk

 

Awesome! I love purple, and your domain is 🔥. I would add more margin to the left and right of your home page on large screens, just to add more balance. I would also increase the size of your icons just a smidge. Definitely bonus points on the DEV icon!

I would also make the nav an actual navbar on large screens, so that the user only has to click once to get to another page instead of twice, though the hamburger does look great! The pages look good too! I would use a dark grey instead of black on the projects page, just black on white can be hard to read!

Looks awesome!

 

Thanks so much! Double thanks for the quick turnaround. Great feedback to work on 👍🏽

 

Ok so here goes 😉😅
My Portfolio Page
I haven't worked on it in a little bit. I should probably update the project links 😉

 

Cape Cod is one of my favorite places on earth -- I love that you highlight it on your site.

I would steer away from the background image and keep it simple. As you say in your profile "Simplistic Web Design for a complicated world." I think that the multiple layers of images are more distracting than highlighting for your skills!

I would make the site either all about you, or all about Cape Cod World's brand! If you stick with the Cape Cod World, I would move your bio to a later section!

Your cards look great! I would remove the text shadow from the links, it makes them harder to read! I would center the contact form.

The animation is super fun, and the footer is great -- it gives the relevant info that the person needs to continue further on your site.

I would also add more about you and your background!

 

Thanks so much 😁👏👏 for the great advice 🤩
Yes I was actually thinking about removing the main background image too. Can't wait to play around with it some more

 

I'd love any feedback on my new simple portfolio at tobiashaugen.se/ Thank you!

 

I love how minimalistic this is! Looks great, very clean and simple. My one tweak would be the header font -- it's kind of hard for me to read for some reason -- I may try Playfair? It has a similar aesthetic but is a little easier to read!

 

Thank you! I'll check out Playfair and play around a bit more with the fonts to increase readability.

 

Hi there! I would love some feedback for my personal website. It's more of an informal CV than a portfolio right now as I'm currently working on building one up (my current project is a Yu-Gi-Oh! LP calculator). I think my main concern about it is its content. Not really sure if it's alright. Thank you in advance for any feedback given!

 

Hey! This is really cool!

  • The color change wasn't working for me on Chrome. It was yellow -> yellow -> blue without multicolor!

  • I love the font -- I just used that for a graphic design project I did.

  • I think the content is good, but I would make your font sizes larger and add more line-height. You could also maybe add more paragraphs to make it more skim-able.

  • I would do experience (if it's code related) above education, because that tends to be weighted more by employers.

Cool, unique site!

 

Hi Ali, thank you so much for your feedback! I really appreciate that you've taken time to check it out. In response to your feedback:

  • The color change wasn't working for me on Chrome. It was yellow -> yellow -> blue without multicolor!

Ah so that's actually correct if you just look at the landing section. The landing is yellow in both the multicolour and yellow theme. By "Multiple Colours Theme" I meant each section is a different colour, "Yellow Theme" all sections are yellow and then "Blue Theme" all sections are blue. Nevertheless, it's a good thing you mentioned it as it means I should make it clearer to the user what should be expected.

  • I love the font -- I just used that for a graphic design project I did.

I actually found it used on a ukulele tutorial website I use called Ukulele Go! and fell in love with it from there.

  • I think the content is good, but I would make your font sizes larger and add more line-height. You could also maybe add more paragraphs to make it more skim-able.

  • I would do experience (if it's code related) above education, because that tends to be weighted more by employers.

I'll definitely act on these points.

Cheers Ali!

 

I'm late to the party but I'd love to get some feedback on mine. :)

josiahschaefer.com

 

I love the theme of this! The octopus is adorable, and the site looks great. I may re-order your portfolio section, I would move the Wordpress sites to the top, since those are professional projects, unless you're trying to transition to working with the other technologies more. You have so much on there, that I may just add a link to your codepen instead of keeping the projects there. I also may add another way to contact you outside of the form. I really like it!

 
Classic DEV Post from May 2

The Art of Programming

One of the most consolidated misconceptions about programming, since the early days, is the idea that such activity is purely technical, completely exact in nature, like Math and Physics. Computation is exact, but programming is not.

Ali Spittel profile image
Passionate about education, Python, JavaScript, and code art.