Rishi kasyap
Show your work

Show your work

nextjs
tailwindcss
framer motion

An insight into how I built this portfolio website, tools and why I used them, future plans and content I will be posting on this website .

Introduction

Welcome to my digital home - a space on the internet where I share my journey and learnings with the world. This blog is just an introduction to this website, which keeps evolving as I learn and discover new things.

I'm a Mechanical engineer turned self-taught full-stack developer, designer and a tech enthusiast. I love to build things. I'm always looking for new challenges and opportunities to learn and grow. This blog is my way of sharing my journey with the world.

How I built this website

Homepage of rishikasyap.com

Tech stack i used

Next.js

A full stack React framework with file based routing, api routes, built-in image optimization and the ability to server render using the new App directory, makes it an awesome choice for developer experience and page performance. Lighthouse scores

Nextjs supports advanced routing techniques such as Parallel routes and Intercepting routes making it possible to create complex interfaces such as Instagrams, Unsplash with ease. Check out my implementation in lab page. Or Click here.

Tailwindcss

A utiltiy-first CSS framework with sensible defaults for colors, padding, sizes making it almost as a design system we can build upon. It provides best-in-class developer experience to build pixel perfect design. Tailwind CSS is mobile first, making it extremely easier to build mobile responsive designs and It's also performant, as it removes all unused CSS when building for production.

Shadcn-ui

A collection of components built on top of radix primitives, tailwindcss and other awesome libraries like react-hook-form and cmdk. making it easier than ever to build complex beautifully styled accessible components.

Contentlayer

Contentlayer is a content SDK that validates and transforms your content into type-safe JSON data you can easily import into your application.

MDX

MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or anything else and embed them within the content. Making this website more interactive and helps while explaining complex stuff using custom components.

Hover your mouse here

Components like these can be embedded into markdown, Checkout lab page for code

Vercel

Vercel is a cloud platform for deploying serverless applications and static websites. Also being the creators of Next.js, Vercel offers built-in CI/CD, serverless functions, cdn and many others features making it simple and reliable way to deploy Nextjs applications.

Figma

Figma is a design tool used to design user interfaces and build prototypes. Figma with it's intuitive features makes it easier to design and test multiple variations of user interfaces and test them using prototypes, and also makes it easier to handoff design assets to developer.

Content

On this website I will be sharing articles about development, design, technology and anything i find interesting to write about. The Lab page will be a playground where I recreate cool designs, explore interesting ideas, and push the boundaries of what is possible with technology. Project page will be a where is showcase my recent and ongoing projects and also share any information regarding them.

Roadmap

I'm constantly working on improving this website and I have some exciting plans for it! I'm working on adding a "Today I Learned" page with notion as content source. I plan on sharing my daily learnings across multiple disciplines so I stay motivated to learn everyday and hopefully help others too. I'm really looking forward to this and many other improvements and can't wait to share them all with you!. I'll keep the changes updated in changelog page.

My website is constantly evolving and updated with new content, so be sure to check back often. I hope that you find my website both informative and inspirational. I look forward to sharing my journey with you here, and thank you for visiting.

Feel free to get in touch with me and let me know that you've read this, along with any kind of feedback or thoughts. I would love to hear them. You can find my social links below.