loading...
Cover image for What tech did you use to build your personal website/portfolio?

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

thatonejakeb profile image Jacob Baker ・1 min read

Over the festive period I'm planning to redo my personal website.

So, for a hit of inspiration, what tech did you use to build yours?

And feel free to shamelessly plug it if you answer!

Discussion

pic
Editor guide
Collapse
nickytonline profile image
Nick Taylor (he/him)

I went with Gatsby since I wanted to mess around in React land. I also wrote it in TypeScript since I'm currently not using TypeScript at work. Here's the full list, iamdeveloper.com/thanks/

Collapse
drewtownchi profile image
Drew Town

The thanks page is really cool. I definitely should borrow that idea for myself.

Collapse
thatonejakeb profile image
Jacob Baker Author

Looking like that's the path I'm going to go down. Do enjoy a bit of TypeScript.

I do like the thanks page as well; might do something like that for mine.

Collapse
kaydacode profile image
Kim Arnett 

Wordpress. And I'm extremely not sorry.

When I first built my super simple site, I used PHP, and customized everything. I wanted to show off my skills I learned in college, etc etc.

I didn't follow the web developer track - I went into mobile. After doing so, I realized a few things about maintaining my website.

  1. Recruiters do not care what your website was built with. Even most managers couldn't care less.
  2. I needed something that maintained itself, because I no longer had time to maintain it every year (after getting hacked).
  3. Having a blog was a huge driving factor for me... I want perspective employers to be impressed with the content I'm creating, not focused on what version of JS I'm using.. or whatever web people look at now a days :P

Today my website is 100% blog. I'm hoping to add a store to sell some of the things I've designed. But Wordpress has made it a no-mess no-stress task for me, and completely meets my needs for now.

Collapse
workalicious_yo profile image
David Kaplan

That's awesome Kim! WordPress and PHP used to, maybe still do, get a sideways look sometimes but they are solid, aren't going anywhere and are solid. I'm trying to take my PHP scrappiness over to Laravel. You might check it out if you like WP.

Collapse
thatonejakeb profile image
Jacob Baker Author

No judgement here! My long-standing website is currently WordPress with a custom theme because it was the quickest & easiest thing for me to do at the time to get something out there with my name on it.

Your reasons are so on point.

Collapse
artemis profile image
Diane

I'm using a custom static site generator I built in typescript and gulp, with ejs as template engine, and, for now, markdown as source format. I should change to AsciiDoc at some point.

For the search, I first looked into Algolia, but their system is a mess and a real pain to set up.

So I'm building a svelte-based web app (search.html), using the Lunr embedded search database as search engine.

My SSG has a step that builds a database index.
The web-app will load it at search.html load time, and use it to provide some decent search.

For image hosting, I'm currently using Cloudinary, although I may change at some point, for something simpler, probably a custom-built solution, again.

Collapse
marklchaves profile image
mark l chaves

Thanks for sharing your experience with Algolia, Diane. :-)

I've got Lunr running on my Jekyll site. It was a cinch to set up. But, I'm not getting the same precision results with my Google Custom Search implementations. So, I thought about giving Algolia a try. Just like you mentioned, Algolia is more of a kludge to get up and running. But, it's still on my queue to give it a go.

I'll let you know if I ever get around to it.

Collapse
thatonejakeb profile image
Jacob Baker Author

I've not come across AsciiDoc before, why are you thinking of switching to it from Markdown?

Collapse
artemis profile image
Diane

Much more strict, easier to extend (e.g. custom image / video tags), much cleaner to structure, more complete by default

Thread Thread
thatonejakeb profile image
Jacob Baker Author

That sounds quite useful actually. I've a project due to begin in the new year that we were going to use Markdown for part of it, but I'll take a look at AsciiDoc as an alternative. Especially if it is easier to extend.

Collapse
drewtownchi profile image
Drew Town

I used Gridsome because I really like the static site concept for a personal project and I like Vue. Additionally I used TailwindCSS for styling.

That's it... Hosted on netlify and done.

Drewtown.dev

Collapse
khalyomede profile image
Khalyomede

Blazing fast! Congrats man

Collapse
marklchaves profile image
mark l chaves

Agreed. Wicked fast. Congrats Drew on your high Google PageSpeed scores!

Collapse
traekwells profile image
Traek Wells

Did my site traekwells.com with regular HTML/CSS/JS hosted on HostGator. Site is small enough where it felt like overkill to reach for anything else. Also that fact that I'm 100% comfortable with these technologies allowed me to get it out fast.

Collapse
marklchaves profile image
mark l chaves

Great job. Thanks for sharing your work. Your site is very clean, minimal, and "performant".

Question though--I noticed you opted out of showing some of the images on a mobile viewport. Namely the "staggered" layout ones and your portrait photos.

Was this by design? What was your motivation behind this decision, if so?

Thanks!

Collapse
traekwells profile image
Traek Wells

Thanks for the feedback Mark! Yes that was a design decision so it was on purpose. The large images on the side that are staggered are strictly for aesthetics and nothing more. The project images are the only important images so those stayed. So on mobile, where the purpose is the get the message across as clearly as possible and to save bandwidth, I thought that not displaying them would be a good decision.

I wanted to have an image of myself no matter what so I still have an image of myself on the mobile menu.

Hopefully that helps understand the decision. Thanks again!

Collapse
jojonwanderlust profile image
Joëlle

This is really nice, I like the simple and clean design. I am starting to learn and about to start JS and it's good to see what people are creating.

Collapse
traekwells profile image
Traek Wells

Thanks! My site has very minimal JS on it. Just to handle the navbar on scroll and adding a few classes on the hamburger click. Good luck in your journey though, writing JS is always a humbling experience to me. Lol.

Collapse
thatonejakeb profile image
Jacob Baker Author

I like it! Sometimes it is easier to just keep it simple.

Collapse
traekwells profile image
Traek Wells

Thanks! And yes sir, couldn't agree more.

Collapse
saurabhdaware profile image
Saurabh Daware 🌻

Hi, I just went for plain HTML, CSS, JavaScript.

Usually, my portfolio is something that I use to test my skills. Before this, my portfolio was built in Vue since I was learning Vue back then.

This time I just wanted to see how far can I go without a dependency (and I had a lot of free time :D) and I do not regret it. I loved working in vanilla JavaScript.

Here's the website: saurabhdaware.in

Collapse
thatonejakeb profile image
Jacob Baker Author

I think it's good to know how things work at a vanilla level, certainly if you've the time to learn.

Collapse
marklchaves profile image
mark l chaves

Very cool. Impressive achievements list. And, very fast indeed. Congrats!

Collapse
pontakornth profile image
pontakornth

My website and portfolio are still incomplete but I can provide my stack thing.

  • Gatsby
  • Emotion (Considering Rebass)
  • MDX
  • Github for repo hosting
  • Netlify for deployment

For the old one

  • NuxtJS
  • SCSS
  • Netlify
  • Github
Collapse
thatonejakeb profile image
Jacob Baker Author

How are you finding using Gatsby? It’s something I was considering when I redo mine.

Collapse
pontakornth profile image
pontakornth

Great. It does a great job creating blogs. With Gatsby, you can use data sources you like. Customization is easy.

Gatsby also provides adequate starter kits and plugins. You don't need to worry about Webpack config so much.

Collapse
totally_waqas profile image
Waqas

I went with a static site/blog generator jekyll and used minimal mistakes as theme. It's hosted on github pages and all I have to do is push a commit and my website automatically gets updated

Collapse
mitchartemis profile image
Mitch Stanley

My blog is currently using Middleman for static site generation and hosted on Netlify. Neovim for editing. I used HTML from a template on pixelarity.com/

I'm in the middle of a headless rebuild which uses Craft CMS for the backend - hosted on a tiny Dokku VPS, Nuxt.JS for static site generation, Netlify for hosting, and Tailwind for the CSS.

Link: fullstackstanley.com

Collapse
thatonejakeb profile image
Jacob Baker Author

Ah, I’ve been looking at possible CMS solutions this morning, how is Craft? Any other recommendations of ones worth looking at?

Collapse
mitchartemis profile image
Mitch Stanley

There's a lot to love about Craft. It's really easy to get an admin area set up fast. There's a decent plugin ecosystem available, and the free tier is pretty good for a single user website.

If you want to create HTML sites with it, the templating engine is Twig and it's pretty easy to use although requires building the HTML from scratch (Personally I prefer it this way so I can optimize stuff).

The downside is that if you need more than one user, or GraphQL support, then you'll have to pay for the Pro license. Personally, I just use the Element API plugin instead for generating JSON endpoints.

I've also used Ghost CMS (blog.snipline.io) which is pretty great too for a standard blog and includes everything you need out of the box. Theming is easy and it's self-hostable for free, also has good SEO out of the box so no need to worry about that. It's built in Node which is a little trickier to deploy than Craft (which is PHP) but nothing too bad.

Collapse
brianemilius profile image
Brian Emilius

I'm on the JAMstack as many others. I use Gatsby/React with markdown files (markdownRemark).

On top of that, I use images I make myself or some I find on places like freepik.com where you are required to attribute the creator.

For image editing, I use Gimp or PS as needed, and for vectors, Illustrator.

Furthermore, I am fond of hemingwayapp.com and grammarly.com for proofreading.

Collapse
marklchaves profile image
mark l chaves

Cool. Ya, I love the Hemingway app. Been using it for years. Grammarly is great too. If you need a headline analyzer, I'm digging this one at the moment. headlines.sharethrough.com/

Enjoy!

Collapse
thatonejakeb profile image
Jacob Baker Author

Hemmingway App is interesting; haven't seen that one before. I'll give it a go-- thanks!

Collapse
maksumrifai profile image
Maksum Rifai

i'm using material-ui kit, github and netlify for deploy my personal website:
maksumrifai.github.io
maksumrifai.netlify.com

using Wordpress CMS & Hostinger for business website:
desainerhub.com

Collapse
marklchaves profile image
mark l chaves

Mantab! Hostinger--keren. Selamat ;-)

Collapse
marklchaves profile image
mark l chaves

Thanks for kicking off this interesting thread, Jacob :-).

CloudCannon

Just to share. I'm currently moving my website/portfolio from WordPress to CloudCannon. More on the why behind this move here if you are interested.

Jekyll has built-in support for Liquid. Liquid comes from the developers of Shopify.

If I'm not mistaken, this site (DEV.to) uses Jekyll dev.to/p/editor_guide

I used the Jekyll Minimal Mistakes theme (excellent theme BTW). My customisations so far are in JavaScript and SCCS.

Here's the work in progress caughtmyeye.dev

Netlify

I'm using Netlify to host my PWA work. These projects aren't fully baked yet. But, here's a preview.


Comments are welcomed! ;-)

Collapse
ophasnoname profile image
Arne

Just set my new blog online (ophasnoname.de). After years with Wordpress or Hugo i decided to use something other. My new blog runs with Laravel (PHP Framework) and some packages to parse Markdown. The blog runs without any database, anything is based on the filesystem.

Collapse
helleworld_ profile image
Desiré 👩‍🎓👩‍🏫

Nice to see this question!

I built my website with only Vuejs and SCSS. Not a lot of fancy techs but the ones I'm so comfortable with at the moment... And I'm so happy with the result!

Collapse
thatonejakeb profile image
Jacob Baker Author

Doesn't always need to use obscure/fancy tech; looks really neat!

Collapse
marcbeaujean profile image
Marc Philippe Beaujean

I used (headless) wordpress and gatsby to build my blog @ byteschool.io. Wordpress is self-hosted, frontend is running on Netlify.

Collapse
thatonejakeb profile image
Jacob Baker Author

How do find using headless WordPress? I did a fair number of projects using WordPress in the past and being able to decouple the front & backend would have been nice.

Collapse
workalicious_yo profile image
David Kaplan

The WordPress REST API is very good now. I built a site using WP as the backend for my client to manage custom post types and then Axios with VueJS for the front-end. For me at the time, not having to build a CMS was a good thing.

Collapse
marcbeaujean profile image
Marc Philippe Beaujean

It was alright! A Gatsby plugin did most of the work in terms of hooking things up and fetching data.I'm not an expert at WordPress so customising some things was harder for me, but should be easier for you 😊

Collapse
gergelypolonkai profile image
Gergely Polonkai
  • My blog was a custom PHP site from the early 2000s up to 2011.
  • In 2011 i built a new engine based on the Symfony framework.
  • In 2013, i switched to Python and rewrote my blog’s engine using the Django framework.
  • Somewhere between 2014 and 2015 i switched to GitHub Pages, using GitHub’s Jekyll version
  • In 2017 i went back to self-hosting, but still with Jekyll (although not GitHub’s version)
  • In 2019 i switched to Pelican, as it’s written in Python and i can hack it easier than i could Ruby

Today my site is available on https and dat (Dat browser like Beaker or DatFox is required). I also plan to make it available on IPFS soon.

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her)

I used Gatsby for my site Up Your A11y for very specific reasons that I wrote about here

I'm using Gatsby again now for some other side projects, and I gotta say I do love it. It gives you so much speed optimisation for free and it plays nicely with lots of CMS options.

Collapse
thatonejakeb profile image
Jacob Baker Author

Thanks for that!

As an aside, definitely going to keep your site bookmarked to reference when it comes to a11y.

Collapse
drmikecrowe profile image
drmikecrowe

Personal pet project: factualsearch.news

  • React website (TypeScript)
  • Plop to create components (node + handlebars to template anything)
  • AWS S3 for static hosting
Collapse
dana94 profile image
Dana Ottaviani

danaottaviani.com/

I like using VueJS and came across Gridsome. It gives you the option to use GraphQL. I didn't create the design though, it was a premade template.

Collapse
bealearnscode profile image
bealearnscode

Good old HTML, CSS, and vanilla JS. I actually used Materialize for my UI.

Collapse
thatonejakeb profile image
Jacob Baker Author

Sometimes simple works best, no need to overcomplicate!

Collapse
shushugah profile image
shushugah

NetlifyCMS (also experimented with closed source Forestry.io) with a Jekyll static site, hosted on github and or netlify.

github.com/shushugah/shushugah.git...

shushugah.com

Collapse
thatonejakeb profile image
Jacob Baker Author

Really like that. Would you mind if I showed it to my students as a good example of an online CV? It's amazing the number of them that don't have anything online.

Collapse
chadalen profile image
Chad Alen

I used React, Gatsby, React Material UI, Disqus and Netlify.
chadalen.com

Collapse
thatonejakeb profile image
Jacob Baker Author

I like it! Only thing is the image on the homepage could do with nudging down a little, the top is being cut off by the banner.

Collapse
chadalen profile image
Chad Alen

Appreciate the feedback gonna fix that :)

Collapse
emptyother profile image
emptyother

My blog is currently NOT using a Metalsmith static website generator where the build script and my plugins are written in typescript. Seems most plugins for it is out-of-date, but its darn easy to write plugins for it myself.

I'm just about to publish it but I'm stuck on styling it. As usual.

Collapse
workalicious_yo profile image
David Kaplan

Hi Jacob. I went with VueJS. I want to move over to Laravel, saw that VueJS is a recommendation, and went off to learn that first. workalicious.com I'm using Foundation for a CSS framework.

Collapse
thatonejakeb profile image
Jacob Baker Author

Do you think there is a benefit to using one over the other? Or is it more a case of a learning experience?

Collapse
workalicious_yo profile image
David Kaplan

For me it was learning experience and my available time to learn something new. I started to learn Laravel back in v4 (I think it was). When I finally got back around to learning a version of 5x I saw VueJS and that sent me off to find out about VueJS.

I'm a freelancer, trying to stay billable, but dedicate some other time to learning. Repeating is the hard part in that case. I'd get busy and not get back to the learning for a while. I'm hunkered and deteremined now to make Laravel/VueJS LAMP my stack. One thing that has changed for my daily work is to keep logs of what I do within a project, huge help to go back and read stuff where I'm explaining to my future-self what I did.

Thread Thread
thatonejakeb profile image
Jacob Baker Author

Oh I like the idea of keeping a log of what you do to refer back to in the future. So much can get lost in the haze of a project.

Collapse
edimeri profile image
Erkand Imeri

Going to try Github, Netlify, Gatbsy and for the CSS TailwindCSS. A combination of this.

Collapse
thatonejakeb profile image
Jacob Baker Author

Seems to be a popular tech stack at the moment!

Collapse
perrocontodo profile image
David Catanho

Where's the Hugo crowd? I fell in love with that framework. Push to Gitlab, host in Render for free. All automatic. The hardest part is coming up with content

Collapse
nataliecodes profile image
natalie stroud

I used Bootstrap for mine and hosted on Namecheap!
natalieastroud.com/

Collapse
thatonejakeb profile image
Jacob Baker Author

Namecheap are my preferred domain registrar (not spon)!

Collapse
ogaston profile image
Omar Gaston Chalas

I used Gatsby, I think if you have any knowledge of React then Gatsby is the best tool for the job.

I built this a time ago.

Collapse
thatonejakeb profile image
Jacob Baker Author

That's really cool, good job! Really is looking like the Gatsby rabbit hole is where I'm about to jump.

Collapse
thatonejakeb profile image
Jacob Baker Author

I really need to give Netlify a go, it seems to be used everywhere!

Collapse
bonfiglioalessio profile image
<A.BONFIGLIO/>

My portfolio is develop with React and Reactstrap with bootstrap components.

bonfiglioalessio.github.io

Collapse
thatonejakeb profile image
Jacob Baker Author

Nice! I do like the bold colour palette.

Collapse
tristimb profile image
tris timb

I've been working on one with Vue.js, the one it's replacing was just an HTML file. I think both were good solutions to what I wanted.

Collapse
anechol profile image
Ashley E

Vanilla HTML, CSS, and JS :]
Hosted on Github Pages.

Collapse
hey_ayush profile image
Ayush Sharma

Gatsby + Netlify (CMS, hosting, and form) + Circle-CI
heyayush.com

Collapse
vbelolapotkov profile image
Vasily Belolapotkov

Using Gatsby + Netlify CMS + Gitlab Pages hosting. Works nice so far. vbelolapotkov.com

Collapse
thatonejakeb profile image
Jacob Baker Author

Are you finding React better suited to what you're after?

Collapse
courtneypure profile image
C. Pure

I built mine with html, css, and js for the mailchimp sign up form. I wanted to really hone my basic skills so I went vanilla with this site.

It is hosted on GitHub pages.

CPureMake.tv

Collapse
shayaulman profile image