Architecture Overview

Summary Overview

A complete guide to understanding how the My portfolio ecosystem works-three interconnected websites working together to showcase skills, projects, and infrastructure.

Updated: 2025-11-26
designinfrastructureoverview

What This Is

The My Portfolio Ecosystem is not just one website-it's a carefully designed system of three interconnected web applications that work together to tell a complete professional story:

  1. Main Portfolio (ivanncabardo.tech) - The front door and showcase
  2. Homelab Funnel (homelab.ivanncabardo.tech) - The infrastructure deep-dive
  3. Documentation Funnel (documentation.ivanncabardo.tech) - The knowledge hub

Each site has a specific purpose, but they all share the same modern design language and seamlessly link to each other, creating a cohesive experience for visitors.

The Three Websites Explained

Think of these three sites like different rooms in a professional office building:

1. Main Portfolio - The Reception Area

What it does: This is the first impression. It's a cinematic, interactive showcase of skills, projects, and professional experience.

Who it's for: Recruiters, potential clients, and anyone who wants to quickly understand what Ivann Cabardo can do.

Key Features:

  • Smooth Scrolling Experience: The page flows like a presentation, with animations that guide your eye.
  • Project Showcase: Real projects with live demos and GitHub links.
  • Skills & Certifications: Visual display of technical expertise (DevSecOps, Cybersecurity, Full-Stack Development).
  • Contact Form: Direct communication without needing email clients.

Technology: Built with React (a JavaScript framework for building interactive websites) and Vite (a super-fast build tool). Runs on port 8080 locally.

Analogy: Think of this like a storefront window-it's designed to catch attention, show the best work, and invite people inside.

2. Homelab Funnel - The Factory Tour

What it does: This site visualizes the behind-the-scenes infrastructure-the "homelab" that powers personal projects and demonstrates DevSecOps skills in action.

Who it's for: Technical recruiters, hiring managers, and fellow engineers who want to see real-world infrastructure work.

Key Features:

  • Architecture Map: A visual tree diagram showing how traffic flows from the public internet through security layers to internal services.
  • Live Services: Showcases running applications like Prometheus (monitoring), Grafana (dashboards), Portainer (container management), and NetBox (network documentation).
  • Security Layers: Explains the "defense-in-depth" approach-Cloudflare tunnels, reverse proxies (Traefik), authentication (Authelia), and containerization (Docker).

Technology: Built with Next.js 16 (a React framework optimized for production), TypeScript (adds safety to JavaScript), and Tailwind CSS (modern styling). Uses Turbopack for fast development.

Analogy: Think of this like a factory tour-you get to see the machinery, understand how things are built, and appreciate the engineering behind the scenes.

3. Documentation Funnel - The Instruction Manual

What it does: This is the knowledge hub-detailed guides, refactor logs, deployment protocols, and technical deep-dives.

Who it's for: Developers, technical collaborators, and anyone who wants to understand the "how" and "why" behind the code.

Key Features:

  • Full-Text Search: Quickly find specific topics or guides.
  • Organized Content: Documentation is grouped by category (Foundations, Guides, Reference).
  • Scrollspy Navigation: The sidebar automatically highlights where you are in the document.
  • MDX Support: Documentation is written in Markdown (easy to read and write) with support for interactive components.

Technology: Built with Next.js 16 and MDX (Markdown with React components). Uses Zod for data validation and React Cache for fast loading.

Analogy: Think of this like an instruction manual-it's where you go when you need detailed explanations, step-by-step guides, or reference material.

How They All Connect

These three sites aren't isolated-they're designed to work together seamlessly:

Cross-Domain Navigation

  • The Main Portfolio has a "Documentation Hub" call-to-action that links to the Documentation Funnel.
  • The Homelab Funnel is accessible from the portfolio's navigation menu.
  • All three sites share a consistent navigation bar with links to each other.

Shared Design System

All three sites use the same visual language:

  • Color Palette: Electric blue, violet, and deep space dark (consistent across all sites).
  • Typography: Space Grotesk for headings, Inter for body text.
  • Glassmorphic Style: Translucent, frosted-glass UI elements with neon accents.
  • Smooth Animations: GSAP and Locomotive Scroll provide the same premium feel everywhere.

Deep Linking

You can link directly to specific sections. For example:

  • ivanncabardo.tech/?section=projects jumps straight to the projects section.
  • documentation.ivanncabardo.tech/foundations/architecture-overview opens this exact page.

This makes it easy to share specific content with recruiters or collaborators.

Technology Stack (Explained Simply)

Here's what powers the ecosystem, broken down for non-technical readers:

| Technology | What It Does | Everyday Comparison | |------------|--------------|---------------------| | React | A JavaScript library for building interactive user interfaces. | Like LEGO blocks-you build complex pages from small, reusable pieces. | | Next.js | A framework built on React that adds server-side rendering and optimization. | Like a car with an automatic transmission-it handles the complex stuff so you can focus on driving. | | TypeScript | JavaScript with added "type safety" to catch errors before they happen. | Like spell-check for code-it catches mistakes as you write. | | Vite | A build tool that makes development extremely fast. | Like a sports car engine-it gets you from 0 to 60 instantly. | | Tailwind CSS | A utility-first CSS framework for styling. | Like a paint-by-numbers kit-you apply pre-made styles quickly and consistently. | | GSAP | A JavaScript animation library for complex, cinematic effects. | Like Adobe After Effects for the web-professional-grade animation control. | | Locomotive Scroll | A library for smooth, virtual scrolling experiences. | Like a luxury car suspension-it makes the ride feel premium and controlled. | | Docker | A tool for packaging applications into isolated containers. | Like shipping containers-each app is self-contained and can run anywhere. | | Zod | A validation library that ensures data is correct and safe. | Like a security checkpoint-it checks that everything is in order before letting it through. |

How Data Flows Through the System

Here's a simplified view of how a visitor interacts with the ecosystem:

graph TD
    A[Visitor arrives at ivanncabardo.tech] --> B{What are they looking for?}
    B -->|Quick overview| C[Main Portfolio: Browse projects, skills, contact]
    B -->|Infrastructure details| D[Homelab Funnel: Explore architecture map, live services]
    B -->|Technical deep-dive| E[Documentation Funnel: Read guides, refactor logs]

    C --> F[Click 'Docs Hub' CTA]
    F --> E

    C --> G[Click 'Homelab' in navigation]
    G --> D

    D --> H[Click 'Documentation' in navigation]
    H --> E

    E --> I[Search for specific topic]
    I --> J[Read MDX content with code examples]

    style A fill:#1a1a2e,stroke:#16213e,stroke-width:2px,color:#fff
    style C fill:#0f3460,stroke:#16213e,stroke-width:2px,color:#fff
    style D fill:#0f3460,stroke:#16213e,stroke-width:2px,color:#fff
    style E fill:#0f3460,stroke:#16213e,stroke-width:2px,color:#fff

Why This Architecture Matters

For Visitors (Non-Technical)

  • Fast Loading: Each site only loads what it needs, so pages appear instantly.
  • Easy Navigation: Clear links and consistent design make it easy to find information.
  • Mobile-Friendly: All three sites work perfectly on phones, tablets, and desktops.
  • Accessible: Built with screen readers and keyboard navigation in mind (WCAG 2.2 AA compliant).

For Recruiters & Hiring Managers

  • Demonstrates Real Skills: This isn't just a resume-it's a working demonstration of modern web development, DevSecOps, and infrastructure management.
  • Shows Best Practices: The code follows industry standards (TypeScript, testing, CI/CD, documentation).
  • Proves Problem-Solving: The architecture solves real problems (performance, security, maintainability).

For Developers & Technical Collaborators

  • Modern Stack: Uses cutting-edge tools (Next.js 16, Turbopack, React 18, GSAP 3).
  • Well-Documented: Every decision is explained in the documentation funnel.
  • Testable: Includes unit tests (Jest), end-to-end tests (Playwright), and performance benchmarks (Lighthouse).
  • Scalable: The architecture can grow-new sections, features, or entire sites can be added without breaking existing code.

Security & Performance

Security Layers (Homelab Funnel)

The homelab demonstrates a defense-in-depth approach:

  1. Cloudflare Tunnel: Hides the actual server IP address from the public internet.
  2. Reverse Proxy (Traefik): Inspects and routes traffic, blocking malicious requests.
  3. Authentication (Authelia): Requires login with 2FA before accessing internal services.
  4. Containerization (Docker): Isolates applications so a breach in one doesn't affect others.

Performance Benchmarks (Main Portfolio)

Recent Lighthouse scores:

  • Desktop Performance: 98/100
  • Mobile Performance: 73/100 (optimized for real-world conditions)
  • Accessibility: 100/100
  • Best Practices: 100/100
  • SEO: 100/100

What's Next?

This ecosystem is continuously evolving. Planned improvements include:

  • Phase 6B Optimization: Further code-splitting to improve mobile performance to 90+.
  • Homelab Expansion: Adding more services (Uptime Kuma, Vaultwarden, Home Assistant).
  • Documentation Growth: More guides on DevSecOps workflows, deployment strategies, and troubleshooting.
  • Interactive Demos: Embedded code playgrounds for trying out examples directly in the docs.

Summary

The My Portfolio Ecosystem is a three-part system designed to showcase professional skills at every level:

  • Main Portfolio: The visual showcase (React + Vite).
  • Homelab Funnel: The infrastructure deep-dive (Next.js + Docker).
  • Documentation Funnel: The knowledge hub (Next.js + MDX).

All three sites share a consistent design, seamless navigation, and modern technology. Whether you're a recruiter looking for a quick overview, a hiring manager evaluating technical skills, or a developer exploring the code, this architecture provides a clear, accessible, and impressive experience.

Ready to explore? Start with the Main Portfolio, dive into the Homelab Funnel, or search the Documentation Hub for specific topics.