Skill: thomeksolutions/web-deploy-github (version 1.0.0)

--- name: web-deploy-github description: Create and deploy single-page static websites to GitHub Pages with autonomous workflow. Use when building portfolio sites, CV pages, landing pages, or any static web project that needs GitHub Pages deployment. Handles complete workflow from project initialization to live deployment with GitHub Actions automation. --- # Web Deploy GitHub Pages ## Overview This skill enables autonomous creation and deployment of static websites to GitHub Pages. It follows a complete workflow from project structure initialization through automatic deployment via GitHub Actions, optimized for single-page applications, portfolios, and landing pages. ## Core Workflow ### 1. Project Initialization Create the project structure: ```bash bash scripts/init_project.sh <project-name> ``` This creates: ``` project-name/ ├── index.html ├── styles.css ├── script.js ├── README.md └── .github/ └── workflows/ └── deploy.yml ``` ### 2. Development Build the website following these principles: - **Single-page first**: Optimize for one-page layouts unless multiple pages explicitly required - **Autonomous generation**: Generate complete, production-ready code without placeholders - **Modern design**: Use modern CSS (flexbox, grid), responsive design, clean aesthetics - **No dependencies**: Pure HTML/CSS/JS when possible, CDN links if frameworks needed Use templates from `assets/templates/` as starting points: - `base-html/` - Minimal HTML5 boilerplate - `portfolio/` - Portfolio/CV template with sections - `landing/` - Landing page with hero and CTA ### 3. GitHub Repository Setup ```bash bash scripts/deploy_github_pages.sh <project-name> <github-username> ``` This script: 1. Initializes git repository 2. Creates GitHub repository via GitHub CLI 3. Configures GitHub Pages settings 4. Pushes initial commit 5. Triggers first deployment ### 4. Deployment GitHub Actions automatically deploys on push to main branch. The workflow: - Checks out code - Deploys to `gh-pages` branch - Makes site live at `https://<username>.github.io/<project-name>/` ## Architecture Guidelines ### HTML Structure - Semantic HTML5 elements - Meta tags for SEO and social sharing - Responsive viewport configuration - Favicon and icons ### CSS Design - Mobile-first responsive design - CSS variables for theming - Flexbox/Grid for layouts - Smooth transitions and animations - Dark mode support when appropriate ### JavaScript - Vanilla JS preferred - Progressive enhancement - Event delegation - No console errors ### Performance - Optimized images - Minified assets for production - Lazy loading where appropriate - Fast initial load time ## Quick Examples ### Example 1: Portfolio CV Site **User request:** "Crée-moi un site portfolio CV" **Action:** 1. Run `init_project.sh portfolio-cv` 2. Use `assets/templates/portfolio/` as base 3. Generate complete HTML with sections: Hero, About, Skills, Projects, Contact 4. Deploy with `deploy_github_pages.sh portfolio-cv username` ### Example 2: Landing Page **User request:** "Fais-moi une landing page pour mon app" **Action:** 1. Run `init_project.sh app-landing` 2. Use `assets/templates/landing/` as base 3. Generate with Hero, Features, Pricing, CTA 4. Deploy with `deploy_github_pages.sh app-landing username` ## Troubleshooting ### GitHub Pages Not Deploying - Check repository Settings → Pages → Source is set to `gh-pages` branch - Verify GitHub Actions workflow ran successfully - Check DNS propagation (can take 5-10 minutes) ### Permission Errors - Ensure `gh` CLI is authenticated: `gh auth status` - Check repository permissions on GitHub ### Build Failures - Review Actions logs in repository - Verify `.github/workflows/deploy.yml` syntax - Check file paths and references ## Resources ### scripts/ - `init_project.sh` - Initialize project structure - `deploy_github_pages.sh` - Deploy to GitHub Pages ### references/ - `workflow.md` - Detailed workflow documentation - `design-patterns.md` - Design best practices ### assets/ - `templates/base-html/` - Minimal HTML5 boilerplate - `templates/portfolio/` - Portfolio/CV template - `templates/landing/` - Landing page template - `.github/workflows/deploy.yml` - GitHub Actions workflow template

path: assets/templates/base-html/index.html
content: <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main>
        <h1>Hello World</h1>
    </main>
    <script src="script.js"></script>
</body>
</html>


path: assets/templates/base-html/script.js
content: console.log('Page loaded');


path: assets/templates/base-html/styles.css
content: :root {
    --primary: #0066FF;
    --text: #333;
    --bg: #fff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}


path: assets/templates/landing/index.html
content: <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Landing page">
    <title>Landing Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <a href="#" class="nav-logo">Brand</a>
            <ul class="nav-menu">
                <li><a href="#features">Features</a></li>
                <li><a href="#pricing">Pricing</a></li>
                <li><a href="#cta" class="btn btn-small btn-primary">Get Started</a></li>
            </ul>
        </div>
    </nav>

    <header class="hero">
        <div class="hero-content">
            <h1 class="hero-title">Your Powerful Headline</h1>
            <p class="hero-subtitle">A compelling subheading that explains your value proposition in one sentence.</p>
            <div class="hero-cta">
                <a href="#cta" class="btn btn-primary btn-large">Get Started Free</a>
                <a href="#features" class="btn btn-secondary btn-large">Learn More</a>
            </div>
        </div>
        <div class="hero-image">
            <img src="https://via.placeholder.com/600x400" alt="Hero">
        </div>
    </header>

    <main>
        <section id="features" class="section">
            <div class="container">
                <h2 class="section-title">Powerful Features</h2>
                <p class="section-subtitle">Everything you need to succeed</p>
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">🚀</div>
                        <h3>Fast Performance</h3>
                        <p>Lightning-fast load times and smooth interactions.</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">🔒</div>
                        <h3>Secure & Private</h3>
                        <p>Your data is encrypted and never shared.</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">📱</div>
                        <h3>Mobile First</h3>
                        <p>Works perfectly on any device, anywhere.</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">⚡</div>
                        <h3>Easy Integration</h3>
                        <p>Get started in minutes with our simple API.</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">💡</div>
                        <h3>Smart Analytics</h3>
                        <p>Actionable insights to grow your business.</p>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon">🎯</div>
                        <h3>24/7 Support</h3>
                        <p>We're here to help whenever you need us.</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="pricing" class="section section-alt">
            <div class="container">
                <h2 class="section-title">Simple Pricing</h2>
                <p class="section-subtitle">Choose the plan that's right for you</p>
                <div class="pricing-grid">
                    <div class="pricing-card">
                        <h3 class="plan-name">Starter</h3>
                        <div class="plan-price">
                            <span class="price">$9</span>
                            <span class="period">/month</span>
                        </div>
                        <ul class="plan-features">
                            <li>✓ Feature 1</li>
                            <li>✓ Feature 2</li>
                            <li>✓ Feature 3</li>
                            <li>✗ Feature 4</li>
                        </ul>
                        <a href="#cta" class="btn btn-secondary">Choose Plan</a>
                    </div>
                    <div class="pricing-card pricing-featured">
                        <div class="featured-badge">Popular</div>
                        <h3 class="plan-name">Pro</h3>
                        <div class="plan-price">
                            <span class="price">$29</span>
                            <span class="period">/month</span>
                        </div>
                        <ul class="plan-features">
                            <li>✓ Feature 1</li>
                            <li>✓ Feature 2</li>
                            <li>✓ Feature 3</li>
                            <li>✓ Feature 4</li>
                        </ul>
                        <a href="#cta" class="btn btn-primary">Choose Plan</a>
                    </div>
                    <div class="pricing-card">
                        <h3 class="plan-name">Enterprise</h3>
                        <div class="plan-price">
                            <span class="price">Custom</span>
                        </div>
                        <ul class="plan-features">
                            <li>✓ Everything in Pro</li>
                            <li>✓ Priority Support</li>
                            <li>✓ Custom Integration</li>
                            <li>✓ Dedicated Manager</li>
                        </ul>
                        <a href="#cta" class="btn btn-secondary">Contact Sales</a>
                    </div>
                </div>
            </div>
        </section>

        <section id="cta" class="section cta-section">
            <div class="container">
                <div class="cta-content">
                    <h2>Ready to Get Started?</h2>
                    <p>Join thousands of satisfied customers today</p>
                    <form class="cta-form">
                        <input type="email" placeholder="Enter your email" required>
                        <button type="submit" class="btn btn-primary">Start Free Trial</button>
                    </form>
                    <p class="cta-note">No credit card required · Free 14-day trial</p>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-brand">
                    <h3>Brand</h3>
                    <p>Your tagline here</p>
                </div>
                <div class="footer-links">
                    <div class="footer-column">
                        <h4>Product</h4>
                        <ul>
                            <li><a href="#">Features</a></li>
                            <li><a href="#">Pricing</a></li>
                            <li><a href="#">FAQ</a></li>
                        </ul>
                    </div>
                    <div class="footer-column">
                        <h4>Company</h4>
                        <ul>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Careers</a></li>
                        </ul>
                    </div>
                    <div class="footer-column">
                        <h4>Legal</h4>
                        <ul>
                            <li><a href="#">Privacy</a></li>
                            <li><a href="#">Terms</a></li>
                            <li><a href="#">Security</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2026 Brand. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>


path: assets/templates/landing/script.js
content: // Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// CTA form submission
const ctaForm = document.querySelector('.cta-form');
ctaForm?.addEventListener('submit', (e) => {
    e.preventDefault();
    const email = e.target.querySelector('input[type="email"]').value;
    // Add your form submission logic here
    alert(`Thank you! We'll contact you at ${email}`);
    e.target.reset();
});

// Animate elements on scroll (simple intersection observer)
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
        }
    });
}, observerOptions);

// Observe all feature and pricing cards
document.querySelectorAll('.feature-card, .pricing-card').forEach(card => {
    card.style.opacity = '0';
    card.style.transform = 'translateY(30px)';
    card.style.transition = 'opacity 0.6s, transform 0.6s';
    observer.observe(card);
});

// Navbar background on scroll
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
    if (window.scrollY > 50) {
        navbar.style.background = 'rgba(255, 255, 255, 0.98)';
        navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)';
    } else {
        navbar.style.background = 'rgba(255, 255, 255, 0.95)';
        navbar.style.boxShadow = '0 2px 10px rgba(0,0,0,0.05)';
    }
});


path: assets/templates/landing/styles.css
content: :root {
    --primary: #0066FF;
    --secondary: #00A3FF;
    --text: #1A1A1A;
    --text-light: #666;
    --bg: #FFFFFF;
    --bg-alt: #F8F9FA;
    --border: #E5E7EB;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 1000;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.nav-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}

.nav-menu {
    display: flex;
    gap: 2rem;
    align-items: center;
    list-style: none;
}

.nav-menu a {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: var(--primary);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
    text-align: center;
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,102,255,0.3);
}

.btn-secondary {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-secondary:hover {
    background: var(--primary);
    color: white;
}

/* Hero */
.hero {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
    padding: 8rem 2rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-light);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero-cta {
    display: flex;
    gap: 1rem;
}

.hero-image img {
    width: 100%;
    border-radius: 12px;
}

/* Sections */
.section {
    padding: 6rem 0;
}

.section-alt {
    background: var(--bg-alt);
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 1rem;
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: var(--text-light);
    margin-bottom: 4rem;
}

/* Features */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: var(--bg);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.feature-card p {
    color: var(--text-light);
}

/* Pricing */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.pricing-card {
    background: var(--bg);
    padding: 2.5rem;
    border-radius: 12px;
    border: 2px solid var(--border);
    text-align: center;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

.pricing-featured {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(0,102,255,0.15);
}

.featured-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.plan-name {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.plan-price {
    margin-bottom: 2rem;
}

.price {
    font-size: 3rem;
    font-weight: 700;
}

.period {
    color: var(--text-light);
}

.plan-features {
    list-style: none;
    margin-bottom: 2rem;
}

.plan-features li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.plan-features li:last-child {
    border-bottom: none;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
}

.cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-form {
    display: flex;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto 1rem;
}

.cta-form input {
    flex: 1;
    padding: 1rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
}

.cta-form input:focus {
    outline: 2px solid white;
}

.cta-note {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Footer */
.footer {
    background: var(--text);
    color: white;
    padding: 4rem 0 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 4rem;
    margin-bottom: 3rem;
}

.footer-brand h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.footer-brand p {
    color: rgba(255,255,255,0.7);
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.footer-column h4 {
    margin-bottom: 1rem;
}

.footer-column ul {
    list-style: none;
}

.footer-column li {
    margin-bottom: 0.5rem;
}

.footer-column a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-column a:hover {
    color: white;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
}

/* Responsive */
@media (max-width: 768px) {
    .hero {
        grid-template-columns: 1fr;
        padding: 6rem 2rem 2rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-cta {
        flex-direction: column;
    }

    .cta-form {
        flex-direction: column;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-links {
        grid-template-columns: 1fr;
    }
}


path: assets/templates/portfolio/index.html
content: <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Professional portfolio">
    <title>Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <a href="#" class="nav-logo">Name</a>
            <button class="menu-toggle" aria-label="Toggle menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
            <ul class="nav-menu">
                <li><a href="#about">About</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </nav>

    <header class="hero">
        <div class="hero-content">
            <h1 class="hero-title">Your Name</h1>
            <p class="hero-subtitle">Your Professional Title</p>
            <div class="hero-cta">
                <a href="#contact" class="btn btn-primary">Get In Touch</a>
                <a href="#projects" class="btn btn-secondary">View Work</a>
            </div>
        </div>
    </header>

    <main>
        <section id="about" class="section">
            <div class="container">
                <h2 class="section-title">About Me</h2>
                <div class="about-content">
                    <p>Your bio and professional background.</p>
                </div>
            </div>
        </section>

        <section id="skills" class="section section-alt">
            <div class="container">
                <h2 class="section-title">Skills</h2>
                <div class="skills-grid">
                    <div class="skill-card">
                        <h3>Skill Category 1</h3>
                        <ul>
                            <li>Skill 1</li>
                            <li>Skill 2</li>
                            <li>Skill 3</li>
                        </ul>
                    </div>
                    <div class="skill-card">
                        <h3>Skill Category 2</h3>
                        <ul>
                            <li>Skill 1</li>
                            <li>Skill 2</li>
                            <li>Skill 3</li>
                        </ul>
                    </div>
                    <div class="skill-card">
                        <h3>Skill Category 3</h3>
                        <ul>
                            <li>Skill 1</li>
                            <li>Skill 2</li>
                            <li>Skill 3</li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <section id="projects" class="section">
            <div class="container">
                <h2 class="section-title">Projects</h2>
                <div class="projects-grid">
                    <article class="project-card">
                        <div class="project-image">
                            <img src="https://via.placeholder.com/400x300" alt="Project">
                        </div>
                        <div class="project-content">
                            <h3>Project Title</h3>
                            <p>Project description</p>
                            <a href="#" class="project-link">View Project →</a>
                        </div>
                    </article>
                    <article class="project-card">
                        <div class="project-image">
                            <img src="https://via.placeholder.com/400x300" alt="Project">
                        </div>
                        <div class="project-content">
                            <h3>Project Title</h3>
                            <p>Project description</p>
                            <a href="#" class="project-link">View Project →</a>
                        </div>
                    </article>
                    <article class="project-card">
                        <div class="project-image">
                            <img src="https://via.placeholder.com/400x300" alt="Project">
                        </div>
                        <div class="project-content">
                            <h3>Project Title</h3>
                            <p>Project description</p>
                            <a href="#" class="project-link">View Project →</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>

        <section id="contact" class="section section-alt">
            <div class="container">
                <h2 class="section-title">Get In Touch</h2>
                <form class="contact-form">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea id="message" name="message" rows="5" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Send Message</button>
                </form>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2026 Your Name. All rights reserved.</p>
            <div class="social-links">
                <a href="#" aria-label="GitHub">GitHub</a>
                <a href="#" aria-label="LinkedIn">LinkedIn</a>
                <a href="#" aria-label="Twitter">Twitter</a>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>


path: assets/templates/portfolio/script.js
content: // Mobile menu toggle
const menuToggle = document.querySelector('.menu-toggle');
const navMenu = document.querySelector('.nav-menu');

menuToggle?.addEventListener('click', () => {
    navMenu.classList.toggle('active');
});

// Close menu when clicking outside
document.addEventListener('click', (e) => {
    if (!e.target.closest('.nav-container')) {
        navMenu?.classList.remove('active');
    }
});

// Close menu when clicking a link
document.querySelectorAll('.nav-menu a').forEach(link => {
    link.addEventListener('click', () => {
        navMenu?.classList.remove('active');
    });
});

// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Form submission handler
const contactForm = document.querySelector('.contact-form');
contactForm?.addEventListener('submit', (e) => {
    e.preventDefault();
    // Add your form submission logic here
    alert('Thank you for your message!');
    contactForm.reset();
});

// Navbar background on scroll
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
    if (window.scrollY > 50) {
        navbar.style.background = 'rgba(255, 255, 255, 0.95)';
    } else {
        navbar.style.background = 'var(--bg)';
    }
});


path: assets/templates/portfolio/styles.css
content: :root {
    --primary: #0066FF;
    --secondary: #00A3FF;
    --accent: #FF6B6B;
    --text: #1A1A1A;
    --text-light: #666;
    --bg: #FFFFFF;
    --bg-alt: #F5F5F5;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--bg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.nav-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--text);
    transition: 0.3s;
}

.nav-menu {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.nav-menu a {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: var(--primary);
}

/* Hero */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 2rem 2rem;
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--text-light);
    margin-bottom: 2rem;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--secondary);
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-secondary:hover {
    background: var(--primary);
    color: white;
}

/* Sections */
.section {
    padding: 5rem 0;
}

.section-alt {
    background: var(--bg-alt);
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
}

/* About */
.about-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.8;
}

/* Skills */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.skill-card {
    background: var(--bg);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.skill-card h3 {
    margin-bottom: 1rem;
    color: var(--primary);
}

.skill-card ul {
    list-style-position: inside;
}

.skill-card li {
    margin: 0.5rem 0;
}

/* Projects */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.project-card {
    background: var(--bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.project-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.project-content {
    padding: 1.5rem;
}

.project-content h3 {
    margin-bottom: 0.5rem;
}

.project-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    margin-top: 1rem;
}

.project-link:hover {
    color: var(--secondary);
}

/* Contact Form */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
}

/* Footer */
.footer {
    background: var(--text);
    color: white;
    padding: 2rem 0;
}

.footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-links {
    display: flex;
    gap: 1.5rem;
}

.social-links a {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.social-links a:hover {
    color: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        background: var(--bg);
        padding: 2rem;
        transform: translateX(-100%);
        transition: transform 0.3s;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .nav-menu.active {
        transform: translateX(0);
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .hero-cta {
        flex-direction: column;
    }

    .footer .container {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}


path: references/design-patterns.md
content: # Design Patterns and Best Practices

## Design Philosophy

### Thomek's Design Principles
1. **Autonomous Generation** - Complete, production-ready code without placeholders
2. **Modern Aesthetics** - Clean, contemporary design patterns
3. **Performance First** - Fast loading, optimized assets
4. **Mobile Priority** - Responsive from the ground up
5. **User Experience** - Intuitive navigation, clear CTAs

## Color Schemes

### Professional Palettes
```css
/* Modern Blue */
--primary: #0066FF;
--secondary: #00A3FF;
--accent: #FF6B6B;
--text: #1A1A1A;
--bg: #FFFFFF;

/* Dark Theme */
--primary: #00D9FF;
--secondary: #0066FF;
--accent: #FF4D94;
--text: #FFFFFF;
--bg: #0A0A0A;

/* Minimal Monochrome */
--primary: #000000;
--secondary: #666666;
--accent: #FF0000;
--text: #333333;
--bg: #F5F5F5;
```

### Gradient Patterns
```css
/* Modern gradient backgrounds */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
```

## Typography

### Font Stacks
```css
/* System fonts (fastest) */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
             Oxygen, Ubuntu, Cantarell, sans-serif;

/* Modern sans-serif */
font-family: 'Inter', 'SF Pro Display', -apple-system, sans-serif;

/* Elegant serif */
font-family: 'Playfair Display', Georgia, serif;

/* Monospace for code */
font-family: 'Fira Code', 'Consolas', monospace;
```

### Scale and Hierarchy
```css
/* Type scale (1.25 ratio) */
--fs-xs: 0.64rem;    /* 10px */
--fs-sm: 0.8rem;     /* 13px */
--fs-base: 1rem;     /* 16px */
--fs-md: 1.25rem;    /* 20px */
--fs-lg: 1.563rem;   /* 25px */
--fs-xl: 1.953rem;   /* 31px */
--fs-2xl: 2.441rem;  /* 39px */
--fs-3xl: 3.052rem;  /* 49px */
```

## Layout Patterns

### Hero Section
```html
<section class="hero">
    <div class="hero-content">
        <h1 class="hero-title">Bold Statement</h1>
        <p class="hero-subtitle">Supporting text that explains value proposition</p>
        <div class="hero-cta">
            <a href="#action" class="btn btn-primary">Primary Action</a>
            <a href="#learn" class="btn btn-secondary">Learn More</a>
        </div>
    </div>
</section>
```

```css
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.hero-title {
    font-size: var(--fs-3xl);
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: var(--fs-lg);
    opacity: 0.8;
    margin-bottom: 2rem;
}
```

### Grid Layouts
```css
/* Auto-fit responsive grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* 3-column layout */
.three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 768px) {
    .three-col {
        grid-template-columns: 1fr;
    }
}
```

### Card Components
```html
<div class="card">
    <div class="card-image">
        <img src="..." alt="...">
    </div>
    <div class="card-content">
        <h3 class="card-title">Title</h3>
        <p class="card-description">Description</p>
        <a href="#" class="card-link">Learn more →</a>
    </div>
</div>
```

```css
.card {
    background: var(--bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
```

## Component Patterns

### Navigation Bar
```html
<nav class="navbar">
    <div class="nav-container">
        <a href="#" class="nav-logo">Logo</a>
        <button class="menu-toggle" aria-label="Toggle menu">
            <span></span>
            <span></span>
            <span></span>
        </button>
        <ul class="nav-menu">
            <li><a href="#about">About</a></li>
            <li><a href="#work">Work</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>
</nav>
```

```css
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--bg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.nav-menu {
    display: flex;
    gap: 2rem;
    list-style: none;
}

@media (max-width: 768px) {
    .nav-menu {
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--bg);
        transform: translateX(-100%);
        transition: transform 0.3s;
    }
    
    .nav-menu.active {
        transform: translateX(0);
    }
}
```

### Buttons
```css
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--secondary);
    transform: scale(1.05);
}

.btn-secondary {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.btn-secondary:hover {
    background: var(--primary);
    color: white;
}
```

### Contact Forms
```html
<form class="contact-form">
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" id="name" name="name" required>
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" required>
    </div>
    <div class="form-group">
        <label for="message">Message</label>
        <textarea id="message" name="message" rows="5" required></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Send Message</button>
</form>
```

```css
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
}
```

## Animation Patterns

### Entrance Animations
```css
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: fadeInUp 0.6s ease-out;
}

/* Stagger children */
.stagger-children > * {
    animation: fadeInUp 0.6s ease-out;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
```

### Hover Effects
```css
/* Scale on hover */
.hover-scale {
    transition: transform 0.3s;
}
.hover-scale:hover {
    transform: scale(1.05);
}

/* Lift effect */
.hover-lift {
    transition: transform 0.3s, box-shadow 0.3s;
}
.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* Glow effect */
.hover-glow {
    transition: box-shadow 0.3s;
}
.hover-glow:hover {
    box-shadow: 0 0 20px var(--primary);
}
```

## Accessibility

### Required Practices
```html
<!-- Semantic HTML -->
<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>

<!-- Alt text for images -->
<img src="..." alt="Descriptive text">

<!-- ARIA labels -->
<button aria-label="Close menu">×</button>

<!-- Skip to content -->
<a href="#main" class="skip-link">Skip to content</a>

<!-- Focus indicators -->
:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
```

## Performance Optimizations

### Critical CSS
```html
<style>
/* Inline critical above-the-fold styles */
.hero { min-height: 100vh; display: flex; }
/* ... */
</style>
<link rel="stylesheet" href="styles.css">
```

### Lazy Loading
```html
<img src="..." alt="..." loading="lazy">
```

### Preload Critical Assets
```html
<link rel="preload" href="hero-image.webp" as="image">
```

## Modern CSS Features

### CSS Grid Areas
```css
.layout {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 250px 1fr;
    gap: 2rem;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
```

### Custom Properties with Fallbacks
```css
:root {
    --spacing: 2rem;
    --radius: 8px;
}

.card {
    padding: var(--spacing);
    border-radius: var(--radius);
}
```

### Container Queries (Modern browsers)
```css
@container (min-width: 400px) {
    .card {
        grid-template-columns: 1fr 1fr;
    }
}
```


path: references/workflow.md
content: # Complete Workflow Documentation

## Full Development Cycle

### Phase 1: Planning
1. Understand user requirements
2. Choose appropriate template (base/portfolio/landing)
3. Define site structure and sections

### Phase 2: Project Setup
```bash
cd /root/creations
bash /root/clawd/web-deploy-github/scripts/init_project.sh project-name
```

### Phase 3: Development
1. **Generate complete code** - No placeholders, full implementation
2. **Test locally** - Open index.html in browser
3. **Verify responsiveness** - Check mobile/tablet/desktop views
4. **Validate HTML** - Ensure semantic markup
5. **Optimize performance** - Check load times

### Phase 4: Deployment
```bash
cd project-name
bash /root/clawd/web-deploy-github/scripts/deploy_github_pages.sh project-name username
```

### Phase 5: Verification
1. Wait 1-2 minutes for deployment
2. Visit `https://username.github.io/project-name/`
3. Test all functionality
4. Verify mobile responsiveness

## Autonomous Generation Principles

### Code Completeness
- Generate **complete, production-ready code**
- No TODO comments or placeholder text
- All sections fully implemented
- Real content, not "Lorem ipsum"

### Quality Standards
- Valid HTML5
- Modern CSS (no outdated practices)
- Accessible (ARIA labels, semantic HTML)
- Fast loading (< 2s initial load)
- Mobile-first responsive

### Design Principles
- Clean, modern aesthetics
- Clear visual hierarchy
- Consistent spacing and typography
- Professional color schemes
- Smooth interactions

## Common Patterns

### Single-Page Site Structure
```html
<nav>    <!-- Navigation -->
<header> <!-- Hero/Introduction -->
<main>
  <section id="about">     <!-- About -->
  <section id="features">  <!-- Features/Skills -->
  <section id="work">      <!-- Projects/Portfolio -->
  <section id="contact">   <!-- Contact Form/Info -->
</main>
<footer> <!-- Footer -->
```

### Responsive Breakpoints
```css
/* Mobile first */
/* Default styles for mobile */

/* Tablet */
@media (min-width: 768px) { }

/* Desktop */
@media (min-width: 1024px) { }

/* Large screens */
@media (min-width: 1440px) { }
```

### JavaScript Patterns
```javascript
// Smooth scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href'))
            .scrollIntoView({ behavior: 'smooth' });
    });
});

// Mobile menu toggle
const menuBtn = document.querySelector('.menu-btn');
const nav = document.querySelector('nav');
menuBtn?.addEventListener('click', () => {
    nav.classList.toggle('active');
});
```

## Git Workflow

### Initial Commit
```bash
git init
git add .
git commit -m "Initial commit: Complete site implementation"
```

### Subsequent Updates
```bash
git add .
git commit -m "Update: [specific changes]"
git push origin main
```

### GitHub Actions Auto-Deploy
- Triggers on push to main
- Builds and deploys to gh-pages branch
- Live site updates automatically

## Troubleshooting Guide

### Deployment Issues

**Problem:** Pages not updating
**Solution:**
```bash
# Force trigger workflow
git commit --allow-empty -m "Trigger deployment"
git push origin main
```

**Problem:** 404 error on GitHub Pages
**Solution:**
- Check repository Settings → Pages
- Ensure source is set to "GitHub Actions"
- Verify deployment workflow ran successfully

**Problem:** CSS/JS not loading
**Solution:**
- Use relative paths: `./styles.css` not `/styles.css`
- Check browser console for errors
- Verify file names match exactly (case-sensitive)

### Development Issues

**Problem:** Layout broken on mobile
**Solution:**
- Add viewport meta tag
- Test with browser DevTools device emulation
- Use mobile-first CSS approach

**Problem:** Images not displaying
**Solution:**
- Verify image paths are relative
- Check image file extensions match
- Ensure images are committed to git

## Performance Optimization

### Images
- Use WebP format when possible
- Provide width/height attributes
- Use `loading="lazy"` for below-fold images
- Optimize with tools like TinyPNG

### CSS
- Minimize unused styles
- Use CSS variables for themes
- Avoid deep nesting
- Use efficient selectors

### JavaScript
- Load scripts with `defer` attribute
- Minimize DOM manipulation
- Use event delegation
- Avoid memory leaks

### Fonts
- Use system fonts when possible
- Preload critical fonts
- Use `font-display: swap`
- Subset custom fonts


path: scripts/deploy_github_pages.sh
content: #!/bin/bash
# Deploy project to GitHub Pages

set -e

PROJECT_NAME=$1
GITHUB_USERNAME=$2

if [ -z "$PROJECT_NAME" ] || [ -z "$GITHUB_USERNAME" ]; then
    echo "Usage: bash deploy_github_pages.sh <project-name> <github-username>"
    exit 1
fi

echo "🚀 Deploying $PROJECT_NAME to GitHub Pages"

# Check if gh CLI is installed
if ! command -v gh &> /dev/null; then
    echo "❌ GitHub CLI (gh) is not installed"
    echo "Install: https://cli.github.com/"
    exit 1
fi

# Check if authenticated
if ! gh auth status &> /dev/null; then
    echo "❌ Not authenticated with GitHub CLI"
    echo "Run: gh auth login"
    exit 1
fi

cd "$PROJECT_NAME"

# Initialize git if not already
if [ ! -d .git ]; then
    echo "📦 Initializing git repository..."
    git init
    git add .
    git commit -m "Initial commit"
fi

# Create GitHub repository
echo "📦 Creating GitHub repository..."
if gh repo create "$PROJECT_NAME" --public --source=. --remote=origin --push 2>/dev/null; then
    echo "✅ Repository created and pushed"
else
    echo "⚠️  Repository might already exist, adding remote..."
    git remote add origin "https://github.com/$GITHUB_USERNAME/$PROJECT_NAME.git" 2>/dev/null || true
    git push -u origin main
fi

# Enable GitHub Pages
echo "🌐 Configuring GitHub Pages..."
gh api -X POST "/repos/$GITHUB_USERNAME/$PROJECT_NAME/pages" \
    -f source[branch]=gh-pages \
    -f source[path]=/ 2>/dev/null || echo "⚠️  Pages already configured or needs manual setup"

# Trigger workflow
echo "🔄 Triggering deployment workflow..."
git push origin main

echo ""
echo "✅ Deployment initiated!"
echo ""
echo "📍 Your site will be available at:"
echo "   https://$GITHUB_USERNAME.github.io/$PROJECT_NAME/"
echo ""
echo "⏳ First deployment may take 1-2 minutes"
echo "🔗 Check status: gh workflow view"


path: scripts/init_project.sh
content: #!/bin/bash
# Initialize a new web project for GitHub Pages deployment

set -e

PROJECT_NAME=$1

if [ -z "$PROJECT_NAME" ]; then
    echo "Usage: bash init_project.sh <project-name>"
    exit 1
fi

echo "🚀 Initializing project: $PROJECT_NAME"

# Create project directory
mkdir -p "$PROJECT_NAME"
cd "$PROJECT_NAME"

# Create basic structure
mkdir -p .github/workflows

# Create index.html
cat > index.html <<'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <title>My Site</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main>
        <section class="hero">
            <h1>Welcome</h1>
            <p>This is a starter template</p>
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>
EOF

# Create styles.css
cat > styles.css <<'EOF'
:root {
    --primary: #007bff;
    --text: #333;
    --bg: #fff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.hero {
    text-align: center;
    padding: 4rem 2rem;
}

h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }
}
EOF

# Create script.js
cat > script.js <<'EOF'
// Add your JavaScript here
console.log('Site loaded');
EOF

# Create README.md
cat > README.md <<EOF
# $PROJECT_NAME

Live site: Coming soon

## Development

Open \`index.html\` in your browser to preview locally.

## Deployment

Automatically deployed to GitHub Pages on push to main branch.
EOF

# Create GitHub Actions workflow
cat > .github/workflows/deploy.yml <<'EOF'
name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Pages
        uses: actions/configure-pages@v4
        
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: '.'
          
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
EOF

echo "✅ Project structure created in $PROJECT_NAME/"
echo ""
echo "Next steps:"
echo "  1. Edit index.html, styles.css, and script.js"
echo "  2. Run: bash deploy_github_pages.sh $PROJECT_NAME <github-username>"


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: suspicious | SkillSpector: suspicious (MEDIUM)