Portfolio Website - Wayah Hendra Stya Kusuma

This is the source code repository for the personal portfolio website of Wayah Hendra Stya Kusuma. The website is built using modern web technologies to showcase profile, skills, projects, and services as a Fullstack Web Developer.

The site is designed with a focus on clean aesthetics, smooth animations, and full responsiveness across various devices.

✨ Key Features

• Modern & Responsive Design: Built with a mobile-first approach using Tailwind CSS.
• Dark & Light Mode: Supports automatic system theme detection and manual toggle.
• Interactive Animations: Powered by Framer Motion for page transitions, parallax background effects, and UI element animations.
• Custom UI Components: Uses the Shadcn UI library for consistent and accessible components.
• Projects Page: Portfolio grid with filtering based on categories (tags).
• Contact Form: Includes form validation using Zod and React Hook Form.
• Interactive Name Card: NameCard component with physics-based effects (drag & spring).

🛠️ Technologies Used

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Shadcn UI (based on Radix UI)
• Animations: Framer Motion
• Form Handling: React Hook Form + Zod Resolver
• Icons: Lucide React
• Theming: next-themes

🚀 Getting Started

Follow the steps below to run this project on your local machine.

Prerequisites

Make sure you have Node.js (version 18.17 or newer recommended) and npm (or yarn/pnpm) installed.

Installation

1. Clone this repository:

git clone https://github.com/your-username/your-repo.git
cd your-repo

2. Install dependencies:

npm install
# or
yarn install

3. Run the development server:

npm run dev
# or
yarn dev

4. Open http://localhost:3000 in your browser to view the website.

📂 Project Structure

Below is a brief overview of the project folder structure:

.
├── public/              # Static assets (images, favicon, etc.)
├── src/
│   ├── app/             # Next.js pages (App Router)
│   │   ├── about/       # About page
│   │   ├── contact/     # Contact page
│   │   ├── portfolio/   # Portfolio page
│   │   ├── layout.tsx   # Main layout
│   │   └── page.tsx     # Home page
│   ├── components/      # React components
│   │   ├── layout/      # Layout components (Navbar, Footer)
│   │   ├── ui/          # Shadcn UI components (Button, Card, Input, etc.)
│   │   ├── mode-toggle  # Theme switch button
│   │   └── ...          # Other components (ProjectCard, NameCard)
│   ├── hooks/           # Custom hooks (use-toast, etc.)
│   ├── lib/             # Utilities and constants
│   │   ├── constants.ts # Project data, skills, social media
│   │   └── utils.ts     # Helper functions (cn)
│   └── styles/          # Global CSS
└── ...config files      # Configurations (tailwind, next, tsconfig)

⚙️ Content Customization

You can update the website content without modifying much logic through the following file:

• src/lib/constants.ts: This file contains static data for:

  • Project list (projects)
  • Skills list (skills)
  • Services (services)
  • Social media links (socials)

Modify the data in this file to update the information displayed on the Home, About, and Portfolio pages.

Note: The Portfolio page (src/app/portfolio/page.tsx) currently has a variable const myProjects = null. Update this logic to display the projects data from constants.ts so the project grid will appear.

📦 Deployment

This project is configured for Static Export (output: 'export' in next.config.js). This means the project can be hosted on static hosting services such as GitHub Pages, Vercel, or Netlify.

To create a production build:

npm run build

The out/ folder will be generated, containing static HTML/CSS/JS files ready to upload.

📄 License

This project is personal. Feel free to use it as a reference or learning template.