Andrew Martin | Nextjs Portfolio

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.

View Live Demo

Screenshots

Homepage light

Homepage dark

Projects section

Skills section

Technologies Used

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

Project Features

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

Project Outcomes

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

Project Setup

This is a Next.js project bootstrapped with create-next-app.

To get started with this Next.js portfolio site, follow these steps:

1. Clone the Repository

First, clone the repository to your local machine:

git clone https://github.com/your-username/your-repository-name.git
cd your-repository-name

2. Install Dependencies

Install the project dependencies using Yarn:

yarn install

3. Create Environment File

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.

4. Run the Development Server

Start the Next.js development server:

yarn dev

The application will be available at http://localhost:3000.

5. Build for Production

To build the project for production, run:

yarn build

6. Deploy the Project

For deploying the project, use the following command:

yarn run deploy