loading...
Cover image for Story of how I built my Portfolio and Blog using DEV.to and NextJS

Story of how I built my Portfolio and Blog using DEV.to and NextJS

sidthesloth92 profile image Dinesh Balaji ・6 min read

I've always wanted to build my very own portfolio website and blog. After many years of laziness..πŸ˜‹, finally, I mean, FINALLY I've done it..πŸŽ‰ I have built my own website dineshbalaji.in..✨ Please do check out the website and let me know your thoughts in the comments..πŸ™

The idea behind this post is to tell the story of how I did it, the tech involved, what I learned along the way and most importantly to inspire many more people (lazy like me may be..:D) to build their own website.

Ground Rules

These are some of the ground rules that I laid down for myself for developing the website.

  • It had to coded out by me from scratch without using WYSWYG editors.
  • A good logo.
  • I have to learn new stuff as I build it.
  • Minimize usage of third-party libraries.
  • It has to showcase my coding skills.
  • Good Lighthouse Score - Performance and Accessiblity.
  • Has to integrate with a CMS for blogging.
  • Good SEO.
  • Be open sourced for others to use/learn.
  • A full-page canvas landing page..😍 I love them..❀️

The Start

With the ground rules set, I began on October 3rd, 2020. One thing I wanted to absolutely make sure was to track my progress. I've tried building my site a couple of times earlier but I got sidetracked. I was also inspired by this. The way he wrote down whatever little progress he made was the way to go for me. So I did a CHANGELOG. Easy to generate and maintain.

Design

I'm a coder by profession but I do love to design and I'm quite crafty with Sketch. But sticking to my ground rules, Figma, was the first thing I learned. I spent a weekend going through tutorials learning the tool and then went about creating a design system and the website.

The Logo

I had to do a logo for branding. I wanted it to be simple and animatable. I'm happy with what I ended up with.

Alt Text

Being a developer staring endlessly at the screens, I love dark themes and decided to go with it. Chose a couple of popping colors and some shades using crispedge and voila I had my recipe.. πŸ¦„

Fonts

I created the screens over a week. I made sure all the screens were complete before starting development to ensure there were no stoppages.

Technology

Since I wanted a blog along with the portfolio, SEO was of paramount importance and the best way to do that is to build static sites. I wanted to learn React along the way and there were two choices, NextJS and Gatsby. Gatsby was purely static and NextJS provided the flexibility to switch between static and dynamic based on our need. So I ended up with Next JS.

Hosting

Choosing NextJS came with a benefit. The amazing hosting platform from the team that developed NextJS, Vercel. It has first-class tooling to host your website in minutes and has seamless integration with Github for development, preview and production deployments.

I don't want to bore you guys with a long explanation of each and every detail. I'll just list the tech I used on the website with one-liners.

Base Tech

  • NextJS - The base React framework on which the website is built. It allows you to choose between SSR, SSG and CSR.
  • DEV.to API - My CMS.. πŸ˜‹ I love DEV.to as a platform for developer blogging and I didn't want to leave it. But at the same time, I wanted a single source of truth for my articles. So I made use of the dev.to API. It's sweet and I got the best of both worlds.
  • TailwindCSS with SCSS - I was so happy to have come across TailwindCSS. I strongly recommend this to anyone. Integrating it with SCSS was a pain but if you just use CSS, please try it out.
  • Typescript - Must have for anyone doing frontend development in 2020.

Tooling

  • stylelint - For linting CSS, sorting and ordering CSS rules. Must have.
  • eslint - For linting Typescript code. Must have.
  • postcss - For CSS browser vendor pre-fixes, purging of unused TailwindCSS rules.
  • husky - For running linting, commit rules before committing code.
  • commitzen - Provides a format to your git commit messages. The beautiful change log you saw earlier was possible because of this.
  • prettier - Standard for 2020. Does what it says, formats and makes your code look beautiful..πŸ˜‹

NPM Packages

  • framer-motion - All the beautiful animations on the site are powered by this amazing library. You just have to come up with the animations and leave the rest to framer. Highly recommend this one.
  • react-copy-to-clipboard - For copying code snippets to your clipboard.
  • react-infinite-scroll-component - For loading content on scroll in posts and nuggets page.
  • react-intersection-observer - For detecting if elements are scrolled into view.
  • react-markdown - For parsing the markdown from DEV.to API's and rendering as HTML.
  • react-syntax-highlighter - Plugin for react-markdown that highlights code within the markdown.
  • react-share - Provides social sharing icons and functionality for posts and nuggets.
  • reading-time - Estimates the reading time of a given text.
  • sitemap - For generating the site's sitemap.xml for SEO.
  • camelcase - For converting hyphenated strings to camelcase strings.
  • @svgr/cli - For optimizing and converting SVG's into React components.

Analytics

  • Google Analytics - I'm using it as my data store for posts view count and also for user demographics and content relevancy.
  • MS Clarity - This just came out and I really like the heat maps and session playback features they offer.

Development

I am employed full-time so I had to find the time to develop. Most of the website was built over weekends, late nights and early mornings. I used libraries whenever I felt like I was re-inventing the wheel and stuck to coding stuff out when I wanted to showcase my skills.

Particularly, I wanted to ensure that all the canvas-based animations were coded out entirely by me without the use of third party libraries. As a result, I learnt a lot of math and ended up creating mini-libraries Vector.js, Particle.js for the animations on the canvas..πŸ‘»

Conclusion

After a month of development, I've done it. I'm really happy with the outcome. This is a lighthouse snapshot of my website.

Alt Text

As you can see, it's green across the board..🍾

I intend to add features to the website as I go along and more importantly I hope that this inspires me to blog more.

I also wanna thank Sowmya and Rashmi for their kind reviews and feedback and the Open Source Community in general for all the amazing libraries and tools..πŸ™

The source for the website is completely Open Sourced.

I sincerely hope that someone reads this and starts their own journey towards building their very own website.

See you in the next one. Peace.. :)

Discussion

pic
Editor guide
Collapse
agcty profile image
Alex

Very cool article! I always find it best to write articles as you build things because this way you can wildly grow your audience. As for setting up tailwind with scss, it's a real pain, it took me weeks to finally understand what's going on. Anyway, I made an open source starter for that purpose: nextjs-advanced-starter.vercel.app/
It features tailwindcss, automatic purging of unneeded css, a working eslint, prettier and absolute imports. Maybe you'll find it useful!

Collapse
sidthesloth92 profile image
Dinesh Balaji Author

Thank you.. :) I agree about your comments on Tailwind. I've set up everything you said but since I added SCSS it became a little become more complex.

Collapse
honzza profile image
honzza dvorak

Great article summarizing the process and the tools. I am just going through the same thing - building my own website and learning a lot along the way (Next.js, Chakra-ui). Your article inspires me and highlights some of the tools to try out.
Thank you!

Collapse
sidthesloth92 profile image
Dinesh Balaji Author

Thank you for reading the post and visiting the site. Appreciate it. Happy to have inspired you.. :)

Collapse
shadowtime2000 profile image
shadowtime2000

I did make something like this. It didn't have a portfolio or anything, it was just the blog part. I didn't add the feature to actually look at the blog posts, it just linked you to DEV.

Collapse
sidthesloth92 profile image
Dinesh Balaji Author

You can make use of the DEV.to REST API too. It's awesome.. :D

Collapse
pierreatwork profile image
Pierre

Nice post, great portfolio !
I found a little bug, when i'm on the work page, if you Scroll down the page, then click on the menu and choose the posts page, you'll see that you're at the bottom of the page and you don't see the posts list.

Great work, love the home page with the little fish :)

Collapse
sidthesloth92 profile image
Dinesh Balaji Author

Thank you for the feedback. I'll look into it. Happy that you liked the site.. :)

Collapse
sgolovine profile image
Sunny Golovine

Awesome tip on using the Dev.to API. I've been contemplating adding a blog to my project but like you wanted to have a single source of truth so for now all my articles are here. I might have to create an integration with Dev.to

Collapse
sidthesloth92 profile image
Dinesh Balaji Author

Thank You.. :) Yep, it has it's bugs but still worth a try.. :)

Collapse
alex_green profile image
Alex Tkachuk

Typescript is great for big projects with long life-cycle support like enterprise. ES6 - has all cool staff that we like in JS, but as well and all minuses. I don't think that TypeScript is more modern and must be in 2020 - it's more boring :-)

Collapse
mihaeln profile image
Mike N.

Well done for not giving up and finding time and motivation to do it. Works pretty smooth.

Collapse
sidthesloth92 profile image
Dinesh Balaji Author

Thank you for the kind words.. :)

Collapse
100rabhcsmc profile image
saurabh chavanπŸ’»πŸš€

Awesome portfolio Lovin it ❀️

Collapse
sidthesloth92 profile image
Collapse
bigyank profile image
Bigyan Koirala

can you tell me how did you kept all the commits on a single file? did you copied them manually or was there any automated process?

Collapse
sidthesloth92 profile image
Dinesh Balaji Author

Check out github.com/conventional-changelog/.... I'll try to write a post on the same.. :D

Collapse
simonholdorf profile image
Simon Holdorf

Cool thing!

Collapse
sidthesloth92 profile image
Collapse
javasusanto profile image
HERI SUSANTO

I just checked your portfolio. It's awesome bro...You must be really passionate about it.
Keep it up!

Collapse
sidthesloth92 profile image
Dinesh Balaji Author

Yep, I love to design and develop. Thank You.. :D

Collapse
dhruvindsddev profile image
Dhruvin

This is lit, I'm a newbie who just got into coding and I also love to make websites. I'm looking forward to be a great developer just like you. Kudos !!!

Collapse
sidthesloth92 profile image
Dinesh Balaji Author

Thank you for the kind words.. :)

Collapse
andxre profile image
Andre

Your portfolio is beautiful

Collapse
sidthesloth92 profile image
Collapse
woosungchoi profile image
WoosungChoi

Awesome!

Collapse
sidthesloth92 profile image
Collapse
1qk1 profile image
Panagiotis Skarlas

That's so cool. I love the dev.to API integration.

Collapse
vixrant profile image
Vikrant Gajria

Umm the "sperm" background animation is pretty uncomfortable.

Collapse
sidthesloth92 profile image
Dinesh Balaji Author

Well the intention was to create a landing page canvas animation with good enough complexity to show off my coding skills. I settled for a pond like canvas animation where the fish follow the cursor and also eat food. In all fairness you can definitely look at them as tad poles. For me, as long as someone looking at it appreciates the math and complexity behind it, that's good enough for me. In the end, to every viewer their own perspective and that's fair game as well.. :)