Bento Designer Portfolio
+6Basalt Dev Portfoliov1.0.0
Use this Skill to build website page.
Rising
5.035 downloads0 likes0 saves
Free
Create a complete personal developer portfolio with biography, projects, writing, talks, tools, and career milestones in a focused basalt style. It helps independent builders present a coherent body of work, rather than a disconnected collection of links, when seeking clients, roles, or collaborators.
Picked most often by
Updated Sep 22, 2026
Similar Skills
View all skills+6
What you get
- A complete one-file developer portfolio in the basalt style — hero bio, tabbed work experience, project cards, a GitHub-style repo grid, blog list, Uses toolbox, timeline, talks, and footer
- The dark zinc design system with one cyan accent: a floating pill nav, hover-glow cards, and an animated light beam falling down every vertical rail
- Working interactions with zero backend: experience tabs, a Show More repo reveal, a mobile menu overlay, and a contact widget that validates and honestly declares itself a demo
- Style-matched dark app screenshots embedded straight into the project cards, so the page ships looking finished
Good fit
- Developers and indie hackers who want a personal site that shows projects, experience, and open-source work in one scroll
- Job seekers who need a sharp, fast 'hire me' page online tonight — one HTML file, no build step, no hosting requirements
- Anyone who wants the whole page editable as plain HTML/CSS/JS, or generated natively inside their own React, Vue, Svelte, or Astro project
Not for
- Live GitHub data — the repo section is deliberately static so the file works offline and inside sandboxed embeds
- Light, colorful, or photo-heavy personal brands — basalt is dark, quiet, and typography-led
- A working contact backend — the widget validates and replies on the page, and says so honestly
Brand IdentityDigital Publications & Web PagesBuild Website PageBuild Portfolio SiteStyle-lockedEditable OutputBeam MotionCyan AccentDark ZincDeveloper MinimalHover Glow Cards
About this Skill
Turns your name, work history, and side projects into a complete developer portfolio: a near-black page with one cyan accent, a floating pill nav, and every section a hiring manager scrolls for — bio, experience, projects, open-source, writing, toolbox. The result is a single HTML file that opens from disk and looks finished the moment it renders. It uses local system fonts and makes no font or asset request.
What you get
- A one-scroll portfolio: hero bio, tabbed work experience lit by a falling light beam, screenshot-topped project cards, a GitHub-style repo grid with a Show More reveal, blog list, and a Uses sidebar
- The basalt design system — dark zinc, one cyan accent, hover-glow cards — applied consistently from nav pill to footer
- Real interactions with no backend: experience tabs, mobile menu, and a contact widget that validates and honestly says it is a demo
- Optional extras when your story needs them: a year-by-year timeline and a talks section with CSS video thumbnails
How to use it
- Say who you are: name, role, a few employers with what you did there, your projects and repos. Bullet points are enough.
- The skill drafts anything you skip — bio, repo one-liners, blog teasers — in the style's dry, self-aware voice, then fills the locked template.
- Open the file, read it once, and ask for changes in plain words: "swap the timeline for talks", "raise the star counts", "shorter bio".
- Publish it anywhere static files go, or ask for the same design inside your React, Vue, Svelte, or Astro project.
What you need before you start
- You bring
- Your name, role, short bio, employers with achievement bullets, 3-6 projects, open-source repos, and optional posts, tools, and talks
- Last tested
- v1.0.0 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
User reviews
Loading reviews…