Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mksonkar/portfolio-react-nextjs
A fully responsive portfolio using React, Next.js and TailwindCSS
https://github.com/mksonkar/portfolio-react-nextjs
intersection-observer intersectionobserver next nextjs react react-hooks reactjs tailwind tailwind-css tailwindcss typescript typescript-react
Last synced: 8 days ago
JSON representation
A fully responsive portfolio using React, Next.js and TailwindCSS
- Host: GitHub
- URL: https://github.com/mksonkar/portfolio-react-nextjs
- Owner: mksonkar
- Created: 2024-11-20T04:02:45.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-01-08T12:00:40.000Z (20 days ago)
- Last Synced: 2025-01-08T13:29:30.554Z (20 days ago)
- Topics: intersection-observer, intersectionobserver, next, nextjs, react, react-hooks, reactjs, tailwind, tailwind-css, tailwindcss, typescript, typescript-react
- Language: TypeScript
- Homepage: https://mksonkar.vercel.app
- Size: 2.11 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Portfolio
Welcome to my portfolio project built with **React**, **Next.js**, **TailwindCSS**, and other modern web technologies. This project showcases my skills in frontend development, animation, and email integration. It is designed to be visually appealing, responsive, and interactive.
Watch the demo on YouTube:
[](https://www.youtube.com/watch?v=klkHUVqaYbg)
## Technologies Used
This project is built using the following technologies and libraries:
- **React**: For building the user interface.
- **Next.js**: For server-side rendering and static site generation.
- **TailwindCSS**: For utility-first CSS styling.
- **Framer Motion**: For smooth animations and page transitions.
- **React-Email**: For integrating the email system.
- **Resend**: To handle email delivery functionality.
- **React-Observer-Intersection-API**: For detecting element visibility in the viewport.
- **React-Hot-Toast**: For showing toast notifications.
- **React-Icons**: For adding icons throughout the project.
## Features
- **Responsive Design**: Fully optimized for all screen sizes using TailwindCSS.
- **Smooth Animations**: All page transitions and interactions use **Framer Motion** to provide a delightful user experience.
- **Contact Form**: A contact form integrated with **React-Email** and **Resend** to send messages directly to my inbox.
- **Interactive Elements**: Using **React-Observer-Intersection-API** to trigger animations and effects as users scroll through the site.
- **Toast Notifications**: Using **React-Hot-Toast** to show interactive notifications (e.g., form submission success).
- **Iconography**: **React-Icons** used throughout the project for visual appeal.
## Installation
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
To run this project locally on your machine, follow these steps:
1. Clone the repository:
```bash
git clone [email protected]:mksonkar/portfolio-react-nextjs.git
```
2. Navigate to the project directory:
```bash
cd portfolio-react-nextjs
```
3. Install the required dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm run dev
```
5. Open your browser and visit `http://localhost:3000`.