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.
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-markdownthat 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.xmlfor 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.
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.. :)
Top comments (31)
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
Thank You.. :) Yep, it has it's bugs but still worth a try.. :)
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!
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.
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!
Thank you for reading the post and visiting the site. Appreciate it. Happy to have inspired you.. :)
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 :)
Thank you for the feedback. I'll look into it. Happy that you liked the site.. :)
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.
You can make use of the DEV.to REST API too. It's awesome.. :D
Love your portfolio ! ✨✨✨ Just WOW !
I have been postponing creating my own for a long time now ! I think I'll inspire from yours and start !
Following on your steps, creating a simple animatable logo comes first, so any good tutorial recommendations ? 🤔
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 :-)
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.. :)
That's so cool. I love the dev.to API integration.
Well done for not giving up and finding time and motivation to do it. Works pretty smooth.
Thank you for the kind words.. :)
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?
Check out github.com/conventional-changelog/.... I'll try to write a post on the same.. :D
Cool thing!
Thank You!
I just checked your portfolio. It's awesome bro...You must be really passionate about it.
Keep it up!
Yep, I love to design and develop. Thank You.. :D
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 !!!
Thank you for the kind words.. :)
Your portfolio is beautiful
Thank You!