Margin
A minimal developer portfolio.
Margin is a portfolio for an independent engineer, in the Minimalism style: paper white, ink and one vermilion accent, one grotesk in two weights with a small monospace for labels, a 12-column grid and a lot of empty paper. The name sits at the foot of the first screen; the work is a typographic index, not a card grid. The sample person, Ines Varga, and every client, project, date and quote are invented sample content.
- For
- Developer portfolio
- Built with
- HTML, CSS, ES modules, Motion 14.6.0, anime.js 4.5.0 (no build step)
- Pages
- 4 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
Screens from the template
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
A typographic work index where a black and white preview trails the pointer on a spring and wipes to each project's photo as you move between rows.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): a hero anchored to the bottom of the screen (the name at poster size, a role line, two text links, social links in the left margin) with a "Now" panel showing live local time and availability; a five-row work index; a black band of three working principles; writing; about with an experience table and tools; a contact block with the address at display size and a copy button (copied and blocked states). - Case study (
tidewater.html): facts row, a wide photo, sticky contents that follow the section in view, code, a pull statement, outcomes, and a link on to the notes. Reading progress bar. - Notes (
note.html?n=merge|clocks|queue|estimate): one article page for all four notes, with the others listed beside it and a not-found state for an unknown note. - 404 (
404.html). - Light and dark themes (follows the system, with a toggle that remembers the choice; the principles band flips to paper in dark), phone to desktop.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Case study
- Notes
- 404
Stack
- HTML
- CSS
- ES modules
- Motion 14.6.0
- anime.js 4.5.0 (no build step)
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
