🚀 Vladyslav's Portfolio

Welcome to my professional portfolio website built with Next.js! This project showcases my skills, services, and professional projects in a modern, interactive interface with smooth animations and responsive design. 😊

✨ Features

• 🎨 Modern UI with smooth animations using GSAP and Framer Motion
• 📱 Fully responsive design that looks great on all devices
• 🖱️ Custom cursor and interactive elements
• 🔄 Smooth scrolling experience with React Lenis
• 📂 Dynamic project pages with detailed case studies
• 🌐 SEO-friendly structure
• 📊 Service showcase section
• 📞 Contact form for potential clients

🛠️ Tech Stack

• Next.js - React framework with file-based routing
• TypeScript - For type safety and better developer experience
• SASS/SCSS - For component-level styling with modules
• GSAP - For advanced animations
• Framer Motion - For interactive UI components
• React Lenis - For smooth scrolling

🚀 Getting Started

Prerequisites

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

Installation

1. Clone this repository:

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

2. Install dependencies:

   npm install
   # or
   yarn install

3. Run the development server:

   npm run dev
   # or
   yarn dev

4. Open http://localhost:3000 with your browser to see the portfolio in action! 🎉

🔧 Project Structure

components/       # Reusable UI components organized by page
├── AboutPage/    # Components for About page
├── HomePage/     # Components for Home page
├── ProjectPage/  # Components for Project pages
├── ContactPage/  # Contact page components
├── Button/       # Reusable button component
└── ...
data/            # Static data like project information
libs/            # External library configurations
pages/           # Next.js pages
public/          # Static assets
styles/          # Global styles and variables
utils/           # Utility functions

📝 Customization

1. Projects: Edit the data/projectsData.ts file to update your project information
2. Images: Replace images in the public/images directory with your own
3. Content: Modify the component files to update text content
4. Styling: Adjust SCSS variables in styles/variables.scss for global style changes

🌐 Deployment

Deploying to Vercel (Recommended)

The easiest way to deploy your portfolio is using Vercel:

1. Create an account on Vercel if you don't have one
2. Connect your GitHub repository
3. Click "Import Project" and select your portfolio repository
4. Deploy! 🚀

Other Deployment Options

You can also deploy to other platforms like Netlify, AWS Amplify, or any hosting provider that supports Next.js applications:

1. Build the production version:

   npm run build
   # or
   yarn build

2. Start the production server:

   npm run start
   # or
   yarn start

⚠️ Common Production Issues & Solutions

1. Images Not Loading

Make sure all image paths are correct. The project uses a utility function getAssetPath to handle paths - make sure this works correctly in production.

// Check utils/assetPath.ts implementation

2. GSAP Animation Issues

If animations don't work correctly in production, check that GSAP is being properly initialized. Some animations may need additional configuration for mobile devices.

3. Performance Optimization

If you experience performance issues:

• Consider implementing image optimization with Next.js Image component
• Lazy load non-critical components
• Optimize GSAP animations to reduce CPU usage

4. Environment Variables

Make sure to set up any necessary environment variables in your deployment platform for API keys or other sensitive information.

📞 Need Help?

Feel free to reach out if you have any questions about setting up or customizing this portfolio! 😊

📄 License

This project is available for personal use and can serve as inspiration for your own portfolio.

---

Built with ❤️ by Metimol