DEV Community

Cover image for What tech did you use to build your personal website/portfolio? 2020 Edition!
Jacob Baker
Jacob Baker

Posted on

What tech did you use to build your personal website/portfolio? 2020 Edition!

Exactly one year ago I asked the dev community what tech they used to build their personal website/portfolio and later compiled the answers.

So to carry on the tradition (tradition!):

What tech did you use to build your personal website/portfolio?

Bonus question if you answered last year: has it changed?

Feel free to shamelessly plug your website/portfolio if you answer!

Top comments (55)

Collapse
 
danwalsh profile image
Dan Walsh

My portfolio is dwalsh.dev and I just recently refactored it from using CRA (create-react-app) to NextJS using their static site generation. It also now pulls in my two most recent DEV Community posts during build using the getStaticProps() page function.

Collapse
 
ionutarhire profile image
Arhire Ionut

Wow. Looks great.

Collapse
 
danwalsh profile image
Dan Walsh

Thank you! ☺️

Collapse
 
madza profile image
Madza

nice ux, great feel on scroll 😉

Collapse
 
danwalsh profile image
Dan Walsh

Cheers, appreciate the kind words 🙇‍♂️

Collapse
 
mrcrrs profile image
mrcrrs

Looks nice! What did you use for the reveal animations - some library or did you make it yourself? Did you use a template or code from scratch?

Collapse
 
danwalsh profile image
Dan Walsh

Thank you! ☺️🙇‍♂️ I used react-reveal for the animations. I built the site from scratch and included the new Bootstrap 5 beta which I’ve customised via SCSS for my needs.

Collapse
 
thatonejakeb profile image
Jacob Baker

I'll kick things off!

On jacobb.uk I'm using Gatsby with Material-UI for styling. Mostly so I can stay in the react world. Hasn't changed much from last aside from adding blog posts to play with Netlify CMS.

Collapse
 
daviddalbusco profile image
David Dal Busco

I build my website last year and refreshed it this year, so I guess I am still allowed to answer 😉.

I used Gatsby (👍) too but, no templates nor design systems aka just custom made CSS.

Collapse
 
thatonejakeb profile image
Jacob Baker

Looks good! I have to say I did think the Tie Tracker project was about formal wear before I noticed the logo 😛

Thread Thread
 
daviddalbusco profile image
David Dal Busco

Hahaha if one day I stop freelancing and wearing shorts at work, I can reuse the brand name to sell sustainable ecological tie 😉

Thread Thread
 
thatonejakeb profile image
Jacob Baker

You can use blockchain to track the tie from raw materials to point of sale!

Thread Thread
 
daviddalbusco profile image
David Dal Busco

🤣

I might be able to raise US$ 100 millions on a serie A with such an idea 😉

Collapse
 
theanilbajar profile image
Anil Kumar

That's minimal and great. Could you share the learning resources to add Material-UI with Gatsby (except official documentation) ?

I've theweeklyspark.net and it's using Materialize CSS only. I want to convert it to Material-UI powered design.

Collapse
 
radiomorillo profile image
Stephanie Morillo

Great question, Jacob. 😊 I am probably an outlier here, but I used a dynamic site builder to create my website, stephaniemorillo.co. I migrated my site from Jekyll over to a Wix premium plan almost four years ago and haven't looked back. It's allowed me to keep my personal blog up-to-date while making changes to design elements and even introducing a new digital store, all with a GUI. Reasons for migrating off of an SSG were: too many steps to make updates to my site (it was deployed via githooks and hosted on a DigitalOcean Droplet), not wanting to deal with server maintenance, and wanting the ability to change my layout and design without any need for HTML or CSS experience. It's worked really well for me and has scaled effortlessly, with the added benefit of allowing me to schedule blog posts in advance and even write and publish blog posts on my mobile phone.

Collapse
 
thatonejakeb profile image
Jacob Baker

Sometimes you just need the ease and simplicity of a solution like Wix that gives you all the bells and whistles. Sounds (and looks) like it is working really well for you!

Was there anything in particular that drew you to Wix over other providers, e.g. WordPress?

Collapse
 
radiomorillo profile image
Stephanie Morillo

Indeed! Oh yes there were a few things:

  • I wanted the ease of a GUI and drag-and-drop but with a lot of room for flexibility: editing image placements, colors, buttons, and fonts, even if I went with a default template.
  • I wanted to be able to add a domain painlessly.
  • I didn't want to do any kind of server maintenance, I wanted that handled for me.

I've used WordPress.com in the past and felt their feature set was quite limited even with a paid plan. Self-hosted WP is a better experience but I did not want to update plugins, deal with databases, stuff like that.

Squarespace at the time did not have much design variety and their UI was clunky; every SS site looked the same. I wanted the opposite of that.

Wix isn't perfect (their dashboard/user flows can be improved, their domain management does leave a lot to be desired, and it's not possible to switch templates once you've chosen one — something I hope they change soon) but I've been able to scale with them. They make SEO an effortless experience, and I'm not locked into using Google Analytics for web analytics (I use Matomo), and their e-commerce offering integrates with the rest of my site, so I'm able to host my shop on my website alongside the rest of my content. In summary: I found Wix to be a scalable solution and I've been able to make the template my own.

Collapse
 
yoursunny profile image
Junxiao Shi

yoursunny.com has been operating since 2006. It's still Markdown rendered by handwritten PHP script, running in nginx web server. Two directories are using Jekyll and Hexo static site generators. These were the result of 2017 rebuild.

Earlier this month, I got a new VPS and moved TLS termination part to use Caddy web server, which can manage certificates automatically. The backend is still nginx for now, so that I don't have to write dozens of redirect rules again. I have these redirect rules so that 15 years worth of old links can still work.

Collapse
 
thatonejakeb profile image
Jacob Baker

Wow! That's quite a history. Are those posts from 1998+ old diary entries?

Sounds like the website itself is old enough for an 'about me' page it!

Collapse
 
yoursunny profile image
Junxiao Shi • Edited

The 1998 article is my homework from elementary school.
2002-2005 articles are diary entries, most of which were originally on paper; I typed them into computer around 2011.
Most of 2005-2008 articles are either copied from Windows Live Spaces, or converted from my college homework.

The starting of this website is documented in yoursunny.com/t/2006/yoursunny-com... article.

Prior to 2010, there were no Markdown. Everything was in HTML, either handwritten or generated by Word / WordPress / TinyMCE / Blogger / Windows Live Writer / Google Docs. Simpler pages were manually converted to Markdown. More complex pages are still in HTML, and my server side scripts have to accommodate that.

From time to time, I would discover a broken link, a typo, or other errors, from a page made 7~10 years ago, and I'm still fixing these.

I don't know what to do with the 4 pages using Shockwave Flash Player…

Collapse
 
alvarosabu profile image
Alvaro Saburido • Edited

My portfolio is alvarosaburido.dev and it's build using Vue along Nuxt.js and a personal approach to utility-driven css (similar to what TailwindCSS does)

I'm waiting for Nuxt to support v3 of vue to refactor and use TailwindCSS for styling.

Everyone is welcome to my pancake planet 🥞 😁

Collapse
 
madza profile image
Madza

I've always liked more abstract, unique, and original portfolios 👍 extra points for creativity 😉

Collapse
 
moopet profile image
Ben Sinclair

I don't have a portfolio, but the tech I used to build moopet.net was HTML and CSS.

Collapse
 
thatonejakeb profile image
Jacob Baker

10/10 best not-portfolio I've seen.

Collapse
 
carlosds profile image
Karel De Smet

I use Eleventy for my personal website kareldesmet.be and am hosting it on Netlify. The deployment process on Netlify was smooth as silk. And I love Eleventy because you get a lot of the "oomph" from Gatsby or similar solutions, but without a lot of the "aargh". Admittedly, this is based on a very limited effort to give those others SSG's a go, so I'm contemplating that mastergatsby.com course from Wes Bos.

Nonetheless, I'm thinking about migrating it back to a server-side rendered (Node.js) solution, just to get some more experience in that domain.

Collapse
 
thatonejakeb profile image
Jacob Baker

Ooo I've not heard of Eleventy, I'll have to check it out. Definitely had a lot of 'aargh' with Gatsby but that has mostly been down to configuring plugins and a couple of gotchas. When it works though it is a pleasure to use!

Collapse
 
carlosds profile image
Karel De Smet

Definitely do! I think most people will be pleased by the simplicity of it, whilst still having a lot of options to get where you want to go.

Collapse
 
dana94 profile image
Dana Ottaviani

I'm using Gridsome but I may change things for 2021. I'm having trouble running the site locally out of nowhere so I'm considering other tech for the next one. Accessibility is something I'm really thinking hard about so it will be a critical part for my next choice.

danaottaviani.com/

Collapse
 
thatonejakeb profile image
Jacob Baker

Can't say I've had much experience with vue.js or Gridsome! Any initial thoughts for what you might try out tech-wise next?

Also-- do you have any good resources for accessibility? It is something I could (and should) do better on my own website.

Collapse
 
dana94 profile image
Dana Ottaviani

I'm not sure. I'd prefer to stick with Vue.js though.

I found the A11y Project for accessibility resources useful.

Collapse
 
christiankozalla profile image
Christian Kozalla

I'm using Next.js for my blog chrisko.io, stlye-jsx for component-scoped CSS and writing posts in markdown. Planning to switch from remark to next-mdx-remote

Collapse
 
micahlt profile image
Micah Lindley

I have an unusually simple setup: a pure HTML/CSS/JS site running on GitHub pages, because in my opinion that's really all you need. I haven't migrated since (though it's been tempting to switch to something like Netlify or Vercel), primarily because of GitHub's excellent handling of my domain. My root domain (micahlindley.com) is connected to the micahlt/micahlt.github.io repository, but I've grown to love the fact that every GitHub repo built in vanilla HTML/CSS/JS can be easily deployed to Pages with no additional domain setup. It's simple and elegant, and it gives me a challenge to keep the site performant without utilizing server-side rendering or React.

Collapse
 
torik17 profile image
Tori

I did the same thing with the Github pages. pages.github.com/ It was just a really easy way to quickly get up and running. And not needing to worry about maintaining a domain was a big selling point for me.
I didn't do the extra layer of fancy though that you did to have your root domain connected to your repo. I like that extra touch :)
torik17.github.io/