My Developer Portfolio

Welcome to my developer portfolio site! This project showcases my skills and projects, built using modern web technologies and design practices.

Tech Stack

• Next.js: React framework for server-side rendering and static site generation.
• React: JavaScript library for building user interfaces.
• shadcn UI: Component library for building accessible and customizable UI components.
• React Hook Form: Library for managing form state and validation.
• Zod: TypeScript-first schema declaration and validation library.
• EmailJS: Service for sending emails directly from the client-side.
• Tailwind CSS: Utility-first CSS framework for styling.
• Framer Motion: Library for animations and gestures in React.
• TypeScript: Typed JavaScript for better developer experience and code quality.
• Redis UpStash: To store view count based on IP Address.

Features

• Responsive Design: The site is fully responsive, ensuring a seamless experience on all devices.
• Dynamic Animations: Smooth and engaging animations using Framer Motion.
• Form Handling: Efficient and type-safe form management with React Hook Form and Zod for validation.
• Email Integration: Direct email functionality powered by EmailJS.
• Custom UI Components: Built with shadcn UI and styled using Tailwind CSS.

Getting Started

To run this project locally, follow these steps:

Prerequisites

• Node.js (v14+)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/your-portfolio-site.git](https://github.com/MasabBinZia/My-Portfolio-Web
   cd your-portfolio-site

2. Install dependencies:

   npm install
   # or
   yarn install

3. Set up environment variables:

   Create a .env.local file in the root of your project and add your environment variables. For example:

   NEXT_PUBLIC_EMAILJS_USER_ID=your_emailjs_user_id
   NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_emailjs_service_id
   NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_emailjs_template_id
   UPSTASH_REDIS_REST_URL=your_redis_Url
   UPSTASH_REDIS_REST_TOKEN=your_redis_token

4. Run the development server:

   npm run dev
   # or
   yarn dev

   Open http://localhost:3000 in your browser to see the site in action.

Building for Production

To build the project for production, run:

npm run build
# or
yarn build

The optimized build will be output to the .next folder, ready to be deployed.

Deployment

You can deploy this project on platforms like Vercel, Netlify, or any other platform that supports Next.js.

License

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

Contact

Feel free to reach out to me via email at [masabmbz5@gmail.com] or connect with me on LinkedIn.