@beknurakhmed/webforge-cli 0.1.1 → 0.1.3

package/templates/overlays/portfolio/vue/src/App.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import PortfolioNav from './components/PortfolioNav.vue'
+import PortfolioFooter from './components/PortfolioFooter.vue'
+</script>
+
+<template>
+  <div class="portfolio-app">
+    <PortfolioNav />
+    <main class="portfolio-main">
+      <RouterView />
+    </main>
+    <PortfolioFooter />
+  </div>
+</template>
+
+<style scoped>
+.portfolio-app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.portfolio-main {
+  flex: 1;
+}
+</style>

package/templates/overlays/portfolio/vue/src/components/PortfolioFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <footer class="portfolio-footer">
+    <div class="social-links">
+      <a href="#" title="GitHub">🐙</a>
+      <a href="#" title="LinkedIn">💼</a>
+      <a href="#" title="Twitter">🐦</a>
+      <a href="#" title="Email">📧</a>
+    </div>
+    <p class="copyright">&copy; 2025 {{projectName}}. Built with passion.</p>
+  </footer>
+</template>

package/templates/overlays/portfolio/vue/src/components/PortfolioNav.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="portfolio-nav-wrap">
+    <div class="portfolio-nav">
+      <RouterLink to="/" class="logo">{{projectName}}</RouterLink>
+      <nav>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/projects">Projects</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
+        <RouterLink to="/contact">Contact</RouterLink>
+      </nav>
+    </div>
+  </div>
+</template>

package/templates/overlays/portfolio/vue/src/components/ProjectCard.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { Project } from '../data'
+
+defineProps<{ project: Project }>()
+</script>
+
+<template>
+  <div class="project-card">
+    <div class="card-image">{{ project.image }}</div>
+    <div class="card-body">
+      <div class="card-title">{{ project.title }}</div>
+      <div class="card-desc">{{ project.description }}</div>
+      <div class="card-tags">
+        <span v-for="tag in project.tags" :key="tag">{{ tag }}</span>
+      </div>
+    </div>
+  </div>
+</template>

package/templates/overlays/portfolio/vue/src/components/SkillsGrid.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { skills } from '../data'
+</script>
+
+<template>
+  <div class="skills-section">
+    <div v-for="group in skills" :key="group.category" class="skill-group">
+      <h3>{{ group.category }}</h3>
+      <div class="skill-items">
+        <span v-for="item in group.items" :key="item">{{ item }}</span>
+      </div>
+    </div>
+  </div>
+</template>

package/templates/overlays/portfolio/vue/src/data.ts

@@ -0,0 +1,78 @@
+export interface Project {
+  id: number
+  title: string
+  description: string
+  image: string
+  tags: string[]
+  category: string
+  link: string
+}
+
+export interface SkillGroup {
+  category: string
+  items: 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', 'Stripe', 'PostgreSQL'],
+    category: 'Full Stack',
+    link: '#',
+  },
+  {
+    id: 2,
+    title: 'Task Management App',
+    description: 'Collaborative task tracker with real-time updates and team features.',
+    image: '📋',
+    tags: ['Vue', 'Firebase', 'TypeScript'],
+    category: 'Frontend',
+    link: '#',
+  },
+  {
+    id: 3,
+    title: 'Analytics Dashboard',
+    description: 'Interactive data visualization dashboard with custom chart components.',
+    image: '📊',
+    tags: ['React', 'D3.js', 'TypeScript', 'REST API'],
+    category: 'Frontend',
+    link: '#',
+  },
+  {
+    id: 4,
+    title: 'REST API Service',
+    description: 'Scalable microservice architecture with authentication and rate limiting.',
+    image: '🔗',
+    tags: ['Node.js', 'Express', 'MongoDB', 'Docker'],
+    category: 'Backend',
+    link: '#',
+  },
+  {
+    id: 5,
+    title: 'Mobile Weather App',
+    description: 'Cross-platform weather app with location-based forecasts and alerts.',
+    image: '🌤️',
+    tags: ['React Native', 'TypeScript', 'Weather API'],
+    category: 'Mobile',
+    link: '#',
+  },
+  {
+    id: 6,
+    title: 'CI/CD Pipeline',
+    description: 'Automated build, test, and deployment pipeline for cloud infrastructure.',
+    image: '🚀',
+    tags: ['Docker', 'GitHub Actions', 'AWS', 'Terraform'],
+    category: 'DevOps',
+    link: '#',
+  },
+]
+
+export const skills: SkillGroup[] = [
+  { category: 'Frontend', items: ['React', 'Vue', 'TypeScript', 'Tailwind'] },
+  { category: 'Backend', items: ['Node.js', 'Express', 'Python', 'PostgreSQL'] },
+  { category: 'DevOps', items: ['Docker', 'AWS', 'GitHub Actions', 'Terraform'] },
+  { category: 'Tools', items: ['Git', 'VS Code', 'Figma', 'Postman'] },
+]

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

@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import './style.css'
+
+createApp(App).use(router).mount('#app')

package/templates/overlays/portfolio/vue/src/pages/About.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import SkillsGrid from '../components/SkillsGrid.vue'
+
+const experience = [
+  { role: 'Senior Frontend Developer', company: 'TechCorp', period: '2022 - Present' },
+  { role: 'Full Stack Developer', company: 'StartupLab', period: '2019 - 2022' },
+  { role: 'Junior Developer', company: 'WebAgency', period: '2017 - 2019' },
+]
+</script>
+
+<template>
+  <div class="about-section">
+    <div class="about-avatar">👨‍💻</div>
+    <h1>About Me</h1>
+    <p class="about-role">Full-Stack Developer</p>
+    <div class="about-bio">
+      <p>I'm a passionate developer with 7+ years of experience building web applications. I specialize in modern JavaScript frameworks, scalable backend architectures, and creating intuitive user experiences.</p>
+      <br />
+      <p>I enjoy solving complex problems and turning ideas into polished products. When I'm not coding, I contribute to open-source projects and write technical articles.</p>
+    </div>
+    <h2 class="section-title">Experience</h2>
+    <div v-for="exp in experience" :key="exp.role" class="experience-item">
+      <h3>{{ exp.role }}</h3>
+      <p>{{ exp.company }} &middot; {{ exp.period }}</p>
+    </div>
+    <br />
+    <h2 class="section-title">Skills</h2>
+    <SkillsGrid />
+  </div>
+</template>

package/templates/overlays/portfolio/vue/src/pages/Contact.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const name = ref('')
+const email = ref('')
+const subject = ref('')
+const message = ref('')
+const sent = ref(false)
+
+const submit = () => {
+  if (name.value && email.value && message.value) {
+    sent.value = true
+    name.value = ''
+    email.value = ''
+    subject.value = ''
+    message.value = ''
+    setTimeout(() => (sent.value = false), 3000)
+  }
+}
+</script>
+
+<template>
+  <div class="contact-section">
+    <h1>Get In Touch</h1>
+    <p class="contact-subtitle">Have a project in mind? Let's work together.</p>
+    <div class="contact-form">
+      <div class="form-group">
+        <label>Name</label>
+        <input v-model="name" type="text" placeholder="Your name" />
+      </div>
+      <div class="form-group">
+        <label>Email</label>
+        <input v-model="email" type="email" placeholder="your@email.com" />
+      </div>
+      <div class="form-group">
+        <label>Subject</label>
+        <input v-model="subject" type="text" placeholder="Project inquiry" />
+      </div>
+      <div class="form-group">
+        <label>Message</label>
+        <textarea v-model="message" placeholder="Tell me about your project..."></textarea>
+      </div>
+      <button class="btn-primary" @click="submit">Send Message</button>
+      <p v-if="sent" style="color: #059669; text-align: center; margin-top: 0.75rem; font-size: 0.9rem;">Message sent! I'll get back to you soon.</p>
+    </div>
+  </div>
+</template>

package/templates/overlays/portfolio/vue/src/pages/Home.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import ProjectCard from '../components/ProjectCard.vue'
+import SkillsGrid from '../components/SkillsGrid.vue'
+import { projects } from '../data'
+
+const featured = projects.slice(0, 3)
+</script>
+
+<template>
+  <div>
+    <section class="hero">
+      <h1>Hi, I'm <span>a Developer</span></h1>
+      <p>I build modern web applications with clean code and great user experiences.</p>
+      <RouterLink to="/projects" class="hero-cta">View My Work</RouterLink>
+    </section>
+    <section class="section">
+      <h2 class="section-title">Featured Projects</h2>
+      <div class="projects-grid">
+        <ProjectCard v-for="project in featured" :key="project.id" :project="project" />
+      </div>
+    </section>
+    <section class="section">
+      <h2 class="section-title">Skills</h2>
+      <SkillsGrid />
+    </section>
+  </div>
+</template>

package/templates/overlays/portfolio/vue/src/pages/Projects.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import ProjectCard from '../components/ProjectCard.vue'
+import { projects } from '../data'
+
+const activeFilter = ref('All')
+
+const categories = ['All', ...new Set(projects.map(p => p.category))]
+
+const filtered = computed(() =>
+  activeFilter.value === 'All'
+    ? projects
+    : projects.filter(p => p.category === activeFilter.value)
+)
+</script>
+
+<template>
+  <section class="section">
+    <h2 class="section-title">All Projects</h2>
+    <div class="filter-buttons">
+      <button
+        v-for="cat in categories"
+        :key="cat"
+        class="filter-btn"
+        :class="{ active: activeFilter === cat }"
+        @click="activeFilter = cat"
+      >{{ cat }}</button>
+    </div>
+    <div class="projects-grid">
+      <ProjectCard v-for="project in filtered" :key="project.id" :project="project" />
+    </div>
+  </section>
+</template>

package/templates/overlays/portfolio/vue/src/router.ts

@@ -0,0 +1,19 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from './pages/Home.vue'
+import Projects from './pages/Projects.vue'
+import About from './pages/About.vue'
+import Contact from './pages/Contact.vue'
+
+const routes = [
+  { path: '/', component: Home },
+  { path: '/projects', component: Projects },
+  { path: '/about', component: About },
+  { path: '/contact', component: Contact },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+export default router