# Margo > Margo is best for solo designers, small design studios and photographers who want an editorial portfolio with case studies and photo series, an archive of every project, service and pricing pages, a journal and site search, in English, French and Arabic. Canonical page: [https://getastrothemes.com/astro-themes/margo/](https://getastrothemes.com/astro-themes/margo/) - Categories: Agency ## Best for - Graphic and brand designer portfolios - Small design studio websites - Photographer portfolios with photo series - Freelance creative portfolios with services and pricing ## Not intended for - Online stores and print shops - Businesses that need client accounts or online payments - SaaS and software products - Large agencies that need many team and careers pages ## Feature highlights - 3 homepages: solo designer, small studio and photographer - 19 inner page designs, including projects, an archive, three project templates, services, pricing and a journal - Project pages as a case study, a split case study or a photo series with a lightbox - Site search, scroll animations, animated backgrounds and page transitions you can turn off - English, French and Arabic with right-to-left layout, in light and dark mode - Static Astro output with Tailwind CSS ## Technology - Astro: 7.4.12 - Tailwind CSS: 4.3.3 ## Editions Choose one edition at checkout. Each is a separate one-time purchase on this page. - Astro. Content lives in Markdown files in your project. - Tina: $69. Edit content in the Tina editor. It saves to your Git repository. - Sanity: $69. Edit content in Sanity Studio. It lives in your own Sanity project. Live preview: [https://margo-astro.pages.dev/](https://margo-astro.pages.dev/) Margo is an Astro theme for an editorial portfolio: a solo designer, a small design studio or a photographer. It is built with Astro and Tailwind CSS and covers projects as case studies and photo series, an archive of every project, services with starting prices, pricing, about, team, testimonials, FAQ, contact and a journal, in English, French and Arabic, light and dark. Bookings, payments and client work stay in your own tools. Margo gives you the pages that show your work, explain what you offer and what it costs, and bring in enquiries. ## By The Numbers - **3 Homepages** - **19 Inner Page Designs** - **23 Section Components** - **55 Layouts Across 19 Sections And The Page Header** - **3 Header Layouts And 3 Footer Layouts** - **12 Sample Projects (6 Case Studies, 6 Photo Series), 5 Services And 7 Journal Posts** - **3 Languages: English, French And Arabic** ## Three Homepages Each homepage is built for one kind of creative practice: - **Solo designer** (`/`): the main homepage, with a large two-line masthead on a soft colour field and three project photos, then projects, services, numbers, pricing, testimonials, FAQ and the journal. - **Small studio** (`/home-studio/`): a dark panel with the studio's numbers and a wide studio photo, then client logos, projects, services, the process, the team and the journal. - **Photographer** (`/home-photo/`): a full-bleed photo with the photographer's name over it, then a gallery, the photo series and pricing. The studio and photographer homepages pick their own header and footer layouts. Keep the one that fits you and remove the others, or reuse their sections on your own pages. ## Pages Included **Work** - Projects page with filter chips, and an archive with every project in one ruled list - Project pages in three templates: a case study, a split case study with the facts beside the images, and a photo series with a lightbox **Studio** - Services overview, and a page per service with a starting price, what the client receives, the process, the tools, related projects and questions - Pricing page with a monthly and yearly toggle, and an FAQ page - About, team with a page per member, testimonials, and contact with a form and a booking card **Journal and legal** - Journal with authors, categories, tags, an author box, related posts, reading time, a table of contents and RSS - Privacy policy, terms and cookie policy pages with sample text for your own legal review, and a 404 page in each language Plus a layout gallery (`/elements/`) that previews every layout of the multi-layout sections and the page header. ## What You Get - Full Astro source code, deploy configs for Netlify, Vercel and Cloudflare Pages, AI assistant instruction files, a changelog, and demo content in English, French and Arabic. - Static output: no server or database needed to host it. - Demo photos, projects, clients, prices, quotes and text are samples to replace before launch. ## Not Included - Online payments, a shop or client accounts. - A calendar or scheduling tool. Book a call buttons link to the scheduling page you already use, or to your contact page. - A CMS in the Astro edition. Its content lives in files in your repository; the Tina and Sanity editions are chosen on this page. - A Figma file. - Hosting, a domain or deployment. ## What You Can Build With Margo **Brand or graphic designer.** Start from `/`: the masthead, selected projects as case studies and your services with starting prices. Extra work: write your case studies and set your prices. **Small design studio.** Start from `/home-studio/`: the studio numbers, the team pages and the pricing page with the monthly and yearly toggle. Extra work: add your team members and your client logos. **Photographer.** Start from `/home-photo/`: the full-bleed photo and the photo series with a lightbox. Extra work: add your series and choose your cover photos. ## Change Layouts From Content Files 19 sections and the page header come in 2 to 5 layouts each, 55 in all. Pick a layout with one `options.layout` value in the section's content file, or in a page's frontmatter block, with no code changes. Section files list their options and allowed values in comments, and `/elements/` shows every layout. ## Site Settings In One File Site identity, forms, header and footer layouts, search, motion, the contact dock, cookie consent and languages are set in `src/config/config.toml`. Colors and the type scale live in `src/styles/theme.css`, and menus in `src/config/menu..json`. ## Where Things Live ```text src/ config/ config.toml, menu..json, social.json, fonts.json, language.json content/ Markdown and MDX for every page, in english/, french/ and arabic/ folders homepage/ the three homepages projects/ one file per project, with its template services/ one file per service sections/ default content for each section layouts/ page layouts, 23 section components, widgets and cards pages/[...lang]/ routes for every language sections.schema.ts section fields and layout options styles/theme.css colors and type scale ``` ## Built-In Site Features - Light and dark mode, with the first-visit mode set in `config.toml`. - English, French and Arabic, with the whole layout mirrored on right-to-left pages, and hreflang tags. - Site search (⌘K) built with Pagefind. - Reveals on scroll, scroll effects, animated WebGL backgrounds and page transitions, each with its own switch, and a still page for reduced motion. - A desktop menu with one shared panel, a mega menu and flyouts, and a light mobile menu. - A contact dock with your email and booking link. - SEO basics built in: canonical and Open Graph tags, a generated share image per page, a sitemap, `robots.txt`, structured data and an RSS feed. - Cookie consent banner: scripts you mark as analytics or marketing run only after the visitor accepts that category. - A contact form that posts to Formsubmit, Formspree or Netlify Forms, and a Mailchimp newsletter form. - Generates llms.txt, llms-full.txt and a Markdown copy of pages, with Ask AI links in the footer. ## Customize With AI Coding Tools Margo ships instruction files for AI coding tools: `AGENTS.md`, plus `CLAUDE.md` for Claude Code, `GEMINI.md` for Gemini CLI, rules for Cursor, GitHub Copilot and Windsurf, and `SKILLS.md` with step-by-step recipes. What each tool reads on its own: - **Codex:** `AGENTS.md` - **Cursor:** `.cursor/rules/theme-architecture.mdc` and `AGENTS.md` - **Windsurf:** `.windsurf/rules/theme-architecture.md` and `AGENTS.md` - **GitHub Copilot:** `.github/copilot-instructions.md` and `AGENTS.md` - **Claude Code:** `CLAUDE.md`, which imports `AGENTS.md` - **Gemini CLI:** `GEMINI.md`, which imports `AGENTS.md` - **SKILLS.md:** no tool reads it on its own. Mention it in your request. Most changes are edits to Markdown, TOML and JSON files. Ask your assistant to update the files of every language. Some things stay with you: form accounts, your scheduling page, your domain and host, legal text, prices, client names and logos, photos, and a final look at every page in the browser.