@beknurakhmed/webforge-cli 0.1.0 → 0.1.2

package/templates/overlays/portfolio/react/src/App.tsx

@@ -1,19 +1,23 @@
-import { HeroSection } from './components/HeroSection';
-import { Projects } from './components/Projects';
-import { Skills } from './components/Skills';
-import { ContactForm } from './components/ContactForm';
-import { PortfolioFooter } from './components/PortfolioFooter';
+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 './App.css';
 
 function App() {
   return (
-    <div className="portfolio">
-      <HeroSection />
-      <Projects />
-      <Skills />
-      <ContactForm />
-      <PortfolioFooter />
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="projects" element={<Projects />} />
+          <Route path="about" element={<About />} />
+          <Route path="contact" element={<Contact />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
   );
 }
 

package/templates/overlays/portfolio/react/src/components/Layout.tsx

@@ -0,0 +1,17 @@
+import { Outlet } from 'react-router-dom';
+import Navbar from './Navbar';
+import PortfolioFooter from './PortfolioFooter';
+
+function Layout() {
+  return (
+    <div className="portfolio">
+      <Navbar />
+      <main>
+        <Outlet />
+      </main>
+      <PortfolioFooter />
+    </div>
+  );
+}
+
+export default Layout;

package/templates/overlays/portfolio/react/src/components/Navbar.tsx

@@ -0,0 +1,30 @@
+import { NavLink } from 'react-router-dom';
+
+const navItems = [
+  { to: '/', label: 'Home' },
+  { to: '/projects', label: 'Projects' },
+  { to: '/about', label: 'About' },
+  { to: '/contact', label: 'Contact' },
+];
+
+function Navbar() {
+  return (
+    <nav className="portfolio-nav">
+      <NavLink to="/" className="logo">{'{{projectName}}'}</NavLink>
+      <div className="nav-links">
+        {navItems.map((item) => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            end={item.to === '/'}
+            className={({ isActive }) => isActive ? 'active' : ''}
+          >
+            {item.label}
+          </NavLink>
+        ))}
+      </div>
+    </nav>
+  );
+}
+
+export default Navbar;

package/templates/overlays/portfolio/react/src/components/PortfolioFooter.tsx

@@ -1,14 +1,16 @@
-export function PortfolioFooter() {
+function PortfolioFooter() {
   return (
     <footer className="portfolio-footer">
       <div className="footer-content">
         <div className="footer-links">
-          <a href="https://github.com/beknurakhmed" target="_blank" rel="noopener noreferrer">GitHub</a>
+          <a href="#" target="_blank" rel="noopener noreferrer">GitHub</a>
           <a href="#">LinkedIn</a>
           <a href="#">Twitter</a>
         </div>
-        <p>&copy; 2025 {{projectName}}. All rights reserved.</p>
+        <p>&copy; 2025 {'{{projectName}}'}. All rights reserved.</p>
       </div>
     </footer>
   );
 }
+
+export default PortfolioFooter;

package/templates/overlays/portfolio/react/src/components/ProjectCard.tsx

@@ -0,0 +1,24 @@
+import type { Project } from '../data/projects';
+
+interface ProjectCardProps {
+  project: Project;
+}
+
+function ProjectCard({ project }: ProjectCardProps) {
+  return (
+    <div className="project-card">
+      <div className="project-image">{project.image}</div>
+      <div className="project-info">
+        <h3>{project.title}</h3>
+        <p>{project.description}</p>
+        <div className="project-tags">
+          {project.tags.map((tag, j) => (
+            <span key={j} className="tag">{tag}</span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProjectCard;

package/templates/overlays/portfolio/react/src/components/SkillsGrid.tsx

@@ -0,0 +1,20 @@
+import { skills } from '../data/projects';
+
+function SkillsGrid() {
+  return (
+    <div className="skills-grid">
+      {skills.map((group, i) => (
+        <div key={i} className="skill-group">
+          <h3>{group.category}</h3>
+          <div className="skill-tags">
+            {group.items.map((skill, j) => (
+              <span key={j} className="skill-tag">{skill}</span>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default SkillsGrid;

package/templates/overlays/portfolio/react/src/data/projects.ts

@@ -0,0 +1,25 @@
+export interface Project {
+  id: number;
+  title: string;
+  description: string;
+  image: string;
+  tags: string[];
+  category: string;
+  link: string;
+}
+
+export const projects: Project[] = [
+  { id: 1, title: 'E-Commerce Platform', description: 'Full-stack online store with cart, checkout, and payment integration.', image: '🛒', tags: ['React', 'Node.js', 'MongoDB'], category: 'Web App', link: '#' },
+  { id: 2, title: 'Task Management App', description: 'Collaborative task manager with real-time updates and team features.', image: '📋', tags: ['Vue.js', 'Firebase', 'Tailwind'], category: 'Web App', link: '#' },
+  { id: 3, title: 'Weather Dashboard', description: 'Beautiful weather visualization with forecasts and location search.', image: '🌤️', tags: ['TypeScript', 'API', 'Chart.js'], category: 'Dashboard', link: '#' },
+  { id: 4, title: 'Social Media App', description: 'Social networking platform with posts, comments, and messaging.', image: '💬', tags: ['Next.js', 'PostgreSQL', 'WebSocket'], category: 'Mobile', link: '#' },
+  { id: 5, title: 'Portfolio Website', description: 'Responsive portfolio with animations and dark mode support.', image: '🎨', tags: ['React', 'Framer Motion', 'SCSS'], category: 'Website', link: '#' },
+  { id: 6, title: 'Blog CMS', description: 'Content management system with markdown editor and SEO tools.', image: '📝', tags: ['Nuxt', 'MongoDB', 'Markdown'], category: 'Website', link: '#' },
+];
+
+export const skills = [
+  { category: 'Frontend', items: ['React', 'Vue', 'TypeScript', 'Tailwind CSS'] },
+  { category: 'Backend', items: ['Node.js', 'Python', 'PostgreSQL', 'Redis'] },
+  { category: 'DevOps', items: ['Docker', 'AWS', 'CI/CD', 'Linux'] },
+  { category: 'Tools', items: ['Git', 'VS Code', 'Figma', 'Jira'] },
+];

package/templates/overlays/portfolio/react/src/pages/About.tsx

@@ -0,0 +1,43 @@
+import SkillsGrid from '../components/SkillsGrid';
+
+const timeline = [
+  { year: '2024 - Present', role: 'Senior Frontend Developer', company: 'Tech Corp', desc: 'Leading frontend architecture and mentoring junior developers.' },
+  { year: '2022 - 2024', role: 'Frontend Developer', company: 'StartupXYZ', desc: 'Built and maintained multiple React applications from scratch.' },
+  { year: '2020 - 2022', role: 'Junior Developer', company: 'Web Agency', desc: 'Developed responsive websites and learned modern frameworks.' },
+];
+
+function About() {
+  return (
+    <div className="about-section">
+      <h2>About Me</h2>
+      <p className="section-subtitle">My journey as a developer</p>
+      <div className="about-content">
+        <div className="about-bio">
+          <span className="about-avatar">👨‍💻</span>
+          <p>
+            I am a passionate software engineer with a love for building beautiful, performant
+            web applications. With expertise in modern JavaScript frameworks and a keen eye
+            for design, I bridge the gap between functionality and aesthetics.
+          </p>
+        </div>
+        <h3 className="timeline-title">Experience</h3>
+        <div className="timeline">
+          {timeline.map((item, i) => (
+            <div key={i} className="timeline-item">
+              <span className="timeline-year">{item.year}</span>
+              <h4>{item.role}</h4>
+              <span className="timeline-company">{item.company}</span>
+              <p>{item.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="skills-section">
+        <h3 className="timeline-title">Skills</h3>
+        <SkillsGrid />
+      </div>
+    </div>
+  );
+}
+
+export default About;

package/templates/overlays/portfolio/react/src/pages/Contact.tsx

@@ -0,0 +1,48 @@
+function Contact() {
+  return (
+    <div className="contact-section">
+      <h2>Get In Touch</h2>
+      <p className="section-subtitle">Have a project in mind? Let's work together.</p>
+      <div className="contact-grid">
+        <form className="contact-form" onSubmit={(e) => e.preventDefault()}>
+          <div className="form-row">
+            <div className="form-group">
+              <label htmlFor="name">Name</label>
+              <input type="text" id="name" placeholder="Your name" />
+            </div>
+            <div className="form-group">
+              <label htmlFor="email">Email</label>
+              <input type="email" id="email" placeholder="your@email.com" />
+            </div>
+          </div>
+          <div className="form-group">
+            <label htmlFor="subject">Subject</label>
+            <input type="text" id="subject" placeholder="Project inquiry" />
+          </div>
+          <div className="form-group">
+            <label htmlFor="message">Message</label>
+            <textarea id="message" rows={5} placeholder="Tell me about your project..." />
+          </div>
+          <button type="submit" className="btn btn-primary">Send Message</button>
+        </form>
+        <div className="contact-details">
+          <h3>Contact Info</h3>
+          <div className="contact-item">
+            <span>📧</span>
+            <p>hello@developer.com</p>
+          </div>
+          <div className="contact-item">
+            <span>📍</span>
+            <p>San Francisco, CA</p>
+          </div>
+          <div className="contact-item">
+            <span>🔗</span>
+            <p>github.com/developer</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Contact;

package/templates/overlays/portfolio/react/src/pages/Home.tsx

@@ -0,0 +1,44 @@
+import { Link } from 'react-router-dom';
+import ProjectCard from '../components/ProjectCard';
+import SkillsGrid from '../components/SkillsGrid';
+import { projects } from '../data/projects';
+
+function Home() {
+  const featured = projects.slice(0, 3);
+
+  return (
+    <div>
+      <section className="portfolio-hero">
+        <div className="hero-content">
+          <span className="hero-greeting">Hi, I'm</span>
+          <h1>{'{{projectName}}'}</h1>
+          <p className="hero-role">Frontend Developer &amp; Software Engineer</p>
+          <p className="hero-desc">
+            I craft pixel-perfect, user-centric web experiences with modern technologies.
+            Passionate about clean code and great design.
+          </p>
+          <div className="hero-actions">
+            <Link to="/projects" className="btn btn-primary">View My Work</Link>
+            <Link to="/contact" className="btn btn-outline">Get In Touch</Link>
+          </div>
+        </div>
+      </section>
+      <section className="projects-section">
+        <h2>Featured Projects</h2>
+        <p className="section-subtitle">A selection of my recent work</p>
+        <div className="projects-grid">
+          {featured.map((project) => (
+            <ProjectCard key={project.id} project={project} />
+          ))}
+        </div>
+      </section>
+      <section className="skills-section">
+        <h2>Skills &amp; Technologies</h2>
+        <p className="section-subtitle">Technologies I work with daily</p>
+        <SkillsGrid />
+      </section>
+    </div>
+  );
+}
+
+export default Home;

package/templates/overlays/portfolio/react/src/pages/Projects.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import ProjectCard from '../components/ProjectCard';
+import { projects } from '../data/projects';
+
+const allCategories = ['All', ...Array.from(new Set(projects.map((p) => p.category)))];
+
+function Projects() {
+  const [active, setActive] = useState('All');
+
+  const filtered = active === 'All' ? projects : projects.filter((p) => p.category === active);
+
+  return (
+    <section className="projects-section">
+      <h2>All Projects</h2>
+      <p className="section-subtitle">Browse my complete portfolio</p>
+      <div className="filter-bar">
+        {allCategories.map((cat) => (
+          <button
+            key={cat}
+            className={`filter-btn ${active === cat ? 'active' : ''}`}
+            onClick={() => setActive(cat)}
+          >
+            {cat}
+          </button>
+        ))}
+      </div>
+      <div className="projects-grid">
+        {filtered.map((project) => (
+          <ProjectCard key={project.id} project={project} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default Projects;

package/templates/overlays/portfolio/vanilla/src/main.ts

@@ -0,0 +1,58 @@
+import { createRouter } from './router';
+import { renderHome } from './pages/home';
+import { renderProjects } from './pages/projects';
+import { renderAbout } from './pages/about';
+import { renderContact } from './pages/contact';
+import './style.css';
+
+export interface Project {
+  id: number;
+  title: string;
+  description: string;
+  image: string;
+  tags: string[];
+  category: string;
+  link: string;
+  year: string;
+}
+
+export interface Skill {
+  name: string;
+  level: number;
+  icon: string;
+}
+
+export const projects: Project[] = [
+  { id: 1, title: 'E-Commerce Platform', description: 'A full-featured online store with cart management, payment integration, and real-time inventory tracking.', image: '🛒', tags: ['React', 'Node.js', 'Stripe'], category: 'Web App', link: '#', year: '2024' },
+  { id: 2, title: 'Task Management Dashboard', description: 'A collaborative project management tool with drag-and-drop boards, real-time updates, and team analytics.', image: '📋', tags: ['Vue.js', 'Firebase', 'Tailwind'], category: 'Web App', link: '#', year: '2024' },
+  { id: 3, title: 'Weather Forecast App', description: 'A beautiful weather application with interactive maps, 7-day forecasts, and location-based alerts.', image: '🌤️', tags: ['React Native', 'API', 'Maps'], category: 'Mobile', link: '#', year: '2023' },
+  { id: 4, title: 'Portfolio Website', description: 'A sleek and modern portfolio website showcasing creative work with smooth animations and responsive design.', image: '🎨', tags: ['HTML', 'CSS', 'JavaScript'], category: 'Design', link: '#', year: '2023' },
+  { id: 5, title: 'Chat Application', description: 'Real-time messaging platform with group chats, file sharing, emoji reactions, and end-to-end encryption.', image: '💬', tags: ['Socket.io', 'Express', 'MongoDB'], category: 'Web App', link: '#', year: '2023' },
+  { id: 6, title: 'Fitness Tracker', description: 'A health and fitness tracking application with workout logging, progress charts, and meal planning features.', image: '💪', tags: ['Flutter', 'Dart', 'SQLite'], category: 'Mobile', link: '#', year: '2022' },
+];
+
+export const skills: Skill[] = [
+  { name: 'JavaScript', level: 95, icon: '🟨' },
+  { name: 'TypeScript', level: 90, icon: '🔷' },
+  { name: 'React', level: 92, icon: '⚛️' },
+  { name: 'Node.js', level: 88, icon: '🟩' },
+  { name: 'CSS/Sass', level: 85, icon: '🎨' },
+  { name: 'Python', level: 78, icon: '🐍' },
+  { name: 'Git', level: 90, icon: '📦' },
+  { name: 'Docker', level: 72, icon: '🐳' },
+];
+
+export const experience = [
+  { role: 'Senior Frontend Developer', company: 'TechCorp Inc.', period: '2022 - Present', description: 'Leading the frontend team in building scalable web applications using React and TypeScript.' },
+  { role: 'Full Stack Developer', company: 'StartupHub', period: '2020 - 2022', description: 'Built and maintained multiple web applications from concept to deployment using modern tech stacks.' },
+  { role: 'Junior Developer', company: 'WebAgency', period: '2018 - 2020', description: 'Developed responsive websites and landing pages for various clients across different industries.' },
+];
+
+const app = document.querySelector<HTMLElement>('#app')!;
+
+createRouter([
+  { path: '/', render: renderHome },
+  { path: '/projects', render: renderProjects },
+  { path: '/about', render: renderAbout },
+  { path: '/contact', render: renderContact },
+], app);

package/templates/overlays/portfolio/vanilla/src/pages/about.ts

@@ -0,0 +1,146 @@
+import { skills, experience } from '../main';
+
+export function renderAbout(): string {
+  return `
+    <nav class="navbar">
+      <div class="nav-container">
+        <a href="#/" class="nav-logo">{{projectName}}</a>
+        <div class="nav-links">
+          <a href="#/">Home</a>
+          <a href="#/projects">Projects</a>
+          <a href="#/about" class="active">About</a>
+          <a href="#/contact">Contact</a>
+        </div>
+      </div>
+    </nav>
+
+    <main>
+      <section class="page-header">
+        <h1>About Me</h1>
+        <p>Learn more about my background, experience, and what drives me as a developer.</p>
+      </section>
+
+      <section class="section">
+        <div class="about-grid">
+          <div class="about-avatar-section">
+            <div class="about-avatar">👨‍💻</div>
+            <h2>{{projectName}}</h2>
+            <p class="about-subtitle">Full Stack Developer</p>
+            <div class="about-social">
+              <a href="#" class="social-link">🐙</a>
+              <a href="#" class="social-link">💼</a>
+              <a href="#" class="social-link">🐦</a>
+              <a href="#" class="social-link">📧</a>
+            </div>
+          </div>
+          <div class="about-bio">
+            <h3>My Story</h3>
+            <p>I'm a passionate Full Stack Developer with over 5 years of experience building web and mobile applications. I specialize in creating performant, accessible, and visually appealing digital experiences.</p>
+            <p>My journey in software development began when I built my first website at age 15. Since then, I've been constantly learning and growing, working with startups and enterprises alike to deliver impactful solutions.</p>
+            <p>When I'm not coding, you can find me contributing to open source projects, writing technical articles, or exploring the great outdoors. I believe in continuous learning and sharing knowledge with the community.</p>
+
+            <div class="about-details">
+              <div class="detail-item">
+                <span class="detail-label">Location</span>
+                <span class="detail-value">📍 San Francisco, CA</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">Email</span>
+                <span class="detail-value">📧 hello@developer.com</span>
+              </div>
+              <div class="detail-item">
+                <span class="detail-label">Availability</span>
+                <span class="detail-value">🟢 Open to opportunities</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="section">
+        <h2>Experience</h2>
+        <div class="timeline">
+          ${experience.map((exp, i) => `
+            <div class="timeline-item">
+              <div class="timeline-dot"></div>
+              <div class="timeline-content">
+                <div class="timeline-header">
+                  <h3>${exp.role}</h3>
+                  <span class="timeline-period">${exp.period}</span>
+                </div>
+                <p class="timeline-company">${exp.company}</p>
+                <p class="timeline-description">${exp.description}</p>
+              </div>
+            </div>
+          `).join('')}
+        </div>
+      </section>
+
+      <section class="section">
+        <h2>Skills & Expertise</h2>
+        <div class="skills-grid">
+          ${skills.map(s => `
+            <div class="skill-card">
+              <div class="skill-header">
+                <span class="skill-icon">${s.icon}</span>
+                <span class="skill-name">${s.name}</span>
+                <span class="skill-level">${s.level}%</span>
+              </div>
+              <div class="skill-bar">
+                <div class="skill-fill" style="width: ${s.level}%"></div>
+              </div>
+            </div>
+          `).join('')}
+        </div>
+      </section>
+
+      <section class="section">
+        <div class="education-grid">
+          <div class="edu-card">
+            <div class="edu-icon">🎓</div>
+            <h3>B.S. Computer Science</h3>
+            <p class="edu-school">University of Technology</p>
+            <p class="edu-year">2014 - 2018</p>
+          </div>
+          <div class="edu-card">
+            <div class="edu-icon">📜</div>
+            <h3>AWS Certified Developer</h3>
+            <p class="edu-school">Amazon Web Services</p>
+            <p class="edu-year">2021</p>
+          </div>
+          <div class="edu-card">
+            <div class="edu-icon">📜</div>
+            <h3>Google UX Design Certificate</h3>
+            <p class="edu-school">Google / Coursera</p>
+            <p class="edu-year">2022</p>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer class="footer">
+      <div class="footer-content">
+        <div class="footer-section">
+          <h4>{{projectName}}</h4>
+          <p>Full Stack Developer crafting digital experiences that make a difference.</p>
+        </div>
+        <div class="footer-section">
+          <h4>Quick Links</h4>
+          <a href="#/">Home</a>
+          <a href="#/projects">Projects</a>
+          <a href="#/about">About</a>
+          <a href="#/contact">Contact</a>
+        </div>
+        <div class="footer-section">
+          <h4>Connect</h4>
+          <a href="#">🐙 GitHub</a>
+          <a href="#">💼 LinkedIn</a>
+          <a href="#">🐦 Twitter</a>
+        </div>
+      </div>
+      <div class="footer-bottom">
+        <p>&copy; 2024 {{projectName}}. All rights reserved.</p>
+      </div>
+    </footer>
+  `;
+}