One Space Away

One Space Away is a single-page Astro 6.0 template for interior designers, architects, and home stylists that ships as a fast, responsive static site with hardened security headers and automatic image optimization.

What is One Space Away?

One Space Away is a single-page website template built on the Astro 6.0 framework using HTML, CSS, and JavaScript with minimal dependencies. It takes text, images, and fonts that you supply and outputs a responsive, static portfolio site optimized for performance. The template is distributed as a project that you customize locally, and it is not tied to any specific CMS or backend.

Key Features

• Astro 6.0 readiness — Uses Astro's native font optimization and ships with a pre-configured Content Security Policy (CSP) plus security headers that are optimized for Cloudflare and can be adapted for Vercel or Netlify by moving rules to vercel.json or netlify.toml.
• Responsive layout — The single-page design adapts to mobile, tablet, and desktop screens.
• Minimal dependency stack — The page is built with plain Astro (HTML, CSS, and JS), keeping the codebase small and easy to audit.
• Automatic image optimization — By default it uses Astro's built-in Image component to convert images to WebP/AVIF and resize them automatically from files placed in src/assets/images.
• Optional Cloudinary integration — Install astro-cloudinary and use the CldImage component to serve high-resolution assets with faster loading times.
• Local font management — Store .woff2 files in src/assets/fonts, register them as a custom font provider in astro.config.mjs, and reference the CSS variable in src/styles/_reset.css.
• Swiper.js carousels — Carousel components are powered by Swiper.js and initialized in utils/initSwiper.ts.

Who is it for?

One Space Away is aimed at design professionals who need a clean, secure online presence without managing a content management system. Interior designers can feature their project portfolio and service offering. Architects can present consultation workflows and project transformations. Home stylists can publish a single-page lookbook with polished image galleries.

What can you do with it?

• Interior designers: Build a one-page portfolio that leads visitors through a consultation process, using local or Cloudinary-optimized images to showcase before-and-after projects.
• Architects: Present your design process and project results in a responsive layout that loads quickly on mobile devices.
• Home stylists: Use Swiper.js carousels to create an interactive gallery of styled rooms and décor ideas.
• Developers: Start from a security-hardened Astro project with CSP headers and minimal dependencies, then deploy to Cloudflare, Vercel, or Netlify.

How does One Space Away work?

The template is a static Astro project you run locally. To customize it, replace the content and images in the source files, then build and deploy the output. Deployment is handled by moving the CSP and XSS rules found in the public/_headers file to the platform-specific config file: vercel.json for Vercel, netlify.toml for Netlify, or keeping _headers for Cloudflare. Fonts are updated by dropping .woff2 files into the fonts folder and editing the font provider in astro.config.mjs plus the CSS variable in src/styles/_reset.css.