CityIsBetter/Website-Portfolio-4.0

This website showcases my projects, skills, and experience, and it was built using Next.js 14 with animations implemented using Framer Motion and GSAP. I have also incorporated smooth page transitions using the Next.js page router. The project is developed with TypeScript and styled using SASS.

My Portfolio Website

Welcome to my portfolio website repository. This website showcases my projects, skills, and experience, and it was built using Next.js 14 with animations implemented using Framer Motion and GSAP. I have also incorporated smooth page transitions using the Next.js page router. The project is developed with TypeScript and styled using SASS.

Table of Contents

• Features
• Technologies Used
• Installation
• Usage
• Screenshots
• Performance Insights
• Contributing
• License

Features

• Next.js 14: The latest version of Next.js provides server-side rendering and static site generation.
• Framer Motion: Used for implementing animations for various elements.
• GSAP: Used for complex animations and transitions.
• Page Transitions: Smooth transitions between pages using the Next.js page router.
• TypeScript: Ensures type safety and better developer experience.
• SASS: Used for writing clean and maintainable CSS.
• Responsive Design: Fully responsive and works on all devices.
• SEO Optimized: Basic SEO optimization for better search engine ranking.

Technologies Used

• Next.js 14
• Framer Motion
• GSAP
• React
• TypeScript
• SASS
• CSS Modules

Installation

To get started with this project, clone the repository and install the dependencies:

git clone https://github.com/your-username/portfolio-website.git
cd portfolio-website
npm install

Usage

To start the development server:

npm run dev

Screenshots

Here are some screenshots of the website:

Performance Insights

The website is optimized for performance, ensuring a fast and smooth user experience. Below are the performance benchmarks:

performance benchmark is low since pageInsight is not suited for websites with page transition and flag the transition as layout shift and reduce score.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or new features.

License

This project is licensed under the MIT License. See the LICENSE file for details.