Tori Bateman
Claude sonnet 4.6 crafting text/html from prompt: Help me build a slick website to house my artwork and thoughts with Publii. I want the home page to be a kind of spiderweb of connected text boxes that I will write by hand and upload as jpegs. the boxes will link to different areas when clicked by a visitor and they are: About, gallery, contact, journal, finance
The generated code: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[ your name ]</title>
<style>
:root {
--bg: #0f0d0b;
--gold: #d4b06b;
--gold-bright: #f5d78e;
--gold-glow: rgba(212,176,107,0.22);
--node-bg: #cdc5b9;
--node-shadow: #594c3a;
--text-dark: #2a2218;
--caption-col: #7a6e62;
--orbit: 270px;
}
,
::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; }
body {
background-color: var(--bg);
font-family: Georgia, 'Times New Roman', serif;
overflow: hidden;
}
/
── Grain / paper texture ──
/
body::after {
content: '';
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: 0.045;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 300px 300px;
}
/
── Radial vignette ──
/
body::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.65) 100%);
}
/
── Site title ──
/
.site-title {
position: fixed;
top: 22px;
left: 50%;
transform: translateX(-50%);
z-index: 500;
font-style: italic;
font-size: 1.05rem;
letter-spacing: 0.28em;
color: rgba(212,176,107,0.5);
white-space: nowrap;
user-select: none;
}
/
── Upload hint ──
/
.upload-hint {
position: fixed;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
z-index: 500;
font-family: Arial, sans-serif;
font-size: 0.6rem;
letter-spacing: 0.12em;
color: rgba(212,176,107,0.22);
white-space: nowrap;
pointer-events: none;
}
/
── Web container ──
/
#web {
position: fixed;
inset: 0;
z-index: 1;
}
/
── SVG canvas ──
/
#web-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
}
/
── Nodes ──
/
.node {
position: absolute;
transform: translate(-50%, -50%);
z-index: 10;
}
.node-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
box-shadow 0.3s ease;
}
/
── Home node ──
/
#node-home .node-card {
width: 112px;
height: 112px;
border-radius: 50%;
background-color: var(--node-bg);
box-shadow:
0 0 0 1.5px rgba(212,176,107,0.22),
0 0 28px rgba(212,176,107,0.12),
0 6px 22px rgba(0,0,0,0.75);
animation: homePulse 4.2s ease-in-out infinite;
}
@keyframes homePulse {
0%,100% {
box-shadow: 0 0 0 1.5px rgba(212,176,107,0.2),
0 0 22px rgba(212,176,107,0.1),
0 6px 22px rgba(0,0,0,0.75);
}
50% {
box-shadow: 0 0 0 2px rgba(212,176,107,0.55),
0 0 44px rgba(212,176,107