🚀 Professional & Creative Portfolio

A modern, responsive, and interactive personal portfolio website built with React, Vite, and Tailwind CSS. Designed to showcase professional skills, projects, and experience with a polished and engaging user experience.

✨ Key Features

• 🎨 Modern & Clean Design: A sleek, dark-themed UI with cyan accents (customizable themes).
• 📱 Fully Responsive: Optimized for all devices, from desktops to mobile phones.
• ⚡ High Performance: Built with Vite for lightning-fast loading and smooth interactions.
• 🎭 Smooth Animations: Integrated ScrollReveal and custom CSS animations for engaging transitions.
• 🛠️ Tech Carousel: Infinite scrolling carousel showcasing technical skills with SVG logos.
• 🎓 Interactive Timeline: Detailed education journey with expandable cards.
• 💼 Project Showcase: Professional modals for detailed project and certificate views.
• 👁️ Accessibility: Thoughtful color contrast and semantic HTML structure.

🛠️ Tech Stack

This project leverages a robust modern stack:

• Frontend Framework: React (v18+)
• Build Tool: Vite
• Styling: Tailwind CSS
• Icons: Lucide React & Devicon
• Animations: Custom CSS & ScrollReveal logic

📂 Project Structure

src/
├── assets/         # Images and static assets
├── components/     # Reusable UI components (Modal, Sidebar, Carousel, etc.)
├── context/        # React Context (e.g., ThemeContext)
├── hooks/          # Custom hooks (e.g., useScrollAnimation)
├── sections/       # Page sections (Hero, About, Education, Projects, etc.)
├── App.jsx         # Main application component
└── main.jsx        # Entry point

🚀 Getting Started

Follow these steps to set up the project locally on your machine.

Prerequisites

• Node.js (v16.0.0 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/ThariqAdzikra/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 in your browser Visit http://localhost:5173 to view the application.

🌟 Customization

• Content: Update src/sections/ files to reflect your personal data.
• Colors: Modify src/index.css CSS variables to change the color scheme (Primary, Secondary, Accents).
• Images: Replace placeholder images in src/assets/images/ with your own photos.

👤 Author

Muhammad Thariq Adzikra

• Role: Fullstack Developer | UI/UX Enthusiast | Data Engineer
• Location: Indonesia
• GitHub: @ThariqAdzikra

---

Built with ❤️ and ☕ by Thariq Adzikra