www.phcdevworks.com

The flagship showcase and home of the PHCDevworks ecosystem. It acts as the "Consciousness," presenting the vision, value proposition, and real-world application of the Spectre platform.

🤝 Contributing Guide | 📝 Changelog | 🛡️ Security Policy

Overview

www.phcdevworks.com is the flagship showcase and home of the PHCDevworks ecosystem. Built with Astro and Tailwind CSS 4, it demonstrates the "Premium Design" and "Rich Aesthetics" possible within the Spectre platform.

This package is the Showcase & Vision Layer. Built with Astro and Tailwind CSS 4, it demonstrates the "Premium Design" and "Rich Aesthetics" possible within the Spectre ecosystem.

• 💎 Flagship Showcase: High-fidelity demonstration of Spectre design principles.
• 🚀 Performance First: Astro-powered static generation with sub-second load times.
• 🎨 Modern Aesthetics: Leverages Tailwind CSS 4 for state-of-the-art styling.
• 🌍 Edge Delivery: Optimized for global deployment on Cloudflare Pages.

---

Built with:

• ✅ Astro for static site generation with instant performance
• ✅ TypeScript for type-safe component development
• ✅ Tailwind CSS 4 with modern utility-first styling
• ✅ Cloudflare deployment for global edge delivery
• ✅ Component-based architecture for maintainability

Installation

# Clone the repository
git clone https://github.com/phcdevworks/www.phcdevworks.com.git
cd www.phcdevworks.com

# Install dependencies
npm install

Usage

Development Server

npm run dev

This starts the Astro dev server at http://localhost:4321 with hot module replacement (HMR) enabled. Edit files in src/ and see changes instantly.

Build for Production

npm run build

This compiles the site to static HTML, CSS, and JavaScript in the dist/ directory, optimized for deployment.

Preview Production Build

npm run preview

Preview the production build locally before deployment.

Project Structure

Folder	Responsibility
src/components/	Reusable Astro components (Hero, Cards, Sections, etc.)
src/components/ui/	Shared UI component library
src/layouts/	Page layouts (BaseLayout, Header, Footer)
src/pages/	Website pages and routes (file-based routing)
src/styles/	Global styles and Tailwind configuration
public/	Static assets (robots.txt, redirects, etc.)

Component Architecture

UI Components

Reusable components following Spectre UI patterns:

---
import { Button, Card, Hero, Section } from '@/components/ui'
---

<Hero title="Build Better" subtitle="With Spectre" />

<Section>
  <Card title="Feature">
    <p>Description</p>
  </Card>
</Section>

Page Components

Page-specific components organized by route:

src/pages/
├── index.astro                    # Homepage
├── spectre-platform/
│   ├── index.astro                # Platform landing page
│   └── components/                # Platform-specific components
└── wordpress/
    ├── index.astro                # WordPress landing page
    └── components/                # WordPress-specific components

Styling

This site uses Tailwind CSS 4 with utility-first approach:

<div class="container mx-auto px-4">
  <h1 class="text-4xl font-bold text-slate-900">Modern Web Development</h1>
</div>

Customize in tailwind.config.ts.

Deployment

Optimized for Cloudflare Pages:

npm run build

The dist/ folder contains the production build ready for deployment. The site is configured for Cloudflare in astro.config.mjs.

Development Philosophy

1. Static-First

Astro generates static HTML for maximum performance and SEO. Dynamic features are progressively enhanced with minimal JavaScript.

2. Component-Driven

All UI elements are built as reusable Astro components, making the site maintainable and consistent.

3. Type-Safe

TypeScript ensures component props and data structures are validated at build time.

4. Utility-First Styling

Tailwind CSS 4 provides consistent, maintainable styling without writing custom CSS.

Golden Rule

Astro builds. Cloudflare hosts. Components stay clean.

• Build config → astro.config.mjs or tailwind.config.ts
• Components → src/components/
• Pages → src/pages/
• Styles → Tailwind utilities

Part of the Spectre Suite

• Spectre Tokens - Design token foundation
• Spectre UI - Core component library
• Spectre UI Astro - Astro integration for Spectre UI
• Spectre Shell WordPress - WordPress theme template
• Spectre Blocks - WordPress block library
• www.phcdevworks.com - Official website (this project)

---

🏛️ The Spectre Suite Hierarchy

Spectre is built on a non-negotiable hierarchy to prevent style leakage and duplication:

1. Layer 1: DNA (@phcdevworks/spectre-tokens) – Design values.
2. Layer 2: Blueprint (@phcdevworks/spectre-ui) – Structure & Recipes.
3. Layer 8: Consciousness (This Package) – Showcase & Application.

The Golden Rule: The "Consciousness" translates the underlying architecture into a public-facing vision.

---

Contributing

Issues and pull requests are welcome! For website improvements, test responsiveness and build output.

For detailed contribution guidelines, see CONTRIBUTING.md.

License

MIT © PHCDevworks — See LICENSE for details.

---