create-ng-tailwind 3.0.1 → 4.0.0

package/lib/templates/portfolio/index.js

@@ -0,0 +1,1160 @@
+const fs = require('fs-extra');
+const path = require('path');
+const starter = require('../starter');
+
+/**
+ * Portfolio Template
+ * Extends starter template with:
+ * - Projects showcase with filtering
+ * - Skills section with proficiency levels
+ * - Experience timeline
+ * - Resume/CV download
+ * - Testimonials
+ * - Contact form
+ */
+const portfolio = {
+  info: {
+    name: 'Portfolio',
+    description: 'Personal portfolio template with projects showcase, skills, and resume',
+    features: [
+      ...starter.info.features,
+      'Projects showcase with filtering',
+      'Skills section with proficiency bars',
+      'Experience timeline',
+      'Education section',
+      'Testimonials carousel',
+      'Downloadable resume',
+      'Social links',
+      'Animated hero section',
+    ],
+  },
+
+  async apply(config, spinner) {
+    const chalk = require('chalk');
+
+    const completeStep = (message) => {
+      if (spinner) {
+        spinner.stop();
+        console.log(chalk.green('  ✔') + chalk.white(' ' + message));
+        spinner.start();
+      }
+    };
+
+    // Step 1: Apply starter template
+    if (spinner) spinner.update('Setting up starter foundation...');
+    await starter.apply(config, null);
+
+    // Step 2: Create portfolio-specific directories
+    if (spinner) spinner.update('Setting up portfolio structure...');
+    await this.createDirectories(config);
+
+    // Step 3: Create services
+    await this.createServices(config);
+
+    // Step 4: Create components
+    await this.createComponents(config);
+
+    // Step 5: Create pages
+    await this.createPages(config);
+
+    // Step 6: Update routing
+    await this.createRouting(config);
+
+    // Step 7: Add i18n translations
+    await this.updateI18n(config);
+
+    // Step 8: Format code
+    const base = require('../base');
+    await base.formatCode(config);
+
+    if (spinner) spinner.stop();
+
+    console.log('');
+    completeStep('Portfolio template created');
+    completeStep('Projects showcase');
+    completeStep('Skills & experience');
+    completeStep('Testimonials');
+    completeStep('Contact form');
+    console.log('');
+  },
+
+  async createDirectories(config) {
+    const directories = [
+      'src/app/features/portfolio',
+      'src/app/features/portfolio/projects',
+      'src/app/features/portfolio/project-detail',
+      'src/app/features/resume',
+      'src/app/shared/components/project-card',
+      'src/app/shared/components/skill-bar',
+      'src/app/shared/components/timeline',
+      'src/app/shared/components/testimonial-carousel',
+      'src/app/shared/components/social-links',
+    ];
+
+    for (const dir of directories) {
+      await fs.ensureDir(path.join(config.fullPath, dir));
+    }
+  },
+
+  async createServices(config) {
+    const portfolioService = `import { Injectable, signal } from '@angular/core';
+
+export interface Project {
+  id: number;
+  slug: string;
+  title: string;
+  description: string;
+  longDescription: string;
+  image: string;
+  images: string[];
+  category: string;
+  tags: string[];
+  liveUrl?: string;
+  githubUrl?: string;
+  featured?: boolean;
+  completedAt: Date;
+}
+
+export interface Skill {
+  name: string;
+  level: number; // 0-100
+  category: string;
+  icon?: string;
+}
+
+export interface Experience {
+  id: number;
+  title: string;
+  company: string;
+  location: string;
+  startDate: Date;
+  endDate?: Date;
+  current?: boolean;
+  description: string;
+  achievements: string[];
+}
+
+export interface Education {
+  id: number;
+  degree: string;
+  school: string;
+  location: string;
+  startDate: Date;
+  endDate: Date;
+  description?: string;
+}
+
+export interface Testimonial {
+  id: number;
+  content: string;
+  author: string;
+  role: string;
+  company: string;
+  avatar: string;
+}
+
+@Injectable({ providedIn: 'root' })
+export class PortfolioService {
+  private projectsSignal = signal<Project[]>(this.getMockProjects());
+  private skillsSignal = signal<Skill[]>(this.getMockSkills());
+  private experienceSignal = signal<Experience[]>(this.getMockExperience());
+  private educationSignal = signal<Education[]>(this.getMockEducation());
+  private testimonialsSignal = signal<Testimonial[]>(this.getMockTestimonials());
+
+  projects = this.projectsSignal.asReadonly();
+  skills = this.skillsSignal.asReadonly();
+  experience = this.experienceSignal.asReadonly();
+  education = this.educationSignal.asReadonly();
+  testimonials = this.testimonialsSignal.asReadonly();
+
+  getProjectBySlug(slug: string): Project | undefined {
+    return this.projectsSignal().find(p => p.slug === slug);
+  }
+
+  getProjectsByCategory(category: string): Project[] {
+    return this.projectsSignal().filter(p => p.category === category);
+  }
+
+  getFeaturedProjects(): Project[] {
+    return this.projectsSignal().filter(p => p.featured);
+  }
+
+  getCategories(): string[] {
+    return [...new Set(this.projectsSignal().map(p => p.category))];
+  }
+
+  getSkillsByCategory(): Map<string, Skill[]> {
+    const map = new Map<string, Skill[]>();
+    this.skillsSignal().forEach(skill => {
+      const existing = map.get(skill.category) || [];
+      map.set(skill.category, [...existing, skill]);
+    });
+    return map;
+  }
+
+  private getMockProjects(): Project[] {
+    return [
+      {
+        id: 1,
+        slug: 'ecommerce-platform',
+        title: 'E-Commerce Platform',
+        description: 'A full-featured online shopping platform with cart, checkout, and payment integration.',
+        longDescription: 'Built a comprehensive e-commerce solution featuring product catalog, shopping cart, secure checkout, payment processing with Stripe, order management, and admin dashboard. The platform handles thousands of daily transactions.',
+        image: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=800',
+        images: [
+          'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=800',
+          'https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=800',
+        ],
+        category: 'Web App',
+        tags: ['Angular', 'Node.js', 'MongoDB', 'Stripe'],
+        liveUrl: 'https://example.com',
+        githubUrl: 'https://github.com',
+        featured: true,
+        completedAt: new Date('2024-12-01'),
+      },
+      {
+        id: 2,
+        slug: 'task-management-app',
+        title: 'Task Management App',
+        description: 'Collaborative project management tool with real-time updates and team features.',
+        longDescription: 'Developed a Trello-like task management application with drag-and-drop functionality, real-time collaboration using WebSockets, team workspaces, and automated workflows.',
+        image: 'https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=800',
+        images: ['https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=800'],
+        category: 'Web App',
+        tags: ['Angular', 'Firebase', 'RxJS'],
+        liveUrl: 'https://example.com',
+        featured: true,
+        completedAt: new Date('2024-10-15'),
+      },
+      {
+        id: 3,
+        slug: 'fitness-tracker',
+        title: 'Fitness Tracker Mobile App',
+        description: 'Cross-platform mobile app for tracking workouts, nutrition, and health goals.',
+        longDescription: 'Created a comprehensive fitness tracking app with workout logging, nutrition tracking, progress charts, goal setting, and integration with wearable devices.',
+        image: 'https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?w=800',
+        images: ['https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?w=800'],
+        category: 'Mobile App',
+        tags: ['Ionic', 'Angular', 'Capacitor'],
+        liveUrl: 'https://example.com',
+        featured: true,
+        completedAt: new Date('2024-08-20'),
+      },
+      {
+        id: 4,
+        slug: 'analytics-dashboard',
+        title: 'Analytics Dashboard',
+        description: 'Real-time data visualization dashboard for business intelligence.',
+        longDescription: 'Built an interactive analytics dashboard with customizable widgets, real-time data streaming, export functionality, and role-based access control.',
+        image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800',
+        images: ['https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800'],
+        category: 'Dashboard',
+        tags: ['Angular', 'D3.js', 'WebSocket'],
+        completedAt: new Date('2024-06-10'),
+      },
+      {
+        id: 5,
+        slug: 'portfolio-website',
+        title: 'Creative Agency Website',
+        description: 'Modern portfolio website for a creative design agency.',
+        longDescription: 'Designed and developed a stunning portfolio website featuring smooth animations, case studies, team profiles, and an integrated blog.',
+        image: 'https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?w=800',
+        images: ['https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?w=800'],
+        category: 'Website',
+        tags: ['Angular', 'GSAP', 'Tailwind'],
+        liveUrl: 'https://example.com',
+        completedAt: new Date('2024-04-05'),
+      },
+      {
+        id: 6,
+        slug: 'chat-application',
+        title: 'Real-Time Chat App',
+        description: 'Instant messaging application with group chats and file sharing.',
+        longDescription: 'Developed a real-time chat application with direct messaging, group chats, file sharing, read receipts, typing indicators, and push notifications.',
+        image: 'https://images.unsplash.com/photo-1611746872915-64382b5c76da?w=800',
+        images: ['https://images.unsplash.com/photo-1611746872915-64382b5c76da?w=800'],
+        category: 'Web App',
+        tags: ['Angular', 'Socket.io', 'Node.js'],
+        githubUrl: 'https://github.com',
+        completedAt: new Date('2024-02-28'),
+      },
+    ];
+  }
+
+  private getMockSkills(): Skill[] {
+    return [
+      // Frontend
+      { name: 'Angular', level: 95, category: 'Frontend' },
+      { name: 'TypeScript', level: 90, category: 'Frontend' },
+      { name: 'React', level: 75, category: 'Frontend' },
+      { name: 'Tailwind CSS', level: 90, category: 'Frontend' },
+      { name: 'HTML/CSS', level: 95, category: 'Frontend' },
+      // Backend
+      { name: 'Node.js', level: 85, category: 'Backend' },
+      { name: 'Python', level: 70, category: 'Backend' },
+      { name: 'PostgreSQL', level: 80, category: 'Backend' },
+      { name: 'MongoDB', level: 75, category: 'Backend' },
+      // Tools
+      { name: 'Git', level: 90, category: 'Tools' },
+      { name: 'Docker', level: 70, category: 'Tools' },
+      { name: 'AWS', level: 65, category: 'Tools' },
+      { name: 'Figma', level: 75, category: 'Tools' },
+    ];
+  }
+
+  private getMockExperience(): Experience[] {
+    return [
+      {
+        id: 1,
+        title: 'Senior Frontend Developer',
+        company: 'Tech Innovators Inc',
+        location: 'San Francisco, CA',
+        startDate: new Date('2022-03-01'),
+        current: true,
+        description: 'Leading frontend development for enterprise applications, mentoring junior developers, and establishing best practices.',
+        achievements: [
+          'Led migration from AngularJS to Angular 17, improving performance by 40%',
+          'Implemented micro-frontend architecture serving 500K+ users',
+          'Mentored team of 5 junior developers',
+          'Reduced bundle size by 60% through code splitting and lazy loading',
+        ],
+      },
+      {
+        id: 2,
+        title: 'Frontend Developer',
+        company: 'Digital Solutions Co',
+        location: 'Austin, TX',
+        startDate: new Date('2019-06-01'),
+        endDate: new Date('2022-02-28'),
+        description: 'Developed responsive web applications and collaborated with design teams to implement pixel-perfect UIs.',
+        achievements: [
+          'Built 15+ client projects using Angular and React',
+          'Introduced automated testing, achieving 85% code coverage',
+          'Optimized Core Web Vitals, improving SEO rankings by 25%',
+        ],
+      },
+      {
+        id: 3,
+        title: 'Junior Web Developer',
+        company: 'StartUp Labs',
+        location: 'Remote',
+        startDate: new Date('2017-08-01'),
+        endDate: new Date('2019-05-31'),
+        description: 'Started career building websites and learning modern web technologies.',
+        achievements: [
+          'Developed company website from scratch',
+          'Learned Angular and built first production app',
+          'Contributed to open-source projects',
+        ],
+      },
+    ];
+  }
+
+  private getMockEducation(): Education[] {
+    return [
+      {
+        id: 1,
+        degree: 'Master of Science in Computer Science',
+        school: 'Stanford University',
+        location: 'Stanford, CA',
+        startDate: new Date('2015-09-01'),
+        endDate: new Date('2017-06-01'),
+        description: 'Specialized in Human-Computer Interaction and Web Technologies',
+      },
+      {
+        id: 2,
+        degree: 'Bachelor of Science in Software Engineering',
+        school: 'MIT',
+        location: 'Cambridge, MA',
+        startDate: new Date('2011-09-01'),
+        endDate: new Date('2015-06-01'),
+        description: 'Graduated with honors, Dean\\'s List all semesters',
+      },
+    ];
+  }
+
+  private getMockTestimonials(): Testimonial[] {
+    return [
+      {
+        id: 1,
+        content: 'An exceptional developer who consistently delivers high-quality work. Their attention to detail and problem-solving skills are outstanding.',
+        author: 'Sarah Mitchell',
+        role: 'Product Manager',
+        company: 'Tech Innovators Inc',
+        avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150',
+      },
+      {
+        id: 2,
+        content: 'Working with them was a pleasure. They understood our requirements perfectly and delivered beyond expectations.',
+        author: 'James Wilson',
+        role: 'CEO',
+        company: 'StartUp Labs',
+        avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150',
+      },
+      {
+        id: 3,
+        content: 'Their expertise in Angular is remarkable. They transformed our legacy application into a modern, performant solution.',
+        author: 'Emily Chen',
+        role: 'Tech Lead',
+        company: 'Digital Solutions Co',
+        avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150',
+      },
+    ];
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/core/services/portfolio.service.ts'),
+      portfolioService
+    );
+  },
+
+  async createComponents(config) {
+    // Project Card
+    const projectCard = `import { Component, Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroArrowTopRightOnSquare, heroCodeBracket } from '@ng-icons/heroicons/outline';
+import { Project } from '@core/services/portfolio.service';
+
+@Component({
+  selector: 'app-project-card',
+  standalone: true,
+  imports: [RouterModule, NgIconComponent],
+  viewProviders: [provideIcons({ heroArrowTopRightOnSquare, heroCodeBracket })],
+  template: \`
+    <article class="group overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm transition-all hover:shadow-xl">
+      <a [routerLink]="['/portfolio', project.slug]" class="block">
+        <div class="aspect-video overflow-hidden">
+          <img
+            [src]="project.image"
+            [alt]="project.title"
+            class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
+          />
+        </div>
+      </a>
+
+      <div class="p-6">
+        <div class="mb-3 flex items-center gap-2">
+          <span class="rounded-full bg-primary-100 px-3 py-1 text-xs font-medium text-primary-700">
+            {{ project.category }}
+          </span>
+          @if (project.featured) {
+            <span class="rounded-full bg-amber-100 px-3 py-1 text-xs font-medium text-amber-700">
+              Featured
+            </span>
+          }
+        </div>
+
+        <a [routerLink]="['/portfolio', project.slug]">
+          <h3 class="mb-2 text-xl font-bold text-gray-900 group-hover:text-primary-600 transition-colors">
+            {{ project.title }}
+          </h3>
+        </a>
+
+        <p class="mb-4 text-gray-600 line-clamp-2">{{ project.description }}</p>
+
+        <div class="mb-4 flex flex-wrap gap-2">
+          @for (tag of project.tags.slice(0, 3); track tag) {
+            <span class="rounded-lg bg-gray-100 px-2 py-1 text-xs text-gray-600">{{ tag }}</span>
+          }
+        </div>
+
+        <div class="flex items-center gap-3">
+          @if (project.liveUrl) {
+            <a
+              [href]="project.liveUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center gap-1 text-sm font-medium text-primary-600 hover:text-primary-700">
+              <ng-icon name="heroArrowTopRightOnSquare" size="16"></ng-icon>
+              Live Demo
+            </a>
+          }
+          @if (project.githubUrl) {
+            <a
+              [href]="project.githubUrl"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900">
+              <ng-icon name="heroCodeBracket" size="16"></ng-icon>
+              Code
+            </a>
+          }
+        </div>
+      </div>
+    </article>
+  \`,
+})
+export class ProjectCardComponent {
+  @Input({ required: true }) project!: Project;
+}`;
+
+    await fs.writeFile(
+      path.join(
+        config.fullPath,
+        'src/app/shared/components/project-card/project-card.component.ts'
+      ),
+      projectCard
+    );
+
+    // Skill Bar
+    const skillBar = `import { Component, Input } from '@angular/core';
+import { Skill } from '@core/services/portfolio.service';
+
+@Component({
+  selector: 'app-skill-bar',
+  standalone: true,
+  template: \`
+    <div class="mb-4">
+      <div class="flex justify-between mb-1">
+        <span class="font-medium text-gray-900">{{ skill.name }}</span>
+        <span class="text-sm text-gray-500">{{ skill.level }}%</span>
+      </div>
+      <div class="h-2 w-full overflow-hidden rounded-full bg-gray-200">
+        <div
+          class="h-full rounded-full bg-gradient-to-r from-primary-500 to-purple-500 transition-all duration-1000"
+          [style.width.%]="animated ? skill.level : 0">
+        </div>
+      </div>
+    </div>
+  \`,
+})
+export class SkillBarComponent {
+  @Input({ required: true }) skill!: Skill;
+  @Input() animated = true;
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/shared/components/skill-bar/skill-bar.component.ts'),
+      skillBar
+    );
+
+    // Timeline
+    const timeline = `import { Component, Input } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { Experience, Education } from '@core/services/portfolio.service';
+
+@Component({
+  selector: 'app-timeline',
+  standalone: true,
+  imports: [DatePipe],
+  template: \`
+    <div class="relative">
+      <!-- Timeline line -->
+      <div class="absolute left-4 top-0 h-full w-0.5 bg-gray-200 md:left-1/2 md:-translate-x-1/2"></div>
+
+      @for (item of items; track item.id; let i = $index) {
+        <div class="relative mb-8 last:mb-0">
+          <!-- Timeline dot -->
+          <div
+            class="absolute left-4 h-4 w-4 -translate-x-1/2 rounded-full border-4 border-white md:left-1/2"
+            [class.bg-primary-500]="isExperience(item) && item.current"
+            [class.bg-gray-400]="!isExperience(item) || !item.current">
+          </div>
+
+          <!-- Content -->
+          <div
+            class="ml-12 md:ml-0 md:w-5/12"
+            [class.md:ml-auto]="i % 2 === 0"
+            [class.md:mr-auto]="i % 2 !== 0"
+            [class.md:pr-8]="i % 2 !== 0"
+            [class.md:pl-8]="i % 2 === 0"
+            [class.md:text-right]="i % 2 !== 0">
+
+            <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+              <div class="mb-2 text-sm text-gray-500">
+                {{ item.startDate | date:'MMM yyyy' }} -
+                @if (isExperience(item) && item.current) {
+                  <span class="text-primary-600 font-medium">Present</span>
+                } @else {
+                  {{ getEndDate(item) | date:'MMM yyyy' }}
+                }
+              </div>
+
+              <h3 class="text-lg font-bold text-gray-900">
+                {{ isExperience(item) ? item.title : item.degree }}
+              </h3>
+
+              <p class="text-primary-600 font-medium">
+                {{ isExperience(item) ? item.company : item.school }}
+              </p>
+
+              <p class="text-sm text-gray-500">{{ item.location }}</p>
+
+              @if (item.description) {
+                <p class="mt-3 text-gray-600">{{ item.description }}</p>
+              }
+
+              @if (isExperience(item) && item.achievements && item.achievements.length > 0) {
+                <ul class="mt-3 space-y-1" [class.text-left]="i % 2 !== 0">
+                  @for (achievement of item.achievements; track achievement) {
+                    <li class="text-sm text-gray-600">• {{ achievement }}</li>
+                  }
+                </ul>
+              }
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+  \`,
+})
+export class TimelineComponent {
+  @Input({ required: true }) items!: (Experience | Education)[];
+
+  isExperience(item: Experience | Education): item is Experience {
+    return 'company' in item;
+  }
+
+  getEndDate(item: Experience | Education): Date | undefined {
+    if (this.isExperience(item)) {
+      return item.endDate;
+    }
+    return item.endDate;
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/shared/components/timeline/timeline.component.ts'),
+      timeline
+    );
+
+    // Social Links
+    const socialLinks = `import { Component, Input } from '@angular/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroEnvelope, heroCodeBracket, heroBriefcase, heroPaintBrush } from '@ng-icons/heroicons/outline';
+
+export interface SocialLink {
+  platform: 'github' | 'linkedin' | 'twitter' | 'dribbble' | 'email';
+  url: string;
+}
+
+@Component({
+  selector: 'app-social-links',
+  standalone: true,
+  imports: [NgIconComponent],
+  viewProviders: [provideIcons({ heroEnvelope, heroCodeBracket, heroBriefcase, heroPaintBrush })],
+  template: \`
+    <div class="flex items-center gap-4">
+      @for (link of links; track link.platform) {
+        <a
+          [href]="link.platform === 'email' ? 'mailto:' + link.url : link.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="flex h-10 w-10 items-center justify-center rounded-full transition-all"
+          [class]="variant === 'light' ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-900'"
+          [attr.aria-label]="link.platform">
+          @if (link.platform === 'twitter') {
+            <span class="text-sm font-bold">𝕏</span>
+          } @else {
+            <ng-icon [name]="getIcon(link.platform)" size="20"></ng-icon>
+          }
+        </a>
+      }
+    </div>
+  \`,
+})
+export class SocialLinksComponent {
+  @Input({ required: true }) links!: SocialLink[];
+  @Input() variant: 'light' | 'dark' = 'dark';
+
+  getIcon(platform: string): string {
+    const icons: Record<string, string> = {
+      github: 'heroCodeBracket',
+      linkedin: 'heroBriefcase',
+      dribbble: 'heroPaintBrush',
+      email: 'heroEnvelope',
+    };
+    return icons[platform] || 'heroEnvelope';
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(
+        config.fullPath,
+        'src/app/shared/components/social-links/social-links.component.ts'
+      ),
+      socialLinks
+    );
+  },
+
+  async createPages(config) {
+    // Portfolio Home (Projects List)
+    const portfolioHome = `import { Component, inject, signal, computed } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroArrowDown, heroDocumentArrowDown } from '@ng-icons/heroicons/outline';
+import { ProjectCardComponent } from '@shared/components/project-card/project-card.component';
+import { SkillBarComponent } from '@shared/components/skill-bar/skill-bar.component';
+import { TimelineComponent } from '@shared/components/timeline/timeline.component';
+import { SocialLinksComponent, SocialLink } from '@shared/components/social-links/social-links.component';
+import { PortfolioService } from '@core/services/portfolio.service';
+
+@Component({
+  selector: 'app-portfolio-home',
+  standalone: true,
+  imports: [RouterModule, TranslateModule, NgIconComponent, ProjectCardComponent, SkillBarComponent, TimelineComponent, SocialLinksComponent],
+  viewProviders: [provideIcons({ heroArrowDown, heroDocumentArrowDown })],
+  template: \`
+    <div>
+      <!-- Hero Section -->
+      <section class="relative min-h-screen flex items-center bg-linear-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden">
+        <!-- Animated Background -->
+        <div class="absolute inset-0">
+          <div class="animate-blob absolute -left-4 top-20 h-72 w-72 rounded-full bg-purple-500 opacity-20 mix-blend-multiply blur-xl"></div>
+          <div class="animate-blob animation-delay-2000 absolute right-20 top-40 h-72 w-72 rounded-full bg-yellow-500 opacity-20 mix-blend-multiply blur-xl"></div>
+          <div class="animate-blob animation-delay-4000 absolute bottom-20 left-1/3 h-72 w-72 rounded-full bg-pink-500 opacity-20 mix-blend-multiply blur-xl"></div>
+        </div>
+
+        <div class="relative mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
+          <div class="grid items-center gap-12 lg:grid-cols-2">
+            <div class="text-center lg:text-left">
+              <p class="text-primary-400 font-medium mb-4">{{ 'portfolio.greeting' | translate }}</p>
+              <h1 class="text-4xl font-bold text-white sm:text-5xl lg:text-6xl">
+                {{ 'portfolio.name' | translate }}
+              </h1>
+              <p class="mt-2 text-2xl text-purple-300">{{ 'portfolio.title' | translate }}</p>
+              <p class="mt-6 text-lg text-gray-300 max-w-xl">
+                {{ 'portfolio.bio' | translate }}
+              </p>
+
+              <div class="mt-8 flex flex-wrap gap-4 justify-center lg:justify-start">
+                <a href="#projects" class="inline-flex items-center gap-2 rounded-full bg-white px-6 py-3 font-semibold text-gray-900 hover:bg-gray-100 transition-all">
+                  {{ 'portfolio.viewWork' | translate }}
+                  <ng-icon name="heroArrowDown" size="20"></ng-icon>
+                </a>
+                <a href="/assets/resume.pdf" download class="inline-flex items-center gap-2 rounded-full border-2 border-white/30 px-6 py-3 font-semibold text-white hover:bg-white/10 transition-all">
+                  <ng-icon name="heroDocumentArrowDown" size="20"></ng-icon>
+                  {{ 'portfolio.downloadResume' | translate }}
+                </a>
+              </div>
+
+              <div class="mt-8">
+                <app-social-links [links]="socialLinks" variant="light"></app-social-links>
+              </div>
+            </div>
+
+            <div class="hidden lg:block">
+              <div class="relative">
+                <div class="absolute inset-0 rounded-full bg-gradient-to-r from-primary-500 to-purple-500 blur-3xl opacity-30"></div>
+                <img
+                  src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=500"
+                  alt="Profile"
+                  class="relative mx-auto h-96 w-96 rounded-full object-cover border-4 border-white/20 shadow-2xl"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Scroll indicator -->
+        <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
+          <ng-icon name="heroArrowDown" size="24" class="text-white/50"></ng-icon>
+        </div>
+      </section>
+
+      <!-- Projects Section -->
+      <section id="projects" class="py-20">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div class="text-center mb-12">
+            <h2 class="text-3xl font-bold text-gray-900">{{ 'portfolio.featuredProjects' | translate }}</h2>
+            <p class="mt-2 text-gray-600">{{ 'portfolio.projectsSubtitle' | translate }}</p>
+          </div>
+
+          <!-- Category Filter -->
+          <div class="mb-8 flex flex-wrap justify-center gap-2">
+            <button
+              (click)="selectedCategory.set('')"
+              class="rounded-full px-4 py-2 text-sm font-medium transition-colors"
+              [class.bg-primary-500]="!selectedCategory()"
+              [class.text-white]="!selectedCategory()"
+              [class.bg-gray-100]="selectedCategory()"
+              [class.text-gray-700]="selectedCategory()">
+              All
+            </button>
+            @for (cat of portfolioService.getCategories(); track cat) {
+              <button
+                (click)="selectedCategory.set(cat)"
+                class="rounded-full px-4 py-2 text-sm font-medium transition-colors"
+                [class.bg-primary-500]="selectedCategory() === cat"
+                [class.text-white]="selectedCategory() === cat"
+                [class.bg-gray-100]="selectedCategory() !== cat"
+                [class.text-gray-700]="selectedCategory() !== cat">
+                {{ cat }}
+              </button>
+            }
+          </div>
+
+          <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+            @for (project of filteredProjects(); track project.id) {
+              <app-project-card [project]="project"></app-project-card>
+            }
+          </div>
+        </div>
+      </section>
+
+      <!-- Skills Section -->
+      <section class="py-20 bg-gray-50">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div class="text-center mb-12">
+            <h2 class="text-3xl font-bold text-gray-900">{{ 'portfolio.skills' | translate }}</h2>
+            <p class="mt-2 text-gray-600">{{ 'portfolio.skillsSubtitle' | translate }}</p>
+          </div>
+
+          <div class="grid gap-8 md:grid-cols-3">
+            @for (category of skillCategories; track category) {
+              <div class="rounded-xl border border-gray-200 bg-white p-6">
+                <h3 class="mb-6 text-lg font-bold text-gray-900">{{ category }}</h3>
+                @for (skill of getSkillsByCategory(category); track skill.name) {
+                  <app-skill-bar [skill]="skill"></app-skill-bar>
+                }
+              </div>
+            }
+          </div>
+        </div>
+      </section>
+
+      <!-- Experience Section -->
+      <section class="py-20">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div class="text-center mb-12">
+            <h2 class="text-3xl font-bold text-gray-900">{{ 'portfolio.experience' | translate }}</h2>
+            <p class="mt-2 text-gray-600">{{ 'portfolio.experienceSubtitle' | translate }}</p>
+          </div>
+
+          <app-timeline [items]="portfolioService.experience()"></app-timeline>
+        </div>
+      </section>
+
+      <!-- Education Section -->
+      <section class="py-20 bg-gray-50">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div class="text-center mb-12">
+            <h2 class="text-3xl font-bold text-gray-900">{{ 'portfolio.education' | translate }}</h2>
+          </div>
+
+          <app-timeline [items]="portfolioService.education()"></app-timeline>
+        </div>
+      </section>
+
+      <!-- Testimonials Section -->
+      <section class="py-20">
+        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div class="text-center mb-12">
+            <h2 class="text-3xl font-bold text-gray-900">{{ 'portfolio.testimonials' | translate }}</h2>
+            <p class="mt-2 text-gray-600">{{ 'portfolio.testimonialsSubtitle' | translate }}</p>
+          </div>
+
+          <div class="grid gap-8 md:grid-cols-3">
+            @for (testimonial of portfolioService.testimonials(); track testimonial.id) {
+              <div class="rounded-2xl border border-gray-200 bg-white p-8">
+                <p class="text-gray-700 italic mb-6">"{{ testimonial.content }}"</p>
+                <div class="flex items-center gap-4">
+                  <img [src]="testimonial.avatar" [alt]="testimonial.author" class="h-12 w-12 rounded-full object-cover" />
+                  <div>
+                    <p class="font-semibold text-gray-900">{{ testimonial.author }}</p>
+                    <p class="text-sm text-gray-500">{{ testimonial.role }}, {{ testimonial.company }}</p>
+                  </div>
+                </div>
+              </div>
+            }
+          </div>
+        </div>
+      </section>
+
+      <!-- CTA Section -->
+      <section class="py-20 bg-gradient-to-r from-primary-600 to-purple-600">
+        <div class="mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
+          <h2 class="text-3xl font-bold text-white">{{ 'portfolio.ctaTitle' | translate }}</h2>
+          <p class="mt-4 text-xl text-primary-100">{{ 'portfolio.ctaSubtitle' | translate }}</p>
+          <a routerLink="/contact" class="mt-8 inline-flex items-center gap-2 rounded-full bg-white px-8 py-4 font-semibold text-gray-900 hover:bg-gray-100 transition-all">
+            {{ 'portfolio.getInTouch' | translate }}
+          </a>
+        </div>
+      </section>
+    </div>
+  \`,
+})
+export class PortfolioHomeComponent {
+  portfolioService = inject(PortfolioService);
+
+  selectedCategory = signal('');
+  skillCategories = ['Frontend', 'Backend', 'Tools'];
+
+  socialLinks: SocialLink[] = [
+    { platform: 'github', url: 'https://github.com' },
+    { platform: 'linkedin', url: 'https://linkedin.com' },
+    { platform: 'twitter', url: 'https://twitter.com' },
+    { platform: 'email', url: 'hello@example.com' },
+  ];
+
+  filteredProjects = computed(() => {
+    const cat = this.selectedCategory();
+    if (!cat) return this.portfolioService.projects();
+    return this.portfolioService.getProjectsByCategory(cat);
+  });
+
+  getSkillsByCategory(category: string) {
+    return this.portfolioService.skills().filter(s => s.category === category);
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(config.fullPath, 'src/app/features/portfolio/projects/projects.component.ts'),
+      portfolioHome
+    );
+
+    // Project Detail
+    const projectDetail = `import { Component, inject } from '@angular/core';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { DatePipe } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { heroArrowLeft, heroArrowTopRightOnSquare, heroCodeBracket } from '@ng-icons/heroicons/outline';
+import { ProjectCardComponent } from '@shared/components/project-card/project-card.component';
+import { PortfolioService, Project } from '@core/services/portfolio.service';
+
+@Component({
+  selector: 'app-project-detail',
+  standalone: true,
+  imports: [RouterModule, DatePipe, TranslateModule, NgIconComponent, ProjectCardComponent],
+  viewProviders: [provideIcons({ heroArrowLeft, heroArrowTopRightOnSquare, heroCodeBracket })],
+  template: \`
+    @if (project) {
+      <div>
+        <!-- Hero -->
+        <section class="relative bg-gray-900">
+          <div class="absolute inset-0">
+            <img [src]="project.image" [alt]="project.title" class="h-full w-full object-cover opacity-30" />
+          </div>
+          <div class="relative mx-auto max-w-7xl px-4 py-24 sm:px-6 lg:px-8">
+            <a routerLink="/portfolio" class="mb-8 inline-flex items-center gap-2 text-white/80 hover:text-white">
+              <ng-icon name="heroArrowLeft" size="20"></ng-icon>
+              Back to Portfolio
+            </a>
+
+            <div class="flex items-center gap-3 mb-4">
+              <span class="rounded-full bg-primary-500 px-4 py-1 text-sm font-medium text-white">
+                {{ project.category }}
+              </span>
+              <span class="text-white/60">{{ project.completedAt | date:'MMMM yyyy' }}</span>
+            </div>
+
+            <h1 class="text-4xl font-bold text-white sm:text-5xl">{{ project.title }}</h1>
+
+            <div class="mt-6 flex flex-wrap gap-2">
+              @for (tag of project.tags; track tag) {
+                <span class="rounded-lg bg-white/10 px-3 py-1 text-sm text-white">{{ tag }}</span>
+              }
+            </div>
+
+            <div class="mt-8 flex gap-4">
+              @if (project.liveUrl) {
+                <a
+                  [href]="project.liveUrl"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="inline-flex items-center gap-2 rounded-lg bg-white px-6 py-3 font-semibold text-gray-900 hover:bg-gray-100">
+                  <ng-icon name="heroArrowTopRightOnSquare" size="20"></ng-icon>
+                  View Live
+                </a>
+              }
+              @if (project.githubUrl) {
+                <a
+                  [href]="project.githubUrl"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="inline-flex items-center gap-2 rounded-lg border-2 border-white/30 px-6 py-3 font-semibold text-white hover:bg-white/10">
+                  <ng-icon name="heroCodeBracket" size="20"></ng-icon>
+                  View Code
+                </a>
+              }
+            </div>
+          </div>
+        </section>
+
+        <!-- Content -->
+        <section class="py-16">
+          <div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
+            <h2 class="text-2xl font-bold text-gray-900 mb-6">About This Project</h2>
+            <p class="text-lg text-gray-700 leading-relaxed">{{ project.longDescription }}</p>
+
+            <!-- Gallery -->
+            @if (project.images && project.images.length > 1) {
+              <div class="mt-12">
+                <h3 class="text-xl font-bold text-gray-900 mb-6">Project Gallery</h3>
+                <div class="grid gap-4 md:grid-cols-2">
+                  @for (img of project.images; track img) {
+                    <div class="overflow-hidden rounded-xl">
+                      <img [src]="img" [alt]="project.title" class="w-full h-auto" />
+                    </div>
+                  }
+                </div>
+              </div>
+            }
+          </div>
+        </section>
+
+        <!-- Related Projects -->
+        @if (relatedProjects.length > 0) {
+          <section class="py-16 bg-gray-50">
+            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+              <h2 class="text-2xl font-bold text-gray-900 mb-8">Related Projects</h2>
+              <div class="grid gap-8 md:grid-cols-3">
+                @for (related of relatedProjects; track related.id) {
+                  <app-project-card [project]="related"></app-project-card>
+                }
+              </div>
+            </div>
+          </section>
+        }
+      </div>
+    }
+  \`,
+})
+export class ProjectDetailComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private portfolioService = inject(PortfolioService);
+
+  project?: Project;
+  relatedProjects: Project[] = [];
+
+  constructor() {
+    this.route.params.subscribe(params => {
+      const slug = params['slug'];
+      this.project = this.portfolioService.getProjectBySlug(slug);
+
+      if (this.project) {
+        this.relatedProjects = this.portfolioService
+          .getProjectsByCategory(this.project.category)
+          .filter(p => p.id !== this.project!.id)
+          .slice(0, 3);
+      } else {
+        this.router.navigate(['/portfolio']);
+      }
+    });
+  }
+}`;
+
+    await fs.writeFile(
+      path.join(
+        config.fullPath,
+        'src/app/features/portfolio/project-detail/project-detail.component.ts'
+      ),
+      projectDetail
+    );
+  },
+
+  async createRouting(config) {
+    const routes = `import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  // Portfolio as home
+  {
+    path: '',
+    loadComponent: () => import('./features/portfolio/projects/projects.component').then(c => c.PortfolioHomeComponent)
+  },
+  {
+    path: 'portfolio',
+    loadComponent: () => import('./features/portfolio/projects/projects.component').then(c => c.PortfolioHomeComponent)
+  },
+  {
+    path: 'portfolio/:slug',
+    loadComponent: () => import('./features/portfolio/project-detail/project-detail.component').then(c => c.ProjectDetailComponent)
+  },
+  {
+    path: 'about',
+    loadComponent: () => import('./features/about/about.component').then(c => c.AboutComponent)
+  },
+  {
+    path: 'contact',
+    loadComponent: () => import('./features/contact/contact.component').then(c => c.ContactComponent)
+  },
+
+  // Auth routes
+  {
+    path: 'auth',
+    loadComponent: () => import('./layout/auth/auth-layout.component').then(c => c.AuthLayoutComponent),
+    children: [
+      { path: '', redirectTo: 'login', pathMatch: 'full' },
+      { path: 'login', loadComponent: () => import('./features/auth/login/login.component').then(c => c.LoginComponent) },
+      { path: 'register', loadComponent: () => import('./features/auth/register/register.component').then(c => c.RegisterComponent) },
+      { path: 'forgot-password', loadComponent: () => import('./features/auth/forgot-password/forgot-password.component').then(c => c.ForgotPasswordComponent) }
+    ]
+  },
+
+  { path: '**', redirectTo: '' }
+];`;
+
+    await fs.writeFile(path.join(config.fullPath, 'src/app/app.routes.ts'), routes);
+  },
+
+  async updateI18n(config) {
+    const enPath = path.join(config.fullPath, 'public/assets/i18n/en.json');
+    const arPath = path.join(config.fullPath, 'public/assets/i18n/ar.json');
+
+    let en = {};
+    let ar = {};
+
+    try {
+      en = JSON.parse(await fs.readFile(enPath, 'utf-8'));
+      ar = JSON.parse(await fs.readFile(arPath, 'utf-8'));
+    } catch {
+      // Files don't exist yet
+    }
+
+    const portfolioEn = {
+      portfolio: {
+        greeting: "Hi, I'm",
+        name: 'John Doe',
+        title: 'Senior Frontend Developer',
+        bio: 'I create beautiful, performant web applications with modern technologies. Passionate about clean code and great user experiences.',
+        viewWork: 'View My Work',
+        downloadResume: 'Download Resume',
+        featuredProjects: 'Featured Projects',
+        projectsSubtitle: 'A selection of my recent work',
+        skills: 'Skills & Expertise',
+        skillsSubtitle: 'Technologies I work with',
+        experience: 'Work Experience',
+        experienceSubtitle: 'My professional journey',
+        education: 'Education',
+        testimonials: 'What People Say',
+        testimonialsSubtitle: 'Feedback from colleagues and clients',
+        ctaTitle: "Let's Work Together",
+        ctaSubtitle: "Have a project in mind? I'd love to hear about it.",
+        getInTouch: 'Get In Touch',
+      },
+    };
+
+    const portfolioAr = {
+      portfolio: {
+        greeting: 'مرحباً، أنا',
+        name: 'جون دو',
+        title: 'مطور واجهات أمامية أول',
+        bio: 'أقوم بإنشاء تطبيقات ويب جميلة وعالية الأداء باستخدام التقنيات الحديثة. شغوف بالكود النظيف وتجارب المستخدم الرائعة.',
+        viewWork: 'شاهد أعمالي',
+        downloadResume: 'تحميل السيرة الذاتية',
+        featuredProjects: 'المشاريع المميزة',
+        projectsSubtitle: 'مجموعة من أعمالي الأخيرة',
+        skills: 'المهارات والخبرات',
+        skillsSubtitle: 'التقنيات التي أعمل بها',
+        experience: 'الخبرة العملية',
+        experienceSubtitle: 'مسيرتي المهنية',
+        education: 'التعليم',
+        testimonials: 'ماذا يقول الناس',
+        testimonialsSubtitle: 'آراء الزملاء والعملاء',
+        ctaTitle: 'لنعمل معاً',
+        ctaSubtitle: 'هل لديك مشروع في ذهنك؟ أود أن أسمع عنه.',
+        getInTouch: 'تواصل معي',
+      },
+    };
+
+    await fs.writeFile(enPath, JSON.stringify({ ...en, ...portfolioEn }, null, 2));
+    await fs.writeFile(arPath, JSON.stringify({ ...ar, ...portfolioAr }, null, 2));
+  },
+};
+
+module.exports = portfolio;