commit b26ebb6d6e5854ba1e8b3e1405e0b5a63663cdd4 Author: Christian Date: Thu Feb 12 17:18:33 2026 -0500 first commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..16b193a --- /dev/null +++ b/README.md @@ -0,0 +1,72 @@ +# pvrz — Personal Website + +A minimal personal site built with plain HTML/CSS/JS. No build step required. + +## 📁 File Structure + +``` +pvrz-site/ +├── index.html ← Landing page +├── links.html ← Social & project links +├── styles.css ← Shared stylesheet +├── main.js ← Landing page interactions +└── README.md +``` + +## ✏️ Customization + +### Update your handles + +**`links.html`** — Replace all `pvrz` handle references with yours: +- `https://x.com/pvrz` → your X/Twitter +- `https://github.com/pvrz` → your GitHub +- `https://youtube.com/@pvrz` → your YouTube +- `https://instagram.com/pvrz` → your Instagram +- `https://twitch.tv/pvrz` → your Twitch +- `https://discord.gg/pvrz` → your Discord +- `https://linkedin.com/in/pvrz` → your LinkedIn +- `https://pvrz.substack.com` → your Substack +- `https://medium.com/@pvrz` → your Medium +- Fill in the **Project** cards with your actual project links + names + +**`index.html` + `links.html`** — Update footer social links. + +--- + +## 🚀 Deploy to GitHub + Cloudflare Pages + +### 1. Push to GitHub + +```bash +git init +git add . +git commit -m "init pvrz site" +git remote add origin https://github.com/YOUR_USERNAME/pvrz-site.git +git push -u origin main +``` + +### 2. Connect Cloudflare Pages + +1. Go to [Cloudflare Dashboard](https://dash.cloudflare.com) → **Pages** +2. Click **Create a project** → **Connect to Git** +3. Select your `pvrz-site` repo +4. Settings: + - **Build command:** *(leave blank — no build step needed)* + - **Build output directory:** `/` (root) +5. Click **Save and Deploy** + +Your site will be live at `https://pvrz-site.pages.dev` in ~30 seconds. + +### 3. Custom Domain (optional) + +In Cloudflare Pages → your project → **Custom domains** → add your domain. + +--- + +## 🎨 Design + +Built to mirror Claude's warm cream/coral color palette: +- Background: `#F7F4EE` +- Accent: `#C96442` +- Font: Instrument Serif (display) + DM Sans (body) +- Icons: Font Awesome 6 diff --git a/index.html b/index.html new file mode 100644 index 0000000..6e78d55 --- /dev/null +++ b/index.html @@ -0,0 +1,71 @@ + + + + + + pvrz + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+
+

pvrz

+

20 · he/him · NC, USA

+
+ +
+ + + Links + + + Music + +
+
+ + + + + + diff --git a/links.html b/links.html new file mode 100644 index 0000000..6a78448 --- /dev/null +++ b/links.html @@ -0,0 +1,193 @@ + + + + + + pvrz · Links + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+
+

Links

+

Find me across the internet

+
+ +
+

+ + Socials +

+
+ + +
+ +
+
+ X (Twitter) + @hipvrz +
+ + + + +
+ +
+
+ GitHub + github.com/pvrzz +
+ + + + +
+ +
+
+ YouTube + @pvrz +
+ + + + +
+ +
+
+ Instagram + @itspvrz +
+ + + + +
+ +
+
+ Twitch + twitch.tv/pvrztv +
+ + + + +
+ +
+
+ Discord + pvrz server +
+ + + + +
+ +
+
+ Gitea + git.pvrz.lol +
+ + + +
+
+ +
+

+ + Projects +

+
+ + +
+ +
+
+ GoldenAge Network + gasmp.net +
+ + + + +
+ +
+
+ Status Page + status.pvrz.lol +
+ + + + +
+ +
+
+ Music + linktr.ee/pvrz +
+ + + +
+
+ +
+ + + + + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..3eac7d0 --- /dev/null +++ b/main.js @@ -0,0 +1,49 @@ +const wordmark = document.getElementById('wordmark'); +if (wordmark) { + document.addEventListener('mousemove', (e) => { + const cx = window.innerWidth / 2; + const cy = window.innerHeight / 2; + const dx = (e.clientX - cx) / cx; + const dy = (e.clientY - cy) / cy; + wordmark.style.transform = `perspective(800px) rotateX(${-dy * 5}deg) rotateY(${dx * 5}deg)`; + }); + document.addEventListener('mouseleave', () => { + wordmark.style.transform = ''; + }); +} + +const THEME_KEY = 'theme'; +const themeToggle = document.querySelector('.theme-toggle'); + +function setTheme(theme) { + document.documentElement.setAttribute('data-theme', theme); + if (themeToggle) { + themeToggle.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false'); + themeToggle.innerHTML = theme === 'dark' + ? '' + : ''; + } +} + +function initTheme() { + const savedTheme = localStorage.getItem(THEME_KEY); + if (savedTheme) { + setTheme(savedTheme); + return; + } + + const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + setTheme(prefersDark ? 'dark' : 'light'); +} + +if (themeToggle) { + initTheme(); + themeToggle.addEventListener('click', () => { + const isDark = document.documentElement.getAttribute('data-theme') === 'dark'; + const nextTheme = isDark ? 'light' : 'dark'; + setTheme(nextTheme); + localStorage.setItem(THEME_KEY, nextTheme); + }); +} else { + initTheme(); +} diff --git a/media/favicon.ico b/media/favicon.ico new file mode 100644 index 0000000..f4812f7 Binary files /dev/null and b/media/favicon.ico differ diff --git a/media/favicon.png b/media/favicon.png new file mode 100644 index 0000000..9bf2752 Binary files /dev/null and b/media/favicon.png differ diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..3bf86f2 --- /dev/null +++ b/styles.css @@ -0,0 +1,518 @@ +:root { + /* Backgrounds */ + --bg: #F7F4EE; + --bg-alt: #F0EBE3; + --surface: #FFFCF8; + --surface-alt: #F5F0E8; + + /* Text */ + --text-primary: #1C1714; + --text-secondary: #6B5F56; + --text-muted: #A09488; + + /* Accent — Claude's warm coral/orange */ + --accent: #C96442; + --accent-hover: #B5512E; + --accent-light: rgba(201, 100, 66, 0.10); + --accent-glow: rgba(201, 100, 66, 0.18); + + /* Borders */ + --border: #E8E2D8; + --border-dark: #D4CEC5; + + /* Nav */ + --nav-bg: rgba(247, 244, 238, 0.85); + + /* Shadows */ + --shadow-sm: 0 1px 3px rgba(28,23,20,0.07), 0 1px 2px rgba(28,23,20,0.05); + --shadow-md: 0 4px 12px rgba(28,23,20,0.08), 0 2px 4px rgba(28,23,20,0.05); + --shadow-lg: 0 16px 40px rgba(28,23,20,0.10), 0 4px 12px rgba(28,23,20,0.06); + --shadow-card: 0 2px 8px rgba(28,23,20,0.06), 0 1px 2px rgba(28,23,20,0.04); + + /* Typography */ + --font-serif: 'Instrument Serif', Georgia, serif; + --font-sans: 'DM Sans', system-ui, sans-serif; + + /* Layout */ + --nav-h: 64px; + --radius: 14px; + --radius-sm: 9px; + --radius-pill: 100px; + + /* Transitions */ + --ease: cubic-bezier(0.22, 1, 0.36, 1); + --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); +} + +:root[data-theme="dark"] { + --bg: #14110F; + --bg-alt: #1B1714; + --surface: #1F1A17; + --surface-alt: #261F1B; + + --text-primary: #F4EDE6; + --text-secondary: #D1C5BB; + --text-muted: #A6988D; + + --accent: #D87956; + --accent-hover: #C56745; + --accent-light: rgba(216, 121, 86, 0.18); + --accent-glow: rgba(216, 121, 86, 0.28); + + --border: #2F2823; + --border-dark: #3C322C; + + --nav-bg: rgba(20, 17, 15, 0.88); + + --shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.35); + --shadow-md: 0 4px 12px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.35); + --shadow-lg: 0 16px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.35); + --shadow-card: 0 2px 8px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); +} + +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +html { + scroll-behavior: smooth; + font-size: 16px; +} + +body { + font-family: var(--font-sans); + background: var(--bg); + color: var(--text-primary); + line-height: 1.6; + min-height: 100dvh; + -webkit-font-smoothing: antialiased; +} + +a { text-decoration: none; color: inherit; } +img { display: block; max-width: 100%; } + +.grain { + pointer-events: none; + position: fixed; + inset: 0; + z-index: 9999; + opacity: 0.03; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); + background-size: 256px 256px; +} + +.nav { + position: fixed; + top: 0; left: 0; right: 0; + z-index: 100; + height: var(--nav-h); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 2rem; + background: var(--nav-bg); + backdrop-filter: blur(12px) saturate(180%); + -webkit-backdrop-filter: blur(12px) saturate(180%); + border-bottom: 1px solid var(--border); +} + +.nav-logo { + font-family: var(--font-serif); + font-size: 1.35rem; + font-style: italic; + color: var(--text-primary); + letter-spacing: -0.01em; + transition: opacity 0.2s var(--ease); +} +.nav-logo:hover { opacity: 0.65; } + +.nav-links { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.nav-actions { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.nav-links a { + font-size: 0.9rem; + font-weight: 500; + color: var(--text-secondary); + padding: 0.4rem 0.85rem; + border-radius: var(--radius-pill); + transition: all 0.18s var(--ease); +} +.nav-links a:hover { color: var(--text-primary); background: var(--bg-alt); } +.nav-links a.active { color: var(--accent); background: var(--accent-light); } + +.theme-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + width: 38px; + height: 38px; + border-radius: 50%; + border: 1.5px solid var(--border); + background: var(--surface); + color: var(--text-secondary); + cursor: pointer; + transition: all 0.18s var(--ease); + box-shadow: var(--shadow-sm); +} +.theme-toggle:hover { + color: var(--text-primary); + border-color: var(--border-dark); + background: var(--surface-alt); +} +.theme-toggle:active { transform: translateY(1px); } + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.55rem; + padding: 0.75rem 1.6rem; + border-radius: var(--radius-pill); + font-family: var(--font-sans); + font-size: 0.95rem; + font-weight: 500; + letter-spacing: 0.01em; + cursor: pointer; + border: none; + transition: all 0.22s var(--ease-spring); + white-space: nowrap; +} + +.btn-primary { + background: var(--accent); + color: #fff; + box-shadow: 0 2px 8px rgba(201,100,66,0.35), inset 0 1px 0 rgba(255,255,255,0.12); +} +.btn-primary:hover { + background: var(--accent-hover); + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(201,100,66,0.38), inset 0 1px 0 rgba(255,255,255,0.12); +} +.btn-primary:active { transform: translateY(0); } + +.btn-secondary { + background: var(--surface); + color: var(--text-primary); + border: 1.5px solid var(--border); + box-shadow: var(--shadow-sm); +} +.btn-secondary:hover { + background: var(--bg-alt); + border-color: var(--border-dark); + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} +.btn-secondary:active { transform: translateY(0); } + +.btn-fm { + background: var(--text-primary); + color: var(--bg); + font-weight: 600; + letter-spacing: 0.04em; + font-size: 0.88rem; + padding: 0.75rem 1.4rem; + border-radius: var(--radius-pill); + box-shadow: var(--shadow-md); +} +.btn-fm:hover { + background: #2C2420; + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} +.btn-fm:active { transform: translateY(0); } + +body.home { + display: flex; + flex-direction: column; + min-height: 100dvh; + align-items: center; +} + +.hero { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: clamp(2rem, 4vw, 3.5rem); + padding: calc(var(--nav-h) + clamp(1.25rem, 3vw, 2rem)) clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem); +} + +.hero-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; + text-align: center; +} + +.wordmark { + font-family: var(--font-serif); + font-style: italic; + font-size: clamp(4.5rem, 18vw, 11rem); + font-weight: 400; + letter-spacing: -0.04em; + line-height: 0.95; + color: var(--text-primary); + background: linear-gradient(145deg, var(--text-primary) 30%, var(--accent) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: wordmark-in 0.8s var(--ease) both; +} + +@keyframes wordmark-in { + from { opacity: 0; transform: translateY(20px) scale(0.97); } + to { opacity: 1; transform: translateY(0) scale(1); } +} + +.tagline { + font-size: 0.85rem; + font-weight: 400; + color: var(--text-muted); + letter-spacing: 0.18em; + text-transform: uppercase; + animation: fade-in 0.8s 0.2s var(--ease) both; +} + +.hero-buttons { + display: flex; + align-items: center; + gap: 0.85rem; + flex-wrap: wrap; + justify-content: center; + animation: fade-in 0.8s 0.35s var(--ease) both; +} + +@keyframes fade-in { + from { opacity: 0; transform: translateY(12px); } + to { opacity: 1; transform: translateY(0); } +} + +.footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1.25rem 2rem; + border-top: 1px solid var(--border); + background: var(--surface); + margin-top: auto; +} + +body.home .footer { + border: 1px solid var(--border); + border-radius: 999px; + padding: 0.85rem 1.6rem; + width: min(820px, calc(100% - 2.5rem)); + margin: 1rem auto 1.5rem; + position: relative; + overflow: hidden; + background: var(--surface); + box-shadow: var(--shadow-md); +} + +body.home .footer::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(140deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 55%); + opacity: 0.65; + pointer-events: none; +} + +body.home .footer > * { + position: relative; + z-index: 1; +} + +.footer-socials { + display: flex; + gap: 0.25rem; +} + +.footer-socials a { + display: flex; + align-items: center; + justify-content: center; + width: 34px; height: 34px; + border-radius: 50%; + color: var(--text-secondary); + font-size: 0.95rem; + transition: all 0.18s var(--ease); +} +.footer-socials a:hover { + color: var(--text-primary); + background: var(--bg-alt); +} + +.footer-copy { + font-size: 0.8rem; + color: var(--text-muted); +} + +body.inner-page { + display: flex; + flex-direction: column; + min-height: 100dvh; +} + +.page-main { + flex: 1; + max-width: 960px; + width: 100%; + margin: 0 auto; + padding: calc(var(--nav-h) + clamp(1.75rem, 4vw, 3rem)) clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3rem); +} + +.page-header { + margin-bottom: 3rem; + animation: fade-in 0.6s var(--ease) both; +} + +.page-title { + font-family: var(--font-serif); + font-style: italic; + font-size: clamp(2.5rem, 6vw, 3.5rem); + font-weight: 400; + letter-spacing: -0.02em; + line-height: 1.1; + color: var(--text-primary); + margin-bottom: 0.5rem; +} + +.page-subtitle { + font-size: 1rem; + color: var(--text-secondary); + font-weight: 300; +} + +.link-section { + margin-bottom: 3rem; + animation: fade-in 0.6s var(--ease) both; +} + +.link-section:nth-child(2) { animation-delay: 0.05s; } +.link-section:nth-child(3) { animation-delay: 0.1s; } +.link-section:nth-child(4) { animation-delay: 0.15s; } + +.section-label { + display: flex; + align-items: center; + gap: 0.6rem; + font-size: 0.75rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.12em; + color: var(--text-muted); + margin-bottom: 1rem; + padding-bottom: 0.75rem; + border-bottom: 1px solid var(--border); +} + +.link-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: clamp(0.6rem, 1.6vw, 0.8rem); +} + +.link-card { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.9rem 1rem; + background: var(--surface); + border: 1.5px solid var(--border); + border-radius: var(--radius); + cursor: pointer; + transition: all 0.22s var(--ease); + box-shadow: var(--shadow-card); +} +.link-card:hover { + border-color: var(--border-dark); + background: var(--surface-alt); + transform: translateY(-2px) scale(1.01); + box-shadow: var(--shadow-md); +} +.link-card:active { + transform: translateY(0) scale(1); +} + +.link-icon { + width: 42px; height: 42px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 1.05rem; + flex-shrink: 0; + background: var(--accent); + box-shadow: 0 2px 6px rgba(0,0,0,0.15); +} + +.project-icon { + background: linear-gradient(135deg, var(--accent), #7C4A3A); +} + +.link-info { + flex: 1; + display: flex; + flex-direction: column; + gap: 0.15rem; + overflow: hidden; +} + +.link-name { + font-size: 0.92rem; + font-weight: 500; + color: var(--text-primary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.link-handle { + font-size: 0.78rem; + color: var(--text-muted); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.link-arrow { + font-size: 0.7rem; + color: var(--text-muted); + flex-shrink: 0; + opacity: 0; + transform: translate(-4px, 4px); + transition: all 0.18s var(--ease); +} +.link-card:hover .link-arrow { + opacity: 1; + transform: translate(0, 0); +} + +@media (max-width: 640px) { + .nav { padding: 0 1.25rem; } + + .hero { gap: 2.5rem; padding-top: calc(var(--nav-h) + 1.5rem); } + .hero-buttons { gap: 0.6rem; } + .btn { padding: 0.7rem 1.25rem; font-size: 0.88rem; } + + .page-main { padding: calc(var(--nav-h) + 1.5rem) 1.25rem 2.25rem; } + .link-grid { grid-template-columns: 1fr; } + + .footer { flex-direction: column; gap: 0.75rem; text-align: center; } +} + +@media (max-width: 400px) { + .hero-buttons { flex-direction: column; width: 100%; } + .btn { width: 100%; } +}