Welcome to the source code for my personal portfolio website! This project showcases my skills, projects, and experience using a modern tech stack. The site is designed to be clean, responsive, and engaging.
- Responsive Design: The portfolio adapts seamlessly to various screen sizes, ensuring a consistent user experience across desktops, tablets, and mobile devices.
- Dark Mode: Users can easily switch between light and dark themes to match their preferences.
- Interactive Profile: A visually appealing profile section includes an image and an animated text flipper showcasing the developer's roles.
- Experience & Projects: Collapsible accordions provide detailed information about the developer's experience and projects. Each project includes links to the GitHub repository and live demo (where available).
- Contact Form: A user-friendly contact form allows visitors to easily reach out. The form uses Nodemailer to send emails directly to the developer's inbox. Note: This requires setting up SMTP credentials (see Installation).
- Social Links: Conveniently access the developer's social media profiles.
- Framework: Next.js 15
- Language: TypeScript
- Styling: Tailwind CSS
- UI Components: Shadcn UI, Radix UI
- Animations: Framer Motion
- Form Handling: React Hook Form, Zod
- Email: Nodemailer
- Deployment: Vercel
- Clone the repository:
git clone https://github.com/taqui-786/Taqui.gitcd Taqui
2. **Install dependencies:**
```bash
npm install- Set up environment variables:
Create a
.env.localfile in the project root and add your SMTP credentials for the contact form:
SMPT_HOST="your-smtp-host"
SMPT_USER="your-smtp-user"
SMPT_PASS="your-smtp-password"- Run the development server:
npm run devOpen http://localhost:3000 in your browser.
The code utilizes several key libraries:
- React Hook Form: Manages form state and validation in the Contact Me section (
src/components/sections/ContactMeSection.tsx). - Zod: Provides schema validation for the contact form data.
- Next-Themes: Enables the dark/light theme switching functionality (
src/components/ThemeProvider.tsx). - Nodemailer: Handles sending emails from the contact form (
src/components/sections/ContactMeSection.tsxandsrc/lib/mailConfiguration.ts). - Shadcn UI: Provides pre-built UI components for a consistent design.
- Framer Motion: Used for animations (e.g., the profile section's text flipper).
Contributions are welcome! Please open an issue or submit a pull request.
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and commit them with clear messages.
- Push your branch to your forked repository.
- Submit a pull request to the main repository.
This project is licensed under the MIT License - see the LICENSE file for details.