Sahil Verma
How to setup Sahil Verma Developer Porfilio
August 21, 2023

How to setup Sahil Verma Developer Porfilio

Welcome to my developer portfolio repository! This repository houses the code for my personal portfolio website, where I showcase my skills, projects, and expertise as a full stack developer.

About Me

Hey there! I'm Sahil Verma, a passionate full stack developer on a mission to craft extraordinary digital experiences. With a blend of creativity and technical prowess, I bring innovative ideas to life through code and design. Visit my portfolio at sahilverma.dev to learn more about me and my journey.

Tech Stack

My portfolio is powered by a combination of cutting-edge technologies that ensure an exceptional user experience:

  • Next.js 13: The latest iteration of Next.js forms the backbone of my portfolio, enabling lightning-fast web applications with its advanced server-side rendering capabilities.
  • Headless CMS - Sanity: Content management made simple. I leverage Sanity's headless CMS to seamlessly manage and update my portfolio's content, ensuring it's always fresh and engaging.
  • TypeScript: The magic of type safety and enhanced code quality! TypeScript ensures my codebase remains maintainable and resilient, reducing bugs and streamlining development.
  • Tailwind CSS: Rapid UI development has never been easier. I harness the power of Tailwind CSS to craft responsive, visually stunning, and highly customizable user interfaces.
  • Framer Motion: Immerse visitors in captivating animations and interactions. Framer Motion empowers me to create fluid and engaging UI elements that enhance the overall experience.

Journey and Upgrades

This version of my portfolio represents a significant upgrade from its predecessor. The earlier version was developed using Next.js, Tailwind CSS, Framer Motion, JavaScript, and Firebase. While that iteration was decent and similar in many ways, my coding skills have evolved over time, resulting in this improved version. I'm now able to deliver a more refined, high-performance, and visually appealing experience to users.

Features

My portfolio is a testament to creativity, innovation, and technical excellence. Some of its standout features include:

  • Sleek UI Design: Every pixel is thoughtfully designed. With an eye for aesthetics and usability, my portfolio boasts an intuitive and modern UI that makes navigation a breeze.
  • Elegant Animations: Elevate user engagement with subtle yet impactful animations. These delightful motion effects add an element of interactivity and keep visitors hooked.
  • SEO Optimized: Achieving online visibility is paramount. My portfolio is built with solid SEO practices in mind, ensuring its content is easily discoverable by search engines.
  • Open Graph Integration: Make content sharing visually appealing! I've implemented Open Graph metadata, ensuring that shared links on social media platforms display rich and enticing previews.
  • Embedded YouTube Videos: Enrich articles and projects with dynamic content. I've integrated support for embedding YouTube videos to create a more engaging experience.
  • Code Embedding: Showcase code snippets and demos directly within articles and projects. Sharing code examples has never been easier or more interactive.
  • Rich Text Content with Sanity: Craft detailed articles and project descriptions with ease, thanks to Sanity's rich text content capabilities.

Setup and Contributions

Excited to dive in and contribute to my portfolio? Follow these steps to set up the project locally and collaborate:

  1. Fork the Repository: Start by forking this repository to your own GitHub account.
  2. Clone the Forked Repository: Clone the repository to your local machine using the following command.
    1. git clone https://github.com/sahilverma-dev/sahil-verma
  3. Install Dependencies: Run npm install to install the project's dependencies.
  4. Add token: Go to the API section of your Sanity project and add a new token with editor access. https://www.sanity.io/manage/personal/project/YOUR_PROJECT_ID/api
  5. Configure environment variables: Create a new .env on the basis of the .env.example.
  6. Start the Development Server: Launch the development server with npm run dev.
  7. Make Edits: Feel free to make changes, experiment, and improve the portfolio.
  8. Create a Pull Request: Once you're ready, create a pull request to contribute your changes back to the main repository.

Get in Touch

I'm always excited to connect, collaborate, and receive feedback. Whether you have questions, suggestions, or just want to say hi, don't hesitate to reach out:

Let's create digital magic together! 🚀