Jacob's Portfolio

JACOB'S PORTFOLIO

NAVIGATE THE COSMOS
DISCOVER MY WORK

↑ / W — THRUST

← → / A D — TURN

TAP TO FLY · TAP PLANET TO TRAVEL

/* ── Hide every JS-dependent element ────────────────────── */ #intro, #fast-travel, #space, #hud, #prox-prompt, #overlay { display: none !important; } /* ── No-JS site shell ───────────────────────────────────── */ #ns-site { min-height: 100vh; background: #04040f; color: #e0e0ff; font-family: 'Press Start 2P', monospace; padding: 0 0 80px; overflow-y: auto; } /* ── Header ──────────────────────────────────────────────── */ #ns-header { padding: 48px 32px 40px; border-bottom: 2px solid #1e1e44; text-align: center; } #ns-title { font-size: clamp(14px, 3vw, 24px); color: #ffe066; text-shadow: 0 0 24px rgba(255,224,102,0.5); letter-spacing: 3px; margin-bottom: 14px; } #ns-sub { font-size: clamp(6px, 1.2vw, 8px); color: rgba(180,180,255,0.55); letter-spacing: 2px; line-height: 2.4; } /* ── Section wrapper ─────────────────────────────────────── */ .ns-section { max-width: 1040px; margin: 0 auto; padding: 48px 28px 0; } .ns-section-head { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 2px solid #1e1e44; } .ns-section-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; } .ns-section-title { font-size: clamp(11px, 2vw, 16px); letter-spacing: 2px; } /* ── About layout ────────────────────────────────────────── */ .ns-about { max-width: 640px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; } .ns-about-name { font-size: clamp(16px, 3vw, 26px); color: #fff; } .ns-about-role { font-size: clamp(7px, 1.2vw, 11px); color: #ffe066; letter-spacing: 2px; } .ns-about-bio { font-size: clamp(7px, 1.2vw, 11px); color: rgba(180,180,255,0.7); line-height: 2.8; } .ns-link-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; } .ns-link-row a { display: inline-block; padding: 13px 22px; border: 2px solid #1e1e44; color: #c0c0ff; font-family: inherit; font-size: clamp(7px, 1vw, 10px); text-decoration: none; letter-spacing: 0.5px; transition: border-color 0.15s, color 0.15s; } .ns-link-row a:hover { border-color: #ffe066; color: #ffe066; } /* ── Section intro blurb ─────────────────────────────────── */ .ns-intro { font-size: clamp(7px, 1.2vw, 11px); color: rgba(180,180,255,0.6); line-height: 2.4; text-align: center; margin-bottom: 28px; } /* ── Card grid ───────────────────────────────────────────── */ .ns-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .ns-card-grid.wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* ── Individual card ─────────────────────────────────────── */ .ns-card { border: 2px solid #1e1e44; display: flex; flex-direction: column; align-items: stretch; text-align: left; text-decoration: none; color: inherit; overflow: hidden; transition: border-color 0.15s; } .ns-card:hover { border-color: #ffe066; } .ns-card-img { width: 100%; height: 140px; object-fit: cover; display: block; border-bottom: 1px solid #1e1e44; } .ns-card-img-placeholder { width: 100%; height: 90px; background: rgba(80,80,150,0.10); display: flex; align-items: center; justify-content: center; color: rgba(180,180,255,0.4); font-size: 9px; letter-spacing: 1px; border-bottom: 1px solid #1e1e44; } .ns-card-info { padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 8px; } .ns-card-title { font-size: clamp(9px, 1.4vw, 13px); color: #e0e0ff; } .ns-card-date { font-size: clamp(6px, 0.9vw, 8px); color: #ffe066; opacity: 0.75; letter-spacing: 1px; } .ns-card-type { font-size: clamp(6px, 0.9vw, 8px); color: rgba(180,180,255,0.5); letter-spacing: 1px; } /* ── Formatted description (mirrors holo detail rendering) ── */ .ns-card-desc { font-size: clamp(6px, 1vw, 9px); color: rgba(180,180,255,0.6); line-height: 2; } .ns-card-desc p { margin-bottom: 6px; } .ns-card-desc p:last-child { margin-bottom: 0; } .ns-card-desc .ns-desc-h1 { font-size: clamp(7px, 1vw, 9px); color: #e0e0ff; letter-spacing: 1px; margin: 10px 0 4px; padding-bottom: 3px; border-bottom: 1px solid #1e1e44; } .ns-card-desc .ns-desc-h2 { font-size: clamp(6px, 0.9vw, 8px); color: #ffe066; letter-spacing: 1px; margin: 8px 0 3px; } .ns-card-desc strong { color: #e0e0ff; } .ns-card-desc em { color: rgba(200,200,255,0.8); font-style: italic; } /* ── Named section groups inside a planet ────────────────── */ .ns-section-group { margin-top: 44px; margin-bottom: 8px; } .ns-section-group-label { font-size: clamp(8px, 1.2vw, 10px); color: #ffe066; letter-spacing: 2px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid #1e1e44; } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 600px) { .ns-card-grid, .ns-card-grid.wide { grid-template-columns: 1fr; } .ns-section { padding: 36px 16px 0; } #ns-header { padding: 36px 16px 28px; } }

★ Jacob Walker A.K.A Sycamore'S PORTFOLIO ★

CREATOR · DEVELOPER · MAKER

ABOUT ME

Jacob Walker A.K.A Sycamore

CREATOR · DEVELOPER · MAKER

Some of the stuff I've made!

More being added all the time.

WEBSITES

SITES I'VE BUILT OR CONTRIBUTED TO.
CLICK A CARD TO VISIT.

◈ WORK SITES

Wolftree Studios Website

April 2026

Our company website.

Currently placeholder until our full site is ready!

◈ PORTFOLIO PAGES

Kaeley Hahn Portfolio Page

April 2026

An art portfolio and resume site made for Kaeley Hahn.

This Portfolio Page

May 2026

Complex Website with Realtime Gravity Simulation

A showcase of our work on Websites, Art, Games and more.

ART

A GALLERY OF MY VISUAL WORK.

◈ LOGOS

Wolftree Studio Logo

April 2026

◈ GRAPHIC DESIGNS

Lincoln Owl Rescue Banner

May 2026

Physical Banner Art

A banner for Lincoln Owl Rescue

Illuminated Sanskrit Commission Piece

April 2026

GAMES

GAMES I'VE MADE OR CONTRIBUTED TO.

Coming Soon . . .

COMING SOON…