Workshop Portfolio Template - Hand-Drawn, Playful & Interactive
Hand-drawn & Playful
Overview
The Workshop theme reframes your resume as a hand-drawn maker's workshop. Everything is sketched in ink on engineering graph paper: section frames are seeded wobbly rectangles, skills are strips of masking tape, projects are crates, jobs are blueprints, and your awards hang on the wall like little plaques.
At the bench sits a desk buddy - a cat, pup, frog, bunny, or owl - that follows your cursor, blinks on its own clock, and bounces when you poke it. A custom paw cursor pads across the page, and your builds scroll past in a horizontal "gallery walk." It is playful and tactile, but still light-mode, fast, and resilient to sparse data.
Design Philosophy
Workshop leans all the way into the hand-drawn metaphor, then keeps it honest with real structure underneath:
- Hand-Drawn Everything: A seeded pseudo-random generator draws every border, shelf, and floor line with a gentle wobble - so the sketchiness is stable across renders rather than jittering. A "shaky hand" dial tunes how loose the linework feels.
- A Living Desk Buddy: The chosen creature is wired to a shared rig - its eyes track the cursor, it perks up and blushes as you get close, and it does a squash-and-stretch bounce on click. A hanging lightbulb is draggable and twangs back like real elastic.
- The Gallery Walk: On desktop your projects, work, and education scroll past horizontally as crates, blueprints, and diplomas, guided by a little stick-figure companion that strolls, sprints, waves, and jumps in response to your scrolling. On mobile and reduced-motion it gracefully becomes a calm vertical stack.
- Paper, Tape & Palettes: Five light "paper" palettes set the mood; the accent color is yours to pick. Choose the paper texture (graph, ruled, dotted, blueprint, or blank) and the page recolors in one swap.
Key Features
Hand-Drawn, Seeded Linework
Wobbly ink frames, shelves, and underlines drawn by a seeded generator so they stay stable - with a steady-to-shaky dial and a 'draws itself' reveal as you scroll.
Interactive Desk Buddy
A cat, pup, frog, bunny, or owl at the hero bench follows the cursor, blinks, blushes, and bounces - alongside a draggable lightbulb and a steaming mug.
Paw Cursor & Footstep Trail
A custom creature-foot cursor leans into its travel direction and reacts to clickable things; an optional fading paw-print trail follows you across the page.
Scroll-Driven Gallery Walk
Builds scroll past horizontally as crates, blueprints, and diplomas with parallax wall dressing and a stick-figure guide - a calm vertical stack on mobile.
Tip
Workshop is a curated gallery: a project with just a name and a tech stack still earns a crate and a title-only award still gets a plaque, but fully-empty entries are dropped. Any section you have no data for disappears from the page and the nav automatically.
Sections Breakdown
The page opens on a graph-paper hero, streams a keyword ticker, walks you past the builds, lays the tools out on shelves, hangs the proof on the wall, answers a few questions, and signs off at the dock.
Nav & Hero
A paper-backed nav carries a dotted-slug handle, jump links, and your social icons. The hero pairs your big hand-lettered name (with an orange "stamp" eyebrow and a wavy underline) with the interactive workbench scene - the desk buddy, the draggable bulb, and the mug.
Builds, Tools & Proof
The builds walk interleaves projects (crates with cover images and tech tapes), work (blueprint cards with a drawing-header block), and education (diploma cards with a ribbon seal). Tools lays your skills out as taped tags on wobbly shelves, each carrying its brand logo when one is recognized. Proof it works hangs your awards, certifications, and publications as slightly-crooked plaques that straighten on hover.
About & Footer
About answers a short set of questions ("Who this", "What purpose", "How good", "Open for") drawn from your narrative bio, value proposition, summary, and availability. The footer dock leads with your contact call-to-action and email, your social links, and a little character shoving a labeled crate toward the CTA.
Dynamic Theme Customization
Workshop's controls are split across three editor sections - Palette (the five paper moods; the chosen palette also drives the blueprint accent on links, cards, and the cursor click), Desk Buddy & Character (creature + guide pickers, each showing the actual hand-drawn doodle), and Workshop Options (paper, linework, motion, scene props, crate label). There is no separate accent-color picker, and typography, border radius, spacing, and section ordering are fixed: the theme has one hand-drawn identity and one deliberate composition.
| Configuration Key | Visual Effect | Customizable Options |
|---|---|---|
| palette | Paper / ink / warmth mood; also drives the blueprint accent. | workshop | blueprint | terracotta | sage | plum |
| paper | Background paper texture under everything. | graph | ruled | dotted | blueprint | blank |
| lineWobble | How loose the hand-drawn linework feels. | steady | normal | shaky |
| creatureId | The desk buddy, paw cursor, and footprints. | cat | pup | frog | bunny | owl |
| characterId | The walk guide and footer crate-pusher. | boy | girl |
| cursor / footprints | Custom paw cursor and a fading print trail. | paw | plain / on | off |
| marqueeSpeed | Keyword ticker speed (off hides both tickers). | slow | normal | fast | off |
| sceneDensity | Back-wall dressing density in the walk. | minimal | normal | busy |
| tintStrength / textScale | Palette tint intensity + content text scale. | 0-1 / 0.85-1.2 |
| trailGap / calm | Footprint spacing; Calm mode disables all motion. | 0.5-2.5 / on | off |
| showBuilds / showSkills / showTrophy / showAbout | Hide individual sections. | on | off |
| bulb / mug / duck | Hero workbench props and the skills-shelf duck. | on | off |
| crateLabel | Text on the crate the character pushes. | any short string |
