diff --git a/src/generate.js b/src/generate.js index edaea66..07099a2 100644 --- a/src/generate.js +++ b/src/generate.js @@ -66,7 +66,7 @@ export async function generateProject(config) { // 🟢 DEVELOPMENT MODE: Local folder found const spinner = ora({ text: 'DEV MODE: Copying local template...', - spinner: 'squareCorners', + spinner: 'dots', color: 'blue' }).start(); fs.cpSync(localTemplatePath, projectPath, { recursive: true }); @@ -78,7 +78,7 @@ export async function generateProject(config) { const spinner = ora({ text: `Fetching template from GitHub (${repoURI})...`, - spinner: 'squareCorners', + spinner: 'dots', color: 'blue' }).start(); @@ -109,7 +109,7 @@ export async function generateProject(config) { // 3. TRANSFORM PHASE: Process Handlebars Tags const compileSpinner = ora({ text: 'Compiling template tags...', - spinner: 'squareCorners', + spinner: 'dots', color: 'cyan' }).start(); const allFiles = getAllFiles(projectPath); @@ -151,7 +151,7 @@ export async function generateProject(config) { const installSpinner = ora({ text: 'Installing dependencies (this might take a minute)...', - spinner: 'squareCorners', + spinner: 'dots', color: 'yellow' }).start(); try { @@ -168,7 +168,7 @@ export async function generateProject(config) { if (config.initGit) { const gitSpinner = ora({ text: 'Initializing Git repository...', - spinner: 'squareCorners', + spinner: 'dots', color: 'magenta' }).start(); try { diff --git a/templates/portfolio/nextjs-monolith/app/skills/page.tsx b/templates/portfolio/nextjs-monolith/app/skills/page.tsx new file mode 100644 index 0000000..c8bbd94 --- /dev/null +++ b/templates/portfolio/nextjs-monolith/app/skills/page.tsx @@ -0,0 +1,111 @@ +export default function SkillsPage() { + const categories = [ + { + title: 'Frontend', + skills: [ + { name: 'React', level: 95 }, + { name: 'Next.js', level: 90 }, + { name: 'TypeScript', level: 92 }, + { name: 'Tailwind CSS', level: 95 }, + { name: 'HTML/CSS', level: 98 }, + { name: 'Vue.js', level: 70 }, + ], + }, + { + title: 'Backend', + skills: [ + { name: 'Node.js', level: 88 }, + { name: 'PostgreSQL', level: 82 }, + { name: 'REST APIs', level: 90 }, + { name: 'GraphQL', level: 75 }, + { name: 'Prisma', level: 85 }, + { name: 'Redis', level: 70 }, + ], + }, + { + title: 'Tools & DevOps', + skills: [ + { name: 'Git', level: 92 }, + { name: 'Docker', level: 78 }, + { name: 'CI/CD', level: 80 }, + { name: 'Vercel', level: 90 }, + { name: 'AWS', level: 72 }, + { name: 'Linux', level: 75 }, + ], + }, + { + title: 'Design & Other', + skills: [ + { name: 'Figma', level: 85 }, + { name: 'UI/UX Design', level: 78 }, + { name: 'Accessibility', level: 82 }, + { name: 'Performance', level: 88 }, + { name: 'Testing', level: 80 }, + { name: 'Agile/Scrum', level: 85 }, + ], + }, + ]; + + const certifications = [ + { name: 'AWS Certified Cloud Practitioner', issuer: 'Amazon Web Services', year: '2023' }, + { name: 'Meta Frontend Developer Certificate', issuer: 'Meta / Coursera', year: '2022' }, + { name: 'Google UX Design Certificate', issuer: 'Google / Coursera', year: '2021' }, + ]; + + return ( +
+
+
+

Skills & Expertise

+

+ A breakdown of my technical skills, tools, and proficiency levels built over 5+ years of professional development. +

+
+ + {/* Skill Categories */} +
+ {categories.map((category) => ( +
+

{category.title}

+
+ {category.skills.map((skill) => ( +
+
+ {skill.name} + {skill.level}% +
+
+
+
+
+ ))} +
+
+ ))} +
+ + {/* Certifications */} +
+

Certifications

+
+ {certifications.map((cert) => ( +
+
+ + + +
+

{cert.name}

+

{cert.issuer}

+

{cert.year}

+
+ ))} +
+
+
+
+ ); +} diff --git a/templates/portfolio/vite-react/index.html b/templates/portfolio/vite-react/index.html new file mode 100644 index 0000000..2c9273b --- /dev/null +++ b/templates/portfolio/vite-react/index.html @@ -0,0 +1,13 @@ + + + + + + + {{projectName}} - Portfolio + + +
+ + + diff --git a/templates/portfolio/vite-react/package.json b/templates/portfolio/vite-react/package.json new file mode 100644 index 0000000..086d63f --- /dev/null +++ b/templates/portfolio/vite-react/package.json @@ -0,0 +1,26 @@ +{ + "name": "{{projectName}}", + "version": "1.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-router-dom": "^6.23.0" + }, + "devDependencies": { + "@types/react": "^18.3.0", + "@types/react-dom": "^18.3.0", + "@vitejs/plugin-react": "^4.2.1", + "autoprefixer": "^10.4.19", + "postcss": "^8.4.38", + "tailwindcss": "^3.4.3", + "typescript": "^5.4.5", + "vite": "^5.2.11" + } +} diff --git a/templates/portfolio/vite-react/postcss.config.js b/templates/portfolio/vite-react/postcss.config.js new file mode 100644 index 0000000..2aa7205 --- /dev/null +++ b/templates/portfolio/vite-react/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/templates/portfolio/vite-react/src/App.tsx b/templates/portfolio/vite-react/src/App.tsx new file mode 100644 index 0000000..47c76ea --- /dev/null +++ b/templates/portfolio/vite-react/src/App.tsx @@ -0,0 +1,23 @@ +import { BrowserRouter, Routes, Route } from 'react-router-dom'; +import Layout from './components/Layout'; +import Home from './pages/Home'; +import Projects from './pages/Projects'; +import About from './pages/About'; +import Contact from './pages/Contact'; +import Skills from './pages/Skills'; + +export default function App() { + return ( + + + }> + } /> + } /> + } /> + } /> + } /> + + + + ); +} diff --git a/templates/portfolio/vite-react/src/components/Layout.tsx b/templates/portfolio/vite-react/src/components/Layout.tsx new file mode 100644 index 0000000..f821f48 --- /dev/null +++ b/templates/portfolio/vite-react/src/components/Layout.tsx @@ -0,0 +1,74 @@ +import { Link, Outlet } from 'react-router-dom'; +import { navLinks } from '../lib/nav'; + +function Navbar() { + return ( +
+ +
+ ); +} + +function Sidebar() { + return ( + + ); +} + +export default function Layout() { + const useSidebar = ('{{includeSidebar}}' as string) === 'true'; + + if (useSidebar) { + return ( +
+ +
+ +
+
+ ); + } + + return ( + <> + +
+ +
+ + ); +} diff --git a/templates/portfolio/vite-react/src/index.css b/templates/portfolio/vite-react/src/index.css new file mode 100644 index 0000000..7a2f894 --- /dev/null +++ b/templates/portfolio/vite-react/src/index.css @@ -0,0 +1,48 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --bg-color: #ffffff; + --bg-secondary: #f9fafb; + --text-color: #111827; + --text-secondary: #6b7280; + --primary: #2563eb; + --primary-hover: #1d4ed8; + --border-color: #e5e7eb; + --card-bg: #ffffff; + --font-family: 'Inter', system-ui, sans-serif; + --radius: 0.5rem; +} + +[data-theme="Glassmorphism"] { + --bg-color: #0f172a; + --bg-secondary: rgba(255, 255, 255, 0.05); + --text-color: #f1f5f9; + --text-secondary: #94a3b8; + --primary: #8b5cf6; + --primary-hover: #7c3aed; + --border-color: rgba(255, 255, 255, 0.1); + --card-bg: rgba(255, 255, 255, 0.08); + --font-family: 'Inter', system-ui, sans-serif; + --radius: 1rem; +} + +[data-theme="Dark Terminal"] { + --bg-color: #000000; + --bg-secondary: #0a0a0a; + --text-color: #3fb950; + --text-secondary: #8b949e; + --primary: #3fb950; + --primary-hover: #2ea043; + --border-color: #21262d; + --card-bg: #0d1117; + --font-family: 'JetBrains Mono', 'Fira Code', monospace; + --radius: 0.25rem; +} + +body { + background-color: var(--bg-color); + color: var(--text-color); + font-family: var(--font-family); +} diff --git a/templates/portfolio/vite-react/src/main.tsx b/templates/portfolio/vite-react/src/main.tsx new file mode 100644 index 0000000..9aa52ff --- /dev/null +++ b/templates/portfolio/vite-react/src/main.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; +import './index.css'; + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/templates/portfolio/vite-react/src/pages/About.tsx b/templates/portfolio/vite-react/src/pages/About.tsx new file mode 100644 index 0000000..e5c4c8a --- /dev/null +++ b/templates/portfolio/vite-react/src/pages/About.tsx @@ -0,0 +1,75 @@ +export default function About() { + const timeline = [ + { period: '2023 — Present', title: 'Senior Frontend Engineer', company: 'TechCorp', description: 'Leading frontend architecture for a SaaS platform serving 100k+ users.' }, + { period: '2021 — 2023', title: 'Frontend Developer', company: 'StartupXYZ', description: 'Built and shipped multiple customer-facing features. Introduced TypeScript and improved test coverage by 60%.' }, + { period: '2019 — 2021', title: 'Junior Developer', company: 'AgencyName', description: 'Developed responsive websites for clients across e-commerce, healthcare, and education.' }, + { period: '2018', title: 'Computer Science Degree', company: 'State University', description: 'Graduated with honors. Focused on algorithms, data structures, and human-computer interaction.' }, + ]; + + const skills = ['React', 'Next.js', 'TypeScript', 'Tailwind CSS', 'Node.js', 'PostgreSQL', 'Git', 'Figma']; + + return ( +
+
+ {/* Intro */} +
+
+

About Me

+
+

+ Hi there! I'm Alex Chen, a full-stack developer based in San Francisco with over 5 years of experience building web applications. I'm passionate about creating intuitive, performant digital experiences. +

+

+ My journey into software development started with a curiosity about how things work on the internet. That curiosity turned into a career where I get to solve complex problems every day. +

+

+ When I'm not coding, you'll find me contributing to open source, writing technical blog posts, or hiking trails around the Bay Area. +

+
+
+
+
+
+
+ AC +
+

Profile Photo

+
+
+
+
+ + {/* Timeline */} +
+

Experience

+
+ {timeline.map((entry, i) => ( +
+
+ {entry.period} +

{entry.title}

+

{entry.company}

+

{entry.description}

+
+ ))} +
+
+ + {/* Skills */} +
+

Tech Stack

+
+ {skills.map((skill) => ( +
+
+ {skill.charAt(0)} +
+ {skill} +
+ ))} +
+
+
+
+ ); +} diff --git a/templates/portfolio/vite-react/src/pages/Contact.tsx b/templates/portfolio/vite-react/src/pages/Contact.tsx new file mode 100644 index 0000000..cbdc504 --- /dev/null +++ b/templates/portfolio/vite-react/src/pages/Contact.tsx @@ -0,0 +1,76 @@ +export default function Contact() { + return ( +
+
+
+

Contact

+

Have a question or want to work together? Drop me a message.

+
+ +
+ {/* Form */} +
+
+
+ + +
+
+ + +
+
+ + +
+
+ +