Matin Jahi - Portfolio Website

A modern, animated portfolio website built with Nuxt 3, showcasing frontend development expertise with Vue.js, Three.js, and advanced animations.

🌐 Live Demo: https://matinjahi.netlify.app

• 🎨 Modern UI with custom animations (GSAP, Three.js)
• 🌓 Dark/Light mode support
• 📧 Functional contact form with email delivery
• 🎯 SEO optimized with structured data
• 📱 Fully responsive design
• 🚀 Server-side rendering (SSR)
• ⚡ Optimized performance
• 🔒 Secure form submission with validation

• Nuxt 3 - Vue.js meta-framework
• Vue 3 - Progressive JavaScript framework
• TypeScript - Type-safe development

• Tailwind CSS - Utility-first CSS framework
• GSAP - Professional animations
• Three.js - 3D graphics and effects
• Lenis - Smooth scroll

• Nuxt Content - File-based CMS
• Nuxt SEO - SEO optimization
• Resend - Email delivery service
• VueUse - Vue composition utilities

The contact form is fully functional and sends emails to matinjahi@gmail.com. To set it up:

1. Get a Resend API Key

   • Sign up at resend.com
   • Create an API key from the dashboard

2. Configure Environment Variables

   # Copy the example env file
   cp .env.example .env
   
   # Edit .env and add your Resend API key
   NUXT_RESEND_API_KEY=re_your_api_key_here

3. Test the Form

   npm run dev
   # Visit http://localhost:3000/contact

For detailed setup instructions, see CONTACT_SETUP.md

Make sure to install dependencies:

npm install

Important: After installation, configure your .env file with the Resend API key (see Contact Form Setup above).

Start the development server on http://localhost:3000:

npm run dev

portfolio/
├── .env                          # Environment variables (not in git)
├── .env.example                  # Environment variables template
├── pages/
│   ├── index.vue                # Home page
│   ├── contact.vue              # Contact page with form
│   └── projects.vue             # Projects showcase
├── components/                   # Vue components
│   ├── ContactSection.vue       # Contact section component
│   ├── HeroSection.vue          # Hero section
│   └── ...
├── server/
│   ├── api/
│   │   └── contact.post.ts      # Contact form API endpoint
│   └── utils/
│       └── rateLimit.ts         # Rate limiting utility
├── composables/                  # Vue composables
├── assets/                       # Static assets
└── public/                       # Public files

• ✅ Server-side form validation
• ✅ Client-side form validation
• ✅ Rate limiting (5 requests/hour per IP)
• ✅ Input sanitization
• ✅ XSS protection
• ✅ CSRF protection
• ✅ Environment variables for secrets

• Validation: Real-time client & server validation
• Rate Limiting: Prevents spam (5 emails/hour per IP)
• Error Handling: User-friendly error messages
• Loading States: Visual feedback during submission
• Success/Error Notifications: Clear feedback to users
• Professional Email Template: HTML email with styling
• Reply-To Support: Direct replies to sender's email

1. Connect your repository to Netlify
2. Add environment variable:
   • NUXT_RESEND_API_KEY: Your Resend API key
3. Deploy!

1. Connect your repository to Vercel
2. Add environment variable:
   • NUXT_RESEND_API_KEY: Your Resend API key
3. Deploy!

Build the application for production:

npm run build

Locally preview production build:

npm run preview

This is a personal portfolio project. If you find any issues or have suggestions, feel free to open an issue!

© 2024 Matin Jahi. All rights reserved.

• Email: matinjahi@gmail.com
• Telegram: @Ritalleral
• GitHub: @Matinj031
• LinkedIn: Matin Jahi

Check out the Nuxt documentation and deployment documentation for more information.