Skip to content

Commit

Permalink
🌐 Add i18n support and update language settings
Browse files Browse the repository at this point in the history
  • Loading branch information
marcode24 committed Jan 28, 2024
1 parent caec90e commit 4e4f267
Show file tree
Hide file tree
Showing 18 changed files with 540 additions and 179 deletions.
7 changes: 7 additions & 0 deletions astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,11 @@ import svelte from '@astrojs/svelte';
// https://astro.build/config
export default defineConfig({
integrations: [svelte()],
i18n: {
defaultLocale: 'es',
locales: ['es', 'en'],
routing: {
prefixDefaultLocale: false,
},
},
});
2 changes: 1 addition & 1 deletion lint-staged.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export default {
'*.{js,jsx,ts,tsx,astro}': ['eslint --fix', 'eslint'],
'*.{js,jsx,astro}': ['eslint --fix', 'eslint'],
'**/*.ts?(x)': () => 'npm run build-types',
};
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
"build": "astro check && astro build",
"preview": "astro preview",
"astro": "astro",
"lint": "eslint --ext .js,.jsx,.ts,.tsx,.astro . & npm run stylelint",
"lint:fix": "eslint --ext .js,.jsx,.ts,.tsx,.astro . --fix & npm run stylelint:fix",
"lint:watch": "eslint --ext .js,.jsx,.ts,.tsx,.astro . --watch",
"lint": "eslint --ext .js,.jsx,.astro . & npm run stylelint",
"lint:fix": "eslint --ext .js,.jsx,.astro . --fix & npm run stylelint:fix",
"lint:watch": "eslint --ext .js,.jsx,.astro . --watch",
"stylelint": "stylelint 'src/**/*.{css,scss,astro}'",
"stylelint:fix": "stylelint 'src/**/*.{css,scss,astro}' --fix",
"stylelint:watch": "stylelint 'src/**/*.{css,scss,astro}' --watch",
Expand Down
52 changes: 19 additions & 33 deletions src/components/About.astro
Original file line number Diff line number Diff line change
@@ -1,29 +1,21 @@
---
const YEARS_OLD = new Date().getFullYear() - 2001;
import { getI18n } from '@i18n/index';
const { currentLocale } = Astro;
const i18n = getI18n({ currentLocale });
---

<section id="about">
<span class="title">About me 👨</span>
<span class="title">{i18n.ABOUT_SECTION.TITLE} 👨</span>
<div class="wrap">
<div class="description">
<p>
My name is <span class="high">Marco Antonio Cruz Gabino</span>.
I am {YEARS_OLD} years old and I am currently studying computer science.
I am passionate about
<span class="high">writing code, solving problems and creating software</span>.
I am a responsible, self-taught, dynamic person with great capacity for teamwork.
</p>
<br>
<p>
Currently, I am expanding my skills into
<span class="high">backend development</span> to complement
my existing web development expertise
</p>
<p set:html={i18n.ABOUT_SECTION.DESCRIPTION_1}></p>
<p set:html={i18n.ABOUT_SECTION.DESCRIPTION_2}></p>
<p set:html={i18n.ABOUT_SECTION.DESCRIPTION_3}></p>
</div>
<div class="image">
<figure>
<img src="programming.webp" alt="programming-image">
</figure>
<img src="programming.webp" alt={i18n.ABOUT_SECTION.IMAGE.ALT}>
</div>
</div>
</section>
Expand All @@ -45,30 +37,24 @@ const YEARS_OLD = new Date().getFullYear() - 2001;

.description {
font-size: 22px;
font-weight: 500;
font-weight: normal;
line-height: 1.5;
color: var(--font-color-2);
color: var(--font-color-1);
text-wrap: pretty;
}

.description .high {
color: var(--primary-color);
.description p {
margin-bottom: 1rem;
}

.image {
flex: 1;
}

section figure {
display: inline-block;
box-sizing: border-box;
width: 20rem;
height: 19rem;
}

section figure img {
section img {
object-fit: cover;
width: 100%;
height: 100%;
width: 22rem;
height: 20rem;
border-radius: 51% 49% 49% 51% / 49% 52% 48% 51%;
border: 3px solid var(--primary-color);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
Expand All @@ -91,7 +77,7 @@ const YEARS_OLD = new Date().getFullYear() - 2001;
}

@media (max-width: 480px) {
section figure {
section img {
width: 15rem;
height: 14rem;
}
Expand Down
88 changes: 88 additions & 0 deletions src/components/App.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
---
import About from '@components/About.astro';
import ButtonTop from '@components/buttons/button-top.svelte';
import Contact from '@components/Contact.astro';
import Header from '@components/Header.astro';
import Hero from '@components/Hero.astro';
import Navigation from '@components/Navigation.svelte';
import Portfolio from '@components/Portfolio.astro';
import Skills from '@components/Skills.astro';
import { getI18n } from '@i18n/index';
import Layout from '@layouts/Layout.astro';
const { currentLocale } = Astro;
const i18n = getI18n({ currentLocale });
---

<Layout title={i18n.SEO_TITLE} description={i18n.SEO_DESCRIPTION} language={i18n.LANGUAGE}>
<div class="wrapper">
<Header />
<Navigation client:load/>
<div class="content">
<div class="blur bottom"></div>
<div class="blur top"></div>
<Hero />
<About />
<Skills />
<Portfolio />
<Contact />
</div>
</div>
<ButtonTop client:idle/>
</Layout>

<style>
.wrapper {
opacity: 1;
visibility: visible;
transition: opacity 2.2s ease-in-out, visibility 2.2s ease-in-out, height 2.2s ease-in-out;
overflow: hidden;
max-width: 1200px;
min-width: 380px;
height: auto;
margin: 0 auto;
position: relative;
}

.content {
margin: 0 1rem;
}

.blur {
position: fixed;
width: 14rem;
height: 14rem;
border-radius: 50%;
background: #60a5fa;
z-index: -9;
filter: blur(200px);
}

.blur.bottom {
top: 620px;
left: 25%;
}

.blur.top {
top: 100px;
left: 75%;
}

@media (max-width: 900px) {
.content {
margin: 0 1rem;
}
}

@media (max-width: 480px) {
.blur.bottom {
top: 380px;
left: 0%;
}
.blur.top {
top: 90px;
left: 40%;
}
}
</style>
10 changes: 7 additions & 3 deletions src/components/Contact.astro
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,18 @@ import {
LINKEDIN_URL,
TWITTER_URL,
} from '@constants/urls';
import { getI18n } from '@i18n/index';
const { currentLocale } = Astro;
const i18n = getI18n({ currentLocale });
---

<section id="contact">
<span class="title">Contact me ✉️</span>
<span class="title">{i18n.CONTACT_SECTION.TITLE} ✉️</span>
<div class="container">
<p class="description">
I’m currently looking for new opportunities, my inbox is always open!
{i18n.CONTACT_SECTION.DESCRIPTION}
</p>
<div class="email-wrapper">
<div class="email">
Expand Down Expand Up @@ -52,7 +56,7 @@ import {
</div>
<div class="detail">
<span class="text">
Design and Built with ❤️ by
{i18n.FOOTER.DESCRIPTION}
<a target="_blank" href={GITHUB_URL} aria-label="Github profile">
Marco Cruz
</a>
Expand Down
48 changes: 27 additions & 21 deletions src/components/Hero.astro
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,32 @@
import GithubIcon from '@components/icons/github-icon.astro';
import LinkedinIcon from '@components/icons/linkedin-icon.astro';
import { GITHUB_URL, LINKEDIN_URL } from '@constants/urls.ts';
import { getI18n } from '@i18n/index';
const { currentLocale } = Astro;
const i18n = getI18n({ currentLocale });
---

<section class="home" id="home">
<div class="main-title">
<h1 class="title">Hello there!<span>✌️</span></h1>
<h2 class="title">I'm <span class="subtitle-name">Marco Cruz</span></h2>
<span class="title-job">Frontend Developer</span>
<h1 class="title">{i18n.HERO_SECTION.TITLE}<span>✌️</span></h1>
<h2 class="title">
{i18n.HERO_SECTION.SUBTITLE_NORMAL}
<span class="subtitle-name">
{i18n.HERO_SECTION.SUBTITLE_EMPHASIS}
</span>
</h2>
<span class="title-job">
{i18n.HERO_SECTION.JOB_TITLE}
</span>
<div class="bottom">
<a
class="btn"
href="pdf/cv.pdf"
download="cv - marco cruz.pdf"
aria-label="Download CV">
Download CV
aria-label={i18n.HERO_SECTION.CV.ARIA_LABEL}>
{i18n.HERO_SECTION.CV.BTN_TEXT}
</a>
<div class="social">
<a target="_blank" href={GITHUB_URL} class="icon" aria-label="Github">
Expand All @@ -27,9 +39,8 @@ import { GITHUB_URL, LINKEDIN_URL } from '@constants/urls.ts';
</div>
</div>
</div>
<figure>
<img src="me.webp" alt="profile-image" class="profile">
</figure>

<img src="me.webp" alt={i18n.HERO_SECTION.IMAGE.ALT} class="profile">
</section>

<style>
Expand Down Expand Up @@ -126,32 +137,25 @@ import { GITHUB_URL, LINKEDIN_URL } from '@constants/urls.ts';
color: var(--font-color-2);
}

.home figure {
display: inline-block;
box-sizing: border-box;
width: 30rem;
height: 28rem;
}

img {
object-fit: cover;
width: 100%;
height: 100%;
width: 30rem;
height: 28rem;
border-radius: 63% 37% 48% 52% / 60% 57% 43% 40%;
border: 3px solid var(--primary-color);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
background: #3b82f6;
}

@media (max-width: 1024px) {
.home figure {
img.profile {
width: 28rem;
height: 23rem;
}
}

@media (max-width: 900px) {
.home figure {
img.profile {
width: 28rem;
height: 23rem;
}
Expand All @@ -174,7 +178,8 @@ import { GITHUB_URL, LINKEDIN_URL } from '@constants/urls.ts';
span.title-job {
font-size: 28px;
}
.home figure {

img.profile {
width: 18rem;
height: 18rem;
}
Expand All @@ -191,7 +196,8 @@ import { GITHUB_URL, LINKEDIN_URL } from '@constants/urls.ts';
span.title-job {
font-size: 28px;
}
.home figure {

img.profile {
width: 14rem;
height: 14rem;
}
Expand Down
Loading

0 comments on commit 4e4f267

Please sign in to comment.