This is my personal portfolio website built with Next.js, showcasing information about myself. It includes sections for about, projects, skills, experience, and a contact form. Project deployed on Vercel.
- Next.js: React framework for server-side rendering and static site generation.
- React: JavaScript library for building user interfaces.
- Tailwind CSS: A utility-first CSS framework for rapid UI development.
- TypeScript: A superset of JavaScript that adds static typing.
- Framer Motion: Animation library for React.
- React Intersection Observer: React implementation of the Intersection Observer API for handling viewport-based triggers.
- React Hot Toast: Library for creating customizable toast notifications.
- React Icons: A library containing popular icons for React projects.
- React Email Components: Library for building email templates with React.
- Resend: API for sending transactional emails.
- React Vertical Timeline Component: React component for creating vertical timelines.
- Dynamic Navigation: The website includes a dynamic navigation menu that updates based on the active section, providing a seamless user experience.
- Animated Sections: Integrated animations using for smooth transitions and scroll-based animations.
- Light and Dark Mode: The website supports light and dark themes.
- About, Projects, Skills, and Experience Sections: Comprehensive sections showcasing information on projects, skills, and professional experience.
- Contact Form: A fully functional contact form powered by Resend and React Email for handling form submissions.
- Understanding Key Next.js concepts: Gained hands-on experience with Next.js 14, including its features such as the app directory, server actions, and integration with React.
- Development with TypeScript: Understanding and defining typesafte data and integrating it with react components.
- Dynamic Theming and Context Management: Implemented a light and dark mode feature, learning how to manage themes using local storage and React Context API by centralizing global application state and providing/consuming the state accross the application using context providers and custom hooks.
- Advanced Animation Techniques: Applied Framer Motion for animations and React Intersection Observer for scroll-based effects, enhancing user interaction.
- Contact Form Submission: Successfully integrated Resend and Nextjs Server Action to handle form submissions and customizing email template using React Email.
- Responsive Design Skills: Enhanced skills in creating responsive designs, ensuring that the website performs well across different devices and screen sizes.
This is a Next.js project bootstrapped with create-next-app
.
To get started with this Next.js portfolio site, follow these steps:
First, clone the repository to your local machine:
git clone https://github.com/your-username/your-repository-name.git
cd your-repository-name
Install the project dependencies using Yarn:
yarn install
Create a .env.local file in the root directory of the project to store your environment variables. Add your Resend API key as follows:
RESEND_API_KEY=your-resend-api-key
Replace your-resend-api-key with your actual API key from Resend.
Start the Next.js development server:
yarn dev
The application will be available at http://localhost:3000.
To build the project for production, run:
yarn build
For deploying the project, use the following command:
yarn run deploy