Linework — Free Illustrator Portfolio Website Template
Linework is a portfolio template for illustrators who want their site to look like their work: off-white paper, three spot inks, thick outlines and a characterful display face. Nearly all of the artwork is inline SVG drawn in one consistent style, and every piece can switch into a blue-pencil sketch version, which the case studies and process strip use to show how a commission develops. Clients can filter projects, open case studies, check open days and send a full brief with references.
Key features
- Large hero illustration built in inline SVG and CSS, with a line that draws itself on load
- Nine case-study dialogs, each with the final artwork, a blue-pencil rough and an in-use mock-up (magazine spread, book, app screen, browser or wall)
- Project grid filtered by discipline, with counts, a live status message and ?d= links
- Availability calendar for the current month and the next two, generated from simple day ranges; open days set the preferred start date
- Commission brief form with project type, usage and licensing, budget range, deadline, character counter and validation
- Reference upload area with drag and drop, image previews, remove buttons and file type and size limits
- Services with starting prices, a three-step process strip and a testimonial
- Shop strip for prints, a zine and stickers with a small demo bag
- Palette in CSS custom properties that also recolours every SVG illustration
- Skip link, landmarks, labelled fields, keyboard-friendly dialogs and reduced-motion support
Best for
- Editorial illustrators and cover artists
- Character designers and picture-book illustrators
- Muralists and sign painters
- Small illustration or print studios that take commissions
At a glance
- Bootstrap 5.3.8 with vanilla JavaScript, no jQuery
- 3 pages: index.html, projects.html, commissions.html
- Artwork as inline SVG symbols with a sketch mode, plus three public-domain images
- Bricolage Grotesque and DM Sans from Google Fonts
- Free for personal and commercial use; attribution optional but welcome. Full terms: uicookies.com/license
How to use it
Unzip the folder and open index.html in a browser. Edit the copy directly in the HTML files and swap the images in img/. The palette, fonts and outline weight are custom properties at the top of css/style.css, and the SVG artwork picks up the same colours. The forms validate in the browser only, so connect them to a form service before launch. Upload the folder to any static host.
Frequently asked questions
Is Linework free for commercial projects?
Yes. You can use it for personal and client work, including commercial sites. Attribution is optional but always welcome, and the full terms are at uicookies.com/license.
What is it built with?
Bootstrap 5.3.8 for the grid and the mobile menu, one stylesheet for the design, and one vanilla JavaScript file with no jQuery or other libraries. The illustrations are inline SVG, so there is no image editor needed to recolour them.
Which pages and sections are included?
Three pages. The home page has the illustrated hero, selected projects, client wordmarks, services with prices, a process strip, a studio section and a testimonial. The projects page has the filterable grid and case-study dialogs, and the commissions page has the calendar, brief form, shop strip and FAQ.
Do the forms send anything?
No. The commission brief and newsletter forms check the fields in the browser and then show a confirmation, and reference files stay on the visitor’s device. Point the forms at a form service or your own backend to receive submissions.
Can I replace the SVG artwork with my own illustrations?
Yes. Each card and dialog uses an image-like SVG block, which you can swap for an img tag pointing at your own JPG or PNG. If you keep SVG, add your drawing as a new symbol in the sprite at the top of the page and point the use tags at it.
