Docs
Guia Porfolio

Guia Porfolio

Como usar template para porfolio.

Manual de Usuario

Personalizando el Portfolio

1. Información Personal

Edita src/data/resume.tsx:

export const DATA = {
  name: "Tu Nombre",
  title: "Desarrollador Full Stack",
  description: "Tu descripción profesional breve",
  location: "Ciudad, País",
  email: "tu@email.com",
}

2. Experiencia Laboral

work: [
  {
    company: "Empresa",
    title: "Cargo",
    description: "Descripción detallada de responsabilidades y logros",
    location: "Ubicación",
    start: "2023",
    end: "Presente",
  }
]

3. Proyectos

projects: [
  {
    title: "Nombre del Proyecto",
    description: "Descripción del proyecto y tecnologías usadas",
    tags: ["React", "Node.js", "MongoDB"],
    dates: "2023"
  }
]

4. Educación

education: [
  {
    school: "Universidad",
    degree: "Carrera o Título",
    start: "2018",
    end: "2022"
  }
]

5. Habilidades

skills: [
  "JavaScript",
  "React",
  "Node.js",
  "Python",
  // Agrega tus habilidades
]

Agregando Blog Posts

  1. Crea archivo .mdx en /content:
---
title: "Título del Post"
date: "2024-03-15"
description: "Descripción corta"
---
 
Contenido del post...

Personalizando Estilos

Colores

Edita src/app/globals.css:

:root {
  --primary: #000000;
  --secondary: #666666;
  --background: #ffffff;
}

Fuentes

Modifica en src/app/layout.tsx:

import { Inter } from 'next/font/google'

Diseño Responsive

Breakpoints en tailwind.config.ts:

screens: {
  'sm': '640px',
  'md': '768px',
  'lg': '1024px',
}

Mejores Prácticas

  1. Optimización de Rendimiento
  • Usa imágenes optimizadas
  • Minimiza dependencias externas
  • Implementa carga diferida
  1. SEO
  • Incluye metadatos en cada página
  • Usa URLs amigables
  • Agrega descripciones y títulos
  1. Accesibilidad
  • Usa textos alternativos
  • Mantén buen contraste
  • Implementa navegación por teclado

Solución de Problemas

  1. Problemas comunes:
# Limpia caché
rm -rf .next
npm run dev
 
# Actualiza dependencias
npm install
 
# Verifica TypeScript
npm run type-check
  1. Rendimiento:
  • Optimiza imágenes
  • Minimiza JavaScript
  • Usa componentes del lado del servidor
  1. Compatibilidad:
  • Prueba en diferentes navegadores
  • Verifica en móviles
  • Valida HTML/CSS
SaaS DashboardsAI Search