loading...

Show Me Your Portfolio!

awwsmm profile image Andrew (he/him) ・1 min read

I'm looking for inspiration for redesigning my website! Currently it just mimics my CV / résumé (and is actually out of date since my last job search about two years ago).

Show me your portfolio to get my creative juices flowing!

Discussion

pic
Editor guide
Collapse
mazentouati profile image
Mazen Touati

Here it is mazentouati.github.io, I think of a complete redesign myself I'm not satisfied anymore with the current design.
and this is a Redesign case study I wrote previously.

Collapse
awwsmm profile image
Andrew (he/him) Author

I love the BSOD at the bottom of the page. Not sure how I feel about the "one big scrolling page" layout, though (but that's just personal taste).

I feel like there are definitely some Dev.To influences on your new page design.

I like the "overview" of skills, plus the résumé for a more in-depth look. I might use that on my new site.

Thanks for sharing!

Collapse
mazentouati profile image
Mazen Touati

Yeah indeed, that long scrolling is bugging me too. As I mentioned I'm thinking about a redesign most likely I'll implement an SPA solution with a neater UI to highlight more my front-end skills ( Maybe SVG, Web-Gl, 3d stuff ) I did not made my mind yet as I'm quite busy currently, but I'm very excited about this idea of redesign.

Thread Thread
awwsmm profile image
Andrew (he/him) Author

You'll have to make another blog post about it on Dev!

Thread Thread
mazentouati profile image
Mazen Touati

Well, actually I'm hesitating about another post. I think it'll become kinda childish and self-promotion spam. I've already made two posts. I'll see about it, 🦄🦄

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
drozerah profile image
Drozerah

Salut,

Simple question, j'aimerais connaitre la formule que tu utilises pour présenter tes compétences sous forme de pourcentages ??? Est-ce subjectif ou objectif, voire performatif (donner à penser que...) ?

Merci pour ta réponse ;)

Collapse
Sloan, the sloth mascot
Comment deleted
drozerah profile image
Drozerah

Salut :)

Merci pour ta réponse, ce post donne suite à notre échange => Don’t use progress bars in your CV

Collapse
awwsmm profile image
Andrew (he/him) Author

J'aime ton site, mais je pense que ca serait une bonne idée de le traduire en anglais. Malheureusement, l'anglais est la lingua franca du monde. (Ou, au moins, permets l'utilisateur choisir le langue.)

Aussi, tu aimes l'astronomie? As-tu un télescope?

Collapse
awwsmm profile image
Andrew (he/him) Author

(J'enseigne l'astronomie pour une université américaine!)

Thread Thread
Sloan, the sloth mascot
Comment deleted
awwsmm profile image
Andrew (he/him) Author

Bien, j'espère que tu continues à étudier l'astronomie! J'ai deux recommendations:

Stellarium

C'est une app planetarium, que tu peux utiliser pour trouver les étoiles et les planètes dans le ciel

The Cosmic Perspective

C'est le livre que j'utilise quand j'enseigne ma classe astronomie. Ce n'est pas cher mais très bon

:)

Collapse
berniwittmann profile image
Bernhard Wittmann

I'd love to hear your thoughts on mine: bernhardwittmann.com

Collapse
awwsmm profile image
Andrew (he/him) Author

Hi Bernhard,

Right away, I can tell where the navigation is, though it's not immediately obvious that the links below your picture are external links. (What's "Xing"? Is your blog hosted on your website or somewhere else?)

Definitely wasn't expecting the top navigation to take me down a scrolling page. To get back to the top, I have to manually scroll all the way back up. Maybe have a floating menu somewhere? Or a "back to top" link?

The "Contact" page is what I was expecting the other top navigation links to do -- take me to a separate page. Not a good or a bad thing, just not what I was expecting.

Englisch ist nicht dein erste Sprache, oder? There are some small grammatical errors in your bio:

I started Coding with 13

should be

I started coding at age thirteen or I've been coding since I was thirteen years old

Your "Skills" logos look a bit blurry:


Other than that, great site! I'm not sure I'm a fan of the scrolling layout but that's a matter of personal taste. Note that I viewed your site in my browser (Chrome) only, and on desktop. It might look different on mobile.

Collapse
berniwittmann profile image
Bernhard Wittmann

Hi Andrew,

thanks for your feedback, those are all good points and I'll definitely look into them :)

PS: Xing is a german version of LinkedIn and somehow more common here

Collapse
sethusenthil profile image
Sethu Senthil

If you are using fa icons it's probably caused by your custom CSS font styles

Thread Thread
berniwittmann profile image
Bernhard Wittmann

Yes indeed, the font-weight was accidentally set to bold, but I did already fix it ;)

Collapse
avatarkaleb profile image
Kaleb M

My site is kalebmckelvey.com - good luck with your new portfolio design !

Collapse
awwsmm profile image
Andrew (he/him) Author

This is interesting! Did you use anything to build this? It has a Wordpress-ey feel to it.

Lots of personal finance-related things here. Is that a passion of yours?

Collapse
avatarkaleb profile image
Kaleb M

It is using React MD which is a react/sass material design library.

Personal finance is for sure a hobby/passion!!

Collapse
sm0ke profile image
Sm0ke

AppSeed.us - Built-in Php / BS4. But now I'm a huge Gatsby fan and is quite possible to migrate to React/Gatsby with a simple backend API for authentication & billing.

Appeed Homepage

Cheers!

Collapse
awwsmm profile image
Andrew (he/him) Author

Wow! Looks great! This looks very professional!

I don't mind the scrolling on this page (see my other comments here), I think because the sections are relevant to the page header. I think the thing I dislike about the other scrolling pages is that different kinds of material are held on the same page. This layout might be something I could look into for my personal site.

Thanks for sharing!

Collapse
sm0ke profile image
Sm0ke

Thank you!

Collapse
israelmuca profile image
Israel Muñoz

I recently redid mine
It's more focused on the blogging side, not so much portfolio (will change that soon though).

It's a static Nuxt site hosted on Netlify with Netlify CMS for the blog.

Collapse
awwsmm profile image
Andrew (he/him) Author

It looks like markdown is interpreting your link relative to my page, it's taking me to

https://dev.to/awwsmm/israelmuca.dev

But your website looks good! Very clean and minimalist. I like that style.

I see you have a link to angel.co... have you had any luck with them? I tried it a few years ago but it seemed like a ghost town. Maybe there's more going on there now

Collapse
israelmuca profile image
Israel Muñoz

oops, fixed it, it was missing '//' in the URL!

And thank you, my wife did the design, she's a UX/UI designer! I just did the coding.

Regarding angel.co, to be honest, I've had no contact from employers, but I haven't contacted them myself either.
I'm currently working on my own projects for a while. We'll be launching a SaaS in a few months, so I don't think I'll start looking for a job until August or September, so we'll see.

But I did find an interesting company there, which I will contact once I start my job hunting!
It does seem active though, so if you're searching, I'd definitely recommend checking them out!
It's more startups than anything else though!

Collapse
raisaugat profile image
Saugat Rai

This is my portfolio. raisaugat.com.np
It's just in a starting phase. I have not been able to finish this. But I guess it's minimal for me.

Collapse
awwsmm profile image
Andrew (he/him) Author

Very minimalist! Maybe less is better when it comes to these things. We usually have code on GitHub, GitLab, articles on Dev, etc. Maybe a personal site should just redirect to those other pages?

Collapse
raisaugat profile image
Saugat Rai

Yeah. When you have all the projects on Github, Gitlabs you can go minimal. But sometime when the project you have done are live with their own domain, we can showcase them. But I like the concept of minimal, 'just the right content'. :)

Collapse
shindesharad71 profile image
SHARAD SHINDE

Hi...! Here is mine - sharadshinde.in

Collapse
awwsmm profile image
Andrew (he/him) Author

I like the bit of texture that the graphical background adds. It's not just a single flat color.

Also, getting certificates on Udemy is a good idea. I should check that out. Pluralsight is another good certification-type website.

I like the logos for the skills, but other people tend to rank how much "confidence" they have in a certain skill. Say on a 0-100% scale. What do you think of that?

Collapse
shindesharad71 profile image
SHARAD SHINDE

Thank you for the review.

  1. About the skill ranking, I read many posts that do not add scale cause it depends on the pov of user. If I add 80% to HTML5 then it's like, ohh so you know almost all of the html5? And if I add it like 20-30% then its like, nahhh that guy don't know very much. So I avoided the rank thing.

  2. About the certification, I live in India, as per Indian economy the courses on puralsight are more expensive than Udemy.

PS: my portfolio is PWA compatible. It works without internet once you add it to your phone!

Collapse
sethusenthil profile image
Sethu Senthil

What do you think about mine? sethusenthil.com

Collapse
awwsmm profile image
Andrew (he/him) Author

I like it! The color scheme at the top feels very Googley.

Are you only 15 years old? This is a seriously impressive website for a teenager. You've got a great career ahead of you, for sure.

Small suggestions: I don't like how the section headers are continually shuffling. Could you have them shuffle once when they first appear and then stay static? And whenever I select any text, there's a popup to share on Twitter or Facebook, which I think is a bit overkill for a personal website.

There seems to be a small spacing issue with your skills lists:

Really, though, this is a beautiful website. I'm jealous. You've done a fantastic job.

Collapse
sethusenthil profile image
Sethu Senthil

Thanks! That text shuffling idea is great! Probably using the intersection observer API it can be done. I think the Google icon to search the selection is most likely more useful unlike the current implementation. The default spacing is a bit too much, I should will look into that. Anyway, thanks for your feedback! Appreciate it!

Collapse
iam_timsmith profile image
Tim Smith

I like it a lot. On mobile I’m seeing some horizontal scrolling because of the circles at the top. Adding overflow: hidden should help fix that.

Collapse
sethusenthil profile image
Sethu Senthil

Wouldn't that disable scrolling altogether?

Thread Thread
iam_timsmith profile image
Tim Smith

It would depend on where you put it. I just meant on the container that held the circles. You could do overflow-x:hidden on the body though which would only affect horizontal scrolling.

Thread Thread
sethusenthil profile image
Sethu Senthil

When I do so, the animate.css doesn't work as intended :(

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
awwsmm profile image
Andrew (he/him) Author

Ooh, I thought it was broken when I opened the link and saw this:

(Image removed.)

It's not obvious that you need to click on the things on the right-hand side. The menu is a bit "jumpy", too. Every time I click on something on the right, I become disoriented. I'm also confused as to why your bandcamp stuff is on your portfolio site... maybe a different web site for that? Or a subdomain?

I saw your résumé, too. Is "southeast PA" code for Philly? ;-)

Collapse
awwsmm profile image
Andrew (he/him) Author

Anyway, I didn't mean to be overly critical. It's definitely better than my site, and really different than most portfolios. Standing out is a good thing when lots of people are competing for attention.

Collapse
iam_timsmith profile image
Collapse
awwsmm profile image
Andrew (he/him) Author

Looks good! I like the typeface on your name in the header... what font is that? It feels newspaper-ey.

Can I ask how you make those code snippets in your blog posts? Like this:

(I think everyone knows how to do this but me.)

Collapse
iam_timsmith profile image
Tim Smith

I make them here. You can play with the settings to make it look how you want.

Thread Thread
awwsmm profile image
Andrew (he/him) Author

I really like this. Thanks for the info!

Thread Thread
iam_timsmith profile image
Tim Smith

No problem!

Collapse
iam_timsmith profile image
Tim Smith

Also the fonts are Playfair Display and Raleway (both google fonts)

Collapse
misnina profile image
Nina

I feel like mine is a little odd as it's not like a lot of these (full page scrolling image things). I tried to make it as much as an actual resume and as brief as possible, but with project links on it. misnina.github.io/web-dev-nina/

Collapse
awwsmm profile image
Andrew (he/him) Author

I do get that impression, for sure. That's what I did with my website, though I went to the extreme and made it look exactly like my CV.

I'm not sure how I feel about that approach now, though. If someone wants to go in depth and look at your résumé / CV, they'll do that. I'm now leaning toward keeping the website as brief as possible. Give an overview of the big themes and let the user dig deeper if they choose to.

What do you think?

Collapse
greenroommate profile image
Haris Secic

Ph.D looking for dark matter and good CV in software. This brings up some ego issues in me asking myself am I good enough for this industry :D. Anyway if I showed you mine CV the only flowing you would feel would be to throw up :D

Collapse
awwsmm profile image
Andrew (he/him) Author

I have no idea what I'm doing so you're as well-off as I am! 😂

Collapse
wilfrantz profile image
🇭🇹 DEDE

Hello Andrew,

I am still developing my website, I am happy you ask for inputs from others here, it benefits me in some ways. 😉

Collapse
david_j_eddy profile image
David J Eddy

blog.davidjeddy.com - simple, effective, to the point; splash of color.

Collapse
awwsmm profile image
Andrew (he/him) Author

What is involved in getting those AWS certifications? Are they expensive?

I like the "link library"; it's like a modern take on old "links" pages.

Did you build Viking Cruises' website? Or Sony's? Because your portfolio gives that impression.

Also is your CV available to download as a PDF? I can only find the HTML version.

Collapse
koenca profile image
Collapse
awwsmm profile image
Andrew (he/him) Author

Slick! Minimalist is the way to go, I think. Nobody reads big paragraphs of text on the Internet.

Collapse
jbeachy21 profile image
Jasper Beachy

Here's mine. I'm currently in a coding bootcamp and I actually used Foundation for this one. I'm more of a back end person I think but I do want to make it a little more snazzy if anyone has thoughts on how I could do that, I'd sure appreciate it.
jbeachy21.github.io/FoundationPort...

Collapse
robotsquidward profile image
A.J. Kueterman

My personal site is ajkueterman.com. Built with Jekyll and GitHub Pages. I'm always wanting to blow it up and change it completely but for now it does the job. Any suggestions would be cool :)

Collapse
chrisrhymes profile image
C.S. Rhymes

Why not, here you go csrhymes.com

Collapse
awwsmm profile image
Andrew (he/him) Author

I like it! I think your site is a good example of how you can showcase diverse interests on your personal site without them clashing.

You have a link to buy your books on Amazon.co.uk but I get an error saying they're only available in Kindle editions, and only on Amazon US

:(

Collapse
chrisrhymes profile image
C.S. Rhymes

Thanks for the feedback!

Yeah, you can only buy the kindle versions. I never got round to formatting the print versions. Not sure why it’s directing you to the US site though.

Collapse
healeycodes profile image
Andrew Healey

I like simple things 😁
healeycodes.com/

Collapse
awwsmm profile image
Andrew (he/him) Author

Highlighting your strong skills is a tactic I've seen before. I once saw a CV where they were bold instead of highlighted. Maybe that would look better on your page? (Rather than having those rectangular highlighted colored areas, which I don't see echoed anywhere else on the page.)

Your portfolio is really impressive. You have lots of projects that look very professional. I would say the average person probably wouldn't click past the description and a few images, so I think the way you have it laid out is good.

Also, having a menu item called /uses inspires me to lay out my whole site like that:

/home     /portfolio     /CV     /...

...or is that too corny?

Collapse
healeycodes profile image
Andrew Healey

Thanks for the feedback, Andrew!

The /uses/ page is one of those semi-standards of personal sites. See here. I believe there’s also /now/ for what you’re currently up to in life 👍

Thread Thread
awwsmm profile image
Andrew (he/him) Author

Good to know! Thanks for the link, Andrew! (Good name!)

Collapse
nektro profile image
Collapse
awwsmm profile image
Andrew (he/him) Author

Nice! How do you get the "total lines" badges for your GitHub repos?

Collapse
nektro profile image
Meghan (she/her)

I embed an image with the link of the GitHub repo https://tokei.rs/b1/github/nektro/andesite

Collapse
iam_timsmith profile image
Tim Smith

I’m seeing horizontal scrolling on mobile. It looks like it’s because of badges not wrapping properly. Other than that it looks good! I like the dark theme.

Collapse
mjraadi profile image
Collapse
awwsmm profile image
Andrew (he/him) Author

Looks good! Very professional.

What's that at the bottom: "Theme Designed By Creative Tim." Is this a Wordpress site or something? Oh, it's a Bootstrap theme.

I like the big banner at the top, though, with the info underneath. A lot of people use banner images only. I might lean toward that kind of design.

Collapse
mjraadi profile image
Mohammadjavad Raadi

Thank you. I'm glad you liked it.
Basically I'm trying to implement everything I learn about react.js in my portfolio website.
It's actually not a theme but a react UI kit developed by the good people at Creative Tim with Material UI.

Collapse
wobsoriano profile image
Robert

Here's mine robsoriano.com. Still a work in progress.

Also, it's open source github.com/sorxrob/portfolio

Collapse
berslucas profile image
Lucas Bersier

here is mine. always changing things lucasbersier.com/

Collapse
awwsmm profile image
Andrew (he/him) Author

I like how this one encourages interactivity. You naturally move your mouse over the words on the page and the expanding circle encourages you to click. I wonder what the experience is like on mobile, though? That's one thing I worry about with my designs... that hovering isn't a thing on mobile.

Collapse
guylivni profile image
Guy Livni

Here's mine hope it helps, you can also see the code in GitHub:
guylivni.github.io/

Collapse
kevinmerisanu profile image