Portfolio

Prompt

You are an elite creative developer, interaction designer and senior frontend engineer. Build a COMPLETE, production-ready premium portfolio website from scratch. It must feel handcrafted by a high-end digital studio and suitable for Awwwards/Godly-level presentation. Do not copy an existing site. TECH: HTML5, CSS3, Vanilla JavaScript ES6+, Three.js/WebGL and GSAP + ScrollTrigger where useful. No React, Vue, Tailwind, Bootstrap, jQuery, UI kits, component libraries or build tools. Deliver ONE complete index.html containing HTML, CSS and JS. Three.js, GSAP and fonts may use reliable CDNs. No pseudocode, TODOs, unfinished sections or placeholder functions. PRIVACY: Everything on the site must be fictional. Use Name: KAEL MORI. Role: Independent Creative Developer. Location: Copenhagen, Denmark. Availability: Selected Projects. Never infer or include information about the actual user. Any additional biography, career, projects or socials must be fictional. Use "#" for social links. ART DIRECTION: Create premium minimalism combining editorial design, quiet luxury, architecture, cinematic motion and experimental WebGL. It should feel precise, calm, modern and expensive through typography, composition, spacing and interaction rather than excessive decoration. Avoid generic portfolio/SaaS/template aesthetics. Do NOT use neon gradients, glowing borders, excessive glassmorphism, gradient blobs, huge shadows, excessive rounded cards, pill buttons everywhere, bento-grid spam, terminal UI, fake browser windows, generic particle galaxies or random 3D spheres. PALETTE: Background #F1F0EB, Dark #101010, Text #111111, Light text #F4F2ED, Muted rgba(17,17,17,.55), Lines rgba(17,17,17,.12). One muted accent color maximum, used very sparingly. Add subtle fixed grain/noise at ~0.02–0.04 opacity. TYPOGRAPHY: Pair an editorial serif such as Instrument Serif/Bodoni/Cormorant with Inter/Manrope/Geist/Space Grotesk. Use clamp(). Hero text ~10–14vw desktop. Use tight leading, careful tracking, controlled wrapping and dramatic scale contrast. Large typography should behave like graphic architecture. Avoid centering everything. LAYOUT: Use a 12-column editorial grid. Horizontal padding clamp(20px,4vw,72px). Major vertical spacing 120–240px desktop. Use deliberate whitespace, asymmetry, thin rules and controlled overlaps. Do not wrap everything in cards. STRUCTURE: Build 1.Loader 2.Navigation 3.Hero 4.About 5.Selected Work 6.Experiments 7.Capabilities 8.Digital Matter WebGL 9.Philosophy 10.Experience 11.Contact 12.Footer. Sections must feel like one continuous visual journey. LOADER: Fullscreen #101010 loader. Center LOADING and 00→100 with a minimal progress line. At 100 do NOT simply fade. Use a cinematic vertical mask/panel transition revealing the hero underneath in ~1–1.4s. Then stagger hero entrance. NAVIGATION: Fixed minimal navbar: KAEL MORI / WORK / ABOUT / CONTACT / DK [dynamic Copenhagen time]. Height ~72–84px. Initially transparent. On scroll add only subtle backdrop/background treatment. Nav hover uses text-swap animation: original exits upward through overflow mask while duplicate enters from below in ~180–280ms. Mobile header: KAEL MORI / MENU. MENU opens fullscreen dark overlay with huge WORK, ABOUT, CONTACT links plus Copenhagen, local time and fictional socials. Reveal links with staggered vertical masks. Include CLOSE. CURSOR: Desktop pointer devices only. Default 6–8px circle. Use requestAnimationFrame interpolation current += (target-current)*0.12. Over projects expand to ~60–80px and display VIEW. Important controls have subtle magnetic response. Disable on touch and reduced-motion devices. HERO: 100svh, minimum ~760px desktop. Small metadata: INDEPENDENT CREATIVE DEVELOPER / BASED IN COPENHAGEN. Massive asymmetric title: DIGITAL / EXPERIENCES. Do not create a generic centered hero. Offset lines and let typography dominate. Bottom-left: SCROLL TO EXPLORE with animated 1px vertical line. Entrance sequence: metadata reveal, first headline mask, second headline mask, WebGL sculpture, secondary UI. Use cubic-bezier(.16,1,.3,1) or power4.out. Use masks/transforms rather than simple fades. HERO THREE.JS: Integrate ONE sophisticated abstract WebGL sculpture into the typography. Concept: slowly deforming metallic/translucent ribbon, membrane or monolith resembling a digital art installation. Material: smoky glass, matte chrome or warm metallic surface. Colors: graphite, silver, ivory. Use subtle key/fill/rim lighting. Pointer movement changes rotation slightly: X ~±0.08, Y ~±0.12. Add slow breathing/deformation. A custom vertex shader may use uTime/uPointer. NO rainbow sphere, glowing orb, galaxy or chaotic particles. HERO SCROLL: As hero exits, headline lines move at different speeds, sculpture scales ~1→1.08 and rotates subtly, metadata fades. Keep parallax restrained. ABOUT: Label 01 / ABOUT. Large statement: I DESIGN DIGITAL EXPERIENCES WHERE TECHNOLOGY, MOVEMENT AND VISUAL RESTRAINT BECOME ONE COHERENT SYSTEM. Width ~70–80vw. Size clamp(42px,6vw,100px). Create scroll-driven word highlighting. Inactive words rgba(17,17,17,.18), progressively becoming full color while scrolling. Below use a restrained two-column layout: Focus — Creative Development; Location — Copenhagen; Availability — Selected Projects; Stack — HTML / CSS / JS / Three.js. Use thin rules and concise fictional copy. SELECTED WORK: Label 02 / SELECTED WORK. Huge SELECTED / WORK and show (04). Fictional projects: 01 NOCTURNE — Digital Identity / 2026; 02 SOMA — Creative Platform / 2026; 03 MONO — Experimental Commerce / 2025; 04 ARC — Spatial Interface / 2025. Each includes title, year, discipline, short description and unique visual. NO normal card grid. PROJECT COMPOSITIONS: Create cinematic ~70–90vh project sections. NOCTURNE: media right/info left. SOMA: media left/oversized title. MONO: near full-bleed visual. ARC: editorial split. Variation must still feel coherent. PROJECT REVEALS: When media enters viewport use clip-path inset(100% 0 0 0)→inset(0) and media scale 1.12→1 over ~1–1.4s with cubic-bezier(.16,1,.3,1). Add subtle image parallax. Hover: media scale ~1.035, title/number shift slightly, cursor shows VIEW. If external imagery is unavailable create sophisticated visuals with CSS/SVG/Canvas/typography instead of random stock photos. PROJECT DETAIL: Clicking a project opens a cinematic detail overlay. Selected media expands toward viewport, background transitions dark and title repositions. Overlay includes CLOSE, title, year, discipline, fictional description, large visual, services and credits. Close reverses animation. Support Escape, keyboard navigation and proper focus behavior. EXPERIMENTS: Create ONE horizontal scroll section titled EXPERIMENTS with panels 01/02/03/04. Desktop: sticky 100vh container, vertical scroll drives horizontal track, panels ~55–65vw. Each panel has a distinct restrained generative visual. Mobile: remove horizontal behavior and stack vertically. CAPABILITIES: Label 03 / CAPABILITIES. Large accordion rows: 01 Creative Development, 02 Interaction Design, 03 Motion Systems, 04 WebGL Experiences, 05 Digital Art Direction. Rows contain number, large title, +/- and concise description. Use horizontal rules, NOT cards. Opening combines height, opacity and translateY with premium easing. DIGITAL MATTER: Create immersive dark WebGL section around 140–170vh with sticky 100vh canvas. Text: 04 / DIGITAL MATTER and FORM / WITHOUT / WEIGHT. Create an abstract particle surface controlled by scroll. State 1 ordered flat plane. State 2 organic wave. State 3 controlled fragmentation. State 4 particles converge into a sculptural circular form. Interpolate continuously. Particles: off-white/silver with subtle warm tint. Desktop ~8k–20k depending on performance; reduce significantly on mobile. Pointer subtly repels nearby particles using normalized coordinates/raycasting. Particles smoothly return. No explosions, rainbow colors or chaotic physics. PHILOSOPHY: Transition smoothly from dark back to light using layering/masks. Label 05 / APPROACH. Huge masked statement: LESS INTERFACE. MORE EXPERIENCE. Below: 01 CLARITY — Reduce until only the necessary remains. 02 MOVEMENT — Motion should explain, respond and guide. 03 DETAIL — Quality lives in timing, spacing and behavior. 04 PERFORMANCE — Visual ambition should never destroy usability. No cards. EXPERIENCE: Create minimal fictional rows: 2026 — PRESENT / Independent Creative Developer / Copenhagen; 2024 — 2026 / Interactive Designer / Studio Practice; 2022 — 2024 / Frontend & Motion / Independent Practice. Use thin separators. Hover shifts content only ~8–12px. No timeline dots. MARQUEE: Use MAXIMUM one marquee: DESIGN × TECHNOLOGY × MOTION × CODE ×. Large outlined typography. Scroll down moves left, scroll up moves right. Keep speed restrained. CONTACT: Create a dark cinematic finale, minimum 100svh. Small: AVAILABLE FOR SELECTED PROJECTS / 2026. Huge: LET'S / CREATE / SOMETHING. Large circular CTA: GET IN TOUCH ↗, ~160–200px desktop. Magnetic interaction: outer shape follows pointer ~8–16px, text moves slightly further, both return smoothly. No neon or gradients. FOOTER: © 2026 KAEL MORI. Center INSTAGRAM / GITHUB / LINKEDIN using "#". Right BACK TO TOP ↑. Display dynamic Copenhagen local time using Intl.DateTimeFormat. Use subtle top border. MOTION SYSTEM: Use one coherent motion language. Primary easing cubic-bezier(.16,1,.3,1). Fast interactions 180–280ms. Standard UI 400–600ms. Image reveals 900–1400ms. Large choreography 800–1200ms. Stagger 30–80ms. Prefer transform, clip-path, mask, scale and position over opacity-only animations. Implement masked text reveals, cursor morph, magnetic CTA, nav text swaps, image reveals, subtle parallax, animated arrows, dynamic time, project hover movement, accordion animation, mobile menu choreography and back-to-top. Do not animate everything simultaneously. Every animation must improve hierarchy, feedback, spatial understanding or atmosphere. SECTION TRANSITIONS: Avoid obvious stacked blocks. Use overlapping sections, sticky compositions, background transitions, masking, large typography and layering. Example: Digital Matter dark panel rises over previous light content; following light section later covers it. Keep z-index architecture controlled. Do NOT aggressively hijack scrolling. Native scrolling with interpolated animation is preferred. RESPONSIVE: Desktop >=1200, Tablet 768–1199, Mobile <768. Mobile must be intentionally redesigned, not merely scaled down. Mobile: disable custom cursor, reduce WebGL complexity and particle count, simplify pointer effects, stack horizontal experiments, adapt giant typography, use fullscreen menu, make project media nearly full width, retain generous whitespace and preserve cinematic contact section. Test 1920×1080, 1440×900, 1366×768, 1024×768, 768×1024, 430×932, 390×844, 360×800. No horizontal overflow, broken masks, clipped titles or overlapping navigation. PERFORMANCE: Target smooth 60FPS where practical. Three.js pixel ratio Math.min(window.devicePixelRatio,2), preferably max ~1.5 mobile. Pause expensive work when document.hidden. Handle renderer/camera resize correctly. Avoid object/vector allocations every frame. Reuse objects. Avoid layout thrashing. Use requestAnimationFrame and IntersectionObserver intelligently. Dispose WebGL resources when replaced. If WebGL fails, hide canvas gracefully and show an elegant CSS/SVG static fallback. ACCESSIBILITY: Respect prefers-reduced-motion. When enabled disable cursor/parallax, greatly reduce WebGL movement and simplify scroll choreography. Use semantic header, nav, main, section, article, footer. Include alt text, aria-labels, focus-visible, keyboard support and adequate contrast. Project overlay supports Escape and focus management. Only one H1. CSS ARCHITECTURE: Define variables such as --bg:#f1f0eb; --ink:#111; --muted:rgba(17,17,17,.56); --line:rgba(17,17,17,.13); --dark:#101010; --light:#f4f2ed; --ease:cubic-bezier(.16,1,.3,1); --pad:clamp(20px,4vw,72px); plus spacing, typography and z-index variables. Use descriptive classes like hero__title, hero__canvas, project__media, nav__link, contact__cta. Avoid meaningless names. JS ARCHITECTURE: Organize logically into CONFIG, UTILITIES, LOADER, NAVIGATION, MOBILE MENU, CURSOR, MAGNETIC, TEXT REVEALS, PROJECTS, PROJECT OVERLAY, SCROLL, ACCORDION, HERO WEBGL, PARTICLE WEBGL, TIME, RESIZE, ACCESSIBILITY, INIT. Create dedicated Three.js controllers with init(), createScene(), createCamera(), createRenderer(), createGeometry(), handlePointer(), resize(), update(), render(), destroy(). Avoid uncontrolled globals. SEO: Include valid doctype, lang, charset, viewport, title, meta description, theme-color, Open Graph placeholders, Twitter placeholders and canonical placeholder. Use meaningful heading hierarchy. COPY: Keep writing concise, editorial and confident. Good: "Designing digital experiences through code, motion and restraint." Avoid generic AI wording such as passionate developer, innovative solutions, cutting-edge, seamless experiences, digital journey, next-generation, bringing ideas to life. FINAL QUALITY: Priority order: 1 Typography 2 Composition 3 Spacing 4 Motion 5 Interaction 6 WebGL 7 Decoration. Experience progression: INTRO→calm curiosity, ABOUT→confidence, WORK→visual impact, EXPERIMENTS→playfulness, DIGITAL MATTER→technical immersion, APPROACH→clarity, EXPERIENCE→credibility, CONTACT→cinematic conclusion. Before finishing check console errors, overflow, mobile layout, WebGL sizing, performance, broken interactions, keyboard navigation, responsive typography and animation conflicts. FINAL DELIVERY: Return ONLY the COMPLETE production-ready index.html. Do not output a tutorial, pseudocode, TODOs or unfinished work. Do not replace difficult features with comments. Do not omit Three.js, mobile behavior or accessibility. The result must feel minimal but not empty, animated but not chaotic, experimental but usable, technical but artistic, luxurious but restrained. DO NOT MAKE AI SLOP. The visitor should think: "This was carefully art-directed and custom-built." Never: "This looks like another generated portfolio template."

A system prompt was added to support web rendering