🌑 PROJECT_OBSIDIAN (Portfolio)

"Strict on security, gentle on experience."

A brutalist, data-driven personal portfolio engineered with React and Framer Motion. It serves as a digital identity card for Desmond (Disi), bridging the gap between Cyber Security discipline and Creative Frontend aesthetics.

Note: This is a showcase repository. The full source code is housed in a private repository to comply with data protection standards. I am happy to provide a live code walkthrough of the complete architecture during an interview.

---

⚡ The Engineering Philosophy

Unlike typical static portfolios, Project Obsidian is architected as a scalable engineering project. It demonstrates my core belief: Code should be as clean as the UI it renders.

1. Data-Driven Architecture ("Content-as-Code")

I despise hardcoded strings in components. To ensure maintainability and scalability, I completely decoupled the Content Layer from the View Layer.

• Logic: All text, configuration (branding, links), and project data reside in a centralized src/data/portfolioData.js.
• Benefit: Updating my resume, adding a new project, or changing a slogan requires zero changes to the JSX components.

2. Component Modularity

The codebase follows a strict Atomic Design principle:

• src/components/ui: Reusable atoms like StatBar and TechBadge.
• src/components/sections: Logical blocks like Hero and ProfileSpecs.
• src/layout: Global wrappers like Navbar and Footer.

3. Performance & Micro-Interactions

• Physics-Based Animations: Utilizing Framer Motion for spring-loaded interactions (e.g., the 3D Tilt effect on the Project Card).
• Decrypt Text Effect: A custom hook-based animation in the Hero section that simulates a terminal decoding sequence.
• Real-time Clock: A localized Ontario (EST) clock in the footer to ground the user in my physical context.

---

🛠️ Tech Stack

• Core: React 18, Vite
• Styling: Tailwind CSS (Mobile-first responsive design)
• Animation: Framer Motion (Complex gestures & layout transitions)
• Architecture: Separation of Concerns (SoC)
• Deployment: Vercel

---

📂 Project Structure

A look at the clean, production-ready directory structure:

src/
├── assets/              # Static assets (optimized images)
├── components/          # React Components
│   ├── layout/          # Navbar, Footer
│   ├── sections/        # Hero, ProfileSpecs, WorkFufu
│   └── ui/              # Buttons, Badges, StatBars
├── data/                # 🧠 THE BRAIN: Centralized JSON Data
│   └── portfolioData.js # All content lives here (Single Source of Truth)
├── hooks/               # Custom hooks
└── App.jsx

🎨 Design System: "Cyber-Industrial" The UI language reflects my background in Cyber Security and Weightlifting:

Typography: Monospace fonts (Fira Code / JetBrains Mono style) for data; Sans-serif for narrative.

Palette:

• #0a0a0a (Void Black) - The Foundation

• #e5e5e5 (Steel White) - Primary Text

• #0ABAB5 (Tiffany Teal) - The "Empathy" Accent (Active States)

• Motifs: Industrial badges, terminal logs, noise textures, and precision grid lines.

🚀 Running Locally

1. Clone the repository

Bash
git clone [https://github.com/DesmondL-dev/project-obsidian.git](https://github.com/DesmondL-dev/project-obsidian.git)

2. Install dependencies

Bash
npm install

3. Start the development server

Bash
npm run dev

Engineered with discipline in London, Ontario.

© 2026 DESMOND (DISI).