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?
Top comments (33)
HHAHAAHAH I was actually going to comment "nothing like Ben's, unless you're Ben" :D
The fact that that website plays music when you scroll is the greatest and yet most terrible thing ever.
I just got a call from 1990; they want their website back...
Nice Rick and Morty reference?
No, never watched Rick and Morty.
okay. One of the characters uses a similar line. I thought perhaps you were referencing the show
This is right on. ;)
This is a masterpiece
Is
http://also part of the statement?That’s a matter of having not updated this in years. I’ll get that updated soon, I swear!
I think in this particular case it works in your favor. Subtle and completes the picture =)
😄
That site is awesome.
You're Tearing Me Apart, Lisa!
The site is amazing and I added it to my favorite sites list
Plot twist: your website was actually an example of what not to do all along.
Rawhide 🤣
lool, it should definitely not look like that😄
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 ;-))
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.
Just went to your site and it wasn't working for me (Firefox 65). Checked the console and had this error:
Looking at the resources you loaded though, it does sound like it would be an interesting site 😉
Huh... I just visited the site in Firefox 65 and it works!
Blank screen for me (iOS Safari) :(
But, I take your points though, has me reconsidering some things.
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.
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).
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.
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.
and of course links to all their online SMN and BMN presence ! see SMN & BMN for devs post
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.
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?
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.
I found this medium.com/@johngranstrom/making-a... to be an interesting read on the topic