@icarusmx/creta 0.4.3 → 0.5.1

package/.claude/settings.local.json

@@ -3,7 +3,9 @@
     "allow": [
       "Read(//private/tmp/**)",
       "Bash(node:*)",
-      "WebFetch(domain:github.com)"
+      "WebFetch(domain:github.com)",
+      "Bash(npm install)",
+      "Bash(npm run dev:*)"
     ],
     "deny": [],
     "ask": []

package/bin/creta.js

@@ -5,11 +5,12 @@ import { execSync } from 'child_process'
 import fs from 'fs'
 import path from 'path'
 import { fileURLToPath } from 'url'
+import { CretaCodeSession } from '../lib/session.js'
 
 const args = process.argv.slice(2)
 const command = args[0]
 
-console.log("¡Bienvenido de vuelta! 🏛️")
+console.log("¡Bienvenida de vuelta! 🏛️")
 console.log("Retomemos desde donde nos quedamos: hagamos tu portafolio.\n")
 
 if (!command) {
@@ -18,6 +19,7 @@ if (!command) {
   console.log("  creta portafolio-1  - Desbloquea nivel 1 (navbar) 🔓")
   console.log("  creta portafolio-2  - Desbloquea nivel 2 (navbar + hero) 🔓")
   console.log("  creta portafolio-3  - Desbloquea nivel 3 (solución completa) 🔓")
+  console.log("  creta code          - Inicia sesión interactiva de programación 🤖")
   console.log("\n💡 Tip: Si estás dentro de un proyecto existente, los comandos")
   console.log("    portafolio-1/2/3 actualizarán tus archivos directamente")
   process.exit(0)
@@ -32,6 +34,10 @@ if (command.startsWith('portafolio')) {
   } else {
     await createPortfolioProject(level)
   }
+} else if (command === 'code') {
+  // Start interactive coding session
+  const session = new CretaCodeSession()
+  await session.start()
 } else {
   console.log(`Comando no reconocido: ${command}`)
   process.exit(1)
@@ -146,7 +152,7 @@ function applyLayoutModifications(content, level) {
   <div class="max-w-7xl mx-auto px-4">
     <div class="flex justify-between items-center py-3">
       <div class="flex items-center space-x-3">
-        <img src="/logo.png" alt="Logo" class="w-8 h-8">
+        <img src="/logo.svg" alt="Logo" class="w-8 h-8">
         <span class="text-xl font-bold text-gray-900">{{STUDENT_NAME}}</span>
       </div>
       <div class="hidden md:flex space-x-6">

package/lib/providers/base.js

@@ -0,0 +1,41 @@
+export class BaseLLMProvider {
+  constructor(config = {}) {
+    this.config = config
+    this.name = 'base'
+  }
+
+  async chat(messages, options = {}) {
+    throw new Error('chat method must be implemented by provider')
+  }
+
+  async isAvailable() {
+    return false
+  }
+
+  formatMessages(userInput, context = {}) {
+    const systemPrompt = `Eres un mentor de programación que ayuda a estudiantes mexicanos a aprender desarrollo web.
+
+CONTEXTO:
+- Eres parte de Creta, una escuela de software mexicana
+- Los estudiantes están aprendiendo SvelteKit 5 + Tailwind CSS 4
+- Usa un tono amigable y alentador en español
+- Enfócate en explicaciones prácticas y ejemplos de código
+- Menciona conceptos de programación cuando sea relevante
+
+PROYECTO ACTUAL:
+${context.currentProject ? `- Proyecto: ${context.currentProject.name}` : '- No hay proyecto activo'}
+${context.currentFile ? `- Archivo actual: ${context.currentFile}` : ''}
+
+INSTRUCCIONES:
+- Responde en español mexicano
+- Usa emojis ocasionalmente para hacer más amigable la conversación
+- Si es una pregunta técnica, incluye código de ejemplo
+- Si mencionas Tailwind, usa clases actualizadas de la v4
+- Mantén las respuestas concisas pero útiles`
+
+    return [
+      { role: 'system', content: systemPrompt },
+      { role: 'user', content: userInput }
+    ]
+  }
+}

package/lib/providers/groq.js

@@ -0,0 +1,50 @@
+import fetch from 'node-fetch'
+import { BaseLLMProvider } from './base.js'
+
+export class GroqProvider extends BaseLLMProvider {
+  constructor(config = {}) {
+    super(config)
+    this.name = 'groq'
+    this.apiKey = config.apiKey || process.env.GROQ_API_KEY
+    this.model = config.model || 'mixtral-8x7b-32768'
+    this.baseURL = 'https://api.groq.com/openai/v1'
+  }
+
+  async isAvailable() {
+    return !!this.apiKey
+  }
+
+  async chat(userInput, context = {}) {
+    if (!this.apiKey) {
+      throw new Error('API key de Groq no configurada. Usa: export GROQ_API_KEY=tu_clave')
+    }
+
+    const messages = this.formatMessages(userInput, context)
+
+    try {
+      const response = await fetch(`${this.baseURL}/chat/completions`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${this.apiKey}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          model: this.model,
+          messages,
+          max_tokens: 1000,
+          temperature: 0.7
+        })
+      })
+
+      if (!response.ok) {
+        throw new Error(`Groq API error: ${response.status}`)
+      }
+
+      const data = await response.json()
+      return data.choices[0].message.content
+      
+    } catch (error) {
+      throw new Error(`Error conectando con Groq: ${error.message}`)
+    }
+  }
+}

package/lib/providers/index.js

@@ -0,0 +1,66 @@
+import { OpenAIProvider } from './openai.js'
+import { GroqProvider } from './groq.js'
+
+export class LLMManager {
+  constructor() {
+    this.providers = new Map()
+    this.currentProvider = null
+    
+    // Register available providers
+    this.registerProvider('openai', OpenAIProvider)
+    this.registerProvider('groq', GroqProvider)
+  }
+
+  registerProvider(name, ProviderClass) {
+    this.providers.set(name, ProviderClass)
+  }
+
+  async getAvailableProviders() {
+    const available = []
+    
+    for (const [name, ProviderClass] of this.providers) {
+      const provider = new ProviderClass()
+      if (await provider.isAvailable()) {
+        available.push(name)
+      }
+    }
+    
+    return available
+  }
+
+  async selectProvider(preferredProvider = null) {
+    const available = await this.getAvailableProviders()
+    
+    if (available.length === 0) {
+      throw new Error('No hay proveedores de IA disponibles. Configura una API key:\n' +
+        '- OpenAI: export OPENAI_API_KEY=tu_clave\n' +
+        '- Groq: export GROQ_API_KEY=tu_clave')
+    }
+
+    // Use preferred provider if available
+    if (preferredProvider && available.includes(preferredProvider)) {
+      const ProviderClass = this.providers.get(preferredProvider)
+      this.currentProvider = new ProviderClass()
+      return preferredProvider
+    }
+
+    // Otherwise use first available
+    const selectedName = available[0]
+    const ProviderClass = this.providers.get(selectedName)
+    this.currentProvider = new ProviderClass()
+    
+    return selectedName
+  }
+
+  async chat(userInput, context = {}) {
+    if (!this.currentProvider) {
+      await this.selectProvider()
+    }
+
+    return await this.currentProvider.chat(userInput, context)
+  }
+
+  getCurrentProviderName() {
+    return this.currentProvider?.name || 'ninguno'
+  }
+}

package/lib/providers/openai.js

@@ -0,0 +1,50 @@
+import fetch from 'node-fetch'
+import { BaseLLMProvider } from './base.js'
+
+export class OpenAIProvider extends BaseLLMProvider {
+  constructor(config = {}) {
+    super(config)
+    this.name = 'openai'
+    this.apiKey = config.apiKey || process.env.OPENAI_API_KEY
+    this.model = config.model || 'gpt-4o-mini'
+    this.baseURL = config.baseURL || 'https://api.openai.com/v1'
+  }
+
+  async isAvailable() {
+    return !!this.apiKey
+  }
+
+  async chat(userInput, context = {}) {
+    if (!this.apiKey) {
+      throw new Error('API key de OpenAI no configurada. Usa: export OPENAI_API_KEY=tu_clave')
+    }
+
+    const messages = this.formatMessages(userInput, context)
+
+    try {
+      const response = await fetch(`${this.baseURL}/chat/completions`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${this.apiKey}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          model: this.model,
+          messages,
+          max_tokens: 1000,
+          temperature: 0.7
+        })
+      })
+
+      if (!response.ok) {
+        throw new Error(`OpenAI API error: ${response.status}`)
+      }
+
+      const data = await response.json()
+      return data.choices[0].message.content
+      
+    } catch (error) {
+      throw new Error(`Error conectando con OpenAI: ${error.message}`)
+    }
+  }
+}

package/lib/session.js

@@ -0,0 +1,437 @@
+import { createInterface } from 'readline'
+import chalk from 'chalk'
+import chokidar from 'chokidar'
+import fs from 'fs'
+import path from 'path'
+import { LLMManager } from './providers/index.js'
+
+export class CretaCodeSession {
+  constructor() {
+    this.rl = null
+    this.watcher = null
+    this.currentProject = null
+    this.isActive = false
+    this.llm = new LLMManager()
+    this.context = {
+      files: new Map(),
+      lastModified: new Map()
+    }
+  }
+
+  async start() {
+    console.log(chalk.cyan('🏛️ Creta Code - Sesión Interactiva'))
+    console.log(chalk.gray('Escribe "ayuda" para ver comandos disponibles\n'))
+
+    // Initialize project context
+    await this.initializeContext()
+    
+    // Initialize LLM provider
+    await this.initializeLLM()
+    
+    // Setup file watcher
+    this.setupFileWatcher()
+    
+    // Setup readline interface
+    this.rl = createInterface({
+      input: process.stdin,
+      output: process.stdout,
+      prompt: chalk.blue('creta> ')
+    })
+
+    this.isActive = true
+    this.rl.prompt()
+
+    this.rl.on('line', async (input) => {
+      await this.handleCommand(input.trim())
+      if (this.isActive) {
+        this.rl.prompt()
+      }
+    })
+
+    this.rl.on('close', () => {
+      this.cleanup()
+    })
+  }
+
+  async initializeContext() {
+    const cwd = process.cwd()
+    
+    // Check if we're in a Creta project
+    if (this.isInCretaProject(cwd)) {
+      this.currentProject = {
+        path: cwd,
+        type: 'creta-portfolio',
+        name: this.extractProjectName(cwd)
+      }
+      console.log(chalk.green(`📁 Proyecto detectado: ${this.currentProject.name}`))
+    } else {
+      console.log(chalk.yellow('⚠️  No se detectó un proyecto Creta. Algunas funciones podrían estar limitadas.'))
+    }
+  }
+
+  async initializeLLM() {
+    try {
+      const provider = await this.llm.selectProvider()
+      console.log(chalk.green(`🤖 IA activada: ${provider}`))
+    } catch (error) {
+      console.log(chalk.yellow('⚠️  IA no disponible: ' + error.message))
+      console.log(chalk.gray('   Algunas funciones estarán limitadas\n'))
+    }
+  }
+
+  setupFileWatcher() {
+    if (!this.currentProject) return
+
+    const watchPaths = [
+      path.join(this.currentProject.path, 'src/**/*.svelte'),
+      path.join(this.currentProject.path, 'src/**/*.js'),
+      path.join(this.currentProject.path, 'src/**/*.css')
+    ]
+
+    this.watcher = chokidar.watch(watchPaths, {
+      ignored: /node_modules/,
+      persistent: true
+    })
+
+    this.watcher.on('change', (filePath) => {
+      const relativePath = path.relative(this.currentProject.path, filePath)
+      console.log(chalk.gray(`\n📝 Archivo modificado: ${relativePath}`))
+      this.rl.prompt()
+    })
+  }
+
+  async handleCommand(input) {
+    const [command, ...args] = input.split(' ')
+
+    switch (command.toLowerCase()) {
+      case 'ayuda':
+      case 'help':
+        this.showHelp()
+        break
+      
+      case 'explica':
+        await this.explainCode(args.join(' '))
+        break
+      
+      case 'revisa':
+        await this.reviewCode(args.join(' '))
+        break
+      
+      case 'depura':
+        await this.debugCode(args.join(' '))
+        break
+      
+      case 'nivel':
+        await this.checkLevel()
+        break
+      
+      case 'archivo':
+        await this.showFileContent(args[0])
+        break
+      
+      case 'estado':
+        this.showProjectStatus()
+        break
+      
+      case 'salir':
+      case 'exit':
+        console.log(chalk.cyan('\n¡Hasta la vista! 👋'))
+        this.isActive = false
+        this.rl.close()
+        break
+      
+      default:
+        if (input) {
+          console.log(chalk.red(`Comando no reconocido: "${command}"`))
+          console.log(chalk.gray('Escribe "ayuda" para ver comandos disponibles'))
+        }
+    }
+  }
+
+  showHelp() {
+    console.log(chalk.cyan('\n🎯 Comandos disponibles:'))
+    console.log('  ' + chalk.blue('explica [componente]') + '  - Explica un archivo o concepto')
+    console.log('  ' + chalk.blue('revisa [archivo]') + '     - Revisa tu código y da sugerencias')
+    console.log('  ' + chalk.blue('depura [error]') + '       - Ayuda a resolver errores')
+    console.log('  ' + chalk.blue('nivel') + '               - Verifica tu progreso actual')
+    console.log('  ' + chalk.blue('archivo [nombre]') + '     - Muestra el contenido de un archivo')
+    console.log('  ' + chalk.blue('estado') + '              - Estado del proyecto actual')
+    console.log('  ' + chalk.blue('ayuda') + '               - Muestra esta ayuda')
+    console.log('  ' + chalk.blue('salir') + '               - Termina la sesión')
+    console.log('')
+  }
+
+  async explainCode(target) {
+    if (!target) {
+      console.log(chalk.yellow('💡 Uso: explica [archivo o concepto]'))
+      console.log(chalk.gray('Ejemplo: explica +layout.svelte'))
+      return
+    }
+
+    console.log(chalk.cyan(`🔍 Explicando: ${target}`))
+    
+    try {
+      let context = {
+        currentProject: this.currentProject,
+        currentFile: target
+      }
+      
+      // If it's a file, try to read its content
+      const filePath = this.findFile(target)
+      if (filePath && fs.existsSync(filePath)) {
+        const content = fs.readFileSync(filePath, 'utf8')
+        context.fileContent = content.slice(0, 2000) // Limit content for API
+      }
+      
+      const prompt = filePath 
+        ? `Explica este archivo: ${target}\n\nContenido:\n${context.fileContent || 'No se pudo leer el archivo'}`
+        : `Explica este concepto de programación web: ${target}`
+      
+      const response = await this.llm.chat(prompt, context)
+      console.log(chalk.green('\n🤖 Explicación:'))
+      console.log(response)
+      
+    } catch (error) {
+      console.log(chalk.red(`❌ Error: ${error.message}`))
+      
+      // Fallback explanation
+      if (target.includes('.svelte')) {
+        console.log(chalk.green('\n📚 Explicación básica:'))
+        console.log('Este es un componente Svelte que define la estructura de tu página.')
+        console.log('- Los archivos +layout.svelte definen el layout común (navbar, footer)')
+        console.log('- Los archivos +page.svelte definen el contenido específico de cada página')
+        console.log('- Tailwind CSS se usa para el styling con clases como "bg-blue-600"')
+      }
+    }
+  }
+
+  async reviewCode(fileName) {
+    if (!this.currentProject) {
+      console.log(chalk.red('❌ No hay proyecto activo para revisar'))
+      return
+    }
+
+    if (!fileName) {
+      console.log(chalk.yellow('💡 Uso: revisa [archivo]'))
+      console.log(chalk.gray('Ejemplo: revisa +layout.svelte'))
+      return
+    }
+
+    const filePath = this.findFile(fileName)
+    if (!filePath) {
+      console.log(chalk.red(`❌ No se encontró el archivo: ${fileName}`))
+      return
+    }
+
+    console.log(chalk.cyan(`🔍 Revisando: ${fileName}`))
+    
+    try {
+      const content = fs.readFileSync(filePath, 'utf8')
+      
+      const context = {
+        currentProject: this.currentProject,
+        currentFile: fileName,
+        fileContent: content.slice(0, 3000)
+      }
+      
+      const prompt = `Revisa este código y dame sugerencias de mejora. Enfócate en:
+- Buenas prácticas de SvelteKit 5
+- Uso correcto de Tailwind CSS 4
+- Estructura y organización del código
+- Posibles errores o mejoras
+
+Archivo: ${fileName}
+
+Código:
+${context.fileContent}`
+      
+      const response = await this.llm.chat(prompt, context)
+      console.log(chalk.green('\n🤖 Revisión de código:'))
+      console.log(response)
+      
+    } catch (error) {
+      console.log(chalk.red(`❌ Error: ${error.message}`))
+      
+      // Fallback basic review
+      console.log(chalk.green('\n✅ Revisión básica:'))
+      
+      if (content.includes('⚠️')) {
+        console.log(chalk.yellow('- Hay comentarios con retos pendientes (⚠️)'))
+      }
+      
+      if (content.includes('TODO') || content.includes('FIXME')) {
+        console.log(chalk.yellow('- Encontré comentarios TODO/FIXME'))
+      }
+      
+      console.log(chalk.green('- La sintaxis parece correcta'))
+    }
+  }
+
+  async debugCode(issue) {
+    console.log(chalk.cyan(`🐛 Depurando: ${issue || 'proyecto actual'}`))
+    
+    if (!this.currentProject) {
+      console.log(chalk.yellow('💡 Tips generales:'))
+      console.log('- Asegúrate de estar en un proyecto Creta')
+      console.log('- Ejecuta "npm install" para instalar dependencias')
+      console.log('- Usa "npm run dev" para iniciar el servidor')
+      return
+    }
+
+    console.log(chalk.green('\n🔧 Verificaciones:'))
+    
+    // Check package.json
+    const packagePath = path.join(this.currentProject.path, 'package.json')
+    if (fs.existsSync(packagePath)) {
+      console.log(chalk.green('✅ package.json existe'))
+    }
+    
+    // Check node_modules
+    const nodeModulesPath = path.join(this.currentProject.path, 'node_modules')
+    if (fs.existsSync(nodeModulesPath)) {
+      console.log(chalk.green('✅ Dependencias instaladas'))
+    } else {
+      console.log(chalk.yellow('⚠️  Ejecuta: npm install'))
+    }
+    
+    console.log(chalk.gray('\n(Próximamente: diagnóstico avanzado con IA)'))
+  }
+
+  async checkLevel() {
+    if (!this.currentProject) {
+      console.log(chalk.red('❌ No hay proyecto activo'))
+      return
+    }
+
+    console.log(chalk.cyan('📊 Verificando progreso...'))
+    
+    const layoutPath = path.join(this.currentProject.path, 'src/routes/+layout.svelte')
+    const pagePath = path.join(this.currentProject.path, 'src/routes/+page.svelte')
+    
+    let level = 0
+    
+    if (fs.existsSync(layoutPath)) {
+      const layoutContent = fs.readFileSync(layoutPath, 'utf8')
+      if (!layoutContent.includes('⚠️ COMPLETA AQUÍ LA NAVEGACIÓN')) {
+        level = Math.max(level, 1)
+      }
+      if (!layoutContent.includes('⚠️ COMPLETA AQUÍ EL FOOTER')) {
+        level = Math.max(level, 3)
+      }
+    }
+    
+    if (fs.existsSync(pagePath)) {
+      const pageContent = fs.readFileSync(pagePath, 'utf8')
+      if (!pageContent.includes('⚠️ COMPLETA AQUÍ LA SECCIÓN HERO')) {
+        level = Math.max(level, 2)
+      }
+    }
+    
+    console.log(chalk.green(`\n🎯 Nivel actual: ${level}`))
+    if (level === 0) console.log(chalk.gray('Completa el navbar para llegar al nivel 1'))
+    if (level === 1) console.log(chalk.gray('Completa la sección hero para llegar al nivel 2'))
+    if (level === 2) console.log(chalk.gray('Completa el footer para llegar al nivel 3'))
+    if (level === 3) console.log(chalk.green('¡Portafolio completo! 🎉'))
+  }
+
+  async showFileContent(fileName) {
+    if (!fileName) {
+      console.log(chalk.yellow('💡 Uso: archivo [nombre]'))
+      return
+    }
+
+    const filePath = this.findFile(fileName)
+    if (!filePath) {
+      console.log(chalk.red(`❌ No se encontró: ${fileName}`))
+      return
+    }
+
+    try {
+      const content = fs.readFileSync(filePath, 'utf8')
+      const lines = content.split('\n')
+      
+      console.log(chalk.cyan(`\n📄 ${fileName}:`))
+      console.log(chalk.gray('─'.repeat(50)))
+      
+      lines.slice(0, 20).forEach((line, i) => {
+        console.log(chalk.gray(`${(i + 1).toString().padStart(2)}: `) + line)
+      })
+      
+      if (lines.length > 20) {
+        console.log(chalk.gray(`... y ${lines.length - 20} líneas más`))
+      }
+      
+    } catch (error) {
+      console.log(chalk.red(`❌ Error: ${error.message}`))
+    }
+  }
+
+  showProjectStatus() {
+    console.log(chalk.cyan('\n📊 Estado del Proyecto:'))
+    
+    if (this.currentProject) {
+      console.log(chalk.green(`✅ Proyecto: ${this.currentProject.name}`))
+      console.log(chalk.green(`📁 Ruta: ${this.currentProject.path}`))
+      console.log(chalk.green(`🎯 Tipo: ${this.currentProject.type}`))
+    } else {
+      console.log(chalk.red('❌ No hay proyecto activo'))
+    }
+    
+    if (this.watcher) {
+      console.log(chalk.green('👀 Monitoreo de archivos: activo'))
+    }
+  }
+
+  findFile(fileName) {
+    if (!this.currentProject) return null
+    
+    const possiblePaths = [
+      path.join(this.currentProject.path, fileName),
+      path.join(this.currentProject.path, 'src', fileName),
+      path.join(this.currentProject.path, 'src/routes', fileName),
+      path.join(this.currentProject.path, 'src/lib', fileName)
+    ]
+    
+    for (const filePath of possiblePaths) {
+      if (fs.existsSync(filePath)) {
+        return filePath
+      }
+    }
+    
+    return null
+  }
+
+  isInCretaProject(dir) {
+    const packageJsonPath = path.join(dir, 'package.json')
+    const layoutPath = path.join(dir, 'src/routes/+layout.svelte')
+    
+    if (!fs.existsSync(packageJsonPath) || !fs.existsSync(layoutPath)) {
+      return false
+    }
+    
+    try {
+      const layoutContent = fs.readFileSync(layoutPath, 'utf8')
+      return layoutContent.includes('RETO CRETA') || layoutContent.includes('🧭 RETO')
+    } catch {
+      return false
+    }
+  }
+
+  extractProjectName(projectPath) {
+    try {
+      const packageJsonPath = path.join(projectPath, 'package.json')
+      const packageContent = fs.readFileSync(packageJsonPath, 'utf8')
+      const packageJson = JSON.parse(packageContent)
+      return packageJson.name || path.basename(projectPath)
+    } catch {
+      return path.basename(projectPath)
+    }
+  }
+
+  cleanup() {
+    if (this.watcher) {
+      this.watcher.close()
+    }
+    this.isActive = false
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@icarusmx/creta",
-  "version": "0.4.3",
+  "version": "0.5.1",
   "description": "Salgamos de este laberinto.",
   "type": "module",
   "bin": {

package/templates/sveltekit-portfolio/package.json

@@ -12,6 +12,7 @@
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "svelte": "^5.0.0",
+    "tailwindcss": "^4.0.0",
     "@tailwindcss/vite": "^4.0.0",
     "vite": "^5.0.3"
   },

package/templates/sveltekit-portfolio/src/app.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 /* Animaciones personalizadas */
 @keyframes fade-in {

package/templates/sveltekit-portfolio/src/routes/+layout.svelte

@@ -49,7 +49,7 @@
     <div class="max-w-7xl mx-auto px-4">
       <div class="flex justify-between items-center py-3">
         <div class="flex items-center space-x-3">
-          <img src="/logo.png" alt="Logo" class="w-8 h-8">
+          <img src="/logo.svg" alt="Logo" class="w-8 h-8">
           <span class="text-xl font-bold text-gray-900">{{STUDENT_NAME}}</span>
         </div>
         <div class="hidden md:flex space-x-6">

package/templates/sveltekit-portfolio/static/logo.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="16" cy="16" r="14" fill="#3b82f6" stroke="#1e40af" stroke-width="2"/>
+  <text x="16" y="22" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-size="18" font-weight="bold">C</text>
+</svg>

package/templates/sveltekit-portfolio/vite.config.js

@@ -1,7 +1,10 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
-	plugins: [sveltekit(), tailwindcss()]
+	plugins: [
+		tailwindcss(),
+		sveltekit()
+	]
 });