14 resources

portfolio Prompts and Templates

Explore portfolio AI prompts, video prompts, and landing page templates from Prompt Studio.

Browse this tag by category

Landing Pages

Landing Pages

landing page

minimal

Linea — Minimal design studio

A minimalist design studio landing focused on identity systems, product UI, and visual craft. Create a single-page light mode landing for "Linea", a Design Studio. Pure HTML + CSS in one index.html file (no frameworks). **Palette:** background #f7f6f3, text #1c1917, muted #a8a29e, accent #1c1917. **Typography:** Google Fonts — "Inter" (400–500 weights only). **Minimal design rules:** no box shadows, no gradients, border-radius 0–4px max, 1px borders only, abundant whitespace, max-width ~720px for hero text, text-only nav with thin bottom rule. **Sections (in order):** 1. Minimal nav: brand text only (no logo icon), links (Work, Studio, Contact), understated text CTA ("View work"). 2. Hero: small caps pill "Brand · Digital · Spatial", large headline with one italic keyword, one-line subcopy, single underlined or bordered CTA. 3. Numbered feature list (not cards): - **Strategy** (01): Research-led positioning for growing brands - **Identity** (02): Logos, systems, and guidelines that scale - **Digital** (03): Websites and products with restraint Large orange/black numbers on the left, title + one line detail, separated by 1px horizontal rules. 4. Optional thin full-width placeholder block (dashboard or mockup) with 1px border only. 5. Footer: single line copyright + one email input, no multi-column footer. Aesthetic: Stripe / Linear / Vercel docs inspired — editorial, calm, grid-aligned. Responsive (768px). Returns index.html only.

Landing Pages

photography

3D Photography Portfolio with Video Projections on Surfaces

Build an elegant, silent 3D photography portfolio with video projections on fabric panels and walls. **Deliverables:** index.html, styles.css, photo3d.js, assets/ folder. **Stack:** Three.js, video textures, CSS grid for UI. **Description:** 3D surfaces (fabric panels, walls) that project photographic videos; hovering expands the projection and the camera performs a smooth pan. Elegant and silent aesthetic. **Key interactions:** Hover to expand, click for fullscreen, clip scrubbing. **Accessibility & fallback:** 2D gallery with captions and subtitles. **Recommended assets:** 4–12s clips, fabric textures, panel models.

Landing Pages

personal brand

3D Personal Brand Experience with Showreel and Microvideos

Build a 3D personal brand experience using a rotating cube portfolio where each face plays a microvideo, with a monochromatic palette and metallic accents. **Deliverables:** index.html, styles.css, personal3d.js, assets/ folder. **Stack:** Three.js, video textures, GSAP. **Description:** Rotating 3D cube acting as a portfolio: each face plays a microvideo (showreel, bio, projects). Smooth rotation with a monochromatic palette and metallic accents. **Key interactions:** Swipe/drag to rotate, click to expand face to fullscreen with subtitles. **Accessibility & fallback:** Linear version with videos and accessible text. **Recommended assets:** 15–45s microvideos, low-poly models, voiceovers.

Landing Pages

portfolio

3D Portfolio for Creative Studio with Video Reels

Build a 3D portfolio for a creative studio featuring spinning cubes with video reels on their faces and cinematic scroll-triggered transitions. **Deliverables:** index.html, styles.css, portfolio.js, assets/ folder with reels and models. **Stack:** Three.js, video textures, ScrollTrigger. **Description:** 3D cubes that spin and display reels on their faces; as the user scrolls each reel activates and the camera approaches with a cinematic transition. Monochromatic aesthetic with gold accents. **Key interactions:** Scroll-triggered play, click for fullscreen, reel scrubbing. **Accessibility & fallback:** Reel list with subtitles; accessible playback controls. **Recommended assets:** 720–1080p reels, low-poly models.

Landing Pages

photography

3D Light Mode Photography Portfolio with Video Projections

A light mode photography portfolio where floating panels act as canvasses projecting short video clips. Editorial aesthetic: white background, thin warm-gray frames, serif typography for titles. On entry, the camera does a gentle pan across the gallery; approaching a panel plays the clip with fade-in and shows a metadata card with title, year, gear, and author notes. Clips are short 4–12s loops optimized for web. Horizontal scrubbing on a panel advances the clip frame-by-frame. A 'Behind the Scenes' button opens an extended video in overlay. Panels can be grouped by series; selecting a series reorders the camera with animation and a subtle parallax between layers. Accessibility: clips include captions when voice is present, plus a transcript and text descriptions. The system pauses out-of-viewport clips and releases textures after 60s of inactivity. **Deliverables:** index.html, styles.css, photo3d.js, assets/ (clips, textures, panel models, SRT subtitles, transcripts). **Stack:** Three.js, video textures, GSAP, LazySizes. **Interactions:** Hover/approach plays clip, frame-by-frame scrubbing, series grouping, extended video overlay.

Landing Pages

freelance

3D Interactive Freelance Portfolio with Showreel and Microvideos

A freelance portfolio in light mode with a central 3D cube that acts as a content container: each face plays a microvideo (bio, projects, testimonials, contact). On load, the camera does a smooth dolly‑in (1.2s easeOutCubic). The cube rotates slowly idle; the user can drag it with inertia and rotation limits. Clicking a face expands it into a 3D panel that separates from the cube and plays the microvideo in high resolution with SRT subtitles. The panel shows metadata (date, role, tools) and a "View full case" button that opens a modal with an extended video and image gallery. Frame‑by‑frame scrubbing on microvideo via horizontal gesture; uses a low‑res proxy during scrub. A project timeline lets users select a project and fly‑to (900ms) a 3D showcase vitrine with project assets (mockups, screenshots) and a synchronized case study video with 3D animations (halos, guide lines). Videos include SRT and downloadable transcripts. Performance: low‑poly models, Draco compression, 512–1024px textures, lazy‑load, texture release after 30s inactivity. IntersectionObserver pauses render. Accessibility: native video controls, aria‑label, prefers‑reduced‑motion stops auto‑rotation. Analytics: plays, avg time, rotation interactions, case clicks. **Deliverables:** index.html, styles.css, app.js, assets/ (GLB models, MP4s, WebP thumbnails, audio stems). **Stack:** Three.js, GSAP, WebAudio API, video HTML5. **Interactions:** Cube with microvideos, expand panel with SRT, frame‑by‑frame scrub, timeline fly‑to, 3D vitrine with animated halos.

Landing Pages

illustrator

3D Portfolio for Freelance Illustrator with Video Projections and Macro Zoom

A 3D gallery for a freelance illustrator. Floating panels in a 3D grid project short video clips showing timelapse process or subtle animations. On approach, the panel elevates 8–12px and the clip plays with fade‑in. Macro zoom: double‑click on a panel activates a macro camera allowing frame‑by‑frame scrubbing of the timelapse and shows layers (sketch, lineart, color) as toggles that overlay with blending. The user can export a frame as PNG (downloads generated canvas image). Filters by technique and project; applying a filter reorders panels with 3D animation and stagger. Proxy video versions used for scrubbing, high quality for full playback. Accessibility: captions for voice clips, transcripts, prefers‑reduced‑motion. Analytics: most played clips, frames exported. **Deliverables:** index.html, styles.css, gallery.js, assets/ (clips, images, panel models). **Stack:** Three.js, video textures, GSAP, LazySizes. **Interactions:** Hover/approach plays clip, macro zoom with frame scrubbing, layer toggles, export PNG, filters with 3D stagger animation.

Landing Pages

portfolio

3D Freelance Portfolio for Motion Designer with Showreel Projections and Stem Control

A 3D space where panels project showreels and the user controls audio stems (music, sfx, voice). Selecting a reel opens a panel with sliders for stem volume and effect parameters (reverb, delay) that affect playback in real time. The scene reacts to audio with 3D visualizers (particles, bars) synchronized by FFT. Scrubbing and chapter markers for each reel. A 'Deconstruct' mode shows project layers (assets, timeline) with microvideos explaining the process. Audio buffers and resource release on inactivity. Accessibility: subtitles, transcripts, prefers-reduced-motion. Analytics: most adjusted stems, reels played. **Deliverables:** index.html, styles.css, motion3d.js, assets/ (showreels, stems, models). **Stack:** Three.js, WebAudio API, video HTML5, GSAP. **Interactions:** Click reel opens stem mixer, FFT-reactive particles and bars, deconstruct mode with project layers and microvideos.

Landing Pages

3D Freelance Portfolio for UX/UI Designer with Interactive Mockup and Video Walkthrough

A 3D landing showing 3D interface mockups. Pressing 'Play walkthrough' plays a synchronized video that guides the camera through the mockup and highlights interactions (hover, click, transitions). The video sends cues to animate overlays and tooltips on the mockup. An 'Inspect' mode pauses the walkthrough and lets users interact with components; resuming continues from the current timestamp. Code snippets and links to interactive prototypes are included. Proxy videos for scrubbing, LOD for mockup. Accessibility: subtitles, aria on controls. Analytics: walkthroughs completed, mockup interactions. **Deliverables:** index.html, styles.css, ux3d.js, assets/ (mockup GLB, walkthrough videos, screenshots). **Stack:** Three.js, video HTML5, Prism.js, GSAP. **Interactions:** Play walkthrough with tooltip cues and element highlights, inspect mode with component hover and code snippets, click to cycle projects.

Landing Pages

consultant

3D Freelance Portfolio for Creative Consultant with Case Room and Workshop Videos

A 3D room where each table represents a workshop given by the creative consultant. Opening a table plays the workshop video with subtitles and attached materials (PDFs, slides). Includes a replay mode with scrubbing by sections (introduction, exercises, Q&A) and a synchronized notes panel that can be exported. Bookmark system by timestamp and auto summary generation (UI that prepares the package; actual generation can be delegated to backend). Proxies for scrubbing, LOD for furniture. Accessibility: subtitles, transcripts, prefers-reduced-motion. Analytics: workshops viewed, bookmarks created. **Deliverables:** index.html, styles.css, consultant3d.js, assets/ (workshop videos, models, PDFs). **Stack:** Three.js, video HTML5, GSAP, LazySizes. **Interactions:** Click table opens workshop panel with video + sections + notes + attachments bookmark at timestamp export notes generate summary package.

Landing Pages

architecture

3D Architecture Portfolio — Studio flagship

A flagship studio portfolio built to showcase signature projects, hero renders, and premium positioning. A polished studio portfolio designed to present flagship projects, hero renders, and brand positioning. A studio showcase portfolio highlighting projects, renders, and walkthroughs. An architecture portfolio in light mode with a virtual plaza where each project has an entry point. Clicking a project triggers a guided camera walkthrough that visits key spaces. At points of interest, project videos play (interviews, construction timelapses, animated renders) projected on 3D panels or HTML overlays. Layer toggles for structure, finishes, and furniture — each activates/deactivates 3D models and adjusts materials. A before/after slider blends renders with real photos. Technical documentation includes PDF plan downloads and high‑resolution image gallery. Free WASD navigation and guided fly‑through mode. Hotspots with micro‑videos and technical notes appear on selection. LOD, culling, 1024px textures. Videos 1080p. Accessibility: subtitles, transcripts, prefers-reduced-motion, 2D version with video list. **Deliverables:** index.html, styles.css, arch3d.js, assets/ (GLB models, walkthrough videos, plan PDFs). **Stack:** Three.js, video HTML5, GSAP. **Interactions:** Walkthrough guided with videos per point of interest, layer toggles, before/after slider, plan downloads, free WASD mode.

Landing Pages

architecture

3D Architecture Portfolio — Client review route

A client-review portfolio structured as a presentation route for plans, scope, and before/after decisions. A concept-led architecture route that emphasizes narrative, spatial rhythm, and design exploration. A client-facing walkthrough portfolio built to present spaces, plans, and before/after stories. Build a 3D architectural portfolio with guided walkthroughs, project videos combining real footage with renders, and downloadable plans. **Deliverables:** index.html, styles.css, arch3d.js, assets/ folder with GLB building models, walkthrough videos, and PDF plans. **Stack:** Three.js, HTML5 video, postprocessing, GSAP. **Description:** Present architectural projects through 3D walkthroughs and project videos combining real shots with renders. The user can explore the building in 3D and, at key points, play videos showing construction, interviews, and technical details. **Video & plans integration:** Videos play in 3D panels or HTML overlays; plans and sections displayed as downloadable PDFs. Each point of interest has an asset package: video, photos, plan, and spec sheet. **Navigation controls:** Guided walkthrough with camera following a route; free mode with WASD/drag. Hotspots with microvideos and notes; "before/after" slider option. **Visual fidelity & performance:** LOD-optimized models; HDRI for realistic lighting; subtle postprocessing. 1080p videos for desktop, 720p for mobile; adaptive streaming. **Accessibility & documentation:** Subtitles, transcripts, and technical descriptions. ARIA on hotspots and role="dialog" for video modals. **Metrics:** Time in walkthrough, most-visited hotspots, plan downloads, video plays.

Landing Pages

architecture

3D Architecture Portfolio — Concept discovery tour

A concept-led tour that highlights spatial narrative, massing, and exploratory design ideas. A client-facing walkthrough landing built to review scope, plans, and project decisions in detail. A concept-heavy architecture version focused on guided tours and story-driven projects. A light mode architecture portfolio where each project has a virtual plaza entry point. Entering triggers a predefined camera route showing key spaces. At points of interest, project videos play including interviews, construction timelapses, and animated renders. Videos project on 3D panels or HTML overlays. Layer toggles for structure, finishes, furniture — each activates/deactivates GLB models and adjusts materials. A 'before/after' slider blends renders with real photos. Technical documentation: PDF plan downloads and high-res image gallery. Navigation: free WASD mode and guided fly-through. Hotspots with micro-videos and technical notes appear with reveal animation. LOD, culling, 1024px textures. 1080p video for desktop, 720p for mobile. **Deliverables:** index.html, styles.css, arch3d.js, assets/ (GLB models, walkthrough videos, PDF plans, SRT, transcripts). **Stack:** Three.js, video HTML5, GSAP. **Interactions:** Guided walkthrough with video per POI, layer toggles, before/after slider, PDF download.

Landing Pages

artist

3D Freelance Portfolio for 3D Artist with Reels, Breakdowns and Process Videos

A 3D gallery where each artwork has a reel and a breakdown video showing the pipeline (modeling, texturing, lighting). Selecting a work triggers a camera fly‑to and the breakdown plays with overlays showing nodes and settings; the user can pause on any frame and see exact parameters (shaders, maps). A 'Compare' mode shows before/after and a button exports the settings as JSON. Proxy videos for scrubbing, LOD for models. Accessibility: subtitles, transcripts. Analytics: breakdowns viewed, settings exported. **Deliverables:** index.html, styles.css, artist3d.js, assets/ (reels, breakdown videos, models). **Stack:** Three.js, video textures, WebAudio API, GSAP. **Interactions:** Click artwork opens breakdown with synced pipeline node overlays, compare before/after, export settings JSON.