🛠️ Professional Technical Dossier // Digital Business Card

Live Portfolio: https://cwillam.de
Target Role: Junior DevSecOps Engineer / Azure Cloud Specialist
Design Philosophy: Minimalist, High-Signal Layout, Zero-Third-Party Architecture.

🎯 Project Overview

This repository contains the source code for my professional portfolio website. It is designed as a digital business card and technical dossier, specifically optimized to provide HR departments and Technical Leads with a clear view of my DevSecOps trajectory and technical competencies within seconds.

🛡️ Privacy-by-Design & GDPR Compliance

This project is built with a strict Security-First mindset. To ensure 100% GDPR compliance and protect visitor data sovereignty, the following architectural choices were made:

• Zero-Third-Party Connections: All assets (Fonts, Icons, Frameworks) are localized. No requests are sent to Google, CDNs, or external tracking servers.
• Localized Typography: Google Fonts (Inter & JetBrains Mono) are hosted locally to prevent IP leakage to third-party servers.
• Localized Frameworks: Tailwind CSS is bundled locally within the project structure.
• No Cookies / No Tracking: Zero usage of cookies, analytics, or tracking scripts.

🤖 AI-Native Orchestration & Development

This project demonstrates my ability to leverage modern AI-pair-programming workflows (Gemini) to achieve production-ready results with maximum efficiency.

• Architectural Control: I conceptualized the information architecture, the "Dossier-Look" UI, and the strategic content.
• AI as Execution Layer: Gemini was orchestrated as a high-speed execution tool for the underlying HTML, CSS, and JS implementation.
• Professional Context: In the DevSecOps domain, the ability to orchestrate AI agents for rapid delivery is a critical competency.

🏗️ Technical Architecture

• Tech Stack: HTML5, Tailwind CSS (Localized Utility-First Engine), Vanilla JavaScript.
• Asset Management:
  • /assets/fonts: Localized web fonts for privacy compliance.
  • /assets/icons: Localized vector assets (SVG) to eliminate external dependencies.
  • /js: Localized framework engines and UI logic.
• Modular Structure: Clean separation of concerns between structure, styling, and logic.

📂 Project Structure

portfolio-website/
├── assets/
│   ├── fonts/    # Localized GDPR-compliant web fonts
│   ├── images/   # Profile assets
│   └── icons/    # Localized SVGs (Azure, Sentinel, Docker, etc.)
├── css/          # Custom theme variables and style overrides
├── js/           # Localized Tailwind engine and UI Logic
├── index.html    # Main entry point
└── README.md     # Technical documentation

---

Christoph Willam
Software Developer Trainee (FIAE) | Bamberg, Germany