Bento Designer Portfolio
+6Basalt Dev Portfoliov1.0.4
Use this Skill to build website page.
Rising
5.042 downloads1 likes0 saves
Free
A complete personal developer site on a near-black ground with one cyan accent and clean Geist type. Beyond a home page with a small, self-aware headline, it includes case studies with drawn product windows, full articles, talks with notes, a Uses page, an About page with career milestones, a résumé and a contact form. It suits developers who want their work, writing and history to read as one coherent body of work rather than a list of links.
Picked most often by
Updated Oct 3, 2026
Similar Skills
View all skills+6
What you get
- A full portfolio site: home, work index with case studies, writing with full articles, talks with notes, Uses, About with milestones, résumé, contact and a 404 page
- The basalt look: near-black zinc, one cyan accent, Geist and Geist Mono type, a floating pill nav and experience tabs lit by a falling light beam
- Project covers drawn as real product screens plus a matched photo set, all packed into one file that opens offline in any browser
Good fit
- Developers and indie hackers who want case studies, writing, talks and a résumé in one personal site
- Freelancers and job seekers who need a sharp hire-me site they can publish today as a single file
- People who like a dark, quiet, typography-led look with a single accent colour
Not for
- Live data from code hosts: repo stars, posts and talks are written into the page as static content
- Light, colourful or photo-heavy personal brands; basalt is dark-only with one cyan accent
- A working form backend: the contact form validates and confirms on the page, and needs your own handler to deliver messages
Brand IdentityDigital Publications & Web PagesBuild Website PageBuild Portfolio SiteStyle-lockedEditable OutputBeam MotionCyan AccentDark ZincDeveloper MinimalHover Glow Cards
About this Skill
Turn your work history, projects and writing into a complete developer site: a near-black page with one cyan accent, a floating pill nav and a small, self-aware headline. Case studies, articles, talks, a Uses page, an About page and a résumé are all connected, and the whole site arrives as one file that opens offline in any browser.
What you get
- A home page with selected work, a tabbed experience rail lit by a falling light beam, an open-source grid with a Show More reveal, latest writing, Uses and talks
- Case-study pages whose project covers are drawn as real product screens, plus full article pages with a table of contents and copyable code
- About with portrait, principles and a year-by-year milestone timeline, a résumé, a talks page with notes and a validated contact form
- A command palette, mobile menu, filters with search and empty states, and calm motion that switches off for reduced-motion users
- Geist and Geist Mono type and every image embedded, so the page makes no network requests
How to use it
- Tell the Skill who you are: your role, employers and what you did there, your projects with their results, and any repos, posts and talks. Add your portrait if you have one.
- It fills the site with your facts, drafts anything you skipped in the house voice and lists those drafts for you to confirm or remove.
- Open the file, click through every page and ask for changes in plain words, such as "drop the talks page" or "add a fifth project".
Photos you do not supply are generated with your agent's image tool, which may have its own usage charges.
What you need before you start
- You bring
- Your name, role, location, availability and a two to three sentence bio · Employers with concrete achievements, and two to six projects with the problem, decisions and results · Optional: repos, posts, talks, tools, milestones and your own portrait or event photos
- Dependencies
- Node.js 18 or newer on your agent's machine, to run the bundled script that builds the single offline file · Internet access while the file is built, so the fonts can be downloaded once and embedded · An image tool in your agent for photos you do not supply (portrait, talk photos, desk still life); optional if you provide your own
- Outside costs
- Photos you do not supply are generated with your agent's own image tool, which may incur that tool's usage charges. The project backdrops ship with the Skill, and the finished page makes no network requests. Viewing the example costs nothing.
- Last tested
- v1.0.4 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
User reviews
Loading reviews…