Marc Aedrian C. Andres - Portfolio Website

A modern, minimal single-page portfolio built with Vite + React + Tailwind CSS v4 featuring a clean, responsive design.

🚀 Quick Start

Prerequisites

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

Installation

# Navigate to the project directory
cd Port

# Install dependencies
npm install

# Start development server
npm run dev

The website will automatically open at http://localhost:3001 in your browser.

Building for Production

npm run build

# Preview production build
npm run preview

📁 Project Structure

Port/
├── index.html              # Main HTML file
├── package.json            # Project dependencies
├── vite.config.js          # Vite configuration
├── tailwind.config.js      # Tailwind CSS configuration
├── postcss.config.js       # PostCSS configuration
├── public/
│   └── profile.jpg         # Profile image (replace with actual image)
└── src/
    ├── main.jsx            # React entry point
    ├── index.css           # Tailwind CSS imports
    ├── App.jsx             # Main App component
    ├── components/
    │   ├── Header.jsx      # Header with name and intro
    │   ├── Navigation.jsx   # Sidebar with smooth scroll navigation
    │   ├── Content.jsx      # All content sections
    │   └── ProfileImage.jsx # Profile image display

✨ Features

• Single-Page Application - Smooth scrolling between sections
• Responsive Design - Works on desktop, tablet, and mobile
• Tailwind CSS v4 - Modern utility-first CSS framework
• Clean Navigation - Active section highlighting
• Minimal & Modern Styling - Neutral color palette
• Fast Performance - Optimized with Vite
• Easy to Customize - Well-structured components with Tailwind classes

🎨 Customization

Update Profile Image

Replace public/profile.jpg with your actual profile photo.

Update Content

Edit component files in src/components/:

• Header.jsx - Name, role, contact info, and intro
• Content.jsx - All sections (About, Skills, Projects, Seminars, Interests)

Customize Styles

All styling uses Tailwind CSS classes directly in the JSX components. To customize:

1. Update color values in tailwind.config.js under theme.extend.colors
2. Modify component classes in the component files
3. Add custom utilities in tailwind.config.js

🎯 Sections

1. About Me - Education and thesis information
2. Skills - Programming languages and tools
3. Projects - Featured projects with descriptions
4. Seminars & Workshops - Professional development
5. Interests - Personal hobbies

🔧 Tech Stack

• React 18 - UI library
• Vite 5 - Build tool and dev server
• Tailwind CSS v4 - Utility-first CSS framework
• JavaScript (ES6+) - Modern JavaScript

📱 Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers