| Dimension | Shared | Only in A | Only in B | Overlap |
|---|---|---|---|---|
| Sections | 0 | 14 | 19 | 0% |
| Commands | 3 | 0 | 2 | 60% |
| Section tags | 4 | 2 | 4 | 40% |
What each file covers
Sections
0 shared · 14 only in A · 19 only in B- − Liant Portfolio - Project Guidelines
- − Brief overview
- − Site language policy
- − Communication style
- − Styling conventions
- − Input and form handling
- − State management
- − Commit message conventions
- − Library and dependency policy
- − Section visibility control
- − Build and deployment notes
- − Reusable component structure
- − Accessibility baseline
- − Internationalization note
- + Liant Portfolio - AI Copilot Instructions
- + Project Overview
- + Architecture
- + Data Flow
- + Key File Structure
- + Critical Development Patterns
- + 1. Configuration-Driven Development
- + 2. Theme Context Usage
- + 3. Component & Container Naming Convention
- + 4. Styling System
- + 5. Local Storage Persistence
- + Build & Deployment
- + Development
- + Production
- + Module System & Asset Imports
- + External Dependencies Reference
- + Adding New Portfolio Sections
- + Editor Shortcuts & Conventions
- + Performance Considerations
Commands
3 shared · 0 only in A · 2 only in B- + npm install
- + npm run deploy
- gh-pages
- npm run start
- npm run build
Section tags
4 shared · 2 only in A · 4 only in B- − git-pr
- − do-not
- + setup
- + dependencies
- + performance
- + agent-behaviour
- build
- code-style
- architecture
- ui
Line diff
BryaanF/LiantPortfolio · .clinerules/project-guidelines.md
@@ −1 @@
1# Liant Portfolio - Project Guidelines
2
3> **Compatibility Note:** This guideline file is designed to be tool-agnostic and readable by any AI coding assistant (Cline, Copilot, future tools). It supplements the existing [.github/copilot-instructions.md](../.github/copilot-instructions.md) with additional conventions and preferences not covered there.
4
5## Brief overview
6
7- **Project:** A data-driven, single-page portfolio website for Brilliant Fikri (Liant), built with React 18 + Vite + Tailwind CSS + SCSS.
8- **Nature:** Pure frontend — no backend, no database. All content lives in `src/portfolio.jsx` as a single configuration file.
9- **Deployment:** Static site deployed to GitHub Pages (`gh-pages` branch) via GitHub Actions from `master` branch.
10- **Domain:** [brilliantfikri.com](https://brilliantfikri.com)
11
12## Site language policy
13
14- **Primary language for all user-facing content is English.** The portfolio targets an international/professional audience.
15- **Pending revision:** `pricingSection` in `src/portfolio.jsx` is currently in Bahasa Indonesia and must be translated to English. This includes all `title`, `description`, `desc`, `longDesc`, `features`, `notIncluded`, `workflow` fields, and the WhatsApp checkout message template in `src/containers/pricing/Pricing.jsx` (`handleCheckout` function).
16- Comments in code may use either English or Bahasa Indonesia — both are acceptable.
17- Communication with the developer (AI or human) may use Bahasa Indonesia.
18
19## Communication style
20
21- **Concise and direct.** Avoid filler words and conversational fluff in code comments, commit messages, and documentation.
22- Code comments should explain the "why," not the "what" — the code itself should be self-documenting for what it does.
23- **SCSS comments** use `/* */` block style for section headers (see existing pattern in `variables.scss`).
24- **JSX comments:** `//` for inline, `/* */` for multi-line explanations.
25
26## Styling conventions
27
28- **Tailwind CSS is the primary styling approach** for all new components and sections. Use utility classes directly in JSX (reference `src/containers/pricing/Pricing.jsx` as the canonical example).
29- **SCSS is reserved for reusable custom components** that need encapsulated, complex styles not easily expressed with Tailwind utilities. When creating a new reusable component in `src/components/`, co-locate a `.scss` file in the same folder.
30- **Design tokens:** Always reference CSS custom properties for theme-switchable values:
31 - `var(--bg-body)`, `var(--bg-card)`, `var(--text-primary)`, `var(--text-secondary)`, `var(--btn-primary-bg)`, `var(--border-light)`
32 - These are defined in `src/variables.scss` for both `.light-mode` and `.dark-mode`.
33 - For Tailwind, use arbitrary value syntax when needed: `bg-[var(--bg-card)]`, `text-[var(--text-primary)]`, `border-[var(--border-light)]`.
34- **SCSS variables** (prefixed with `$`) are for non-theme values only (e.g., `$brand-gold`, `$buttonHover`, static colors). Do not use SCSS variables for colors that should respond to dark/light mode.
35- **Never hardcode colors** in component JSX or SCSS that should respect the theme. Always go through CSS custom properties.
36- **Brand color:** Gold `#a1902e` (`$brand-gold`). This is the primary accent across buttons, links, and highlights.
37- **IMPORTANT:** The brand-gold in `tailwind.config.js` must match `$brand-gold` in `variables.scss`. Currently both use `#a1902e`. If one changes, update the other.
38
39## Input and form handling
40
41- **This project has no backend.** There is no server to POST form data to.
42- All "contact" or "checkout" interactions must use **direct action links:**
43 - **WhatsApp:** `https://wa.me/6281331487753?text=...` with a pre-formatted, URL-encoded message.
44 - **Email:** `mailto:briliantfikri@gmail.com` with optional `?subject=...&body=...` parameters.
45- Do NOT create `<form>` elements with submit handlers — there is nothing to handle submissions.
46- Do NOT add any form validation libraries or backend integration code.
47
48## State management
49
50- **Context API** is the established pattern for global state (see `src/contexts/StyleContext.js` for theme).
51- **Local state** (`useState` / `useReducer`) is sufficient for component-specific state.
52- **Custom hooks** in `src/hooks/` for reusable state logic (e.g., `useLocalStorage` for persistence).
53- Do NOT introduce Redux, Zustand, or other external state management libraries — they are unnecessary for this project's complexity level.
54
55## Commit message conventions
56
57Use structured, prefixed commit messages. The format is: `<type>: <brief description>`
58
59| Prefix | Use when |
60| ----------- | ---------------------------------------------------------------- |
61| `feat:` | Adding a new section, component, or feature |
62| `fix:` | Fixing a bug, broken style, or incorrect behavior |
63| `refactor:` | Restructuring code without changing functionality |
64| `style:` | CSS/SCSS/Tailwind adjustments only (no logic changes) |
65| `docs:` | Updating README, comments, or documentation files |
66| `chore:` | Dependency updates, config changes, build tweaks |
67| `content:` | Updating portfolio data in `portfolio.jsx` (text, images, links) |
68
69Examples:
70
71- `feat: add pricing calculator with WhatsApp checkout`
72- `fix: dark mode card background not applying on mobile`
73- `content: translate pricing section to English`
74- `chore: update framer-motion to v12`
75
76## Library and dependency policy
77
78- **No hard restrictions** on library usage, but exercise caution:
79 - Avoid packages with known security vulnerabilities or a history of unmaintained releases with CVEs.
80 - Prefer well-maintained, widely-adopted libraries with active GitHub repositories and recent releases.
81 - Before adding a new dependency, ask: "Can this be done with what we already have?" The project already includes React 18, Framer Motion, Lottie React, FontAwesome, and react-icons — which cover most UI needs.
82- **Do not add backend frameworks, ORMs, or database drivers** — this is a static frontend only.
83
84## Section visibility control
85
86- Every major section in `src/portfolio.jsx` has a `display: true/false` flag.
87- Containers in `src/containers/` must check this flag and return `null` when `display` is false.
88- The header navigation in `src/components/header/Header.jsx` should also check these flags to show/hide nav links accordingly.
89- When adding a new section, follow the pattern: config object → container with display check → registration in `Main.jsx` → optional nav link.
90
91## Build and deployment notes
92
93- **Dev server:** `npm run start` → Vite on port 3000, auto-opens browser.
94- **Production build:** `npm run build` → outputs to `build/` directory.
95- **Deployment:** GitHub Actions workflow (`.github/workflows/deploy.yml`) triggers on push to `master`, builds, and deploys to `gh-pages` branch. Also runs weekly on Monday 12:00 UTC.
96- **CI variable:** `CI=false` is set in the workflow to prevent treating warnings as errors during build.
97- **Node version:** 18.x (locked in CI workflow).
98
99## Reusable component structure
100
101When creating a new reusable component in `src/components/`:
102
103```
104src/components/MyComponent/
105├── MyComponent.jsx # Component logic
106└── MyComponent.scss # Styles (only if Tailwind is insufficient)
107```
108
109- Component file uses PascalCase matching the folder name.
110- Accept `className` prop to allow parent styling overrides.
111- Use `export default function ComponentName(...)` pattern (consistent with existing codebase).
112
113## Accessibility baseline
114
115- Use semantic HTML elements (`<section>`, `<nav>`, `<button>`, `<h1>`-`<h6>`).
116- Ensure header navigation links correspond to section `id` attributes for anchor-based scrolling.
117- Images should include meaningful `alt` text.
118- Interactive elements must be keyboard-accessible (buttons, not divs with onClick).
119
120## Internationalization note
121
122- The website currently supports a single language (English, with some Indonesian pending revision).
123- No i18n framework is in use. If multi-language support is added in the future, use the `feat_lang` add-on structure already defined in `pricingSection.featuresList` as a starting point (ID/EN, 2 languages).
124
BryaanF/LiantPortfolio · .github/copilot-instructions.md
@@ +1 @@
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
@@ −1 +1 @@
1−# Liant Portfolio - Project Guidelines
1+# Liant Portfolio - AI Copilot Instructions
22
3−> **Compatibility Note:** This guideline file is designed to be tool-agnostic and readable by any AI coding assistant (Cline, Copilot, future tools). It supplements the existing [.github/copilot-instructions.md](../.github/copilot-instructions.md) with additional conventions and preferences not covered there.
3+## Project Overview
4+A 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.
45
5−## Brief overview
6+## Architecture
67
7−- **Project:** A data-driven, single-page portfolio website for Brilliant Fikri (Liant), built with React 18 + Vite + Tailwind CSS + SCSS.
8−- **Nature:** Pure frontend — no backend, no database. All content lives in `src/portfolio.jsx` as a single configuration file.
9−- **Deployment:** Static site deployed to GitHub Pages (`gh-pages` branch) via GitHub Actions from `master` branch.
10−- **Domain:** [brilliantfikri.com](https://brilliantfikri.com)
8+### Data Flow
9+**Configuration → Containers → Components → Styling**
1110
12−## Site language policy
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
1314
14−- **Primary language for all user-facing content is English.** The portfolio targets an international/professional audience.
15−- **Pending revision:** `pricingSection` in `src/portfolio.jsx` is currently in Bahasa Indonesia and must be translated to English. This includes all `title`, `description`, `desc`, `longDesc`, `features`, `notIncluded`, `workflow` fields, and the WhatsApp checkout message template in `src/containers/pricing/Pricing.jsx` (`handleCheckout` function).
16−- Comments in code may use either English or Bahasa Indonesia — both are acceptable.
17−- Communication with the developer (AI or human) may use Bahasa Indonesia.
15+### Key File Structure
16+```
17+src/
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+```
1825
19−## Communication style
26+## Critical Development Patterns
2027
21−- **Concise and direct.** Avoid filler words and conversational fluff in code comments, commit messages, and documentation.
22−- Code comments should explain the "why," not the "what" — the code itself should be self-documenting for what it does.
23−- **SCSS comments** use `/* */` block style for section headers (see existing pattern in `variables.scss`).
24−- **JSX comments:** `//` for inline, `/* */` for multi-line explanations.
28+### 1. Configuration-Driven Development
29+**Never hardcode content.** All user-facing content comes from `portfolio.jsx`:
30+```jsx
31+const greeting = {
32+ username: "Your Name",
33+ title: "Hello",
34+ displayGreeting: true // Control visibility here
35+};
36+```
37+Containers consume this config and conditionally render based on `display` flags.
2538
26−## Styling conventions
39+### 2. Theme Context Usage
40+Access theme via `useContext(StyleContext)`:
41+```jsx
42+import { useContext } from "react";
43+import StyleContext from "../../contexts/StyleContext";
2744
28−- **Tailwind CSS is the primary styling approach** for all new components and sections. Use utility classes directly in JSX (reference `src/containers/pricing/Pricing.jsx` as the canonical example).
29−- **SCSS is reserved for reusable custom components** that need encapsulated, complex styles not easily expressed with Tailwind utilities. When creating a new reusable component in `src/components/`, co-locate a `.scss` file in the same folder.
30−- **Design tokens:** Always reference CSS custom properties for theme-switchable values:
31− - `var(--bg-body)`, `var(--bg-card)`, `var(--text-primary)`, `var(--text-secondary)`, `var(--btn-primary-bg)`, `var(--border-light)`
32− - These are defined in `src/variables.scss` for both `.light-mode` and `.dark-mode`.
33− - For Tailwind, use arbitrary value syntax when needed: `bg-[var(--bg-card)]`, `text-[var(--text-primary)]`, `border-[var(--border-light)]`.
34−- **SCSS variables** (prefixed with `$`) are for non-theme values only (e.g., `$brand-gold`, `$buttonHover`, static colors). Do not use SCSS variables for colors that should respond to dark/light mode.
35−- **Never hardcode colors** in component JSX or SCSS that should respect the theme. Always go through CSS custom properties.
36−- **Brand color:** Gold `#a1902e` (`$brand-gold`). This is the primary accent across buttons, links, and highlights.
37−- **IMPORTANT:** The brand-gold in `tailwind.config.js` must match `$brand-gold` in `variables.scss`. Currently both use `#a1902e`. If one changes, update the other.
45+const MyComponent = () => {
46+ const { isDark, changeTheme } = useContext(StyleContext);
47+ return <div className={isDark ? "dark-mode" : "light-mode"}>...</div>;
48+};
49+```
50+CSS class names (`dark-mode`/`light-mode`) on root div determine theming.
3851
39−## Input and form handling
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`
4056
41−- **This project has no backend.** There is no server to POST form data to.
42−- All "contact" or "checkout" interactions must use **direct action links:**
43− - **WhatsApp:** `https://wa.me/6281331487753?text=...` with a pre-formatted, URL-encoded message.
44− - **Email:** `mailto:briliantfikri@gmail.com` with optional `?subject=...&body=...` parameters.
45−- Do NOT create `<form>` elements with submit handlers — there is nothing to handle submissions.
46−- Do NOT add any form validation libraries or backend integration code.
57+### 4. Styling System
58+Design 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+}
4766
48−## State management
67+// Dark mode variables
68+.dark-mode {
69+ --bg-body: #0a0a0a;
70+ --text-primary: #ffffff;
71+}
72+```
73+Import variables in any SCSS file: `@use "@/variables.scss" as *;` (alias configured in [vite.config.js](vite.config.js))
4974
50−- **Context API** is the established pattern for global state (see `src/contexts/StyleContext.js` for theme).
51−- **Local state** (`useState` / `useReducer`) is sufficient for component-specific state.
52−- **Custom hooks** in `src/hooks/` for reusable state logic (e.g., `useLocalStorage` for persistence).
53−- Do NOT introduce Redux, Zustand, or other external state management libraries — they are unnecessary for this project's complexity level.
75+### 5. Local Storage Persistence
76+Use custom hook for client-side state persistence:
77+```jsx
78+const [isDark, setIsDark] = useLocalStorage("isDark", defaultValue);
79+// Automatically syncs to localStorage
80+```
81+Used by Main.jsx to persist theme preference across sessions.
5482
55−## Commit message conventions
83+## Build & Deployment
5684
57−Use structured, prefixed commit messages. The format is: `<type>: <brief description>`
85+### Development
86+```bash
87+npm install # Install dependencies
88+npm run start # Start Vite dev server (port 3000, auto-opens browser)
89+```
5890
59−| Prefix | Use when |
60−| ----------- | ---------------------------------------------------------------- |
61−| `feat:` | Adding a new section, component, or feature |
62−| `fix:` | Fixing a bug, broken style, or incorrect behavior |
63−| `refactor:` | Restructuring code without changing functionality |
64−| `style:` | CSS/SCSS/Tailwind adjustments only (no logic changes) |
65−| `docs:` | Updating README, comments, or documentation files |
66−| `chore:` | Dependency updates, config changes, build tweaks |
67−| `content:` | Updating portfolio data in `portfolio.jsx` (text, images, links) |
68−
69−Examples:
70−
71−- `feat: add pricing calculator with WhatsApp checkout`
72−- `fix: dark mode card background not applying on mobile`
73−- `content: translate pricing section to English`
74−- `chore: update framer-motion to v12`
75−
76−## Library and dependency policy
77−
78−- **No hard restrictions** on library usage, but exercise caution:
79− - Avoid packages with known security vulnerabilities or a history of unmaintained releases with CVEs.
80− - Prefer well-maintained, widely-adopted libraries with active GitHub repositories and recent releases.
81− - Before adding a new dependency, ask: "Can this be done with what we already have?" The project already includes React 18, Framer Motion, Lottie React, FontAwesome, and react-icons — which cover most UI needs.
82−- **Do not add backend frameworks, ORMs, or database drivers** — this is a static frontend only.
83−
84−## Section visibility control
85−
86−- Every major section in `src/portfolio.jsx` has a `display: true/false` flag.
87−- Containers in `src/containers/` must check this flag and return `null` when `display` is false.
88−- The header navigation in `src/components/header/Header.jsx` should also check these flags to show/hide nav links accordingly.
89−- When adding a new section, follow the pattern: config object → container with display check → registration in `Main.jsx` → optional nav link.
90−
91−## Build and deployment notes
92−
93−- **Dev server:** `npm run start` → Vite on port 3000, auto-opens browser.
94−- **Production build:** `npm run build` → outputs to `build/` directory.
95−- **Deployment:** GitHub Actions workflow (`.github/workflows/deploy.yml`) triggers on push to `master`, builds, and deploys to `gh-pages` branch. Also runs weekly on Monday 12:00 UTC.
96−- **CI variable:** `CI=false` is set in the workflow to prevent treating warnings as errors during build.
97−- **Node version:** 18.x (locked in CI workflow).
98−
99−## Reusable component structure
100−
101−When creating a new reusable component in `src/components/`:
102−
91+### Production
92+```bash
93+npm run build # Builds to `build/` folder (vite build command)
94+npm run deploy # Deploys build/ to gh-pages branch
10395 ```
104−src/components/MyComponent/
105−├── MyComponent.jsx # Component logic
106−└── MyComponent.scss # Styles (only if Tailwind is insufficient)
107−```
96+**Note:** Deployment uses separate `gh-pages` branch; main branch is development only.
10897
109−- Component file uses PascalCase matching the folder name.
110−- Accept `className` prop to allow parent styling overrides.
111−- Use `export default function ComponentName(...)` pattern (consistent with existing codebase).
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+ ```
112110
113−## Accessibility baseline
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
114117
115−- Use semantic HTML elements (`<section>`, `<nav>`, `<button>`, `<h1>`-`<h6>`).
116−- Ensure header navigation links correspond to section `id` attributes for anchor-based scrolling.
117−- Images should include meaningful `alt` text.
118−- Interactive elements must be keyboard-accessible (buttons, not divs with onClick).
118+## Adding New Portfolio Sections
119+1. Add configuration object to [src/portfolio.jsx](src/portfolio.jsx) with `display: true/false`
120+2. Create container in `src/containers/YourSection/`
121+3. Import and add to [src/containers/Main.jsx](src/containers/Main.jsx) render order
122+4. Container reads config via import and conditionally renders based on `display` flag
123+5. Add navigation link to [src/components/header/Header.jsx](src/components/header/Header.jsx) using shared config flags
119124
120−## Internationalization note
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
121130
122−- The website currently supports a single language (English, with some Indonesian pending revision).
123−- No i18n framework is in use. If multi-language support is added in the future, use the `feat_lang` add-on structure already defined in `pricingSection.featuresList` as a starting point (ID/EN, 2 languages).
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
124135
