This commit is contained in:
+409
@@ -0,0 +1,409 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Reese Wells - Self-Hosting & Infrastructure</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav>
|
||||
<div class="nav-inner">
|
||||
<div class="logo"><Reese /></div>
|
||||
<ul class="nav-links" id="navLinks">
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#skills">Skills</a></li>
|
||||
<li><a href="#projects">Projects</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
<button class="hamburger" id="hamburger" aria-label="Toggle menu">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="hero" id="hero">
|
||||
<div class="hero-bg">
|
||||
<div class="orb orb-1"></div>
|
||||
<div class="orb orb-2"></div>
|
||||
<div class="orb orb-3"></div>
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">
|
||||
<span class="dot"></span>
|
||||
Running my own infrastructure
|
||||
</div>
|
||||
<h1>
|
||||
Hi, I'm <span class="gradient-text">Reese Wells</span><br>
|
||||
I build and maintain self-hosted systems
|
||||
</h1>
|
||||
<p>
|
||||
A systems-focused developer passionate about self-hosting, infrastructure automation,
|
||||
and building reliable services that just work. From container orchestration to local AI,
|
||||
I manage a full homelab stack from DNS to deployment.
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="#projects" class="btn btn-primary">
|
||||
See My Projects
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 3l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
<a href="#contact" class="btn btn-secondary">Get In Touch</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About -->
|
||||
<section id="about">
|
||||
<div class="about-grid">
|
||||
<div class="about-image fade-in">
|
||||
<div class="avatar-frame">
|
||||
<div class="avatar-inner">
|
||||
<svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="100" cy="70" r="35" fill="#eab308" opacity="0.6"/>
|
||||
<ellipse cx="100" cy="160" rx="55" ry="40" fill="#eab308" opacity="0.4"/>
|
||||
<circle cx="100" cy="70" r="28" fill="#facc15" opacity="0.8"/>
|
||||
<circle cx="90" cy="65" r="3" fill="#0a0a0b"/>
|
||||
<circle cx="110" cy="65" r="3" fill="#0a0a0b"/>
|
||||
<path d="M92 80 Q100 88 108 80" stroke="#0a0a0b" stroke-width="2" fill="none" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-text fade-in">
|
||||
<p class="section-label">About Me</p>
|
||||
<h2 class="section-title">Infrastructure, automation, and self-hosting</h2>
|
||||
<p>
|
||||
I'm a systems developer who thrives on building and maintaining self-hosted infrastructure.
|
||||
My work spans the full stack of homelab operations: from OS image building with osbuild
|
||||
and Ansible-driven deployments, to container orchestration with Podman quadlets and Kubernetes,
|
||||
to local AI inference and observability.
|
||||
</p>
|
||||
<p>
|
||||
I maintain two main repositories: one for documentation, notes, and tutorials on
|
||||
self-hosted services, and another for the automation layer that deploys and manages
|
||||
services across a fleet of servers. Every service runs as a rootless container with
|
||||
dedicated systemd user sessions, backed by centralized BorgBackup.
|
||||
</p>
|
||||
<div class="about-stats">
|
||||
<div class="stat">
|
||||
<div class="stat-number">80+</div>
|
||||
<div class="stat-label">Services</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-number">2</div>
|
||||
<div class="stat-label">Domains</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="stat-number">100%</div>
|
||||
<div class="stat-label">Self-Hosted</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Skills -->
|
||||
<div class="skills-section" id="skills">
|
||||
<div class="skills-inner">
|
||||
<p class="section-label fade-in">Skills & Expertise</p>
|
||||
<h2 class="section-title fade-in">What I work with</h2>
|
||||
<p class="section-desc fade-in">
|
||||
A broad toolkit focused on infrastructure, automation, and self-hosted services.
|
||||
</p>
|
||||
<div class="skills-grid">
|
||||
<div class="skill-card fade-in">
|
||||
<div class="skill-icon">⚙</div>
|
||||
<h3>Container Orchestration</h3>
|
||||
<p>Rootless containers managed via Podman quadlets, Docker Compose, and Kubernetes clusters with Helm charts.</p>
|
||||
<div class="skill-tags">
|
||||
<span class="skill-tag">Podman</span>
|
||||
<span class="skill-tag">Docker</span>
|
||||
<span class="skill-tag">Kubernetes</span>
|
||||
<span class="skill-tag">k3s</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-card fade-in">
|
||||
<div class="skill-icon">⚛</div>
|
||||
<h3>Infrastructure Automation</h3>
|
||||
<p>Ansible playbooks drive deployments across a multi-server fleet with strict SOP ordering and centralized configuration.</p>
|
||||
<div class="skill-tags">
|
||||
<span class="skill-tag">Ansible</span>
|
||||
<span class="skill-tag">osbuild</span>
|
||||
<span class="skill-tag">systemd</span>
|
||||
<span class="skill-tag">BorgBackup</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-card fade-in">
|
||||
<div class="skill-icon">☁</div>
|
||||
<h3>Networking & DNS</h3>
|
||||
<p>AWS Route53 powers all DNS management with DDNS auto-updating, Caddy reverse proxy with Route53 DNS-validated TLS, and dual-domain strategy.</p>
|
||||
<div class="skill-tags">
|
||||
<span class="skill-tag">Route53</span>
|
||||
<span class="skill-tag">Caddy</span>
|
||||
<span class="skill-tag">Nginx</span>
|
||||
<span class="skill-tag">WireGuard</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-card fade-in">
|
||||
<div class="skill-icon">🤖</div>
|
||||
<h3>Local AI & ML</h3>
|
||||
<p>Full local AI stack: Ollama, LiteLLM, LocalAI for inference, Langfuse for observability, with CUDA and ROCm support.</p>
|
||||
<div class="skill-tags">
|
||||
<span class="skill-tag">Ollama</span>
|
||||
<span class="skill-tag">LocalAI</span>
|
||||
<span class="skill-tag">Langfuse</span>
|
||||
<span class="skill-tag">ROCm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-card fade-in">
|
||||
<div class="skill-icon">❐</div>
|
||||
<h3>Python</h3>
|
||||
<p>Python is the backbone of the homelab: DDNS updates, fleet-wide deployment scripts, AWS integration, and automation tooling with boto3, rich, and uv.</p>
|
||||
<div class="skill-tags">
|
||||
<span class="skill-tag">Python</span>
|
||||
<span class="skill-tag">boto3</span>
|
||||
<span class="skill-tag">uv</span>
|
||||
<span class="skill-tag">mypy</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Projects -->
|
||||
<section id="projects">
|
||||
<p class="section-label fade-in">Featured Projects</p>
|
||||
<h2 class="section-title fade-in">What I've built</h2>
|
||||
<p class="section-desc fade-in">
|
||||
A selection of projects from my homelab and deployment infrastructure.
|
||||
</p>
|
||||
<div class="projects-grid">
|
||||
<div class="project-card fade-in">
|
||||
<div class="project-preview">
|
||||
<div class="code-block">
|
||||
<div class="code-line"><span class="code-keyword">version</span>: <span class="code-string">'3.8'</span></div>
|
||||
<div class="code-line"><span class="code-keyword">services</span>:</div>
|
||||
<div class="code-line"> <span class="code-function">caddy</span>:</div>
|
||||
<div class="code-line"> <span class="code-variable">image</span>: <span class="code-string">caddy:2-alpine</span></div>
|
||||
<div class="code-line"> <span class="code-variable">networks</span>:</div>
|
||||
<div class="code-line"> - <span class="code-string">default</span></div>
|
||||
<div class="code-line"> <span class="code-variable">labels</span>:</div>
|
||||
<div class="code-line"> - <span class="code-string">"caddy.*.reeseapps.com"</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<h3>Reverse Proxy Infrastructure</h3>
|
||||
<p>Caddy and Nginx reverse proxies serving all *.reeseapps.com domains with AWS Route53 DNS-validated TLS. DDNS auto-updates IPv4/IPv6 records across the fleet.</p>
|
||||
<div class="project-meta">
|
||||
<div class="project-tech">
|
||||
<span>Caddy</span>
|
||||
<span>Nginx</span>
|
||||
<span>Route53</span>
|
||||
<span>Podman</span>
|
||||
</div>
|
||||
<div class="project-links">
|
||||
<a href="https://gitea.reeseapps.com" title="Source" target="_blank" rel="noopener">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-card fade-in">
|
||||
<div class="project-preview">
|
||||
<div class="code-block">
|
||||
<div class="code-line"><span class="code-keyword">def</span> <span class="code-function">update_record</span>(<span class="code-variable">domain</span>):</div>
|
||||
<div class="code-line"> <span class="code-variable">ipv4</span> = <span class="code-function">get_public_ip</span>()</div>
|
||||
<div class="code-line"> <span class="code-variable">record</span> = <span class="code-function">route53</span>.<span class="code-function">find</span>(<span class="code-variable">domain</span>)</div>
|
||||
<div class="code-line"> <span class="code-keyword">if</span> <span class="code-variable">record</span>.<span class="code-variable">value</span> != <span class="code-variable">ipv4</span>:</div>
|
||||
<div class="code-line"> <span class="code-function">route53</span>.<span class="code-function">update</span>(<span class="code-variable">record</span>, <span class="code-variable">ipv4</span>)</div>
|
||||
<div class="code-line"> <span class="code-function">log</span>(<span class="code-string">f"Updated {domain}"</span>)</div>
|
||||
<div class="code-line"> </div>
|
||||
<div class="code-line"><span class="code-comment"># Run every 5 minutes</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<h3>Dynamic DNS Service</h3>
|
||||
<p>Automated DDNS keeping AWS Route53 records updated for all servers. Manages dual-domain strategy: reeseapps.com for public services and reeselink.com for internal machine-to-machine connections.</p>
|
||||
<div class="project-meta">
|
||||
<div class="project-tech">
|
||||
<span>Python</span>
|
||||
<span>AWS CLI</span>
|
||||
<span>Route53</span>
|
||||
<span>Podman</span>
|
||||
</div>
|
||||
<div class="project-links">
|
||||
<a href="https://gitea.reeseapps.com" title="Source" target="_blank" rel="noopener">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-card fade-in">
|
||||
<div class="project-preview">
|
||||
<div class="code-block">
|
||||
<div class="code-line"><span class="code-keyword">from</span> <span class="code-string">ollama</span> <span class="code-keyword">import</span> <span class="code-function">Client</span></div>
|
||||
<div class="code-line"> </div>
|
||||
<div class="code-line"><span class="code-variable">client</span> = <span class="code-function">Client</span>(<span class="code-string">"http://localhost:11434"</span>)</div>
|
||||
<div class="code-line"><span class="code-variable">response</span> = <span class="code-variable">client</span>.<span class="code-function">chat</span>(</div>
|
||||
<div class="code-line"> <span class="code-variable">model</span>=<span class="code-string">"llama3"</span>,</div>
|
||||
<div class="code-line"> <span class="code-variable">messages</span>=[...]</div>
|
||||
<div class="code-line">)</div>
|
||||
<div class="code-line"> </div>
|
||||
<div class="code-line"><span class="code-comment"># LiteLLM proxy for unified API</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<h3>Local AI Stack</h3>
|
||||
<p>Complete local AI infrastructure: Ollama and LocalAI for inference, LiteLLM as a unified API proxy, Bifrost for model routing, and Langfuse for observability. Supports both CUDA and ROCm.</p>
|
||||
<div class="project-meta">
|
||||
<div class="project-tech">
|
||||
<span>Ollama</span>
|
||||
<span>LocalAI</span>
|
||||
<span>LiteLLM</span>
|
||||
<span>Langfuse</span>
|
||||
</div>
|
||||
<div class="project-links">
|
||||
<a href="https://gitea.reeseapps.com" title="Source" target="_blank" rel="noopener">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-card fade-in">
|
||||
<div class="project-preview">
|
||||
<div class="code-block">
|
||||
<div class="code-line"><span class="code-comment"># Ansible playbook</span></div>
|
||||
<div class="code-line"><span class="code-keyword">- name</span>: <span class="code-function">Deploy Gitea</span></div>
|
||||
<div class="code-line"> <span class="code-variable">hosts</span>: <span class="code-string">gitea</span></div>
|
||||
<div class="code-line"> <span class="code-variable">tasks</span>:</div>
|
||||
<div class="code-line"> - <span class="code-function">docker_compose_v2</span>:</div>
|
||||
<div class="code-line"> <span class="code-variable">project_src</span>: <span class="code-string">/opt/gitea</span></div>
|
||||
<div class="code-line"> <span class="code-variable">state</span>: <span class="code-string">present</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<h3>Deployment Automation</h3>
|
||||
<p>Ansible-driven deployment pipeline with strict SOP ordering (osbuild -> ddns -> caddy -> nginx -> ntfy -> gitea). Each service runs as a rootless container with dedicated systemd user sessions and centralized BorgBackup.</p>
|
||||
<div class="project-meta">
|
||||
<div class="project-tech">
|
||||
<span>Ansible</span>
|
||||
<span>Podman</span>
|
||||
<span>systemd</span>
|
||||
<span>Borg</span>
|
||||
</div>
|
||||
<div class="project-links">
|
||||
<a href="https://gitea.reeseapps.com" title="Source" target="_blank" rel="noopener">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-card fade-in">
|
||||
<div class="project-preview">
|
||||
<div class="code-block">
|
||||
<div class="code-line"><span class="code-comment"># Self-hosted services</span></div>
|
||||
<div class="code-line"><span class="code-keyword">- Immich</span> <span class="code-comment"># Photo/video management</span></div>
|
||||
<div class="code-line"><span class="code-keyword">- Jellyfin</span> <span class="code-comment"># Media streaming</span></div>
|
||||
<div class="code-line"><span class="code-keyword">- Nextcloud</span> <span class="code-comment"># Cloud storage & sync</span></div>
|
||||
<div class="code-line"><span class="code-keyword">- Gitea</span> <span class="code-comment"># Git service</span></div>
|
||||
<div class="code-line"><span class="code-keyword">- Matrix</span> <span class="code-comment"># Chat protocol</span></div>
|
||||
<div class="code-line"><span class="code-keyword">- Home Assistant</span> <span class="code-comment"># Smart home</span></div>
|
||||
<div class="code-line"><span class="code-keyword">- Pi-hole</span> <span class="code-comment"># DNS ad blocking</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<h3>Self-Hosted Services</h3>
|
||||
<p>A diverse fleet of self-hosted services: Immich for photos, Jellyfin for media, Nextcloud for storage, Matrix for chat, Home Assistant for IoT, and more. Each running as rootless Podman containers with SELinux awareness.</p>
|
||||
<div class="project-meta">
|
||||
<div class="project-tech">
|
||||
<span>Immich</span>
|
||||
<span>Jellyfin</span>
|
||||
<span>Nextcloud</span>
|
||||
<span>Matrix</span>
|
||||
</div>
|
||||
<div class="project-links">
|
||||
<a href="https://gitea.reeseapps.com" title="Source" target="_blank" rel="noopener">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-card fade-in">
|
||||
<div class="project-preview">
|
||||
<div class="code-block">
|
||||
<div class="code-line"><span class="code-comment"># Kubernetes with k3s</span></div>
|
||||
<div class="code-line"><span class="code-keyword">- metallb</span> <span class="code-comment"># L2 load balancer</span></div>
|
||||
<div class="code-line"><span class="code-keyword">- longhorn</span> <span class="code-comment"># Distributed storage</span></div>
|
||||
<div class="code-line"><span class="code-keyword">- traefik</span> <span class="code-comment"># Ingress gateway</span></div>
|
||||
<div class="code-line"><span class="code-keyword">- external-dns</span> <span class="code-comment"># Route53 integration</span></div>
|
||||
<div class="code-line"><span class="code-keyword">- grafana</span> <span class="code-comment"># Metrics dashboards</span></div>
|
||||
<div class="code-line"><span class="code-keyword">- minecraft</span> <span class="code-comment"># Game server</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<h3>Kubernetes Cluster</h3>
|
||||
<p>k3s and k0s Kubernetes clusters with MetalLB for L2 failover, Longhorn for distributed storage, Traefik/Nginx ingress, cert-manager with Route53 DNS challenge, and Helm charts for service deployment.</p>
|
||||
<div class="project-meta">
|
||||
<div class="project-tech">
|
||||
<span>k3s</span>
|
||||
<span>Kubernetes</span>
|
||||
<span>Helm</span>
|
||||
<span>MetalLB</span>
|
||||
</div>
|
||||
<div class="project-links">
|
||||
<a href="https://gitea.reeseapps.com" title="Source" target="_blank" rel="noopener">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact -->
|
||||
<section class="contact-section" id="contact">
|
||||
<p class="section-label fade-in">Get In Touch</p>
|
||||
<h2 class="section-title fade-in">Let's connect</h2>
|
||||
<p class="section-desc fade-in">
|
||||
Always open to discussing self-hosting, infrastructure, open source, or just sharing homelab stories.
|
||||
</p>
|
||||
<div class="contact-links fade-in">
|
||||
<a href="mailto:reese.wells@ducoterra.net" class="contact-link">
|
||||
<span class="link-icon">✉</span>
|
||||
<span>Email</span>
|
||||
</a>
|
||||
<a href="https://gitea.reeseapps.com" class="contact-link" target="_blank" rel="noopener">
|
||||
<span class="link-icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
|
||||
</span>
|
||||
<span>Gitea</span>
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/in/reesewells/" class="contact-link" target="_blank" rel="noopener">
|
||||
<span class="link-icon">in</span>
|
||||
<span>LinkedIn</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<p style="font-size: 0.75rem; color: var(--text-muted);">
|
||||
Built with a 100% self-hosted LLM stack running
|
||||
<a href="https://github.com/ggml-org/llama.cpp" target="_blank" rel="noopener" style="color: var(--accent-hover); text-decoration: none;">llama.cpp</a>,
|
||||
<a href="https://huggingface.co/Qwen/Qwen3.6-35B-A3B" target="_blank" rel="noopener" style="color: var(--accent-hover); text-decoration: none;">Qwen3.6</a>, and
|
||||
<a href="https://opencode.ai/" target="_blank" rel="noopener" style="color: var(--accent-hover); text-decoration: none;">Opencode</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="script.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,36 @@
|
||||
// Mobile menu toggle
|
||||
const hamburger = document.getElementById('hamburger');
|
||||
const navLinks = document.getElementById('navLinks');
|
||||
|
||||
hamburger.addEventListener('click', () => {
|
||||
navLinks.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Close menu on link click
|
||||
navLinks.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navLinks.classList.remove('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Scroll animations
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
|
||||
|
||||
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
|
||||
|
||||
// Smooth scroll for nav links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
});
|
||||
});
|
||||
+741
@@ -0,0 +1,741 @@
|
||||
*, *::before, *::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-primary: #0a0a0b;
|
||||
--bg-secondary: #111113;
|
||||
--bg-card: #18181b;
|
||||
--border: #27272a;
|
||||
--text-primary: #fafafa;
|
||||
--text-secondary: #a1a1aa;
|
||||
--text-muted: #71717a;
|
||||
--accent: #eab308;
|
||||
--accent-hover: #facc15;
|
||||
--accent-glow: rgba(234, 179, 8, 0.15);
|
||||
--gradient-1: linear-gradient(135deg, #eab308, #ca8a04, #a16207);
|
||||
--gradient-2: linear-gradient(135deg, #eab308, #ca8a04);
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border) var(--bg-primary);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
padding: 1rem 2rem;
|
||||
background: rgba(10, 10, 11, 0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
nav .nav-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
background: var(--gradient-1);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: color 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav-links a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: var(--gradient-1);
|
||||
transition: width 0.3s ease;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.nav-links a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.hamburger span {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: var(--text-primary);
|
||||
border-radius: 1px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6rem 2rem 4rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-bg .orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
opacity: 0.4;
|
||||
animation: float 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.hero-bg .orb-1 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: var(--accent);
|
||||
top: 10%;
|
||||
left: 15%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.hero-bg .orb-2 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: #ca8a04;
|
||||
bottom: 15%;
|
||||
right: 15%;
|
||||
animation-delay: -3s;
|
||||
}
|
||||
|
||||
.hero-bg .orb-3 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #eab308;
|
||||
top: 50%;
|
||||
right: 30%;
|
||||
animation-delay: -5s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||
33% { transform: translate(30px, -20px) scale(1.05); }
|
||||
66% { transform: translate(-20px, 20px) scale(0.95); }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 800px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.375rem 1rem;
|
||||
background: var(--accent-glow);
|
||||
border: 1px solid rgba(234, 179, 8, 0.3);
|
||||
border-radius: 100px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--accent-hover);
|
||||
margin-bottom: 2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hero-badge .dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #22c55e;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2.5rem, 6vw, 4.5rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hero h1 .gradient-text {
|
||||
background: var(--gradient-1);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.15rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 560px;
|
||||
margin: 0 auto 2.5rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.75rem;
|
||||
border-radius: 10px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.25s ease;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--gradient-1);
|
||||
color: white;
|
||||
box-shadow: 0 4px 20px var(--accent-glow);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px rgba(234, 179, 8, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-card);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--border);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
section {
|
||||
padding: 6rem 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--accent-hover);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
color: var(--text-secondary);
|
||||
max-width: 560px;
|
||||
margin-bottom: 3rem;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
/* About */
|
||||
.about-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.about-image .avatar-frame {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
max-width: 360px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
background: var(--gradient-1);
|
||||
border-radius: 24px;
|
||||
padding: 3px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.about-image .avatar-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 22px;
|
||||
background: var(--bg-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 6rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.about-image .avatar-inner svg {
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.about-text p {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1.25rem;
|
||||
font-size: 1.02rem;
|
||||
}
|
||||
|
||||
.about-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.stat {
|
||||
text-align: center;
|
||||
padding: 1.25rem;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
background: var(--gradient-1);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/* Skills */
|
||||
.skills-section {
|
||||
background: var(--bg-secondary);
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
max-width: 100%;
|
||||
padding: 6rem 2rem;
|
||||
}
|
||||
|
||||
.skills-section .skills-inner {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.skills-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.skill-card {
|
||||
padding: 1.75rem;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skill-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: var(--gradient-1);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.skill-card:hover {
|
||||
border-color: rgba(234, 179, 8, 0.3);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.skill-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.skill-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--accent-glow);
|
||||
border: 1px solid rgba(234, 179, 8, 0.2);
|
||||
border-radius: 12px;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.skill-card h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.skill-card p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.skill-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.skill-tag {
|
||||
padding: 0.25rem 0.625rem;
|
||||
background: rgba(234, 179, 8, 0.1);
|
||||
border: 1px solid rgba(234, 179, 8, 0.15);
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--accent-hover);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Projects */
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
border-color: rgba(234, 179, 8, 0.3);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.project-preview {
|
||||
height: 200px;
|
||||
background: var(--bg-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.project-preview .code-block {
|
||||
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
padding: 1.5rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.code-line {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.code-keyword { color: #c084fc; }
|
||||
.code-function { color: #60a5fa; }
|
||||
.code-string { color: #34d399; }
|
||||
.code-comment { color: #52525b; font-style: italic; }
|
||||
.code-variable { color: #f472b6; }
|
||||
.code-operator { color: #fbbf24; }
|
||||
|
||||
.project-info {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.project-info h3 {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.project-info p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-tech {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.project-tech span {
|
||||
padding: 0.2rem 0.5rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.project-links {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.project-links a {
|
||||
color: var(--text-muted);
|
||||
transition: color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-links a:hover {
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
/* Contact */
|
||||
.contact-section {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-section .section-desc {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.contact-links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1.25rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.contact-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem 1.75rem;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
color: var(--text-primary);
|
||||
transition: all 0.25s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.contact-link:hover {
|
||||
border-color: rgba(234, 179, 8, 0.3);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.contact-link .link-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--accent-glow);
|
||||
border-radius: 8px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
padding: 3rem 2rem;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--border);
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
footer p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Scroll animations */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.nav-links {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
background: rgba(10, 10, 11, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
.nav-links.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav-links li {
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.about-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.about-image {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.about-image .avatar-frame {
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.about-stats {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 4rem 1.25rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 5rem 1.25rem 3rem;
|
||||
}
|
||||
|
||||
.contact-links {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.about-stats {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user