____                  ____                     
 |  _ \ __ _ _ __ ___  |  _ \  _____   _____ ___ 
 | |_) / _` | '__/ _ \ | | | |/ _ \ \ / / __/ __|
 |  _ < (_| | | |  __/ | |_| |  __/\ V /\__ \__ \
 |_| \_\__,_|_|  \___| |____/ \___| \_/ |___/___/

RARE DEVS STUDIO

Every product has a story. We help build it.

A product-driven creative technology studio crafting premium, high-performance digital systems.

🌐 Studio Website • 💼 LinkedIn Connection • 📸 Instagram Feed

---

Note

We operate at the intersection of aesthetic grid structures and bulletproof serverless engineering. Every line of code is placed nicely and intentionally to deliver maximum visual impact.

---

⚡ Quick Navigation

Click any panel below to expand technical documentation:

🔬 About & Studio Manifesto

Who We Are

Rare Devs is a forward-thinking, product-driven creative technology studio focusing on designing and developing seamless, high-performance digital experiences.

What Problems We Solve

We bridge the gap between heavy, high-performance logical engineering and fluid, immersive visual design. We turn static web interfaces into dynamic, breathing digital systems that work beautifully across all screen dimensions.

Mission & Vision

• Mission: To build digital products that feel natural, seamless, and intuitive, guiding users effortlessly through every interaction.
• Vision: To set the standard for high-end creative coding, combining artistic aesthetic grid structures with bulletproof serverless architectures.

🛠️ The Tech Stack (Capability Matrix)

Frontend	Build & Engine	Backend / Mail	Infrastructure

✨ Core Site Features

• 📱 Adaptive Viewports: Fluid, responsive designs tailored for displays of all resolutions.
• 🎨 Observatory Routines: Interactive, touch-ready carousel slides displaying our capability details.
• 🔮 Core Crew Registry: Dynamic, rotating squad profile cards featuring tilt offsets.
• 🚀 Serverless Mail Route: Form validation engines with horizontal error-shake feedback connected to a mailing API.
• 📡 Parallax Project Traces: Fullscreen scroll-guided sliding showcases of our highlighted works.

📁 Repository Directory Anatomy

GridFolio/
├── 📂 api/                   # Serverless execution layer
│   └── 📄 send-email.js      # Resend API mail routing gateway
├── 📂 js/                    # Client interface dynamics
│   ├── 📄 contact-form.js    # Contact validation & GSAP animations
│   ├── 📄 observatory.js     # Tech carousel scroll animation
│   └── 📄 home.js            # Home page interactions
├── 📂 css/                   # Responsive typography & layouts
│   ├── 📄 home.css           # Home page styling
│   ├── 📄 observatory.css    # Dynamic carousel stylesheets
│   └── ...
├── 📂 public/                # Static public assets
├── 📄 index.html             # Homepage layout
├── 📄 about.html             # About page layout
├── 📄 services.html          # Services page layout
├── 📄 projects.html          # Projects page layout
├── 📄 contact.html           # Contact page layout
├── 📄 globals.css            # Root design system tokens & colors
└── 📄 vite.config.js         # Multi-page Vite config

🚀 Getting Started & CLI Commands

Prerequisites

• Node.js 22+
• pnpm 9+

Commands

• Installation

  pnpm install

• Local Development

  pnpm dev

• Production Build

  pnpm build

🔑 Environment Configuration

To hook up footer inputs and contact page forms, create a .env file in the root directory:

RESEND_API_KEY=re_your_resend_api_key
CONTACT_RECEIVER_EMAIL=your_inbox@domain.com

🎨 Studio Design System

Colors

• Main Background: Sleek dark space (#141414)
• Primary Accent: Immersion Orange (#ee6436)
• Primary Typography: Cream Off-White (#f2eeda)
• Muted Text: Medium Grey (#8c8a7f)

Typography

• Headlines: Custom display font SCHABO for heavy titles.
• System details: Styled in Geist Mono for structural technical text.
• Body copy: Responsive clamp layouts for optimal readability.

🤝 Contribution Pipeline

Branches

• Features: feature/feature-name
• Bugfixes: bugfix/issue-description

Commits

Follow Conventional Commits guidelines:

• feat: add card stage overlays
• fix: scope home card-flip animation
• style: format observatory buttons

---

License

Licensed under the ISC License.

_{© 2026 Rare Devs Studio. Built for high performance and visual excellence.}