Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Ed's revamped Digital Twin</title> | |
| <style> | |
| :root { | |
| --blue: #209dd7; | |
| --purple: #753991; | |
| --navy: #032147; | |
| --gray: #888888; | |
| /* light mode (default) */ | |
| --bg-from: #f5f8fb; | |
| --bg-to: #e9eef4; | |
| --card: #ffffff; | |
| --card-border: rgba(3, 33, 71, 0.10); | |
| --heading: var(--navy); | |
| --subtitle: var(--blue); | |
| --text: #5b6472; | |
| --shadow: 0 20px 60px rgba(3, 33, 71, 0.14); | |
| --btn-secondary-border: rgba(32, 157, 215, 0.55); | |
| --btn-secondary-text: var(--blue); | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --bg-from: #062a55; | |
| --bg-to: #02132c; | |
| --card: #0b1f3c; | |
| --card-border: rgba(255, 255, 255, 0.08); | |
| --heading: #eaf1f9; | |
| --subtitle: #4db8ec; | |
| --text: #9aa3b1; | |
| --shadow: 0 24px 70px rgba(0, 0, 0, 0.55); | |
| --btn-secondary-border: rgba(77, 184, 236, 0.45); | |
| --btn-secondary-text: #4db8ec; | |
| } | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { height: 100%; margin: 0; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| background: radial-gradient(1200px 600px at 50% -10%, var(--bg-from) 0%, var(--bg-to) 65%); | |
| color: var(--text); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 24px; | |
| line-height: 1.6; | |
| } | |
| .card { | |
| position: relative; | |
| width: 100%; | |
| max-width: 620px; | |
| background: var(--card); | |
| border: 1px solid var(--card-border); | |
| border-radius: 18px; | |
| padding: 44px 40px; | |
| box-shadow: var(--shadow); | |
| overflow: hidden; | |
| } | |
| .eyebrow { | |
| display: inline-block; | |
| text-transform: uppercase; | |
| letter-spacing: 0.14em; | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| color: var(--gray); | |
| margin: 0 0 14px; | |
| } | |
| h1 { | |
| font-size: 1.95rem; | |
| margin: 0 0 6px; | |
| line-height: 1.2; | |
| color: var(--heading); | |
| } | |
| h2 { | |
| font-size: 1.15rem; | |
| font-weight: 600; | |
| margin: 0 0 22px; | |
| color: var(--subtitle); | |
| } | |
| p { margin: 0 0 18px; } | |
| .actions { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; } | |
| a.btn { | |
| display: block; | |
| text-decoration: none; | |
| text-align: center; | |
| padding: 14px 20px; | |
| border-radius: 12px; | |
| font-weight: 600; | |
| transition: transform 0.12s ease, box-shadow 0.12s ease; | |
| } | |
| a.btn:hover { transform: translateY(-2px); } | |
| .btn-primary { | |
| background: var(--purple); | |
| color: #ffffff; | |
| box-shadow: 0 8px 24px rgba(117, 57, 145, 0.35); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| border: 1px solid var(--btn-secondary-border); | |
| color: var(--btn-secondary-text); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main class="card"> | |
| <p class="eyebrow">Ed's revamped Digital Twin</p> | |
| <h1>My digital twin has moved</h1> | |
| <h2>Now with a distinctly human twist</h2> | |
| <p> | |
| I used Claude Code on ultracode mode to enhance my own digital twin, and | |
| add a distinctly human twist to it. | |
| </p> | |
| <p>You'll find my digital twin at the link below — and there's a video on | |
| how I made it, so you can make one just like it.</p> | |
| <div class="actions"> | |
| <a class="btn btn-primary" href="https://edwarddonner.com/avatar" target="_blank" rel="noopener noreferrer">Meet my digital twin →</a> | |
| <a class="btn btn-secondary" href="https://youtu.be/srlhW4H-Gtg" target="_blank" rel="noopener noreferrer">Watch how I made it →</a> | |
| </div> | |
| </main> | |
| </body> | |
| </html> | |