AtelierForma

International Architecture & Interior Design Studio
css-atelierforma.roboticela.com

Live Site · Features · Structure · Deployment · License

---

Project Overview

AtelierForma is a production-ready, static architecture studio website built exclusively with HTML5 and CSS3. It demonstrates editorial typography, asymmetric CSS Grid composition, semantic markup, WCAG 2.2 AA accessibility, and a monochrome-first visual language inspired by architectural magazines.

No JavaScript. No frameworks. No CSS preprocessors. No gradients. No shadows.

The site presents a fictional international practice specializing in residential, commercial, hospitality, and cultural projects—with original SVG assets, Unsplash photography, and professionally written content throughout.

---

Features

• Semantic HTML5 landmark structure with skip link and heading hierarchy
• Modular CSS architecture (variables, reset, utilities, layout, components, animations)
• Sticky header with CSS-only mobile navigation and language selector
• Editorial hero with featured project card and studio statistics
• Twelve featured projects in an asymmetric CSS Grid
• Eight project categories with handcrafted SVG icons
• Six-stage design process timeline
• Awards, team, chronological timeline, publications, testimonials, journal
• FAQ using native <details> / <summary> (zero JavaScript)
• Contact CTA with studio information
• Full SEO suite: canonical, Open Graph, Twitter Cards, JSON-LD, robots.txt, sitemap.xml, web manifest
• CSS-only micro-interactions: hover borders, underline animations, image zoom, card transforms, focus states
• Responsive from 360px to 4K with fluid clamp() typography
• GitHub Pages deployment workflow included

---

Design System

Token	Value
Background	#FFFFFF
Surface	#FAFAFA
Heading	#111827
Body	#4B5563
Primary	#2563EB
Accent	#0F172A
Border	#E5E7EB
Font	Plus Jakarta Sans
Max width	1440px
Card radius	16px
Button radius	14px

Hard constraints: no gradients, no box/text shadows, no glassmorphism, no JavaScript.

---

Folder Structure

AtelierForma/
├── index.html
├── robots.txt
├── sitemap.xml
├── site.webmanifest
├── LICENSE
├── README.md
├── css/
│   ├── reset.css
│   ├── variables.css
│   ├── utilities.css
│   ├── layout.css
│   ├── components.css
│   ├── animations.css
│   ├── sections.css
│   └── style.css
├── assets/
│   ├── logo/
│   ├── icons/
│   ├── illustrations/
│   ├── floorplans/
│   ├── images/
│   └── favicon/
├── .github/
│   └── workflows/
│       └── deploy.yml
└── docs/

---

Screenshots

Add local screenshots to docs/screenshots/ after first deploy.

Viewport	Path
Desktop hero	docs/screenshots/desktop-hero.png
Projects grid	docs/screenshots/projects.png
Mobile nav	docs/screenshots/mobile.png

Live preview: https://css-atelierforma.roboticela.com

---

Lighthouse Goals

Category	Target
Performance	95+
Accessibility	100
Best Practices	100
SEO	100

Tips for scoring: serve over HTTPS, keep images compressed, retain semantic landmarks, and avoid third-party scripts (none are used).

---

Accessibility

• Skip-to-content link
• Landmark regions (header, main, nav, footer, section)
• Visible :focus-visible outlines
• Meaningful alt text on all images
• ARIA labels on icon-only controls
• Native accordion via <details> / <summary>
• prefers-reduced-motion and prefers-contrast support
• Keyboard-reachable navigation and language menu

Target: WCAG 2.2 AA

---

Browser Support

Browser	Support
Chrome / Edge (latest)	Full
Firefox (latest)	Full
Safari (latest)	Full
Mobile Safari / Chrome	Full

Uses modern CSS (clamp, container queries, logical properties, :focus-visible) with graceful degradation where needed.

---

Deployment (GitHub Pages)

1. Push this repository to GitHub under MuhammadShahsawar.
2. Enable GitHub Pages → Source: GitHub Actions.
3. The workflow at .github/workflows/deploy.yml deploys on every push to main.
4. Map the custom domain css-atelierforma.roboticela.com in repository Pages settings (and add a CNAME if required by your DNS host).

Local preview:

# Python
python -m http.server 8080

# Node
npx serve .

Then open http://localhost:8080.

---

SEO Features

• Title & meta description
• Canonical URL → https://css-atelierforma.roboticela.com/
• Open Graph & Twitter Card tags
• JSON-LD Organization schema
• robots.txt & sitemap.xml
• site.webmanifest & SVG favicon
• Semantic section IDs for deep linking

---

Keywords

architecture studio, interior design, residential architecture, commercial design, hospitality architecture, cultural buildings, sustainable architecture, AtelierForma, urban planning, renovation, editorial web design, CSS Grid portfolio

---

Roadmap

• Additional project case-study pages (still HTML/CSS only)
• Multilingual static pages (EN / DE / FR)
• Print-optimized project sheets
• Dark editorial theme toggle via CSS-only :has() / checkbox (optional)
• Expanded journal archive

---

Contributing

Contributions that preserve the HTML/CSS-only constraint are welcome.

1. Fork the repository
2. Create a feature branch
3. Keep zero JavaScript and no gradients/shadows
4. Open a pull request with a clear description

Maintainer: MuhammadShahsawar · muhammad@roboticela.com

---

License

Distributed under the MIT License.

---

Built with HTML5 & CSS3 · css-atelierforma.roboticela.com