diff --git a/src/assets/images/portrait.jpg b/src/assets/images/portrait.jpg index bedf1c5..04d078e 100644 Binary files a/src/assets/images/portrait.jpg and b/src/assets/images/portrait.jpg differ diff --git a/src/assets/style/_utils.scss b/src/assets/style/_utils.scss index 3ac2f32..35aa187 100644 --- a/src/assets/style/_utils.scss +++ b/src/assets/style/_utils.scss @@ -85,6 +85,7 @@ .vstack { --prj-gap: var(--prj-spacing-3); display: flex; + gap: var(--prj-gap); flex-direction: column; } @@ -133,6 +134,10 @@ justify-content: space-around !important; } +.align-items-center { + align-items: center !important; +} + .grid { --prj-gap: var(--prj-spacing-3); --prj-columns: repeat(3, 1fr); diff --git a/src/assets/style/style.scss b/src/assets/style/style.scss index 265234d..f7cc247 100644 --- a/src/assets/style/style.scss +++ b/src/assets/style/style.scss @@ -35,7 +35,7 @@ h1, .fs-1 { font-size: 3rem !important; margin-top: 0; - margin-bottom: var(--prj-spacing-4); + margin-bottom: var(--prj-spacing-3); } h2, .fs-2 { @@ -97,6 +97,10 @@ ul { /* Make the marker position is inside the container */ list-style-position: inside; margin: 0; + + ul { + margin-left: var(--prj-spacing-3); + } } .list-unstyle { diff --git a/src/content/config.ts b/src/content/config.ts index d5810b6..e822c32 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -3,29 +3,6 @@ import { z, defineCollection } from 'astro:content'; // AstroJS collection configuration -const games = defineCollection({ - type: 'content', - schema: z.object({ - title: z.string(), - has_content: z.boolean().optional(), - date_added: z.coerce.date(), - release: z.coerce.date(), - developers: z.array(z.string()), - genres: z.array(z.string()), - status: z.enum([ - 'Backlog', - 'On Line', - 'Playing', - 'Played', - 'Wishlist', - 'Want to Replay', - 'Always Playable', - 'Tried', - ]), - times_played: z.number(), - }), -}); - const blog = defineCollection({ type: 'content', schema: z.object({ @@ -39,30 +16,30 @@ const blog = defineCollection({ const portafolio = defineCollection({ type: 'content', - schema: z.object({ - title: z.string(), - draft: z.boolean().optional(), - status: z.enum(['Backlog', 'Activo', 'Fixes', 'Finalizado']), - tags: z.array(z.string()).optional(), - technologies: z.array(z.string()), - published_at: z.coerce.date().optional(), - updated_at: z.coerce.date().optional(), - media: z - .array( - z.object({ - type: z.nativeEnum(MediaType), - url: z.string(), - alt: z.string(), - mime: z.string().optional(), - thumbnail: z.string().optional(), - }), - ) - .catch([]), - }), + schema: ({ image }) => + z.object({ + title: z.string(), + draft: z.boolean().optional(), + brief: z.string(), + status: z.enum(['Backlog', 'Activo', 'Fixes', 'Finalizado']), + tags: z.array(z.string()).optional(), + technologies: z.array(z.string()), + created_at: z.coerce.date().optional(), + updated_at: z.coerce.date().optional(), + thumbnail: image().refine((img) => img.width >= 1080, { + message: 'Cover image must be at least 1080 pixels wide!', + }), + timeframe: z.string().optional(), + links: z + .object({ + repo: z.string().url(), + url: z.string().url(), + }) + .optional(), + }), }); export const collections = { - games, blog, portafolio, }; diff --git a/src/content/portafolio/Destino Temuco.md b/src/content/portafolio/Destino Temuco.md new file mode 100644 index 0000000..b05f609 --- /dev/null +++ b/src/content/portafolio/Destino Temuco.md @@ -0,0 +1,27 @@ +--- +title: Destino Temuco +status: Backlog +draft: true +created_at: 2024-01-01 +updated_at: 2024-01-21 +brief: "La dirección de Turismo, Patrimonio y Cultura del Municipio de Temuco, solicito una web autoadministrable, el cual pueda servir a todo turista y publico en general como una guia informativa sobre los servicios turísticos que ofrecen en Temuco. La web permite a quien la visita, saber sobre los tours, atractivos turísticos, eventos, galería de artes, biblioteca y servicios turísticos, así como las opciones para poder llegar a Temuco. También cuenta con blog de noticias y una revista digital sobre Temuco." +timeframe: 'March 2022 - October 2023' +thumbnail: './_media/temuco1.webp' +technologies: + - React + - NodeJS + - MySQL +--- + +This is a web application to manage the stock of product in a construction company and their usage across projects. It also allows to create budgets with the interaction of different actors. + +![](./_media/piloto2.png) +This is a web application to manage the stock of product in a construction company and their usage across projects. It also allows to create budgets with the interaction of different actors. + +![](./_media/piloto3.webp) +This is a web application to manage the stock of product in a construction company and their usage across projects. It also allows to create budgets with the interaction of different actors. + +![](./_media/piloto4.webp) +This is a web application to manage the stock of product in a construction company and their usage across projects. It also allows to create budgets with the interaction of different actors. + +![](./_media/piloto5.webp) diff --git a/src/content/portafolio/Observacion de clases.md b/src/content/portafolio/Observacion de clases.md deleted file mode 100644 index abd87e2..0000000 --- a/src/content/portafolio/Observacion de clases.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Plataforma de Observación de clases -status: Backlog -draft: true -media: - - type: image - url: /images/portafolio/observacion_clases/1696878771763.jpg - alt: this an image - - type: image - url: /images/portafolio/observacion_clases/1696878771763.jpg - alt: this an image -technologies: - - React - - NodeJS - - MySQL ---- - -This is a web application to manage the stock of product in a construction -company and their usage across projects. It also allows to create budgets with -the interaction of different actors. diff --git a/src/content/portafolio/Piloto Go.md b/src/content/portafolio/Piloto Go.md index c2280be..e3aec78 100644 --- a/src/content/portafolio/Piloto Go.md +++ b/src/content/portafolio/Piloto Go.md @@ -2,21 +2,11 @@ title: Piloto Go status: Backlog draft: true -media: - - type: video - url: https://drive.google.com/file/d/198BB5RVjp2t1ExWhX0SfN20hEsW-Nk-l/view?usp=sharing - alt: this an image - mime: video/mp4 - thumbnail: https://drive.google.com/file/d/1AuG0g4pugKE-GgwuOpb5eVvRPfR0S4D5/view?usp=drive_link - - type: image - url: https://drive.google.com/file/d/1AuG0g4pugKE-GgwuOpb5eVvRPfR0S4D5/view?usp=drive_link - alt: this an image - - type: image - url: https://drive.google.com/file/d/1hfyHV2c58MVJLofnAy67rzsqhCV1V5u8/view?usp=drive_link - alt: this an image - - type: image - url: https://drive.google.com/file/d/1doIdGSVmyzlV4CwI0KbsOTOQpeZYt9YU/view?usp=drive_link - alt: this an image +created_at: 2024-01-01 +updated_at: 2024-01-21 +brief: "Para el área de innovación de Almagro desarrollamos un producto mínimo viable que permite digitalizar las solicitudes de los nuevos productos que se utilizan en la construcción de edificios. Además permite armar digitalmente las matrices para los distintos segmentos de las propiedades." +timeframe: 'March 2022 - October 2023' +thumbnail: './_media/piloto1.webp' technologies: - React - NodeJS @@ -24,3 +14,17 @@ technologies: --- This is a web application to manage the stock of product in a construction company and their usage across projects. It also allows to create budgets with the interaction of different actors. + +![img2](./_media/piloto2.png) + +This is a web application to manage the stock of product in a construction company and their usage across projects. It also allows to create budgets with the interaction of different actors. + +![img3](./_media/piloto3.webp) + +This is a web application to manage the stock of product in a construction company and their usage across projects. It also allows to create budgets with the interaction of different actors. + +![img 4](./_media/piloto4.webp) + +This is a web application to manage the stock of product in a construction company and their usage across projects. It also allows to create budgets with the interaction of different actors. + +![](./_media/piloto5.webp) diff --git a/src/content/portafolio/Sercotec.md b/src/content/portafolio/Sercotec.md new file mode 100644 index 0000000..4288266 --- /dev/null +++ b/src/content/portafolio/Sercotec.md @@ -0,0 +1,27 @@ +--- +title: Barrios Comerciales - Sercotec +status: Backlog +draft: true +created_at: 2024-01-01 +updated_at: 2024-01-21 +brief: "Desarrollo de sitio web para SERCOTEC donde buscan visibilizar los barrios comerciales dentro de Chile. Para esto cada uno de los barrios ya mapeados por SERCOTEC se pueden cargar con la descripción, imágenes, videos, programas y un mapa de como llegar al barrio. También es posible ingresar nuevos barrios comerciales que no estén inscritos en el sitio." +timeframe: 'March 2022 - October 2023' +thumbnail: './_media/sercotec1.webp' +technologies: + - React + - NodeJS + - MySQL +--- + +This is a web application to manage the stock of product in a construction company and their usage across projects. It also allows to create budgets with the interaction of different actors. + +![](./_media/piloto2.png) +This is a web application to manage the stock of product in a construction company and their usage across projects. It also allows to create budgets with the interaction of different actors. + +![](./_media/piloto3.webp) +This is a web application to manage the stock of product in a construction company and their usage across projects. It also allows to create budgets with the interaction of different actors. + +![](./_media/piloto4.webp) +This is a web application to manage the stock of product in a construction company and their usage across projects. It also allows to create budgets with the interaction of different actors. + +![](./_media/piloto5.webp) diff --git a/src/content/portafolio/_media/piloto1.webp b/src/content/portafolio/_media/piloto1.webp new file mode 100644 index 0000000..f534ee2 Binary files /dev/null and b/src/content/portafolio/_media/piloto1.webp differ diff --git a/src/content/portafolio/_media/piloto2.png b/src/content/portafolio/_media/piloto2.png new file mode 100644 index 0000000..ee124a7 Binary files /dev/null and b/src/content/portafolio/_media/piloto2.png differ diff --git a/src/content/portafolio/_media/piloto3.webp b/src/content/portafolio/_media/piloto3.webp new file mode 100644 index 0000000..5fc856f Binary files /dev/null and b/src/content/portafolio/_media/piloto3.webp differ diff --git a/src/content/portafolio/_media/piloto4.webp b/src/content/portafolio/_media/piloto4.webp new file mode 100644 index 0000000..12ab5e3 Binary files /dev/null and b/src/content/portafolio/_media/piloto4.webp differ diff --git a/src/content/portafolio/_media/piloto5.webp b/src/content/portafolio/_media/piloto5.webp new file mode 100644 index 0000000..c121b82 Binary files /dev/null and b/src/content/portafolio/_media/piloto5.webp differ diff --git a/src/content/portafolio/_media/sercotec1.webp b/src/content/portafolio/_media/sercotec1.webp new file mode 100644 index 0000000..3b28f1c Binary files /dev/null and b/src/content/portafolio/_media/sercotec1.webp differ diff --git a/src/content/portafolio/_media/temuco1.webp b/src/content/portafolio/_media/temuco1.webp new file mode 100644 index 0000000..063695e Binary files /dev/null and b/src/content/portafolio/_media/temuco1.webp differ diff --git a/src/pages/index.astro b/src/pages/index.astro index b9e342d..257e9af 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,5 +1,5 @@ --- -import { getCollection } from 'astro:content'; +import { getCollection, getEntry } from 'astro:content'; import { t, changeLanguage } from 'i18next'; import Layout from '../layouts/Layout.astro'; import Card from '../components/Card.astro'; @@ -12,10 +12,12 @@ changeLanguage('en'); const blog = await getCollection('blog', ({ data }) => import.meta.env.PROD ? data.draft !== true : true, ); -// TODO: show the pinned ones, not the recents -const portafolio = await getCollection('portafolio', ({ data }) => - import.meta.env.PROD ? data.draft !== true : true, -); + +const portafolio = [ + await getEntry('portafolio', 'piloto-go'), + await getEntry('portafolio', 'destino-temuco'), + await getEntry('portafolio', 'sercotec'), +]; --- @@ -24,16 +26,16 @@ const portafolio = await getCollection('portafolio', ({ data }) => class="bg-image flex-center" style="--bg-image: url(https://placehold.co/600x400)" > -
- - - - - - - +
+ portrait of Alexander Navarro
-

Alexander Navarro

+

Alexander Navarro

{t('home.brief')}

@@ -45,56 +47,26 @@ const portafolio = await getCollection('portafolio', ({ data }) =>

{t('titles.featuredWork')}

- - project img -

Project N°1

-

- cillum sint consectetur cupidatat. Lorem ipsum dolor sit amet, qui - minim labore adipisicing minim sint -

- -
- See more... -
- - - - project img -

Project N°1

-

- Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint - cillum sint consectetur cupidatat. -

- -
- See more... -
- - - - project img -

Project N°1

-

- Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint - cillum sint consectetur cupidatat. -

- -
- See more... -
- + { + portafolio.map(({ data, slug }) => ( + + )) + }
@@ -274,10 +246,18 @@ const portafolio = await getCollection('portafolio', ({ data }) => diff --git a/src/pages/projects/[...slug].astro b/src/pages/projects/[...slug].astro index 2a78c61..9a34209 100644 --- a/src/pages/projects/[...slug].astro +++ b/src/pages/projects/[...slug].astro @@ -1,19 +1,20 @@ --- -import { changeLanguage } from "i18next"; -import type { InferGetStaticPropsType, GetStaticPaths } from "astro"; -import { getCollection } from "astro:content"; -import Layout from "@layouts/Layout.astro"; -import Toc from "@components/Toc/Toc"; -import Gallery from "@components/MediaGallery/Gallery"; +import { changeLanguage } from 'i18next'; +import type { InferGetStaticPropsType, GetStaticPaths } from 'astro'; +import { getCollection } from 'astro:content'; +import Layout from '@layouts/Layout.astro'; +import Toc from '@components/Toc/Toc'; +import Card from '@components/Card.astro'; +import Button from '@components/Button/Button.astro'; -changeLanguage("en"); +changeLanguage('en'); export const getStaticPaths = (async () => { - const entries = await getCollection("portafolio"); - return entries.map((entry) => ({ - params: { slug: entry.slug }, - props: entry, - })); + const entries = await getCollection('portafolio'); + return entries.map((entry) => ({ + params: { slug: entry.slug }, + props: entry, + })); }) satisfies GetStaticPaths; type Props = InferGetStaticPropsType; const entry = Astro.props; @@ -22,10 +23,59 @@ const { Content, headings } = await entry.render();

{entry.data.title}

+ +
+
Timeframe:
+
{entry.data.timeframe}
- +
Repo:
+
{entry.data.links?.url ?? 'Private'}
+ +
Website:
+
+ {entry.data.links?.repo ?? 'Private'} +
+ +
Technologies:
+
+
    + {entry.data.technologies.map((item) =>
  • {item}
    • )} +
+
+
+ + +
+ +
+ + + + diff --git a/src/pages/projects/[page].astro b/src/pages/projects/[page].astro index 985a412..fe75121 100644 --- a/src/pages/projects/[page].astro +++ b/src/pages/projects/[page].astro @@ -5,6 +5,7 @@ import { getCollection } from 'astro:content'; import Layout from '@layouts/Layout.astro'; import Card from '@components/Card.astro'; import Pagination from '@components/Pagination.astro'; +import { Image } from 'astro:assets'; changeLanguage('en'); @@ -35,24 +36,19 @@ const { page } = Astro.props; { page.data.map((item) => ( )) @@ -63,7 +59,11 @@ const { page } = Astro.props;