Skip to content

Commit face48a

Browse files
codingcodaxcodingcodax
committed
feat: add translation
1 parent c9d75ea commit face48a

File tree

9 files changed

+396
-242
lines changed

9 files changed

+396
-242
lines changed

‎src/components/coding-hours.astro‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
---
2-
// const baseUrl = import.meta.env.SITE || 'http://localhost:4321';
3-
// const response = await fetch(`${baseUrl}/api/wakatime.json`);
4-
// const { hours, minutes } = await response.json();
5-
const hours = '3,898';
6-
const minutes = '28';
2+
import type { Lang } from '~/i18n';
3+
import { useTranslations } from '~/i18n';
4+
5+
const t = useTranslations(Astro.currentLocale as Lang);
6+
const baseUrl = import.meta.env.SITE || 'http://localhost:4321';
7+
const response = await fetch(`${baseUrl}/api/wakatime.json`);
8+
const { hours, minutes } = await response.json();
79
---
810

911
<div class:list={['animate space-y-4 p-6', 'sm:p-8']}>
10-
<h4 class='text-grey-text font-serif text-lg'>Coding hours</h4>
12+
<h4 class='text-grey-text font-serif text-lg'>
13+
{t({ en: 'Coding hours', es: 'Horas programando' })}
14+
</h4>
1115
<p class:list={['text-xl font-medium', 'sm:text-2xl', 'md:text-3xl']}>
1216
{hours} hrs {minutes} mins
1317
</p>

‎src/components/contact-me.astro‎

Lines changed: 37 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
---
2+
import type { Lang } from '~/i18n';
3+
import Link from '~/components/ui/link.astro';
4+
import { useTranslations } from '~/i18n';
5+
6+
const t = useTranslations(Astro.currentLocale as Lang);
27
const { variant = 'expanded' } = Astro.props;
38
---
49

@@ -17,37 +22,49 @@ const { variant = 'expanded' } = Astro.props;
1722
]}
1823
>
1924
<h4 class:list={['font-serif text-xl', 'sm:text-2xl', 'md:text-3xl']}>
20-
Let’s work together
25+
{t({ en: 'Let’s work together', es: 'Trabajemos juntos' })}
2126
</h4>
2227
<p class:list={['text-grey-text text-sm', 'sm:text-base']}>
23-
If you have any questions, opportunities or would just like to say hello,
24-
then feel free to send me a DM (
25-
<a
26-
class:list={['text-grey-text-contrast text-sm', 'sm:text-base']}
28+
{
29+
t({
30+
en: 'If you have any questions, opportunities or would just like to say hello, then feel free to send me a DM',
31+
es: 'Si tienes alguna pregunta, oportunidades o simplemente quieres saludarme, no dudes en enviarme un DM.',
32+
})
33+
}
34+
(<Link
35+
isExternal
36+
class:list={[
37+
'text-grey-text-contrast inline-block text-sm',
38+
'sm:text-base',
39+
]}
2740
href='https://dm.new/codingcodax'
28-
rel='noopener noreferrer'
29-
target='_blank'
3041
>
3142
X
32-
</a>{' '}
33-
or{' '}
34-
<a
35-
class:list={['text-grey-text-contrast text-sm', 'sm:text-base']}
43+
</Link>{' '}
44+
{t({ en: 'or', es: 'o' })}
45+
<Link
46+
isExternal
47+
class:list={[
48+
'text-grey-text-contrast inline-block text-sm',
49+
'sm:text-base',
50+
]}
3651
href='https://www.linkedin.com/in/codingcodax'
37-
rel='noopener noreferrer'
38-
target='_blank'
3952
>
4053
LinkedIn
41-
</a>
42-
) or if you prefer, you can{' '}
43-
<a
54+
</Link>)
55+
{
56+
t({
57+
en: 'or if you prefer, you can',
58+
es: 'o, si prefieres, puedes enviarme un',
59+
})
60+
}
61+
<Link
62+
isExternal
4463
class:list={['text-grey-text-contrast text-sm', 'sm:text-base']}
4564
href='mailto:[email protected]'
46-
rel='noopener noreferrer'
47-
target='_blank'
4865
>
49-
email me
50-
</a>
66+
{t({ en: 'email me', es: 'email' })}
67+
</Link>
5168
.
5269
</p>
5370
</div>

‎src/components/header/nav-item.astro‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
---
22
import { buttonStyles } from '~/components/ui/button';
33
4+
type Props = { href: string };
5+
46
const { href } = Astro.props;
57
const { pathname } = Astro.url;
68
const isActive = href === pathname;
@@ -16,7 +18,7 @@ const isActive = href === pathname;
1618
<span class='invisible'><slot /></span>
1719
<span
1820
class:list={[
19-
'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-transform duration-500 ease-in-out',
21+
'absolute top-1/2 left-1/2 w-max -translate-x-1/2 -translate-y-1/2 transition-transform duration-500 ease-in-out',
2022
'group-hover:-translate-y-[200%]',
2123
'hover:duration-300',
2224
]}
@@ -25,7 +27,7 @@ const isActive = href === pathname;
2527
</span>
2628
<span
2729
class:list={[
28-
'absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-[200%] transition-transform duration-500 ease-in-out',
30+
'absolute top-1/2 left-1/2 w-max -translate-x-1/2 translate-y-[200%] transition-transform duration-500 ease-in-out',
2931
'group-hover:-translate-y-1/2',
3032
'hover:duration-300',
3133
]}

‎src/components/intro/intro.astro‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
---
2+
import type { Lang } from '~/i18n';
3+
import { HOME_DESCRIPTION } from '~/config/consts';
4+
import { useTranslations } from '~/i18n';
25
import Image from './image.astro';
6+
7+
const t = useTranslations(Astro.currentLocale as Lang);
38
---
49

510
<div
@@ -15,11 +20,10 @@ import Image from './image.astro';
1520
'md:text-6xl',
1621
]}
1722
>
18-
Hi, I'm Alexis
23+
{t({ en: "Hi, I'm Alexis", es: 'Hola, soy Alexis' })}
1924
</h1>
2025
<h2 class:list={['text-md text-grey-text animate max-w-lg', 'sm:text-lg']}>
21-
Front-end web wizard who enjoys creating a variety of tools and a
22-
continuous dedication to learning and self-development.
26+
{t(HOME_DESCRIPTION)}
2327
</h2>
2428
</main>
2529
</div>

‎src/pages/[lang]/about.astro‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
---
2+
import type { Lang } from '~/i18n';
3+
import BlockContent from '~/components/block/block-content.astro';
4+
import BlockTitle from '~/components/block/block-title.astro';
5+
import Block from '~/components/block/block.astro';
6+
import ContactMe from '~/components/contact-me.astro';
7+
import DateLabel from '~/components/date-label.astro';
8+
import DetailBlockContent from '~/components/detail-block/detail-block-content.astro';
9+
import DetailBlockSubtitle from '~/components/detail-block/detail-block-subtitle.astro';
10+
import DetailBlockTitle from '~/components/detail-block/detail-block-title.astro';
11+
import DetailBlock from '~/components/detail-block/detail-block.astro';
12+
import Hero from '~/components/hero.astro';
13+
import Link from '~/components/ui/link.astro';
14+
import { ABOUT_DESCRIPTION, ABOUT_TITLE } from '~/config/consts';
15+
import { LOCALES, useTranslations } from '~/i18n';
16+
import Main from '~/layouts/main.astro';
17+
18+
const t = useTranslations(Astro.currentLocale as Lang);
19+
20+
export const getStaticPaths = () =>
21+
Object.keys(LOCALES).map((lang) => ({
22+
params: { lang },
23+
}));
24+
---
25+
26+
<Main title={t(ABOUT_TITLE)} description={t(ABOUT_DESCRIPTION)}>
27+
<main>
28+
<Hero>{t(ABOUT_TITLE)}</Hero>
29+
30+
<Block>
31+
<BlockTitle
32+
>{
33+
t({
34+
en: 'Who I am',
35+
es: 'Quién soy',
36+
})
37+
}</BlockTitle
38+
>
39+
<BlockContent>
40+
<div class='bg-grey-base text-grey-text animate relative space-y-4 p-8'>
41+
<p>
42+
{t({ en: 'Hey there! I’m', es: '¡Hola! Soy' })}
43+
<span class='text-grey-text-contrast'>Alexis Guzman</span>,
44+
{
45+
t({
46+
en: 'a passionate developer and entrepreneur based in Mexico. My journey began with a curiosity for technology and a drive to create impactful digital experiences.',
47+
es: 'un desarrollador y emprendedor apasionado de México. Mi viaje comenzó con una curiosidad por la tecnología y un impulso para crear experiencias digitales impactantes.',
48+
})
49+
}
50+
</p>
51+
52+
<p>
53+
{
54+
t({
55+
en: 'As a co-founder of',
56+
es: 'Como cofundador de',
57+
})
58+
}
59+
<Link
60+
isExternal
61+
class='text-grey-text-contrast'
62+
href='https://www.khutz.com/'
63+
>
64+
Khutz
65+
</Link>
66+
{
67+
t({
68+
en: ', alongside',
69+
es: ', junto a',
70+
})
71+
}
72+
<Link
73+
isExternal
74+
class='text-grey-text-contrast'
75+
href='https://github.com/OscarStrada/'
76+
>
77+
Oscar Arturo
78+
</Link>,
79+
{
80+
t({
81+
en: 'we led our first big project, Docom, which focused on building a healthcare CRM. This experience has fueled my passion for creating helpful solutions that enhance experiences.',
82+
es: 'dirigimos nuestro primer gran proyecto, Docom, centrado en la creación de un CRM de salud. Este experiencia impulsó mi pasión por crear soluciones útiles que mejoren las experiencias.',
83+
})
84+
}
85+
</p>
86+
87+
<p>
88+
{
89+
t({
90+
en: 'I thrive on exploring new technologies and design trends, constantly seeking inspiration to push the boundaries of what’s possible. Whether it’s diving into the latest frameworks or experimenting with innovative design concepts, I believe that creativity and technology go hand in hand. I’m always eager to learn from others and collaborate on exciting projects that make a difference.',
91+
es: 'Me encanta explorar nuevas tecnologías y tendencias de diseño, busco constantemente inspiración para ampliar los límites de lo posible. Ya sea explorando los últimos frameworks o experimentando con conceptos de diseño innovadores, creo que la creatividad y la tecnología van de la mano. Siempre estoy deseando aprender de los demás y colaborar en proyectos emocionantes que marquen la diferencia.',
92+
})
93+
}
94+
</p>
95+
</div>
96+
</BlockContent>
97+
</Block>
98+
99+
<Block>
100+
<BlockTitle
101+
>{
102+
t({
103+
en: 'Work Experience',
104+
es: 'Experiencia laboral',
105+
})
106+
}</BlockTitle
107+
>
108+
109+
<BlockContent>
110+
<div
111+
class:list={['grid grid-cols-1', 'sm:grid-cols-2', 'md:grid-cols-2']}
112+
>
113+
<DateLabel>JUL - NOV 2023</DateLabel>
114+
<DetailBlock>
115+
<DetailBlockTitle
116+
>{
117+
t({
118+
en: 'Co-Founder',
119+
es: 'Co-Fundador',
120+
})
121+
}</DetailBlockTitle
122+
>
123+
<DetailBlockSubtitle
124+
>Docom - {
125+
t({ en: 'Healthcare CRM', es: 'CRM de salud' })
126+
}</DetailBlockSubtitle
127+
>
128+
129+
<DetailBlockContent>
130+
<p class='text-grey-text text-sm'>
131+
{
132+
t({
133+
en: 'Led a talented team in developing a healthcare CRM aimed at enhancing patient management and communication. Although the project didn’t reach completion, it provided invaluable insights into product development and the healthcare landscape.',
134+
es: 'Lideré un equipo talentoso en el desarrollo de un CRM de salud enfocado en mejorar la gestión y la comunicación con los pacientes. Aunque el proyecto no llegó a completarse, aportó valiosas ideas sobre el desarrollo de productos y el sector de la salud.',
135+
})
136+
}
137+
</p>
138+
</DetailBlockContent>
139+
</DetailBlock>
140+
</div>
141+
142+
<div
143+
class:list={['grid grid-cols-1', 'sm:grid-cols-2', 'md:grid-cols-2']}
144+
>
145+
<DateLabel>JUN 2023 - {t({ en: 'NOW', es: 'AHORA' })}</DateLabel>
146+
<DetailBlock>
147+
<DetailBlockTitle
148+
>{
149+
t({
150+
en: 'Co-Founder',
151+
es: 'Co-Fundador',
152+
})
153+
}</DetailBlockTitle
154+
>
155+
<DetailBlockSubtitle
156+
>Khutz - {
157+
t({ en: 'Digital Agency', es: 'Agencia digital' })
158+
}</DetailBlockSubtitle
159+
>
160+
161+
<DetailBlockContent>
162+
<p class='text-grey-text text-sm'>
163+
{
164+
t({
165+
en: 'I collaborate closely with clients to create tailored solutions that not only meet their needs but also elevate their brand presence online. My focus is on blending functionality with creativity to deliver standout digital experiences.',
166+
es: 'Colaboré estrechamente con los clientes para crear soluciones a medida que no sólo satisficieran sus necesidades, sino que también elevaran la presencia de su marca en Internet. Me centré en combinar funcionalidad y creatividad para ofrecer experiencias digitales sobresalientes.',
167+
})
168+
}
169+
</p>
170+
</DetailBlockContent>
171+
</DetailBlock>
172+
</div>
173+
</BlockContent>
174+
</Block>
175+
176+
<Block>
177+
<BlockTitle>{t({ en: 'Education', es: 'Educación' })}</BlockTitle>
178+
179+
<BlockContent>
180+
<div
181+
class:list={['grid grid-cols-1', 'sm:grid-cols-2', 'md:grid-cols-2']}
182+
>
183+
<DateLabel
184+
>{
185+
t({ en: 'DEC 2019 - JAN 2021', es: 'DIC 2019 - ENE 2021' })
186+
}</DateLabel
187+
>
188+
<DetailBlock>
189+
<DetailBlockTitle
190+
>{
191+
t({
192+
en: 'Full Stack Developer',
193+
es: 'Desarrollador Full Stack',
194+
})
195+
}</DetailBlockTitle
196+
>
197+
<DetailBlockSubtitle>Bottega - Bootcamp</DetailBlockSubtitle>
198+
199+
<DetailBlockContent>
200+
<p class='text-grey-text text-sm'>
201+
{
202+
t({
203+
en: 'I developed a strong foundation in web technologies, including HTML, CSS, JavaScript, Python, and React. I acquired the tools to craft innovative solutions and bring ideas to life.',
204+
es: 'Desarrollé una sólida base en tecnologías web, como HTML, CSS, JavaScript, Python y React. Adquirí las herramientas para crear soluciones innovadoras y dar vida a las ideas.',
205+
})
206+
}
207+
</p>
208+
</DetailBlockContent>
209+
</DetailBlock>
210+
</div>
211+
</BlockContent>
212+
</Block>
213+
214+
<ContactMe variant='collapsed' />
215+
</main>
216+
</Main>

0 commit comments

Comments
 (0)