diff --git a/apps/blade/src/app/george-zhao/page.tsx b/apps/blade/src/app/george-zhao/page.tsx new file mode 100644 index 00000000..6d31ff97 --- /dev/null +++ b/apps/blade/src/app/george-zhao/page.tsx @@ -0,0 +1,257 @@ +import { GitHubLogoIcon, LinkedInLogoIcon } from "@forge/ui"; + +export default function Page() { + const retroCSS = ` + @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); + + /* Retro / CRT inspired page styles */ + #george-zhao-page { + font-family: 'Press Start 2P', ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; + background: radial-gradient(ellipse at center, #0b0f14 0%, #050507 60%), linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.6)); + /* non-header default text: light for contrast */ + color: #e6eef6; + background-color: #05050a; + position: relative; + overflow: hidden; + } + + /* Subtle grid background for retro feel */ + #george-zhao-page::before { + content: ''; + position: absolute; + inset: 0; + background-image: linear-gradient(0deg, rgba(0,255,156,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,156,0.03) 1px, transparent 1px); + background-size: 24px 24px; + opacity: 0.6; + pointer-events: none; + mix-blend-mode: overlay; + } + + /* Scanlines overlay */ + #george-zhao-page::after { + content: ''; + position: absolute; + inset: 0; + background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.04) 2px 4px); + pointer-events: none; + opacity: 0.4; + } + + /* Boxy retro cards */ + #george-zhao-page .rounded-2xl, + #george-zhao-page .rounded-lg, + #george-zhao-page .rounded-md { + border-radius: 6px; + border: 2px solid rgba(0,255,156,0.15); + background: rgba(2,6,23,0.6); + box-shadow: 0 6px 18px rgba(0,255,156,0.06), 0 0 18px rgba(0,255,156,0.02) inset; + transition: transform 100ms ease, box-shadow 120ms ease, border-color 120ms ease; + backdrop-filter: blur(6px); + position: relative; + z-index: 1; + } + #george-zhao-page .rounded-2xl:hover, + #george-zhao-page .rounded-lg:hover, + #george-zhao-page .rounded-md:hover { + transform: translateY(-4px); + border-color: rgba(0,255,156,0.35); + box-shadow: 0 10px 30px rgba(0,255,156,0.08), 0 0 36px rgba(0,255,156,0.06); + } + + /* Headings and text */ + #george-zhao-page h1, #george-zhao-page h2, #george-zhao-page h3, #george-zhao-page h4 { + color: #00ff9c; + text-shadow: 0 1px 0 rgba(0,0,0,0.6), 0 0 8px rgba(0,255,156,0.06); + letter-spacing: 0.06em; + } + /* paragraphs and non-header utility text use a pale/light color */ + #george-zhao-page p, #george-zhao-page .text-slate-200, #george-zhao-page .text-slate-300 { + color: #e6eef6; + opacity: 0.95; + font-family: 'Press Start 2P', monospace; + font-size: 12px; + } + + /* Buttons */ + #george-zhao-page a[class*="rounded-md"].bg-green-600 { + background: linear-gradient(180deg,#00ff9c 0%, #00b07a 100%); + color: #00110a; + border: 2px solid rgba(0,255,156,0.18); + box-shadow: 0 6px 18px rgba(0,176,122,0.12), 0 0 12px rgba(0,255,156,0.08); + transition: transform 80ms ease; + } + #george-zhao-page a[class*="rounded-md"].bg-green-600:active { transform: translateY(1px) scale(0.998); } + + /* Small chips */ + #george-zhao-page .px-3.py-1.rounded-full { + border-radius: 4px; + background: rgba(0,255,156,0.06); + color: #00ff9c; + border: 1px solid rgba(0,255,156,0.08); + } + + /* Avatar styling */ + #george-zhao-page [role="img"] { + background: linear-gradient(180deg,#00b07a,#007f5f); + color: #00110a; + box-shadow: 0 6px 14px rgba(0,0,0,0.6), 0 0 8px rgba(0,255,156,0.06); + font-family: 'Press Start 2P', monospace; + letter-spacing: 0.04em; + image-rendering: pixelated; + -webkit-font-smoothing: none; + -moz-osx-font-smoothing: grayscale; + } + + /* Links */ + #george-zhao-page a { color: #8fffb1; text-decoration: none; } + #george-zhao-page a:hover { color: #ffffff; text-shadow: 0 0 6px rgba(0,255,156,0.2); } + + /* Card initials */ + #george-zhao-page .h-12.w-12.rounded-md { border-radius: 4px; background: linear-gradient(180deg,#00b07a,#007f5f); color:#00110a; font-family: 'Press Start 2P', monospace; } + + /* Slightly less rounded for boxy retro look */ + #george-zhao-page .rounded-2xl { border-radius: 8px; } + /* Force gold glow for highlighted card and add outer glow using a pseudo-element */ + #george-zhao-page .highlight-gold { + position: relative; + z-index: 2; + } + #george-zhao-page .highlight-gold::after { + content: ''; + position: absolute; + inset: -8px; + border-radius: 10px; + pointer-events: none; + opacity: 0; + transition: opacity 220ms ease, transform 220ms ease; + transform: scale(0.98); + box-shadow: 0 8px 24px rgba(250,204,21,0.12), 0 0 40px rgba(250,204,21,0.06) inset; + } + #george-zhao-page .highlight-gold:hover::after { + opacity: 1 !important; + transform: scale(1); + box-shadow: 0 16px 48px rgba(250,204,21,0.32), 0 0 80px rgba(250,204,21,0.18) inset; + } + /* Also ensure border color and shadow switch to gold on hover */ + #george-zhao-page .highlight-gold:hover { + border-color: rgba(250,204,21,0.95) !important; + box-shadow: 0 12px 36px rgba(250,204,21,0.32) !important, 0 0 48px rgba(250,204,21,0.18) !important; + } + `; + + return ( +
+