Welcome to the project powered by a robust tech stack and an organized code structure. This README.md file will guide you through the project setup, folder structure, and provide some context on how to get started.

• About Project
• Folder Structure
• Tech Stack and API
• Getting Started
• Contributing
• License

This website serves as a comprehensive portfolio showcasing my various projects and expertise in programming. Built on a robust tech stack it offers a dynamic and visually appealing user experience.

Utilizing lazy-loading techniques for content and React components, the website achieves an impressive Page speed score of 92 for mobile devices, ensuring optimal performance. Additionally, meticulous SEO optimization has resulted in an 86 score, enhancing the website's visibility and reach on search engines. Furthermore, it includes Schema.org microdata in JSON+LD format for enhanced search engine understanding.

In addition to performance and SEO enhancements, the site incorporates a Content Security Policy (CSP) to prevent XSS attacks, ensuring a secure browsing experience for users.

The architecture of the project is based on the principles of Feature-Sliced Design, providing a structured and scalable foundation for seamless development and maintenance. With a focus on both technical excellence and user experience, this website serves as a testament to my skills and dedication to delivering high-quality web solutions.

The project is organized using the Feature-Sliced Design approach, which divides the codebase into meaningful sections:

• app: This folder contains app-wide settings, styles, and providers. It's a great place to configure global settings and provide context to the entire application.

• pages: The compositional layer where full pages are constructed from entities, features, and widgets. This is where you define the structure of your application's screens.

• widgets: This folder is dedicated to combining entities and features into meaningful blocks. Widgets can be reused across different pages or features, promoting code reusability.

• features: Features represent user interactions and actions that bring business value to the user. Each feature should encapsulate a specific piece of functionality.

• entities: Business entities live here. These are the core data structures and models that represent the fundamental concepts of your application.

• shared: Reusable functionality detached from the specifics of the project/business. This can include utility functions, common components, or any code that can be shared across various parts of your application.

• React: A popular JavaScript library for building user interfaces.
• Framer Motion: A simple and powerful JavaScript animation library for React.
• TypeScript: Adds static types to JavaScript, enhancing code quality and developer experience.
• Vite: A fast build tool for modern web development.
• SCSS: A preprocessor for CSS, providing a more organized and maintainable way to style your components.
• SVGR: A tool to transform SVG files into React components, making it easy to work with SVG graphics in your project.
• ESLint: A linter tool to analyze your code for potential errors and enforce code style conventions.
• Prettier: An opinionated code formatter to ensure consistent code formatting.
• AirBnB: A popular ESLint and Prettier configuration that enforces coding standards and best practices.

• Emailjs: Send text/html emails from your code to any smtp server.

1. Clone the repository:

   git clone <repository-url>
   cd <project-directory>

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and visit http://localhost:3000 to see your application in action.

Contributions are welcome! If you'd like to contribute to this project, please follow our contribution guidelines.

This project is licensed under the MIT License, which means you are free to use, modify, and distribute the code in accordance with the terms of the license.