Brand Identity & Guidelines - Nathaniel Orange Portfolio

Brand Name: Nathaniel Orange Portfolio
Tagline: Full Stack Developer | Vertical AI Systems Designer | Automation Engineer
Company: Halimede AI

This skill defines the core constraints for visual design, technical implementation, and content creation for Nathaniel Orange's professional portfolio. Strictly adhere to these guidelines to maintain consistency.

Quick Reference

Reference Documentation

Depending on the task you are performing, consult the specific resource files below. Do not guess brand elements; always read the corresponding file.

For Visual Design & UI Styling

If you need exact colors, fonts, spacing, shadows, or component patterns: 👉 resources/design-tokens.json

Key tokens defined:

• •Color palette (primary, secondary, text, hero gradients)
• •Typography (font families, weights, sizes)
• •Spacing (section padding, gaps, container widths)
• •UI patterns (border radius, shadows, transitions)
• •Component classes (buttons, cards, badges, navbar)

For Coding & Component Implementation

If you are generating code, choosing libraries, or structuring components: 👉 resources/tech-stack.md

Defines:

• •Core stack (Next.js 15, TypeScript, Tailwind CSS 4)
• •Forbidden technologies (no AI libraries, no database)
• •Component patterns (Server vs Client components)
• •Data-driven architecture (portfolio-data.json → types)
• •File structure and image handling

For Copywriting & Content Generation

If you are writing descriptions, updating portfolio text, or creating CTAs: 👉 resources/voice-tone.md

Defines:

• •Brand persona (confident, innovative, professional)
• •Writing guidelines by section (Hero, Experience, Projects)
• •Terminology guide (what to use, what to avoid)
• •Formatting conventions (dates, contact info, social links)

Page Section Order (Current vs Recommended)

Current Layout (page.tsx)

1. •Hero (Wavy Background + Contact Info)
2. •Overview (Cover Letter)
3. •Experience & Education
4. •Skills
5. •Projects ← Currently at bottom
6. •CTA
7. •Footer

⚠️ Layout Optimization Recommendation

To make Projects stand out more, consider:

Option A: Projects After Hero

1. •Hero
2. •Featured Projects ← Move here for immediate visibility
3. •Overview (condensed)
4. •Skills (brief)
5. •Experience
6. •Education
7. •CTA/Footer

Option B: Split Hero with Projects Showcase

1. •Hero with embedded project carousel/highlights
2. •Full Projects Section
3. •Skills
4. •Experience/Education
5. •Footer

See AGENT_README.md for detailed implementation guidance.

Brand Assets

Images (in /public/portfolio_img/)

• •Halimede.png - Halimede AI branding
• •Keepit.png - KeepIt project
• •LeisureLife.png - Leisure Life Vacations
• •Lyric_Lab_1.png - BlockarizedAILab POC
• •Subkitz.png - SubKitz platform

Headshot

• •Location: /public/headshot.jpg
• •Usage: Hero section avatar (128x128, rounded-full)

Color Usage Examples

// Primary actions
className="bg-primary text-white hover:bg-blue-700"

// Card containers
className="bg-white border border-gray-200 rounded-lg hover:border-primary"

// Muted text
className="text-gray-700" // or "text-muted-foreground"

// Hero text (on dark background)
className="text-violet-300" // title
className="text-white/90"   // subtitle
className="text-white/60"   // muted info