Geomancer Portrait

The Amber Vault

~ Shaper of Stone ~

Stand firm, traveler. You have entered the tectonic heart of the web. This layout draws its strength from rigid structures, heavy drop-shadows, and pure geometric CSS.

🪨 Geological Features:

  • The Monolith: The main container uses inset box-shadows (white on the top-left, black on the bottom-right) to mimic light hitting a heavy, chiseled block of stone.
  • The Geode Frame: No standard circles here. The profile picture is sliced into a jagged crystal shape using the CSS `clip-path: polygon()` property!
  • The Floating Boulders: Look behind the interface! The background script generates 20 completely unique, multi-layered SVG rocks. By piecing together multiple `` elements of different shades, they look incredibly detailed and 3D while adding absolutely zero image load time to your site!
The Runestones (Blog) Terrariums (Projects) The Quarry (Webring)
#indie-tv-widget { position: fixed; bottom: 30px; right: 30px; width: 600px; height: auto !important; min-width: 250px; background: #111; border: 4px double #00ffff; box-shadow: 6px 6px 0px #ff00ff; display: flex; flex-direction: column; padding: 10px; box-sizing: border-box; z-index: 9999; resize: horizontal; overflow: hidden; font-family: 'Courier New', Courier, monospace; } #indie-tv-widget.minimized { height: auto !important; min-height: 0; resize: none; padding-bottom: 0; } #indie-tv-header { display: flex; justify-content: space-between; align-items: center; background: #002222; color: #ff00ff; padding: 6px 12px; cursor: grab; user-select: none; margin-bottom: 10px; border: 2px solid #00ffff; } #indie-tv-header:active { cursor: grabbing; } a.tv-title { font-size: 14px; font-weight: bold; letter-spacing: 1px; display: flex; align-items: center; gap: 6px; color: #ff00ff; text-decoration: none; text-shadow: 1px 1px #000; transition: color 0.2s; } a.tv-title:hover { color: #00ffff; } .tv-btn-group button { background: #ff00ff; border: 2px solid #00ffff; color: #000; width: 24px; height: 24px; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; padding: 0; transition: all 0.2s; } .tv-btn-group button:hover { background: #00ffff; color: #ff00ff; } #indie-tv-body { display: flex; gap: 12px; align-items: stretch; } #indie-tv-screen-container { flex-grow: 1; background: #000; border: 4px dashed #ff00ff; box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 5px rgba(255,0,255,0.5); position: relative; overflow: hidden; aspect-ratio: 340 / 260; height: auto; } #indie-tv-iframe { width: 100%; height: 100%; border: none; display: block; } #indie-tv-controls { width: 40px; display: flex; flex-direction: column; align-items: center; gap: 15px; padding-top: 10px; } .tv-knob { width: 32px; height: 32px; background: #000; border: 2px solid #00ffff; position: relative; box-shadow: 2px 2px 0px #ff00ff; } .tv-knob::after { content: ''; position: absolute; top: 4px; left: 14px; width: 4px; height: 10px; background: #ff00ff; } .tv-speaker { flex-grow: 1; width: 100%; background-image: radial-gradient(#00ffff 30%, transparent 30%); background-size: 6px 6px; margin: 5px 0; opacity: 0.8; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; font-size: 20px; text-shadow: 0px 0px 6px #000, 0px 0px 6px #000; user-select: none; } .tv-speaker:hover { opacity: 1; } .tv-speaker.music-on { background-image: radial-gradient(#ff00ff 30%, transparent 30%); animation: pulse-speaker 0.4s infinite alternate; } @keyframes pulse-speaker { from { opacity: 0.8; box-shadow: inset 0 0 0px #ff00ff; } to { opacity: 1; box-shadow: inset 0 0 10px #ff00ff; } }
🔇
e-dark)">