Copilot instructions

1# Liant Portfolio - AI Copilot Instructions
2 
3## Project Overview
4A data-driven React 18 portfolio built with Vite, featuring dynamic theme switching and section-based content architecture. All portfolio content is configurable via a single `portfolio.jsx` file, making it maintainable and extensible without touching components.
5 
6## Architecture
7 
8### Data Flow
9**Configuration → Containers → Components → Styling**
10 
11- **Source of Truth:** [src/portfolio.jsx](src/portfolio.jsx) - Contains all portfolio content (skills, projects, education, experience, etc.)
12- **Router/Layout:** [src/containers/Main.jsx](src/containers/Main.jsx) - Orchestrates rendering of all sections; controls splash screen visibility
13- **Theme System:** [src/contexts/StyleContext.js](src/contexts/StyleContext.js) via [src/hooks/useLocalStorage.js](src/hooks/useLocalStorage.js) - Manages dark/light mode; persists to localStorage
14 
15### Key File Structure
16```
17src/
18├── portfolio.jsx          # Configuration file - EDIT THIS to change content
19├── contexts/StyleContext.js  # Theme context provider
20├── hooks/useLocalStorage.js  # Persistence hook for theme
21├── containers/            # Page sections (greeting, skills, projects, etc.)
22├── components/            # Reusable UI components (Button, Cards, Header)
23└── variables.scss         # Design tokens (colors, spacing, typography)
24```
25 
26## Critical Development Patterns
27 
28### 1. Configuration-Driven Development
29**Never hardcode content.** All user-facing content comes from `portfolio.jsx`:
30```jsx
31const greeting = {
32  username: "Your Name",
33  title: "Hello",
34  displayGreeting: true  // Control visibility here
35};
36```
37Containers consume this config and conditionally render based on `display` flags.
38 
39### 2. Theme Context Usage
40Access theme via `useContext(StyleContext)`:
41```jsx
42import { useContext } from "react";
43import StyleContext from "../../contexts/StyleContext";
44 
45const MyComponent = () => {
46  const { isDark, changeTheme } = useContext(StyleContext);
47  return <div className={isDark ? "dark-mode" : "light-mode"}>...</div>;
48};
49```
50CSS class names (`dark-mode`/`light-mode`) on root div determine theming.
51 
52### 3. Component & Container Naming Convention
53- **Containers** (`/containers`): Full-width sections handling data mapping and layout (e.g., Skills, Projects)
54- **Components** (`/components`): Reusable, self-contained UI elements (e.g., Button, Cards)
55- **File Structure:** Folder per component with `ComponentName.jsx` + `ComponentName.scss`
56 
57### 4. Styling System
58Design tokens defined in [src/variables.scss](src/variables.scss) using CSS custom properties:
59```scss
60// Light mode variables
61:root, .light-mode {
62    --bg-body: #f4f4f4;
63    --text-primary: #000000;
64    --btn-primary-bg: #a1902e;
65}
66 
67// Dark mode variables  
68.dark-mode {
69    --bg-body: #0a0a0a;
70    --text-primary: #ffffff;
71}
72```
73Import variables in any SCSS file: `@use "@/variables.scss" as *;` (alias configured in [vite.config.js](vite.config.js))
74 
75### 5. Local Storage Persistence
76Use custom hook for client-side state persistence:
77```jsx
78const [isDark, setIsDark] = useLocalStorage("isDark", defaultValue);
79// Automatically syncs to localStorage
80```
81Used by Main.jsx to persist theme preference across sessions.
82 
83## Build & Deployment
84 
85### Development
86```bash
87npm install          # Install dependencies
88npm run start        # Start Vite dev server (port 3000, auto-opens browser)
89```
90 
91### Production
92```bash
93npm run build        # Builds to `build/` folder (vite build command)
94npm run deploy       # Deploys build/ to gh-pages branch
95```
96**Note:** Deployment uses separate `gh-pages` branch; main branch is development only.
97 
98## Module System & Asset Imports
99- **Type:** ES Modules (`"type": "module"` in package.json)
100- **Path Alias:** Use `@/` for absolute imports to `src/` directory
101```jsx
102  import Button from "@/components/button/Button";
103  import { useLocalStorage } from "@/hooks/useLocalStorage";
104```
105- **Asset Imports:** Images/Lottie animations imported directly:
106```jsx
107  import telkomLogo from "@/assets/images/telkomSchoolsLogo.png";
108  import splashAnimation from "@/assets/lottie/splashAnimation";
109```
110 
111## External Dependencies Reference
112- **React 18:** Modern API (createRoot, hooks)
113- **Framer Motion:** Animation library used in components
114- **Lottie React:** Plays JSON animation files from `assets/lottie/`
115- **react-easy-emoji:** Emoji rendering with `emoji()` wrapper
116- **FontAwesome:** Icon library for soft skills display
117 
118## Adding New Portfolio Sections
1191. Add configuration object to [src/portfolio.jsx](src/portfolio.jsx) with `display: true/false`
1202. Create container in `src/containers/YourSection/`
1213. Import and add to [src/containers/Main.jsx](src/containers/Main.jsx) render order
1224. Container reads config via import and conditionally renders based on `display` flag
1235. Add navigation link to [src/components/header/Header.jsx](src/components/header/Header.jsx) using shared config flags
124 
125## Editor Shortcuts & Conventions
126- **SCSS Variables:** Prefix with `$` (e.g., `$buttonColor`, `$brandGold`)
127- **CSS Variables:** Use `--` prefix for theme-switchable properties
128- **Component Props:** Destructure in function signature; support `className` for styling overrides
129- **Accessibility:** Use semantic HTML; ensure header nav links match Section IDs for anchor linking
130 
131## Performance Considerations
132- Vite is configured to chunk vendor libraries separately (React, React-DOM, Framer Motion)
133- Splash screen hidden after `splashScreen.duration` ms (default: 1000ms)
134- SVG import support via `vite-plugin-svgr` for component-based SVG usage
135