DEV Community

loading...

Finished My Portfolio Site

steelvoltage profile image Brian Barbour ãƒŧ1 min read

https://bbarbour.dev

So, I finished my portfolio site. I am pretty excited, and looking for some constructive feedback. I know it's not perfect and that I have a long way to go before I'm a top-notch Front End Developer. Still, I'm happy with how it turned out.

Also does anyone have tips on using your portfolio as a tool to help you get a job? Is there a best practice to point recruiters/potential employers to it?

I'm just wondering now that I have a portfolio, how I should best use it.

Discussion (20)

pic
Editor guide
Collapse
coderfoundry profile image
CoderFoundry

Good job on your portfolio site! You avoided two problems we often see - over-design, and old content. So good on you for having a simple, pro look and up-to-date blog.

Bobby Davis made a video on how to create and show a coding project to win a job.

Hope it helps you!

Collapse
flrnd profile image
Florian Rand • Edited

IMHO you did a great job in general Brian. The only thing I see a bit off is the resume section. That embedded frame is weird, and for some reason I had a flash back to the 90's and java applets. I'd change that section for something more personal, present yourself and let people know you. And a simple link for your resume is enough in my opinion.

That's the only thing it comes to mind to add something useful, like I said, it's pretty cool already.

EDIT: Few more things! From a UX point of view, make the screens captures or the whole card clickable, you don't want your users wandering their mouse around looking for where the hell do they have to click! That, or make more obvious what parts of your web implies action. Never take for granted that it's obvious. Check material.io/design/components/butt... A lot better explained than myself.

Another thing is to avoid redundancy. You have the project title link and a live site link pointing to the same place. Why two links pointing to the same place with different formats? Just choose one and make it very clear that those are actionable places in your web.

I hope it helps!

Collapse
steelvoltage profile image
Brian Barbour Author • Edited

Florian, thank you SO SO much for your suggestions.

I actually implemented both of them in my latest build. Resume now is a link that opens in a new tab and the project cards now have action buttons to make it obvious for users.

Collapse
flrnd profile image
Florian Rand

Wow that was really fast! One last thing I'd probably keep both bottons toggether, but I'm a bit obssesed with little details (old graphic design habits).

All in all, pretty good job! 👏

Thread Thread
steelvoltage profile image
Brian Barbour Author

I'm still training my eye for the design parts of Front End Development. So, this is super helpful.

Collapse
zcdunn profile image
Zack Dunn

Hey, congrats on this milestone! Now that you're happy with where your site is at, maybe look into adding some IndieWeb features. You could add things like microformats and webmentions so you could use your site as your home on the internet and communicate with other indiewebbers

Collapse
mpboom profile image
Mark Boom

Wow, that looks great! Only thing I'd update would be the resume page: I personally don't really like the default border and think the resume is quite small. But that is just a minor thing - great work!

Collapse
chiangs profile image
Stephen E. Chiang

Congrats on being "done"... But we all know... It's never really done. ðŸĪŠ

Collapse
mattdevio profile image
Matt G

Looks good! It's a clean design and content is easy to find. If I was you, I would limit the infinite horizontal scaling; it looks weird on large displays. Also the social icons look a little cramped. Other then that, GREAT!

Collapse
steelvoltage profile image
Brian Barbour Author

Can you elaborate on the scaling thing?

Collapse
mattdevio profile image
Matt G

I think the page needs a wrapper. Where the max width is like 1200px. Right now, the page continues to scale as you expand the viewport.

Thread Thread
steelvoltage profile image
Brian Barbour Author • Edited

That's so weird because there is a wrapper set to 100vw.

EDIT: It was my animation on the image. After I turned that off its fine and doesn't move the viewport.

Collapse
zsociety profile image
f@society

Hi Brian,
Good beginning, If I were you I would make my code more clean and readable.
It'll be good if you'll separate style and script in different files or even folders.
Also, I'd use more styles and effects like :hover :transition and so..

P.S. Keep it up and do more experiments.

Collapse
steelvoltage profile image
Brian Barbour Author

Oh it is in my repo. But, I used Gatsby, which generates a static site at build time.

Collapse
desi profile image
Desi

I really like this a lot! I don't have any technical feedback but I really like how you've done your project examples - I've been trying to think of a good way to lay mine out, and yours is really nicely done.

Collapse
steelvoltage profile image
Brian Barbour Author

They are React components, so if you want them let me know and I can give you the code! :)

Collapse
tsimpson profile image
Travis Simpson

This is really cool and clean! Definitely an inspiration in design and aesthetics I shall reference when redesigning my portfolio site, that is right now just a landing page :D

Collapse
terabytetiger profile image
Tyler V. (he/him)

This looks AWESOME - Great job!

Interested to hear what others have to say about using it as a tool!

Collapse
ballen2713 profile image
Bartholomew Allen

Hey man just wanted to let you know your site looks awesome! I love the simple design yet unique twist to it! Awesome job!

Collapse
shernz profile image
Shernz

Amazing!!!