Yuna Tseng - Data Scientist Portfolio

A modern, responsive personal portfolio website designed to showcase Data Science projects, experience, and technical skills. Built with a focus on performance, aesthetics, and user experience using the "eNomad" design system.

✨ Features

• 🎨 "eNomad" Design System: A warm, editorial aesthetic featuring a "Cream & Coral" palette (#FAF9F6 background, #E67373 accent) and premium Serif typography (Playfair Display).
• ⚡ Modern Architecture: Built on React 18 and Vite for lightning-fast performance and hot module replacement.
• 📱 Fully Responsive: Optimized layouts for all devices, including specific mobile adaptations for the Projects carousel (vertical stacking, peek effect).
• ✨ Interactive UI: Smooth scroll animations powered by Framer Motion and touch-friendly image sliders using Swiper.js.
• 🔍 SEO & Accessibility: Pre-configured with Open Graph social tags, semantic HTML, and ARIA labels for maximum discoverability and inclusivity.
• 🧩 Modular Codebase: Clean, component-based architecture separating logic (src/components) from content (src/data).

🛠️ Tech Stack

• Core: React 18, Vite
• Styling: Tailwind CSS
• Animations: Framer Motion
• Carousel: Swiper.js
• Icons: Lucide React
• Deployment: Vercel

🚀 Getting Started

Prerequisites

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

Installation

1. Clone the repository:

   git clone https://github.com/yuping1624/yuna-portfolio.git
   cd yuna-portfolio

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

   Open http://localhost:5173 to view it in the browser.

Building for Production

To create a production-ready build:

npm run build

The output will be in the dist folder, ready to be deployed to Vercel, Netlify, or any static host.

📂 Project Structure

src/
├── components/
│   ├── layout/       # Global layout components (Navbar, Footer)
│   ├── sections/     # Page sections (Hero, Projects, Experience, etc.)
│   └── ui/           # Reusable UI atoms (Buttons, Toasts)
├── data/
│   └── portfolio.js  # Centralized content file (Text, Links, Data)
├── lib/              # Utility functions
├── App.jsx           # Main application entry point
└── index.css         # Global styles and Tailwind directives

📄 License

This project is open source and available under the MIT License.