feat(Localization): add more text in landing page
This commit is contained in:
parent
033e5bbf94
commit
28d0e36ee7
8 changed files with 117 additions and 44 deletions
|
|
@ -1,5 +1,17 @@
|
|||
{
|
||||
"titles": {
|
||||
"featuredWork": "Featured Work"
|
||||
}
|
||||
"featuredWork": "Featured Work",
|
||||
"whatIveBeenUpTo": "What I've been up to...",
|
||||
"whoAmI": "Who am I?",
|
||||
"contact": "Contact"
|
||||
},
|
||||
"home": {
|
||||
"moreProjects": "View more projects",
|
||||
"viewCurriculum": "View full curriculum"
|
||||
},
|
||||
"misc": {
|
||||
"seeMore": "See more..."
|
||||
},
|
||||
"blog": "blog",
|
||||
"games": "games"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,17 @@
|
|||
{
|
||||
"titles": {
|
||||
"featuredWork": "Trabajo Destacado"
|
||||
"featuredWork": "Trabajo Destacado",
|
||||
"whatIveBeenUpTo": "Que he estado haciendo...",
|
||||
"whoAmI": "¿Quién soy?",
|
||||
"contact": "Contacto"
|
||||
},
|
||||
"home": {
|
||||
"brief": "I like to code stuff, then watch my creations come to life and do things for me!"
|
||||
}
|
||||
"moreProjects": "Ver más proyectos",
|
||||
"viewCurriculum": "Ver curriculum completo"
|
||||
},
|
||||
"misc": {
|
||||
"seeMore": "Ver más..."
|
||||
},
|
||||
"blog": "blog",
|
||||
"games": "juegos"
|
||||
}
|
||||
|
|
|
|||
9
src/assets/icons/email.svg
Normal file
9
src/assets/icons/email.svg
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
|
||||
<svg width="64px" height="64px" viewBox="-6 -6 36.00 36.00" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0">
|
||||
<rect x="-6" y="-6" width="36.00" height="36.00" rx="18" fill="#c6a0f6" strokewidth="0"/>
|
||||
</g>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<g id="SVGRepo_iconCarrier"> <path d="M4 7.00005L10.2 11.65C11.2667 12.45 12.7333 12.45 13.8 11.65L20 7" stroke="#111111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <rect x="3" y="5" width="18" height="14" rx="2" stroke="#111111" stroke-width="2" stroke-linecap="round"/> </g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 823 B |
7
src/assets/icons/github.svg
Normal file
7
src/assets/icons/github.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
|
||||
<svg fill="#c6a0f6" height="64px" width="64px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-143 145 512 512" xml:space="preserve">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<g id="SVGRepo_iconCarrier"> <g> <path d="M177.1,398.4c-8.6-1.5-17.6-1.3-26.4-0.8c-20,1.1-40,3-60,1.2c-9.5-0.9-19.1-1.8-28.7-1.6c-17.4,0.3-32,6-40.6,22.6 c-4.3,8.2-5.3,17-5,26.1c0.7,25.6,11.8,40.2,36.2,47.5c19.6,5.8,39.7,6.6,59.9,6.2c7.5,0,15,0.4,22.5-0.1 c15.5-0.9,30.7-3.2,45.4-8.6c15.2-5.6,24.3-16.3,27.6-31.8c1.3-6,1.9-12.3,1.8-18.4C209.6,420,195.6,401.5,177.1,398.4z M78.7,466.1c-6.5,7.1-15.9,7.2-22.6,0.3c-4.9-5-7.7-12.7-7.7-22.3c0.2-6.5,2.1-13.6,7.7-19.3c6.7-6.9,16.1-6.8,22.6,0.2 C88.5,435.6,88.5,455.5,78.7,466.1z M169.6,466.6c-6.1,6.3-14.9,6.5-21.4,0.7c-11.2-10.2-11.2-32.9,0-43.2 c6.4-5.9,15.2-5.7,21.4,0.6c5.7,5.8,7.6,13.1,7.9,20.9C177.2,453.5,175.2,460.7,169.6,466.6z"/> <path d="M113,145c-141.4,0-256,114.6-256,256s114.6,256,256,256s256-114.6,256-256S254.4,145,113,145z M244.2,423.4 c-1.4,11.4-3.8,23.1-7.9,33.8c-12,30.7-36,47.6-67.8,52.7c-18.2,2.9-36.9,3-57.1,4.5c-18.1-1.6-38-1.8-57.3-5.2 c-37.4-6.6-62.8-32.8-70.2-70.3c-3.8-19.1-4.9-38.3,1-57.3c3.1-9.8,8.2-18.5,14.8-26.4c0.9-1,1.7-2.5,1.6-3.8 c-1.1-17.2,0.9-34.2,6-50.6c4.2-13.7,1.1-12.9,16.3-8.9c18.3,4.8,34.3,14.7,50,25c1.8,1.2,4.6,1.7,6.8,1.3 c22.2-3.4,44.3-3.6,66.5,0.3c1.6,0.3,3.7-0.3,5.2-1.2c13.5-8.8,27.4-16.7,42.6-22.2c5.5-2,11.3-3.3,16.9-5c2.5-0.7,3.6,0.2,4.5,2.6 c6.8,19,9.6,38.5,8.6,58.6c-0.1,1.1,0.5,2.6,1.2,3.5C243,374.6,247.3,398.2,244.2,423.4z"/> </g> </g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
7
src/assets/icons/linkedin.svg
Normal file
7
src/assets/icons/linkedin.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
|
||||
<svg fill="#c6a0f6" height="64px" width="64px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-143 145 512 512" xml:space="preserve" stroke="#c6a0f6">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<g id="SVGRepo_iconCarrier"> <path d="M113,145c-141.4,0-256,114.6-256,256s114.6,256,256,256s256-114.6,256-256S254.4,145,113,145z M41.4,508.1H-8.5V348.4h49.9 V508.1z M15.1,328.4h-0.4c-18.1,0-29.8-12.2-29.8-27.7c0-15.8,12.1-27.7,30.5-27.7c18.4,0,29.7,11.9,30.1,27.7 C45.6,316.1,33.9,328.4,15.1,328.4z M241,508.1h-56.6v-82.6c0-21.6-8.8-36.4-28.3-36.4c-14.9,0-23.2,10-27,19.6 c-1.4,3.4-1.2,8.2-1.2,13.1v86.3H71.8c0,0,0.7-146.4,0-159.7h56.1v25.1c3.3-11,21.2-26.6,49.8-26.6c35.5,0,63.3,23,63.3,72.4V508.1z "/> </g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1 KiB |
|
|
@ -311,3 +311,19 @@
|
|||
.border-radius {
|
||||
border-radius: var(--prj-border-radius);
|
||||
}
|
||||
|
||||
.text-none {
|
||||
text-transform: none;
|
||||
}
|
||||
.text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ const portafolio = [
|
|||
<p class="text-justify">{data.brief}</p>
|
||||
</a>
|
||||
<div class="text-end" slot="footer">
|
||||
<a href={`/projects/${slug}`}>See more...</a>
|
||||
<a href={`/projects/${slug}`}>{t('misc.seeMore')}</a>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
@ -68,16 +68,18 @@ const portafolio = [
|
|||
</div>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<Button className="px-4 py-2 fs-5" href="/projects">View Work</Button>
|
||||
<Button className="px-4 py-2 fs-5" href="/projects">
|
||||
{t('home.moreProjects')}
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class:list={[{ 'd-none': import.meta.env.PROD }]}>
|
||||
<h2 class="mb-4">What I've been up to...</h2>
|
||||
<h2 class="mb-4">{t('titles.whatIveBeenUpTo')}</h2>
|
||||
|
||||
<div class="hstack flex-eq flex-wrap flex-md-nowrap">
|
||||
<div class="vstack justify-content-center">
|
||||
<h4 class="text-center">Blog</h4>
|
||||
<h4 class="text-center text-capitalize">{t('blog')}</h4>
|
||||
<ol class="list-unstyle mt-0 fs-5">
|
||||
<li class="mb-3">
|
||||
<a href="#"
|
||||
|
|
@ -115,7 +117,7 @@ const portafolio = [
|
|||
|
||||
<div class="hstack-reverse flex-eq flex-wrap flex-md-nowrap">
|
||||
<div class="vstack justify-content-center">
|
||||
<h4 class="text-center">Games</h4>
|
||||
<h4 class="text-center text-capitalize">{t('games')}</h4>
|
||||
<ol class="list-unstyle mt-0 fs-5">
|
||||
<li class="mb-3">
|
||||
<a href="#"
|
||||
|
|
@ -156,15 +158,14 @@ const portafolio = [
|
|||
class="bg-image"
|
||||
style="--bg-image: url(https://placehold.co/600x400)"
|
||||
>
|
||||
<h2 class="text-center">Who am I?</h2>
|
||||
|
||||
<h2 class="text-center">{t('titles.whoAmI')}</h2>
|
||||
<p class="w-95 w-lg-70 mx-auto text-justify">
|
||||
<LocalizedMarkdown path="about-me.md" />
|
||||
</p>
|
||||
|
||||
<div class="text-center fs-4 mb-0">
|
||||
<a href="">
|
||||
<Button>View full curriculum</Button>
|
||||
<Button>{t('home.viewCurriculum')}</Button>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -249,4 +250,4 @@ const portafolio = [
|
|||
}
|
||||
}
|
||||
</style>
|
||||
</Layout>
|
||||
</Layout>out> out>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,25 @@
|
|||
---
|
||||
import { getCollection, getEntry } from "astro:content";
|
||||
import { t, changeLanguage } from "i18next";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Card from "../components/Card.astro";
|
||||
import LocalizedMarkdown from "@components/LocalizedMarkdown.astro";
|
||||
import Button from "../components/Button/Button.astro";
|
||||
import { Image } from "astro:assets";
|
||||
import portrait from "../assets/images/portrait.jpg";
|
||||
import { getCollection, getEntry } from 'astro:content';
|
||||
import { t, changeLanguage } from 'i18next';
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
import Card from '../components/Card.astro';
|
||||
import LocalizedMarkdown from '@components/LocalizedMarkdown.astro';
|
||||
import Button from '../components/Button/Button.astro';
|
||||
import { Image } from 'astro:assets';
|
||||
import portrait from '../assets/images/portrait.jpg';
|
||||
import iconEmail from '../assets/icons/email.svg';
|
||||
import iconLinkedin from '../assets/icons/linkedin.svg';
|
||||
import iconGithub from '../assets/icons/github.svg';
|
||||
|
||||
changeLanguage("en");
|
||||
changeLanguage('en');
|
||||
|
||||
const blog = await getCollection("blog", ({ data }) => import.meta.env.PROD ? data.draft !== true : true);
|
||||
const blog = await getCollection('blog', ({ 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"),
|
||||
await getEntry('portafolio', 'piloto-go'),
|
||||
await getEntry('portafolio', 'destino-temuco'),
|
||||
await getEntry('portafolio', 'sercotec'),
|
||||
];
|
||||
---
|
||||
|
||||
|
|
@ -59,7 +64,7 @@ const portafolio = [
|
|||
<p class="text-justify">{data.brief}</p>
|
||||
</a>
|
||||
<div class="text-end" slot="footer">
|
||||
<a href={`/projects/${slug}`}>See more...</a>
|
||||
<a href={`/projects/${slug}`}>{t('misc.seeMore')}</a>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
@ -68,16 +73,18 @@ const portafolio = [
|
|||
</div>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<Button className="px-4 py-2 fs-5" href="/projects">View Work</Button>
|
||||
<Button className="px-4 py-2 fs-5" href="/projects">
|
||||
{t('home.moreProjects')}
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class:list={[{ 'd-none': import.meta.env.PROD }]}>
|
||||
<h2 class="mb-4">What I've been up to...</h2>
|
||||
<h2 class="mb-4">{t('titles.whatIveBeenUpTo')}</h2>
|
||||
|
||||
<div class="hstack flex-eq flex-wrap flex-md-nowrap">
|
||||
<div class="vstack justify-content-center">
|
||||
<h4 class="text-center">Blog</h4>
|
||||
<h4 class="text-center text-capitalize">{t('blog')}</h4>
|
||||
<ol class="list-unstyle mt-0 fs-5">
|
||||
<li class="mb-3">
|
||||
<a href="#"
|
||||
|
|
@ -115,7 +122,7 @@ const portafolio = [
|
|||
|
||||
<div class="hstack-reverse flex-eq flex-wrap flex-md-nowrap">
|
||||
<div class="vstack justify-content-center">
|
||||
<h4 class="text-center">Games</h4>
|
||||
<h4 class="text-center text-capitalize">{t('games')}</h4>
|
||||
<ol class="list-unstyle mt-0 fs-5">
|
||||
<li class="mb-3">
|
||||
<a href="#"
|
||||
|
|
@ -156,21 +163,20 @@ const portafolio = [
|
|||
class="bg-image"
|
||||
style="--bg-image: url(https://placehold.co/600x400)"
|
||||
>
|
||||
<h2 class="text-center">Who am I?</h2>
|
||||
|
||||
<h2 class="text-center">{t('titles.whoAmI')}</h2>
|
||||
<p class="w-95 w-lg-70 mx-auto text-justify">
|
||||
<LocalizedMarkdown path="about-me.md" />
|
||||
</p>
|
||||
|
||||
<div class="text-center fs-4 mb-0">
|
||||
<a href="">
|
||||
<Button>View full curriculum</Button>
|
||||
<Button>{t('home.viewCurriculum')}</Button>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Contact</h2>
|
||||
<h2>{t('titles.contact')}</h2>
|
||||
|
||||
<div class="grid grid-cols-1 grid-lg-cols-2">
|
||||
<div>
|
||||
|
|
@ -196,20 +202,20 @@ const portafolio = [
|
|||
{
|
||||
[
|
||||
{
|
||||
link: '#',
|
||||
img: 'https://placehold.co/60',
|
||||
link: 'https://github.com/aleee-idk',
|
||||
img: iconGithub,
|
||||
alt: '',
|
||||
text: 'Github',
|
||||
},
|
||||
{
|
||||
link: '#',
|
||||
img: 'https://placehold.co/60',
|
||||
link: 'https://www.linkedin.com/in/alexander-navarro-parra-0516062a3',
|
||||
img: iconLinkedin,
|
||||
alt: '',
|
||||
text: 'Linkedin',
|
||||
},
|
||||
{
|
||||
link: '#',
|
||||
img: 'https://placehold.co/60',
|
||||
link: 'mailto:ale.navarro.parra@gmail.com',
|
||||
img: iconEmail,
|
||||
alt: '',
|
||||
text: 'Email',
|
||||
},
|
||||
|
|
@ -217,10 +223,16 @@ const portafolio = [
|
|||
<li class="mb-3">
|
||||
<a
|
||||
href={item.link}
|
||||
target="_blank"
|
||||
class="hstack flex-column flex-lg-row gap-2"
|
||||
>
|
||||
<>
|
||||
<img src={item.img} alt={item.alt} />
|
||||
<Image
|
||||
src={item.img}
|
||||
alt={item.alt}
|
||||
width="64"
|
||||
height="64"
|
||||
/>
|
||||
<span>{item.text}</span>
|
||||
</>
|
||||
</a>
|
||||
|
|
@ -249,4 +261,4 @@ const portafolio = [
|
|||
}
|
||||
}
|
||||
</style>
|
||||
</Layout>
|
||||
</Layout>out> out>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue