diff --git a/README.md b/README.md index 5295cb61..5ca51db9 100644 --- a/README.md +++ b/README.md @@ -25,3 +25,36 @@

+ +## Updating Portfolio Content + +The content of this portfolio (About Me, Experience, Projects) is managed through a central JSON file located at `src/data/content.json`. + +To update your portfolio information: + +1. **Open `src/data/content.json`**. +2. **Modify the data**: + * **`aboutMe`**: + * `personalImageAlt`: Alt text for your main image. + * `paragraphs`: An array of strings. Each string is a paragraph in the "About Me" section. You can use HTML tags like `` or `` for emphasis. + * **`experience`**: An array of experience objects. Each object has: + * `date`: Date or period of the experience. + * `title`: Your job title. + * `company`: Company name. + * `description`: Description of your role and achievements. + * `link` (optional): A URL for more details. + * **`projects`**: + * `tags`: An object defining available tags for projects. Each key (e.g., "NEXT") is a tag identifier used in `project.items`. It contains: + * `name`: Display name of the tag (e.g., "Next.js"). + * `class`: Tailwind CSS classes for styling the tag badge. + * `icon`: A string key (e.g., "NextJS") that maps to an icon component in `src/components/Projects.astro`. Ensure the corresponding icon component (e.g., `NextJS.astro`) exists in `src/components/icons/` and is mapped in the `ICONS` object within `src/components/Projects.astro`. + * `items`: An array of project objects. Each object has: + * `title`: Project title. + * `description`: Project description. + * `link` (optional): Live preview URL. + * `github` (optional): GitHub repository URL. + * `image`: Path to the project image (usually in `public/projects/`). + * `tags`: An array of string keys (e.g., `["NEXT", "TAILWIND"]`) that correspond to keys in `projects.tags`. +3. **Save the file**. The website will automatically reflect the changes when you rebuild or if your development server is running with HMR (Hot Module Replacement). + +Make sure the JSON structure remains valid after your changes. diff --git a/src/components/AboutMe.astro b/src/components/AboutMe.astro index 1d94ed15..53c28571 100644 --- a/src/components/AboutMe.astro +++ b/src/components/AboutMe.astro @@ -1,33 +1,15 @@ --- - const personalImageAlt = "Miguel Ángel" +import contentData from '@/data/content.json'; +const { personalImageAlt, paragraphs } = contentData.aboutMe; ---
-

- Me llamo Miguel Ángel pero mis amigos me llaman midu. Empecé en la - programación con un Amstrad, tenía 10 años. Actualmente estoy liderando equipos de desarrollo en multinacionales. -

- -

- Algunos de mis éxitos incluyen colaborar con Mozilla para el desarrollo de las primeras apps en su - sistema FirefoxOS. Aunque hoy está desaparecido fue un gran avance en el mundo del - desarrollo web. -

- -

- Como creador de contenido, cuento con el canal de habla hispana más visto del mundo en la - categoría de Software & Game Development en Twitch. Mi objetivo es mejorar la empleabilidad de la comunidad hispana y el - acceso a contenido de calidad. -

+ {paragraphs.map((paragraph: any) => ( +

+ ))}
{personalImageAlt} diff --git a/src/components/Experience.astro b/src/components/Experience.astro index 2dbd1824..5f712a20 100644 --- a/src/components/Experience.astro +++ b/src/components/Experience.astro @@ -1,27 +1,11 @@ --- -import ExperienceItem from "./ExperienceItem.astro" -const EXPERIENCE = [ - { - date: "Actualmente...", - title: "Creador de Contenido", - company: "Twitch", - description: - "Divulgo sobre programación y desarrollo web en diferentes plataformas. Galardonado como mejor creador de contenido de habla no-inglesa en 2022 y mejor comunidad en 2023 por GitHub.", - link: "https://twitch.tv/midudev", - }, - { - date: "Septiembre 2022", - title: "Principal Frontend Engineer", - company: "Adevinta Spain", - description: - "Responsable de la plataforma, componentes y utilidades para la creación y desarrollo de aplicaciones web. Mejora de un 30% en la entrega de software. Implantación de medidas de integración continua y despliegue con A/B testing en más de 15 equipos.", - }, -] +import ExperienceItem from "./ExperienceItem.astro"; +import contentData from '@/data/content.json'; ---
    { - EXPERIENCE.map((experience) => ( + contentData.experience.map((experience: any) => (
    2. diff --git a/src/components/Projects.astro b/src/components/Projects.astro index 8b3d7893..6f455893 100644 --- a/src/components/Projects.astro +++ b/src/components/Projects.astro @@ -1,82 +1,65 @@ --- -import GitHub from "./icons/GitHub.astro" -import NextJS from "./icons/NextJS.astro" -import Tailwind from "./icons/Tailwind.astro" -import Link from "./icons/Link.astro" -import LinkButton from "./LinkButton.astro" +import GitHub from "./icons/GitHub.astro"; +import Link from "./icons/Link.astro"; +import LinkButton from "./LinkButton.astro"; +import contentData from '@/data/content.json'; -const TAGS = { - NEXT: { - name: "Next.js", - class: "bg-black text-white", - icon: NextJS, - }, - TAILWIND: { - name: "Tailwind CSS", - class: "bg-[#003159] text-white", - icon: Tailwind, - }, -} -const PROJECTS = [ - { - title: "SVGL - A beautiful library with SVG logos", - description: - "Biblioteca de logos SVG de las marcas más populares. +10k visitas al mes. +2K svgs descargados. Creado desde cero con Next.js, React y Tailwind CSS.", - link: "https://svgl.vercel.app/", - github: "https://github.com/pheralb/svgl", - image: "/projects/svgl.webp", - tags: [TAGS.NEXT, TAGS.TAILWIND], - }, - { - title: "AdventJS - Retos de programación con JavaScript y TypeScript", - description: - "Plataforma gratuita con retos de programación. Más de 1 millón de visitas en un mes. +50K retos completados. Creada desde cero con Next.js, React y Tailwind CSS.", - link: "https://adventjs.dev", - image: "/projects/adventjs.webp", - tags: [TAGS.NEXT, TAGS.TAILWIND], - }, -] +// Import required icons +import NextJS from "./icons/NextJS.astro"; +import Tailwind from "./icons/Tailwind.astro"; +// Potentially import other icons if your JSON defines them + +// Map icon strings from JSON to actual components +const ICONS = { + NextJS: NextJS, + Tailwind: Tailwind, + // Add other icons here corresponding to content.json +}; + +const { tags: projectTagsData, items: projectItems } = contentData.projects; ---
    { - PROJECTS.map(({ image, title, description, tags, link, github }) => ( + projectItems.map((project: any) => (
    - Recién llegado vs 5 años en Nueva Zelanda + {project.title}

    - {title} + {project.title}

      - {tags.map((tag) => ( -
    • - - - {tag.name} - -
      • - ))} + {project.tags.map((tagKey: keyof typeof projectTagsData) => { + const tagDetails = projectTagsData[tagKey]; + const IconComponent = ICONS[tagDetails.icon as keyof typeof ICONS]; + return ( +
    • + + {IconComponent && } + {tagDetails.name} + +
      • + ); + })}
    -
    {description}
    +
    {project.description}