Scyphora

Invisible Power. Visible Simplicity.

Scyphora's corporate website showcasing our philosophy of transforming complexity into elegant, inevitable solutions.

Live Demo • Documentation • Contributing

---

✨ Features

Design Excellence

• 🎨 Backlight Glow Design Pattern - Signature transparent backgrounds with glowing borders and shadows
• 🌓 Dark/Light Mode - Seamless theme switching with system preference detection
• 💫 Glass Morphism - Sophisticated backdrop blur and transparency effects
• 🎭 Parallax Animations - Smooth scroll-driven animations using CSS scroll-timeline
• 📱 Fully Responsive - Mobile-first design that works beautifully on all devices

Technical Highlights

• ⚡️ Zero Runtime JS - Leverages Astro's static generation for optimal performance
• 🎯 TypeScript First - Fully typed components and utilities
• 🎨 Tailwind CSS v4 - Modern utility-first CSS with custom theme
• ♿️ Accessible - WCAG AA compliant with semantic HTML and ARIA labels
• 🚀 Performance Optimized - Excellent Lighthouse scores and Core Web Vitals

Brand Philosophy

• Honesty - Transparent solutions that work as expected
• Transformation - Converting complexity into simplicity
• Inevitability - Making the right choice the obvious choice

---

🚀 Quick Start

Prerequisites

• Node.js v18.17 or higher
• pnpm v8.0 or higher

Installation

# Clone the repository
git clone https://github.com/scyphora/website.git
cd website

# Install dependencies
pnpm install

# Start development server
pnpm run dev

The site will be available at http://localhost:4321

Available Commands

Command	Description
pnpm install	Install dependencies
pnpm run dev	Start development server at localhost:4321
pnpm run build	Build production site to ./dist/
pnpm run preview	Preview production build locally
pnpm run astro	Run Astro CLI commands

---

🏗️ Project Structure

/
├── public/                 # Static assets
│   ├── favicon.svg
│   ├── logo.svg
│   └── hero-space.jpg
├── src/
│   ├── components/
│   │   ├── ui/            # Reusable UI primitives
│   │   │   ├── Button.astro
│   │   │   ├── Card.astro
│   │   │   └── ServicesCard.astro
│   │   ├── sections/      # Page section components
│   │   │   ├── HeroSection.astro
│   │   │   ├── ServicesSection.astro
│   │   │   ├── PhilosophySection.astro
│   │   │   ├── MentorshipPreview.astro
│   │   │   └── AboutSection.astro
│   │   ├── Navbar.astro   # Global navigation
│   │   └── Footer.astro   # Global footer
│   ├── layouts/
│   │   └── Layout.astro   # Base layout with SEO
│   ├── pages/
│   │   └── index.astro    # Home page
│   └── styles/
│       └── global.css     # Global styles + Tailwind config
├── astro.config.mjs       # Astro configuration
├── tsconfig.json          # TypeScript configuration
├── biome.json             # Biome linter/formatter config
└── package.json           # Dependencies and scripts

---

🎨 Design System

Color Palette

The Scyphora brand uses a carefully crafted color palette:

Color	Hex	Usage
Space	#0a0b0e	Deep black for backgrounds
Gravity	#d1d5db	Light gray for secondary text
Pulse	#5ba8d0	Blue for primary accents
Chronos	#d5a021	Gold for secondary accents

Each color includes a full scale (50-950) for granular control.

Typography

• Primary Font: Sora, Poppins (sans-serif)
• Display Font: Space Grotesk (for headlines)
• Font Weights: 300, 400, 500, 600

Signature Pattern: Backlight Glow

Our distinctive design element featuring:

<button class="bg-pulse/10 border-2 border-pulse
               shadow-lg shadow-pulse/40
               hover:shadow-pulse/60
               backdrop-blur-sm">
  Interactive Element
</button>

Key Characteristics:

• Transparent backgrounds
• Glowing colored borders
• Matching shadow effects
• Hover state intensification
• Glass morphism with backdrop blur

See DESIGN_SYSTEM.md for complete design reference.

---

🛠️ Technology Stack

Core Technologies

• Astro v5.14.1 - Static Site Generator

  • Zero JS by default
  • Component-based architecture
  • Excellent performance

• TypeScript - Type Safety

  • Strict type checking
  • Enhanced IDE support
  • Better code quality

• Tailwind CSS v4.1.14 - Styling

  • Utility-first CSS
  • Custom theme configuration
  • Dark mode support

• pnpm - Package Manager

  • Fast, disk space efficient
  • Strict dependency resolution

Development Tools

• @lucide/astro - Icon Library
• Biome.js - Fast Linter & Formatter
• Prettier - Code Formatter

---

📚 Documentation

For Developers

• CLAUDE.md - Development guide and AI assistant instructions
• CONTRIBUTORS.md - Contribution guidelines and workflow
• COMMIT_STYLE.md - Git commit message conventions
• REQUIREMENTS.md - Functional and technical requirements

Design & Brand

• DESIGN_SYSTEM.md - Complete design system reference
• CORPORATE_IDENTITY.md - Brand guidelines and visual identity

Architecture Guides

• src/components/CLAUDE.md - Component patterns and usage
• src/layouts/CLAUDE.md - Layout architecture
• src/pages/CLAUDE.md - Page composition patterns
• src/styles/CLAUDE.md - Styling architecture and theme

---

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details on:

• Code of Conduct
• Development workflow
• Pull request process
• Coding standards
• Testing requirements

Quick Contribution Steps

1. Fork the repository
2. Create a feature branch (git checkout -b feat/amazing-feature)
3. Make your changes
4. Commit using conventional commits (git commit -m 'feat(ui): add new component')
5. Push to your fork (git push origin feat/amazing-feature)
6. Open a Pull Request

See COMMIT_STYLE.md for commit message guidelines.

---

🎯 Roadmap

Current Focus

• ✅ Home page with backlight glow design
• ✅ Responsive navigation and footer
• ✅ Dark/light mode implementation
• ✅ Design system documentation

Upcoming Features

• 🔄 Contact form integration
• 🔄 Case studies/portfolio section
• 🔄 Blog/insights section
• 🔄 Team page
• 🔄 Enhanced animations and micro-interactions

Future Enhancements

• 📋 Multi-language support (i18n)
• 📋 CMS integration for content management
• 📋 Advanced analytics integration
• 📋 Performance monitoring dashboard

---

📊 Performance

Our site is optimized for excellent performance:

• Lighthouse Score: 95+ across all metrics
• First Contentful Paint: < 1.0s
• Time to Interactive: < 2.0s
• Cumulative Layout Shift: < 0.1
• Total Bundle Size: < 100KB (gzipped)

---

🌐 Browser Support

• Chrome/Edge: Latest 2 versions
• Firefox: Latest 2 versions
• Safari: Latest 2 versions
• Mobile Safari: iOS 14+
• Chrome Android: Latest version

Note: Parallax effects require CSS scroll-timeline support (modern browsers).

---

📄 License

Copyright © 2025 Scyphora. All rights reserved.

This project is proprietary software. See LICENSE for details.

---

📧 Contact

• Website: https://www.scyphora.com
• Email: info@scyphora.com
• Development: dev@scyphora.com

---

🙏 Acknowledgments

Built with:

• Astro - The web framework for content-driven websites
• Tailwind CSS - A utility-first CSS framework
• Lucide Icons - Beautiful & consistent icon toolkit
• Biome - Fast toolchain for web projects

Typography from:

• Google Fonts - Sora, Poppins, Space Grotesk

---

Invisible Power. Visible Simplicity.
Made with ⚡️ by Scyphora