💄 weathered background

CLAUDE.md

@@ -0,0 +1,63 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a static website project ("Puercito Fiction" / "Hola") deployed using nginx in a Docker container. The site is automatically deployed to a VM via Gitea Actions when changes are pushed to the main branch.
+
+## Architecture
+
+- **Static Site**: HTML/CSS files located in `site/` directory
+- **Web Server**: nginx Alpine container serving static files
+- **Deployment**: Docker Compose orchestration with automated CI/CD via Gitea Actions
+- **nginx Configuration**: Custom config in `nginx.conf` with gzip compression, security headers, static asset caching, and SPA fallback routing
+
+## Development Commands
+
+### Local Development
+
+```bash
+# Build and run the Docker container locally
+docker-compose up -d --build
+
+# View logs
+docker-compose logs -f
+
+# Stop the container
+docker-compose down
+
+# Access the site
+# http://localhost:8080
+```
+
+### Testing Changes
+
+After making changes to files in `site/`, rebuild and restart:
+```bash
+docker-compose down && docker-compose up -d --build
+```
+
+### Deployment
+
+Deployment is automatic on push to main branch via `.gitea/workflows/deploy.yml`. The workflow:
+1. Checks out code on VM
+2. Pulls latest changes
+3. Rebuilds and restarts containers via `docker-compose`
+
+Manual deployment requires SSH access to the VM with credentials stored in Gitea secrets.
+
+## File Structure
+
+- `site/` - Static website files (HTML, CSS)
+- `nginx.conf` - nginx server configuration
+- `Dockerfile` - Container image definition (nginx:alpine base)
+- `docker-compose.yml` - Container orchestration config
+- `.gitea/workflows/deploy.yml` - CI/CD pipeline configuration
+
+## Important Notes
+
+- The site runs on port 8080 locally (mapped from container port 80)
+- nginx config includes SPA fallback routing (`try_files $uri $uri/ /index.html`)
+- Static assets are cached for 1 year with immutable cache control
+- Health checks monitor nginx availability every 30 seconds

site/images/icons/instagram.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 92 91" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g transform="matrix(1,0,0,1,-4,-205)">
+        <g transform="matrix(1,0,0,1.33483,-100.76,-132.962)">
+            <g id="instagram" transform="matrix(1,0,0,0.749157,0.759778,25.4431)">
+                <g transform="matrix(1.01767,0,0,1,-3.43838,0)">
+                    <path d="M194.607,327.784L194.607,371.565C194.607,383.647 184.968,393.456 173.096,393.456L128.555,393.456C116.683,393.456 107.045,383.647 107.045,371.565L107.045,327.784C107.045,315.703 116.683,305.894 128.555,305.894L173.096,305.894C184.968,305.894 194.607,315.703 194.607,327.784Z" style="stroke:black;stroke-width:1.98px;"/>
+                </g>
+                <g transform="matrix(1.01697,0,0,1.03858,-4.36275,-15.2693)">
+                    <path d="M184.225,334.884L184.225,366.62C184.225,375.378 176.964,382.488 168.02,382.488L135.406,382.488C126.462,382.488 119.201,375.378 119.201,366.62L119.201,334.884C119.201,326.127 126.462,319.016 135.406,319.016L168.02,319.016C176.964,319.016 184.225,326.127 184.225,334.884Z" style="fill:none;stroke:white;stroke-width:4.86px;"/>
+                </g>
+                <g transform="matrix(0.788925,0,0,0.788925,30.7311,75.1905)">
+                    <circle cx="151.267" cy="348.286" r="15.731" style="fill:none;stroke:white;stroke-width:6.34px;"/>
+                </g>
+                <g transform="matrix(0.420046,0,0,0.420046,73.2469,196.477)">
+                    <circle cx="224.676" cy="321.02" r="6.275" style="fill:rgb(255,249,249);stroke:white;stroke-width:11.9px;"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

site/images/icons/mail.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 94 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g transform="matrix(1,0,0,1,-203,-208)">
+        <g transform="matrix(1,0,0,1.33483,-100.76,-132.962)">
+            <g id="mail-" serif:id="mail " transform="matrix(1,0,0,0.749157,0.759778,25.4431)">
+                <path d="M394.221,316.119L394.221,380.765C394.221,382.659 392.684,384.196 390.79,384.196L310.169,384.196C308.276,384.196 306.738,382.659 306.738,380.765L306.738,316.119C306.738,314.225 308.276,312.688 310.169,312.688L390.79,312.688C392.684,312.688 394.221,314.225 394.221,316.119Z" style="stroke:black;stroke-width:5px;"/>
+                <g transform="matrix(-0.93402,1.14384e-16,-8.20038e-17,-0.669612,676.454,616.213)">
+                    <path d="M349.886,397.009L396.957,457.668L302.815,457.668L349.886,397.009Z" style="fill:none;stroke:white;stroke-width:6.15px;"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

site/index.html

@@ -6,13 +6,40 @@
     <title>Puercito Fiction</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Inter:wght@300;400&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Special+Elite&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
+    <div class="container">
+        <header>
+            <h1>hola</h1>
+        </header>
+
+        <nav>
+            <a href="#about">about</a>
+            <a href="#comics">comics</a>
+            <a href="#projects">projects</a>
+            <a href="#newsletter">newsletter</a>
+            <a href="#links">links</a>
+            <a href="#contact">contact</a>
+            <a href="#now">now</a>
+            <a href="#uses">uses</a>
+        </nav>
+
         <main>
-        <h1>Hola</h1>
-        <p>Stay tuned for what's coming.</p>
+            <p class="byline">stories from the little town</p>
         </main>
+
+        <footer>
+            <div class="social-links">
+                <a href="https://instagram.com/puercito" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
+                    <img src="images/icons/instagram.svg" alt="Instagram" width="20" height="20">
+                </a>
+                <a href="mailto:hello@puercito.net" aria-label="Email">
+                    <img src="images/icons/mail.svg" alt="Email" width="20" height="20">
+                </a>
+            </div>
+        </footer>
+    </div>
 </body>
 </html>

site/styles.css

@@ -5,29 +5,138 @@
 }
 
 body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-family: 'Special Elite', monospace;
     line-height: 1.6;
-    color: #333;
-    background: #fef6e4;
+    color: #191919;
+    background-color: #e8e4d8;
+    background-image:
+        /* Halftone dot pattern for newsprint effect */
+        radial-gradient(circle at 25% 25%, rgba(0,0,0,0.03) 1px, transparent 1px),
+        radial-gradient(circle at 75% 75%, rgba(0,0,0,0.03) 1px, transparent 1px),
+        /* Subtle noise texture */
+        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"),
+        /* Subtle weathered stains */
+        radial-gradient(ellipse at 20% 30%, rgba(139,119,101,0.08) 0%, transparent 50%),
+        radial-gradient(ellipse at 80% 70%, rgba(139,119,101,0.06) 0%, transparent 50%),
+        radial-gradient(ellipse at 50% 90%, rgba(139,119,101,0.05) 0%, transparent 40%);
+    background-size:
+        4px 4px,
+        4px 4px,
+        400px 400px,
+        60% 60%,
+        50% 50%,
+        70% 70%;
+    background-position:
+        0 0,
+        2px 2px,
+        0 0,
+        20% 30%,
+        80% 70%,
+        50% 90%;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 1rem;
+}
+
+.container {
+    max-width: 20rem;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 1rem;
+}
+
+h1 {
+    font-family: 'Permanent Marker', cursive;
+    font-size: 2.5rem;
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: #191919;
+    letter-spacing: 0.02em;
+}
+
+.byline {
+    font-family: 'Special Elite', monospace;
+    font-size: 0.875rem;
+    color: #666666;
+    font-weight: 400;
+}
+
+nav {
+    display: flex;
+    justify-content: center;
+    column-gap: 2rem;
+    row-gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+nav a {
+    font-family: 'Special Elite', monospace;
+    font-size: 1rem;
+    color: #292929;
+    text-decoration: none;
+    position: relative;
+    padding: 0.25rem 0;
+    transition: color 0.3s ease;
+}
+
+nav a::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 0;
+    height: 1px;
+    background-color: #E6507D;
+    transition: width 0.3s ease;
+}
+
+nav a:hover {
+    color: #E6507D;
+}
+
+nav a:hover::after {
+    width: 100%;
 }
 
 main {
     text-align: center;
 }
 
-h1 {
-    font-family: 'Permanent Marker', cursive;
-    font-size: 3rem;
-    font-weight: 400;
-    margin-bottom: 1rem;
+footer {
+    margin-top: auto;
 }
 
-p {
-    font-size: 1rem;
-    color: #666;
-    font-weight: 300;
+.social-links {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+}
+
+.social-links a {
+    color: #333333;
+    transition: all 0.3s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem;
+    border-radius: 50%;
+}
+
+.social-links a:hover {
+    color: #E6507D;
+    transform: translateY(-2px);
+}
+
+.social-links svg,
+.social-links img {
+    width: 20px;
+    height: 20px;
 }