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)
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.
Wow. Looks great.
Thank you! ☺️
nice ux, great feel on scroll 😉
Cheers, appreciate the kind words 🙇♂️
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?
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.
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.
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.
Looks good! I have to say I did think the Tie Tracker project was about formal wear before I noticed the logo 😛
Hahaha if one day I stop freelancing and wearing shorts at work, I can reuse the brand name to sell sustainable ecological tie 😉
You can use blockchain to track the tie from raw materials to point of sale!
🤣
I might be able to raise US$ 100 millions on a serie A with such an idea 😉
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.
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.
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?
Indeed! Oh yes there were a few things:
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.
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.
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!
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…
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 🥞 😁
I've always liked more abstract, unique, and original portfolios 👍 extra points for creativity 😉
I don't have a portfolio, but the tech I used to build moopet.net was HTML and CSS.
10/10 best not-portfolio I've seen.
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.
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!
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.
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/
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.
I'm not sure. I'd prefer to stick with Vue.js though.
I found the A11y Project for accessibility resources useful.
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
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.
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/
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.
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.
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).
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.
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.