DEV Community

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

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

Jacob Baker on December 17, 2020

Exactly one year ago I asked the dev community what tech they used to build their personal website/portfolio and later compiled the answers. ...
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/

Collapse
 
briancaffey profile image
Brian Caffey • Edited

I didn't answer last year, but at that time I was hosting briancaffey.github.io on GitHub Pages and building the site with Jekyll. This year I moved my site from Jekyll to Nuxt.js using their static site generator mode and @nuxtjs/content git-based headless CMS. In switching to Nuxt.js I also learned TailwindCSS which has been fun to learn and use.

I also added Drift to my site and have been having interesting conversations with people who reply to my automated welcome message. I kept Disqus for comments, but instead of loading the Disqus widget automatically, I only load it when a visitor clicks on a "Show Disqus Comments" button at the end of an article with comments.

Some other integrations are MailChimp for a custom newsletter signup form that I have been using to slowly grow an audience and formsubmit.co which I use for a simple contact form.

Google Analytics and Search console for learning about users behavior on my site, what articles are popular and what users were searching for to arrive at my site.

Collapse
 
candost profile image
Candost Dagdeviren • Edited

I use Ghost for my two blogs (candost.blog and bitekdunya.com) and Jimdo for my portfolio page (candostdagdeviren.com). I like the both options. I just finished the work on my blogs. They are working with DigitalOcean the setup was really easy.

Collapse
 
jhilker profile image
Jacob Hilker

I used Hugo and Gitlab Pages for a site generator and hosting, along with org-mode for my website. The university I attend has a program for hosting websites, so when I leave the university in May, I'll be setting up a custom domain. I am still working on it, along with some projects to actually add to my portfolio (namely, my first full project is a curses RSS aggregator written in python).

Collapse
 
miller9904 profile image
Matthew Miller

This year I rebuilt my personal site, justmatt.co. I challenged myself to see how small and fast I could make the final result, and so I decided to use a static site generator. I eventually settled on Metalsmith because it's written in Node and has a large number of plugins that make development easy.

I started with Bootstrap for the layout, but I only included the grid system, which comes out to about ~7kb. I focused on a lightweight design, taking care to only include code and resources that were actually being used on each individual page. I implemented lazy-loading for images and an image-scaling pipeline in my site generator that creates several resolutions of each image in both WebP and jpeg format to minimize downloads to the client.

In the end, a typical article on my site is ~150kb gzipped with a header image and loads in under a second on my laptop. The basic article template with with a small amount of content and no image is ~80kb gzipped. I'm pretty proud of what I ended up with and I think it will serve me for a long time.

Collapse
 
hentaichan profile image
γƒ˜γƒ³γ‚Ώγ‚€γ‘γ‚ƒγ‚“

Flask for backend, and MaterializeCSS with custom SCSS styles (including vanilla JS and anime.js) for frontend stuff

In hindsight, I should have taken the bullet and use NodeJS for my backend as well, but that's for my next web-based project. With python as your backend language, frontend technologies are always an afterthought.

Collapse
 
anduser96 profile image
Andrei Gatej

I built mine, andreigatej.dev, with Gatsby and I could say it was a pretty smooth experience building something with it.
It also made me more curious about how it works under the hood, so I hope one day I'll find the time to explore.

Collapse
 
rishabhlive profile image
Rishabh

I am using Next.js for my portfolio site rishabh.live. Yup, It's still in progress and with each new commit, I am learning new stuff.

Collapse
 
thatonejakeb profile image
Jacob Baker

It's looking good! How are you finding Next.js to work with?

Collapse
 
rishabhlive profile image
Rishabh

It's really awesome to work with. Easy to get started with the project, and push it to production level.

Collapse
 
rasharm_ profile image
Raman Sharma

Github Pages - ramansharma.me/

Collapse
 
thatonejakeb profile image
Jacob Baker

Like the simplicity! I did spend longer than I care to admit trying to click β€œTechnologist” and β€œMarketer” as if they were links 😢

Collapse
 
_garybell profile image
Gary Bell

My website garybell.co.uk is built using (and hosted on) Ghost.org and uses a free theme.

I've only added content this year, but considering options for next year.

Collapse
 
thatonejakeb profile image
Jacob Baker

What attracted you to using ghost.org as a solution?

Collapse
 
_garybell profile image
Gary Bell

I wanted to remove the maintenance and patching of the application and infrastructure from myself. Mainly so I could focus on content.

Performance was a big factor of me giving it a go. I used to use WordPress and was tired of having to use plugins for everything useful (like SEO).

I also like that I can write in markdown, which WordPress doesn't (or didn't at the time) do.

I do, however, find it expensive for my audience size. That's why I'm looking at options at the moment.

Collapse
 
jaskiratoberoi profile image
Jaskirat Singh Oberoi • Edited

On jaskiratoberoi.com I used CRA(create-react-app) as base but did the design of the whole site using custom css (scss) from scratch.

Collapse
 
thatonejakeb profile image
Jacob Baker

Looks sleek! Nice one.

Collapse
 
jarredkenny profile image
Jarred Kenny

Gatsby is the winner in this category for me. I've launched a couple of portfolio style and content driven sites lately and Gatsby makes building and deploying so easy.

Collapse
 
andrewbaisden profile image
Andrew Baisden

I used Next and Node and it works fine. Next time I will try Gatsby because I am yet to use it in production.

Collapse
 
n3rd profile image
Godwin Jemegah

n3rd.github.io , I built it with noting complex, just plain 'ol HTML, CSS and JavaScript but spiced it up with a few eye catching into animations

Collapse
 
canro91 profile image
Cesar Aguirre

Still doing GitHub pages and Jekyll. Visit at canro91.github.io

Collapse
 
kayis profile image
K

I built both of my current sites with plain CSS/HTML/JS. 😴

kay.is

fllstck.dev

Both hosted on GitHub.

Collapse
 
dzhavat profile image
Dzhavat Ushev

dzhavat.github.io/ using GitHub Pages. It's simple, doesn't require me to learn a lot of new things, easy to make changes, enjoying it a lot. :)