Studio Pulse

Studio Pulse is a static marketing website template for a full-service communication agency — brand strategy, creative direction, digital, content — run on Astro 7 and styled with Bulma 1.0.4.

What is Studio Pulse?

Studio Pulse is a statically generated multi-page agency website template. It takes Markdown blog posts placed in src/content/blog/, combines them with layout and page components, and renders HTML to ./dist/ via the Astro build step. Its content collections provide typed frontmatter validation, and the site runs on Node.js 22.12 or newer with pnpm as the package manager.

Key Features

• Multi-page site — includes Home, About, Blog listing, individual post page, and Contact, so there is no separate single-page landing-only structure.
• Dark / light mode — theme toggle stores the choice in localStorage, respects the OS prefers-color-scheme on first visit, and swaps CSS custom properties defined in src/styles/global.css.
• SPA page transitions — the <ClientRouter /> component enables client-side navigation with a soft fade instead of full reloads.
• Content-collection blog — posts are Markdown files in src/content/blog/ with typed frontmatter fields (title, date, description, author, optional tags) defined in src/content.config.ts.
• Accessibility — includes a skip link, semantic landmarks and headings, aria-current on the active nav item, visible focus outlines, prefers-reduced-motion support, and labeled form inputs.
• Dependency-light setup — Bulma 1.0.4 and a custom global stylesheet cover the styling; the project structure uses a single shared Card.astro component and a global Layout.astro.

Who is it for?

• Boutique communication and branding agencies that need a corporate site with a blog and clear service story. Studio Pulse gives them the structure of Home, About, Blog, and Contact without requiring a CMS.
• Developers who build static client sites — they get an Astro 7 codebase with pnpm, command-line type checking via astro check, and a small file tree (pages, layouts, components, content) that is quick to adapt.
• Designers or freelancers who want a portfolio-plus-company site that can be presented to agencies; they can repurpose the content collection schema for project notes or insights.

What can you do with Studio Pulse?

• Agency owners: publish company updates and case-study posts by dropping Markdown files with title, date, description, author, and tags into the content folder — the site auto-routes them to /blog/my-post/.
• Client-side project work: run pnpm dev at localhost:4321, edit pages for an agency rebrand, then build the static site with pnpm build and deploy anywhere that serves plain HTML.
• Contact page integration: the Contact page includes standard form markup with labels and required/autocomplete attributes, leaving the actual backend to be wired into an existing service.

How does Studio Pulse work?

The template is a static Astro site that compiles content at build time. A developer first runs pnpm install, then pnpm dev to launch a local server at localhost:4321; on the production side, pnpm build emits the site into ./dist/, which can be previewed with pnpm preview. To add a blog post, a new .md file is created in src/content/blog/ with frontmatter that matches the collection schema, and the post appears automatically at /blog/ followed by its filename slug.

FAQ

What is Studio Pulse?

Studio Pulse is a static marketing website template for a full-service communication agency, with Home, About, Blog, and Contact pages. It runs on Astro and Bulma CSS, and is primarily used to present brand strategy, creative direction, digital, and content services.

Which tech stack does Studio Pulse use?

Studio Pulse uses Astro 7 as the static site generator, Bulma 1.0.4 for CSS, and pnpm for dependency management. Blog content is stored as Markdown files in a content collection, and the site outputs HTML to ./dist/; it needs Node.js 22.12 or later.

How do I add a new blog post?

Create a new Markdown file in src/content/blog/, fill in the frontmatter keys shown in src/content.config.ts (title, date, description, author, and optional tags), and run the dev server. The post is automatically available at the URL derived from the filename, such as /blog/my-post/.