SWP Freelancer Portfolio

SWP Freelancer Portfolio is an Astro theme for freelance art directors, designers and small studios, rendering a static portfolio site with case studies, service pages, a journal, testimonials and an FAQ from Markdown content collections. It builds to plain static HTML with no adapter or server runtime.

What is SWP Freelancer Portfolio?

SWP Freelancer Portfolio is a static portfolio theme built on Astro 7 and TypeScript in strict mode. It takes Markdown files in src/content/ (projects, services and blog posts) and typed TypeScript arrays in src/data/ (navigation, testimonials, process steps, awards, FAQ, toolkit, client logos, stats), and outputs twelve page routes — home, about, services index plus detail, work index plus case study, journal index plus article, contact, privacy, terms and a custom 404 — along with rss.xml, robots.txt and a sitemap. The demo content builds out to 27 pages. The theme is published on GitHub by Scintillaweb under the MIT licence.

Key Features

• Astro 7 with static output — every route is prerendered with no adapter and no server; five dependencies in total.
• No UI framework — Astro components, plain CSS with custom properties, and about 5 KB of vanilla JavaScript on the heaviest page (roughly 2 KB gzipped), split across five small scripts shipped only to pages that use them.
• Content collections — projects, services and journal posts in Markdown with typed frontmatter schemas, draft support, featured and order fields.
• Single config file — name, role, contact details, social links, logo files and SEO defaults live in src/config/site.ts; design tokens for colours, type, spacing and radii live in src/styles/tokens.css.
• Case studies — results figures, client facts, services, tooling, optional external URL button and a next-project link.
• Journal — categories, tags, an RSS feed and BlogPosting structured data; the three most recent posts appear on the homepage.
• Filterable work grid — chips generated from the categories actually in use, with an aria-live result count.
• SEO built in — canonical URLs, Open Graph, Twitter cards, JSON-LD (Person, WebSite, BlogPosting, BreadcrumbList), generated sitemap and robots.txt.
• Self-hosted variable fonts and custom SVG — two WOFF2 files (Space Grotesk and Inter Tight), a 29-icon sprite, three project artworks and device mockups, with no icon library and no third-party requests.

Who is it for?

• Freelance designers and art directors: publish case studies and service pages with client facts and result figures, without touching a CMS.
• Small studios: present a team-facing site with process stages, awards and testimonials maintained as typed arrays.
• Designers who write: run a journal with categories, tags, reading times and an RSS feed from Markdown files.
• Static-host users: deploy the dist/ output to Vercel, Netlify, Cloudflare Pages, GitHub Pages or any static host.

What can you do with SWP Freelancer Portfolio?

• Add a project: create a Markdown file in src/content/projects/; the filename becomes the URL under /work/, and you can swap a photograph for one of three built-in SVG artworks.
• Write a journal post: create a Markdown file in src/content/blog/; posts sort by pubDate newest first and the homepage shows the latest three.
• Connect the contact form: the form ships disconnected with the submit button disabled; set contact.formEndpoint to a Formspree, Web3Forms, Netlify Forms or custom POST URL.
• Recolour the theme: change the eight colour custom properties in tokens.css, then re-check contrast against the shipped WCAG AA palette.

Accessibility

The theme ships a skip link, visible :focus-visible rings, a native <details name> FAQ accordion and a nav drawer with aria-expanded, aria-controls, Escape-to-close and focus return. One h1 per page, no skipped heading levels, real <label> elements on every form field, and a palette verified at 4.5:1 for body text and 3:1 for large text. Content renders and the mobile drawer degrades to a visible list without JavaScript.

What are the requirements?

Node.js 22.12 or newer is required by Astro 7, with 22.19+ or 24+ recommended; npm 9.6.5 or newer works, as do pnpm, yarn and bun. Run npm install, then npm run dev for localhost:4321, npm run build for static output in dist/, and npm run check for TypeScript and template diagnostics.

FAQ

Is SWP Freelancer Portfolio free?

Yes. The theme is released under the MIT licence, so it can be used commercially, modified and shipped without attribution. Bundled third-party assets keep their own licences: the fourteen photographs are CC0 1.0 from Pxhere and StockSnap, and the Space Grotesk and Inter Tight fonts are SIL Open Font License 1.1.

Can I use the theme without JavaScript?

Yes. Content renders, the FAQ accordion opens and the mobile drawer degrades to a plain visible list. The roughly 5 KB of JavaScript is an enhancement layer, and prefers-reduced-motion: reduce disables the reveal, marquee, pulse and rotating mark.

Does the contact form send email out of the box?

No. A static site has nowhere to post the form, so it ships disconnected and the page says so with the submit button disabled. You connect it by pointing contact.formEndpoint at Formspree, Web3Forms, Netlify Forms or your own endpoint that accepts a form-encoded POST.

Which pages does the theme include?

Twelve page routes: home, about, services index and detail, work index and case study, journal index and article, contact, privacy, terms and a custom 404, plus rss.xml, robots.txt and a sitemap. The homepage is a list of fourteen reorderable section components.