Ebyte-Lab · Josephat-S · May 26, 2026 · May 26, 2026
diff --git 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
@@ -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 (
+    <div className="min-h-screen bg-background">
+      <section className="max-w-5xl mx-auto px-6 py-16">
+        <div className="mb-12">
+          <h1 className="text-3xl sm:text-4xl font-bold text-foreground">Skills & Expertise</h1>
+          <p className="mt-3 text-text-secondary text-lg">
+            A breakdown of my technical skills, tools, and proficiency levels built over 5+ years of professional development.
+          </p>
+        </div>
+
+        {/* Skill Categories */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-20">
+          {categories.map((category) => (
+            <div key={category.title} className="border border-border rounded-theme p-6 bg-card">
+              <h2 className="text-xl font-bold text-foreground mb-6">{category.title}</h2>
+              <div className="space-y-4">
+                {category.skills.map((skill) => (
+                  <div key={skill.name}>
+                    <div className="flex justify-between text-sm mb-1.5">
+                      <span className="font-medium text-foreground">{skill.name}</span>
+                      <span className="text-text-secondary">{skill.level}%</span>
+                    </div>
+                    <div className="w-full h-2 bg-bg-secondary rounded-full overflow-hidden">
+                      <div
+                        className="h-full rounded-full transition-all duration-500"
+                        style=\{{ width: `${skill.level}%`, backgroundColor: 'var(--primary)' }}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Certifications */}
+        <div>
+          <h2 className="text-2xl font-bold text-foreground mb-8 text-center">Certifications</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {certifications.map((cert) => (
+              <div key={cert.name} className="border border-border rounded-theme p-5 bg-card text-center">
+                <div className="w-12 h-12 rounded-full bg-primary/10 mx-auto flex items-center justify-center mb-4">
+                  <svg className="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
+                  </svg>
+                </div>
+                <h3 className="font-semibold text-foreground text-sm">{cert.name}</h3>
+                <p className="text-xs text-text-secondary mt-1">{cert.issuer}</p>
+                <p className="text-xs text-primary mt-1">{cert.year}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/templates/portfolio/vite-react/index.html b/templates/portfolio/vite-react/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="{{design}}">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}} - Portfolio</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/templates/portfolio/vite-react/package.json 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
@@ -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
@@ -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 (
+    <BrowserRouter>
+      <Routes>
+        <Route element={<Layout />}>
+          <Route path="/" element={<Home />} />
+          <Route path="/projects" element={<Projects />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/skills" element={<Skills />} />
+          <Route path="/contact" element={<Contact />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+}
diff --git a/templates/portfolio/vite-react/src/components/Layout.tsx 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 (
+    <header className="border-b border-border bg-card">
+      <nav className="max-w-5xl mx-auto px-6 h-16 flex items-center justify-between">
+        <Link to="/" className="text-xl font-bold text-primary">
+          {{projectName}}
+        </Link>
+        <ul className="flex gap-6">
+          {navLinks.map((link) => (
+            <li key={link.href}>
+              <Link
+                to={link.href}
+                className="text-text-secondary hover:text-foreground transition"
+              >
+                {link.label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </header>
+  );
+}
+
+function Sidebar() {
+  return (
+    <aside className="w-64 border-r border-border bg-card min-h-screen p-6">
+      <Link to="/" className="text-xl font-bold text-primary block mb-8">
+        {{projectName}}
+      </Link>
+      <nav>
+        <ul className="space-y-2">
+          {navLinks.map((link) => (
+            <li key={link.href}>
+              <Link
+                to={link.href}
+                className="block px-4 py-2 rounded-theme text-text-secondary hover:bg-bg-secondary hover:text-foreground transition"
+              >
+                {link.label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </aside>
+  );
+}
+
+export default function Layout() {
+  const useSidebar = ('{{includeSidebar}}' as string) === 'true';
+
+  if (useSidebar) {
+    return (
+      <div className="flex">
+        <Sidebar />
+        <main className="flex-1">
+          <Outlet />
+        </main>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <Navbar />
+      <main>
+        <Outlet />
+      </main>
+    </>
+  );
+}
diff --git a/templates/portfolio/vite-react/src/index.css 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
@@ -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(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);