DEV Community

loading...

What does a dev's personal website need to include?

Kathryn Grayson Nanz
Designer turned Front End Engineer
・1 min read

I have a background in graphic design, but have semi-recently (over the past ~3 years) career shifted to a point where my current title is Front-end Dev & UI Designer.

However, my personal website hasn't quite caught up with that change - funny how it doesn't update itself, right? It's long overdue for an update and I really want it to reflect my current skillset. I'm not looking to job hunt at the moment (if that affects your recommendations), but I do use my site a fair bit for networking and occasional freelance work. In the past, I used my site as a digital portfolio of stuff I designed + screenshots / gifs of static sites I coded on my own. However, now I'm doing web app development in React, building and maintaining a component library, sharing a codebase with a team of other devs, etc. - basically, not stuff I can screenshot and put in a gallery-view portfolio the same way I used to.

I've done a bit of poking around on other folks' sites, but I'm curious: what content do you think is important to include on a front-end dev's personal site, and how do you present / communicate the work you've done?

Discussion (35)

Collapse
ben profile image
Ben Halpern
  • It should load quickly. Render static from a CDN.
  • It should get to the point. Describe your skills and interests.
  • It should link to things you’ve written.
  • It should link to your profiles: GitHub, DEV, etc.
  • It shouldn’t be overly fancy, or generic. Make it unique but understated if possible. Going to flashy can really be a bad idea in web design.
  • It probably shouldn’t look like this
Collapse
rhymes profile image
rhymes

HHAHAAHAH I was actually going to comment "nothing like Ben's, unless you're Ben" :D

Collapse
jckuhl profile image
Jonathan Kuhl

The fact that that website plays music when you scroll is the greatest and yet most terrible thing ever.

Collapse
ivolimmen profile image
Ivo Limmen • Edited

I just got a call from 1990; they want their website back...

Collapse
sfwritermdk profile image
Marvin Kirkland

Nice Rick and Morty reference?

Thread Thread
ivolimmen profile image
Ivo Limmen

No, never watched Rick and Morty.

Thread Thread
sfwritermdk profile image
Marvin Kirkland

okay. One of the characters uses a similar line. I thought perhaps you were referencing the show

Collapse
helenanders26 profile image
Helen Anderson

This is right on. ;)

Collapse
ronsoak profile image
ronsoak

This is a masterpiece

Collapse
detunized profile image
Dmitry Yakimenko

Is http:// also part of the statement?

Collapse
ben profile image
Ben Halpern

That’s a matter of having not updated this in years. I’ll get that updated soon, I swear!

Thread Thread
detunized profile image
Dmitry Yakimenko

I think in this particular case it works in your favor. Subtle and completes the picture =)

Thread Thread
ben profile image
Ben Halpern

😄

Collapse
skittishsloth profile image
Matthew Cory

That site is awesome.

Collapse
kristophesankar profile image
Kristophe Sankar

You're Tearing Me Apart, Lisa!

Collapse
squarepluto profile image
sam

The site is amazing and I added it to my favorite sites list

Collapse
sudiukil profile image
Quentin Sonrel

Plot twist: your website was actually an example of what not to do all along.

Collapse
programazing profile image
Christopher C. Johnson

Rawhide 🤣

Collapse
naijadeveloper profile image
naijadeveloper

lool, it should definitely not look like that😄

Collapse
capsule profile image
Thibaut Allender

Explain what you achieved and what value you added to the businesses you worked for.

Github etc Profiles doesn't really matter up front, unless you contribute massively to open source projects or created a major open source app yourself.

It needs to be fast, responsive and accessible.
Should pass W3C validation and Lighthouse speed tests.

If you put a (C) year somewhere, make it dynamic so it doesn't show you haven't updated your website for 3 years (pun intended ;-))

Collapse
skittishsloth profile image
Matthew Cory

If it's a "personal" site and you're not trying to market yourself for a job, I'd say put whatever you want, don't worry about doing anything special with it. Put cat pictures and memes - put Ben's site to shame if you want. Have a separate site strictly for professional stuff like portfolio work. Make that one impressive (and nothing like Ben's).

Collapse
steveblue profile image
Steve Belovarich • Edited

Screenshots are not needed. Reduce down what you want to say to a simple headline and short statement about the project. Only include the React logo and a description of what you do with React i.e. I lead a team of engineers that work on React app company uses to market thier products. Minimal is key. Nobody has time to read about the full breath and scope of your work. Keep ideas byte sized.

It helps if your website is somewhat unique or stands out in some way. @bendhalpern has an awesome example that definitely also highlights his personality. That is even better.

In other words don’t copy this but make your site unique, to the point, and easily updatable so you can focus on all those other projects.

Collapse
turnerj profile image
James Turner • Edited

Just went to your site and it wasn't working for me (Firefox 65). Checked the console and had this error:

ReferenceError: res is not defined main.js:35:7

    <anonymous> https://stephenbelovarich.com/main.js:35 one 
https://stephenbelovarich.com/lib/head.load.js:89 load 
https://stephenbelovarich.com/lib/head.load.js:352 each 
https://stephenbelovarich.com/lib/head.load.js:51 load 
https://stephenbelovarich.com/lib/head.load.js:351 error 
https://stephenbelovarich.com/lib/head.load.js:377 errorTimeout 
https://stephenbelovarich.com/lib/head.load.js:500 

Looking at the resources you loaded though, it does sound like it would be an interesting site 😉

Collapse
steveblue profile image
Steve Belovarich

Huh... I just visited the site in Firefox 65 and it works!

Thread Thread
miclgael profile image
Michael Gale

Blank screen for me (iOS Safari) :(

But, I take your points though, has me reconsidering some things.

Collapse
steelwolf180 profile image
Max Ong Zong Bao

Well since you are learning React.

You can start off with converting your static sites to Gatsby.

Updating your about page is important to showcase your understanding and what your doing now.

If your not a blogger, you could post YouTube or short articles about design and frontend your looking into.

I find that it's hard for me to keep up in that area. So I always think that design is really cool and I follow articles when people is talking about them.

Collapse
samuraiseoul profile image
Sophie The Lionhart

Whatever you do for the love of all that is good, have a favicon. Nothing makes me worry more about what other little details a developer got wrong or important practices they deem as unnecessary than a missing or using the framework default's favicon image.

Collapse
sublimemarch profile image
Fen Slattery

My tip is to consider accessibility and run a tool like Axe to help you fix any critical issues that put up barriers to people with disabilities.

Collapse
gfoxavila profile image
Andres Avila Wille

On the other hand, should a dev focused on backend should have a personal site? Would it serve the same purpose? What should it display?

Collapse
awwsmm profile image
Andrew (he/him) • Edited

I do back-end work and my site is just a "hub" which references my other sites: awwsmm.com

All of these are on my CV anyway, so just linking to them rather than repeating everything is like DRY applied to web design.

Collapse
chrisrhymes profile image
C.S. Rhymes

I think you need a bit of your personality in your ‘personal’ website, just like Ben...

I get most visitors landing on blog posts so I would definitely recommend blogging every month or so.

Collapse
ludamillion profile image
Luke Inglis

I found this medium.com/@johngranstrom/making-a... to be an interesting read on the topic

Collapse
osde8info profile image
Clive Da

and of course links to all their online SMN and BMN presence ! see SMN & BMN for devs post