# portfolio_scaffold.py
# Run this script to generate a clean, modern, dark-mode developer portfolio
# using React + Tailwind (files are written as .tsx/.ts/.css from Python)

import os
from pathlib import Path

BASE = Path("src")
COMP = BASE / "components"
HOOKS = BASE / "hooks"
PAGES = BASE / "pages"

paths = [BASE, COMP, HOOKS, PAGES]
for p in paths:
    p.mkdir(parents=True, exist_ok=True)

files = {
    "tailwind.config.ts": """
import type { Config } from "tailwindcss"

export default {
  darkMode: "class",
  content: ["./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        bg: "#05060a",
        panel: "rgba(15,18,32,0.65)",
        blueGlow: "#3b82f6"
      },
      fontFamily: {
        inter: ["Inter", "sans-serif"]
      },
      keyframes: {
        float: {
          "0%,100%": { transform: "translateY(0px)" },
          "50%": { transform: "translateY(-12px)" }
        }
      },
      animation: {
        float: "float 6s ease-in-out infinite"
      }
    }
  },
  plugins: []
} satisfies Config
""",

    "src/index.css": """
@tailwind base;
@tailwind components;
@tailwind utilities;

html, body {
  background: #05060a;
  color: #e5e7eb;
  font-family: Inter, sans-serif;
}

.glass {
  background: rgba(15,18,32,0.65);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.06);
}
""",

    "src/pages/Index.tsx": """
import HeroSection from "../components/HeroSection"
import AboutSection from "../components/AboutSection"
import SkillsSection from "../components/SkillsSection"
import Footer from "../components/Footer"

export default function Index() {
  return (
    <main className="min-h-screen space-y-32">
      <HeroSection />
      <AboutSection />
      <SkillsSection />
      <Footer />
    </main>
  )
}
""",

    "src/components/HeroSection.tsx": """
export default function HeroSection() {
  return (
    <section className="relative flex min-h-screen items-center justify-center text-center">
      <div className="absolute inset-0 -z-10">
        <div className="absolute left-1/2 top-1/3 h-96 w-96 -translate-x-1/2 rounded-full bg-blue-500/20 blur-3xl animate-float" />
      </div>

      <div>
        <h1 className="text-6xl md:text-7xl font-bold bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">
          Shamar Pryce
        </h1>
        <p className="mt-6 max-w-xl mx-auto text-gray-400">
          Discord Bot Developer · Website Developer · Graphics Designer<br/>
          Aspiring to become the world’s greatest coder
        </p>
      </div>
    </section>
  )
}
""",

    "src/components/AboutSection.tsx": """
export default function AboutSection() {
  return (
    <section className="max-w-4xl mx-auto px-6">
      <div className="glass rounded-2xl p-8">
        <h2 className="text-3xl font-semibold mb-4">About Me</h2>
        <p className="text-gray-300 leading-relaxed">
          I’m a Python-focused developer with a strong emphasis on Discord bot
          development. I also build websites and design graphics, constantly
          pushing myself to improve and grow long-term in tech.
        </p>
      </div>
    </section>
  )
}
""",

    "src/components/SkillsSection.tsx": """
const skills = [
  { name: "Discord Bot Development", value: 95 },
  { name: "Website Development", value: 50 },
  { name: "Graphic Design", value: 90 }
]

export default function SkillsSection() {
  return (
    <section className="max-w-4xl mx-auto px-6">
      <h2 className="text-3xl font-semibold mb-8">Skills</h2>
      <div className="space-y-6">
        {skills.map(skill => (
          <div key={skill.name}>
            <div className="flex justify-between mb-2">
              <span>{skill.name}</span>
              <span className="text-blue-400">{skill.value}%</span>
            </div>
            <div className="h-3 rounded-full bg-gray-800">
              <div
                className="h-3 rounded-full bg-gradient-to-r from-blue-500 to-blue-700 transition-all duration-1000"
                style={{ width: `${skill.value}%` }}
              />
            </div>
          </div>
        ))}
      </div>
    </section>
  )
}
""",

    "src/components/Footer.tsx": """
export default function Footer() {
  return (
    <footer className="py-10 text-center text-gray-500 text-sm">
      © {new Date().getFullYear()} Shamar Pryce · Built with Python mindset
    </footer>
  )
}
""",

    "src/hooks/useInView.ts": """
import { useEffect, useRef, useState } from "react"

export function useInView() {
  const ref = useRef<HTMLDivElement | null>(null)
  const [visible, setVisible] = useState(false)

  useEffect(() => {
    const obs = new IntersectionObserver(
      ([entry]) => setVisible(entry.isIntersecting),
      { threshold: 0.2 }
    )
    if (ref.current) obs.observe(ref.current)
    return () => obs.disconnect()
  }, [])

  return { ref, visible }
}
"""
}

for path, content in files.items():
    p = Path(path)
    p.parent.mkdir(parents=True, exist_ok=True)
    p.write_text(content.strip())

print("Portfolio scaffold generated successfully.")