DEV Community

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

Dinesh Balaji on November 13, 2020

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 hav...
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

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

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

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

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

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

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

Collapse
 
shadowtime2000 profile image
shadowtime2000 • Edited

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 • Edited

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

Collapse
 
ansnoussi profile image
Anis SNOUSSI

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 ? 🤔

Collapse
 
olex_green profile image
Olex 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
 
sidthesloth92 profile image
Dinesh Balaji

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.. :)

Collapse
 
1qk1 profile image
Panagiotis Skarlas

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

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

Thank you for the kind words.. :)

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

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
Dinesh Balaji

Thank You!

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

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

Collapse
 
dhruvindev 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

Thank you for the kind words.. :)

Collapse
 
andxre profile image
Andre

Your portfolio is beautiful

Collapse
 
sidthesloth92 profile image
Dinesh Balaji

Thank You!

Collapse
 
woosungchoi profile image
WoosungChoi

Awesome!

Collapse
 
sidthesloth92 profile image
Dinesh Balaji

Thank You!

Collapse
 
100rabhcsmc profile image
Saurabh Chavan

Awesome portfolio Lovin it ❤️

Collapse
 
sidthesloth92 profile image
Dinesh Balaji

Thank You!

Collapse
 
shaancodes profile image
Shaan Alam

loved your portfolio.... Btw can you tell me how did you create the page transition sliding in and out effect ???