Welcome to my vibrant and dynamic portfolio! This project showcases my personality through interactive 3D elements, smooth animations, and a touch of quirkiness. Built with cutting-edge technologies to ensure a delightful user experience.
My Website URL: mohdharish.xyz
Check out the live version here: https://mohd-harish-portfolio.vercel.app/
- Framework: Next.js 14 (App Router) - with Server Components & Streaming
- 3D Graphics: Three.js with React Three Fiber
- Physics: React Three Rapier - for realistic 3D physics
- Styling: Tailwind CSS with shadcn/ui
- Animation Libraries:
- GSAP 3.12+ - for advanced animations
- Framer Motion 11 - for scroll-triggered effects
- State Management: Zustand - lightweight state management
- Shader Support: glslify - for custom shader effects
- Email Handling: EmailJS
- Form Management: React Hook Form
- Icons: Lucide Icons
- Font Handling: Variable fonts with next/font
- Deployment: Vercel
├── public/
│ └── assets/
│ ├── models/ # 3D models for Three.js
│ ├── fonts/ # Custom fonts
│ └── images/ # Static images
├── src/
│ ├── components/
│ │ ├── layout/ # Layout components (Navbar, Footer)
│ │ ├── 3d/ # 3D-related components (Scene, Models)
│ │ ├── ui/ # UI components (Button, Card)
│ │ └── sections/ # Page section components
│ ├── app/ # Next.js App Router pages
│ ├── styles/ # Tailwind CSS configurations and global styles
│ ├── hooks/ # Custom React hooks
│ ├── utils/ # Utility functions and helpers
│ ├── lib/ # Reusable libraries and utilities
│ └── context/ # React context providers
├── .env.local # Environment variables
├── tailwind.config.js # Tailwind CSS configuration
├── next.config.js # Next.js configuration
└── package.json # Project metadata and dependencies
Ensure you have the following installed:
-
Clone the Repository:
git clone https://github.com/yourusername/MohdHarish-Portfolio.git cd MohdHarish-Portfolio -
Install Dependencies:
Using npm:
npm install
Or using Yarn:
yarn install
-
Configure Environment Variables:
Create a
.env.localfile in the root directory and add the following:NEXT_PUBLIC_EMAILJS_SERVICE_ID=your_service_id NEXT_PUBLIC_EMAILJS_TEMPLATE_ID=your_template_id NEXT_PUBLIC_EMAILJS_USER_ID=your_user_id
Replace the placeholders with your actual EmailJS credentials.
-
Run the Development Server:
Using npm:
npm run dev
Or using Yarn:
yarn dev
Open http://localhost:3000 to view the website.
- Colors & Themes: Modify
tailwind.config.jsto change the color palette and theme settings. - 3D Models: Replace or add new 3D models in the
public/assets/models/directory and update the corresponding components. - Content: Update text, images, and other content within the
src/app/directory to reflect your personal information and projects.
Deploy your portfolio effortlessly using Vercel:
-
Sign Up/Login to Vercel:
-
Import Project:
Connect your GitHub repository and import the project.
-
Set Environment Variables:
In the Vercel dashboard, navigate to your project settings and add the environment variables defined in
.env.local. -
Deploy:
Vercel will automatically build and deploy your project. Your portfolio will be live at
https://your-project-name.vercel.app.
Home page showcasing interactive 3D elements.
Projects page with animated project cards.
Contact page featuring a dynamic form.
- Inspired by the Creative Portfolio Tutorial
- 3D models sourced from Sketchfab and Poly Pizza
- Icons provided by Lucide Icons
This project is licensed under the MIT License.
Feel free to customize this README.md to better fit your personal style and the unique features of your portfolio. If you need assistance with specific animations, 3D integrations, or any other features, don't hesitate to ask!
Great choice! Storing blog posts in a database with an admin UI gives you flexibility, real-time updates, and features like comments/likes. Here’s a high-level roadmap and a starter implementation plan using Supabase (recommended for Next.js, free tier, easy setup):
Step 1: Set Up Supabase Go to supabase.com and create a free account/project. Create a table called posts with columns like: id (UUID, primary key) title (text) slug (text, unique) content (text or markdown) author (text) created_at (timestamp) updated_at (timestamp) Get your Supabase project URL and anon/public API key. Step 2: Install Supabase Client Step 3: Connect to Supabase in Your App Create a utility file:
Add these keys to your .env.local and Vercel dashboard.
Step 4: Fetch Posts in Your Blog Page Step 5: Build a Simple Admin UI Create a /admin route (protect it with a password or Supabase Auth). Add a form to create/edit posts and save them to Supabase. Step 6: (Optional) Add Comments/Likes Create a comments table in Supabase. Fetch and display comments under each post. Add a form to submit new comments. Summary Supabase is a great choice for a database with Next.js. You’ll have a real database, an admin UI, and can add features like comments/likes. You control your content and can update it live! Let me know if you want a full code example for the admin UI, authentication, or comments!
- Terminal Enhancements More custom commands (e.g., projects, skills, contact, joke, clear) Command history and autocomplete Animated typing effect for output
- Blog Improvements Blog post reactions (like, clap, etc.) Comments section (with Supabase or third-party) Blog post sharing (Twitter, LinkedIn, etc.) Estimated reading progress bar
- Personalization Theme switcher (light/dark/system) Customizable 3D mascot with more animations Easter eggs (secret commands, hidden pages)
- Interactive Visuals 3D project showcases or interactive demos Animated timeline for your journey Skills radar or animated charts
- Live Features Real-time visitor counter or map Live chat or Q&A bot GitHub activity feed
- Professional Touches Downloadable resume/CV Testimonials carousel Certifications and badges
- Open Source & Community “Sponsor Me” or “Buy Me a Coffee” integration Showcase your open source contributions Let me know if you want code or design ideas for any of these!