FreeBasalt Dev Portfolio Site
A polished developer portfolio built around clear project proof, a dark basalt palette, and restrained cyan beam details. Made for developers who need an editable site that presents their work with confidence.
Hairline Grid Portfolio Site
A focused portfolio page for software professionals, composed on a saturated blue ground with serif typography and precise hairline dividers. It turns selected projects into clear, evidence-led case studies and gives visitors a direct path to make contact.
What you get
- Responsive, editable single-page portfolio with a consistent hairline grid.
- A concise hero and curated project entries with roles, context, and outcomes.
- Working section navigation, contact action, and accessible visual hierarchy.
Good fit
- Independent developers presenting shipped software and measurable contributions.
- Job seekers who need a distinctive, quick-to-scan project portfolio.
- Independent makers explaining a small product's evolution and traction.
Not for
- Large studios needing service, team, and lead-generation pages.
- Image-led portfolios where artwork should dominate the entire experience.
What you provide
- Your role, name or portfolio identity, and preferred contact link.
- Project details, including your contribution and any verified outcomes.
Requirements
- A modern browser
- Node.js 20+ for the validator
Running cost
No external services. Runs entirely on your agent.
Try this prompt
/sl-hairline-grid-portfolio-site Build an 11-section portfolio for fictional Bristol engineer Mara Lin, aimed at product teams: navigation; a hero headed “I build useful software with care and clarity.”; three proof stats; selected work; case studies on Stockline Forecast, Fieldnote Local and Clearpath Audit; work principles; four process steps; a contact invitation headed “Have a thoughtful product problem to solve?”; and a footer. Use blue hairline rules.
Follow-up prompts
- Make the project summaries more suitable for senior frontend engineering roles.
- Add a compact about section using only the biography and links I provide.
- Adapt the page to React components while preserving the grid and responsive behavior.
Verification
Verified
| render-check | pass | 4.0 / 5 | 25s |
FAQ
Can I use this with my existing framework?
Yes. The default is a self-contained HTML page, and the same structure can be adapted to React, Vue, or Tailwind while preserving the visual rules.
What if I only have a few projects?
Use two or three strong projects rather than padding the page. Include enough context to show your role and the result, and keep the remaining sections focused on your approach and contact details.
Will the page work without external fonts?
Yes. It uses system serif stacks and does not depend on webfont downloads.
Similar skills
Free
$4.99Magnetic Lattice Hero Landing Page
A distinctive dark-neon launch page for software products that need a memorable first impression without sacrificing clarity. It combines a responsive magnetic lattice, compact proof signals, technical feature storytelling, and focused conversion paths for founders shipping a real product.
$4.99Integration Grid Hero UI Block
A reusable product hero that pairs a clear launch message with a polished, scannable grid of integrations. Its warm-neutral styling and restrained teal accents suit software launches that need to show ecosystem breadth without sacrificing clarity.
$4.99Fluxon Automation Landing Page
A paid-quality landing page skill for fictional automation products that need a memorable technical identity. It creates a dark, violet-lit experience with a node-canvas hero, chart panels, proof-driven feature sections, and focused conversion paths for founders launching developer-facing software.
$4.99Angled Gallery Hero UI Block
A reusable product-launch hero that balances concise messaging with an art-directed, angled photo gallery. Designed for warm-neutral brands that want kinetic imagery, crisp contrast, and responsive behavior without a full-page template.
$4.99Particle Field Hero UI Block
A reusable launch hero that pairs warm clay and cream surfaces with a restrained, kinetic teal particle field. Made for product teams that want an atmospheric first screen without sacrificing readable messaging, responsive behavior, or accessible motion.
$4.99Contact Bar Hero UI Block
A focused, responsive hero that makes a product team's email and phone contact options clear and immediately usable. Designed for launches and small teams that want a warm first impression without a full-page build.
$4.99Sketchnote Pricing UI Block
Create a distinctive pricing section for a software launch, with notebook-like linework, an easy-to-scan plan comparison, visible editable HTML data, and working actions for each plan.