🌟 3D Interactive Portfolio

A unique and immersive way to showcase your skills and projects

🚀 Portfolio Performance & SEO

Achieving top scores in SEO, Best Practices, and Accessibility ensures a superior user experience and discoverability!

Lighthouse Performance Report

✨ Features

🌐 Progressive Web App (PWA)

• Cross-Platform Installation: Install and use as a native app on:
  • 💻 Desktop (Windows, macOS, Linux)
  • 📱 Mobile devices (iOS, Android)
• Offline Functionality: Access basic content without internet connection
• Fast Loading: Optimized performance with caching strategies
• Automatic Updates: Always stay up-to-date with the latest version

📨 Email Integration

• Contact Form Integration: Built-in contact form using Nodemailer
• Secure Communication: Encrypted email transmission

🔄 GitHub Integration

• Live Repository Data: Real-time fetch of:
  • Repository statistics
  • Contribution graph
  • Star counts
  • Fork metrics
• Activity Timeline: Display recent GitHub activities
• Project Showcase: Automatic import of pinned repositories
• Rate Limit Handling: Optimized API calls with token authentication

🎮 3D Models & Environment

• Interactive Desktop Setup: Fully 3D rendered workspace
• Custom Model Import: Support for various 3D model formats
• Real-time Rendering: Smooth performance with Three.js
• Environment Mapping: Realistic lighting and reflections
• Mobile-Optimized: Responsive 3D rendering for all devices

🎯 Animations & Interactions

• Smooth Page Transitions: Seamless navigation between sections
• Scroll Animations: Interactive elements reveal on scroll
• Hover Effects: Dynamic feedback on user interaction
• Loading Animations: Engaging loading states
• Particle Effects: Background particle system for visual appeal

🎨 Additional Features

• Responsive Design: Adapts to all screen sizes
• SEO Optimized: Enhanced search engine visibility
• Performance Optimized: Fast loading times
• Accessibility: WCAG compliant design elements

🛠 Installation

1. Clone the repository:

   git clone https://github.com/sinanptm/portfolio.git
   cd portfolio

2. Install dependencies:

   pnpm install

3. Set up environment variables:
   • Create a .env file in the root directory
   • Add the following variables:

     SENDER_EMAIL=your_email@example.com
     NODEMAILER_PASSKEY=your_nodemailer_password
     RECEIVER_EMAIL=recipient_email@example.com
     NEXT_PUBLIC_GITHUB_TOKEN=your_github_apiToken

4. Start the development server:

   pnpm run dev

5. View the portfolio:
   • Open your browser
   • Visit http://localhost:3000

🔧 Environment Variables

Variable	Description
SENDER_EMAIL	Email address used to send contact form messages
NODEMAILER_PASSKEY	Password/API key for email service
RECEIVER_EMAIL	Email address where contact form messages will be received
NEXT_PUBLIC_GITHUB_TOKEN	For getting Github Stats and Activities with more Rate Limit

🎨 Customization

Content Modification

All content is stored in the constants folder for easy personalization:

1. Update Personal Information:
   • Navigate to constants/index.ts
   • Modify values to reflect your:
     • Personal information
     • Skills
     • Projects
     • Experience
2. Metadata Updates:
   • Open app/layout.ts
   • Update metadata fields with your information

3D Environment Customization

Desktop Wallpaper:

1. Navigate to /public/desktop/textures
2. Replace desktop.png with your image

   ⚠️ Note: The model displays a mirror reflection, so rotate your image horizontally before saving

Made with ❤️ by Muhammed Sinan