Translate website to English (#9)

germanfrelo · Mar 4, 2023 · 8d7dd98 · 8d7dd98
1 parent d462dfd
commit 8d7dd98
Show file tree

Hide file tree

Showing 9 changed files with 146 additions and 121 deletions.
diff --git a/src/_data/navigation.json b/src/_data/navigation.json
@@ -1,15 +1,15 @@
 {
 	"items": [
 		{
-			"text": "Inicio",
+			"text": "Home",
 			"url": "/"
 		},
 		{
 			"text": "Portfolio",
 			"url": "/portfolio/"
 		},
 		{
-			"text": "Sobre mí",
+			"text": "About",
 			"url": "/about/"
 		}
 	]

diff --git a/src/_data/site.json b/src/_data/site.json
@@ -1,3 +1,3 @@
 {
-	"title": "Germán Freixinós, desarrollador web front-end"
+	"title": "Germán Freixinós López, front-end web developer"
 }
diff --git a/src/_includes/layouts/base.html b/src/_includes/layouts/base.html
@@ -14,7 +14,7 @@
 		<link rel="stylesheet" href="/assets/css/my-css-styles.css" />
 		<link rel="stylesheet" href="/assets/css/styles.css" />
 		<script src="/assets/scripts/main.js" defer></script>
-		<meta name="author" content="Germán Freixinós" />
+		<meta name="author" content="Germán Freixinós López" />
 		<meta name="description" content="{{ description }}" />
 		<meta name="color-scheme" content="light dark" />
 	</head>

diff --git a/src/_includes/partials/color-scheme-toggle.html b/src/_includes/partials/color-scheme-toggle.html
@@ -1,6 +1,6 @@
 <form id="theme-toggle" class="theme-toggle">
 	<fieldset>
-		<legend class="visually-hidden">Apariencia</legend>
+		<legend class="visually-hidden">Theme</legend>
 		<ul role="list" class="theme-toggle__inner">
 			<li>
 				<label for="system" class="theme-toggle__option-wrapper">
@@ -12,8 +12,8 @@
 						class="visually-hidden"
 						checked
 					/>
-					<span class="theme-toggle__option-text">
-						<span class="visually-hidden">Sistema</span>
+					<span class="theme-toggle__option-text" title="System">
+						<span class="visually-hidden">System</span>
 						<svg
 							class="icon"
 							role="img"
@@ -38,8 +38,8 @@
 						id="light"
 						class="visually-hidden"
 					/>
-					<span class="theme-toggle__option-text">
-						<span class="visually-hidden">Claro</span>
+					<span class="theme-toggle__option-text" title="Light">
+						<span class="visually-hidden">Light</span>
 						<svg
 							class="icon"
 							role="img"
@@ -64,8 +64,8 @@
 						id="dark"
 						class="visually-hidden"
 					/>
-					<span class="theme-toggle__option-text">
-						<span class="visually-hidden">Oscuro</span>
+					<span class="theme-toggle__option-text" title="Dark">
+						<span class="visually-hidden">Dark</span>
 						<svg
 							class="icon"
 							role="img"

diff --git a/src/_includes/partials/site-footer.html b/src/_includes/partials/site-footer.html
@@ -88,10 +88,17 @@
 		</ul>
 
 		<p>
-			Sitio web Jamstack, generado con Eleventy&nbsp;(11ty) y desplegado con
-			Netlify. Ver
+			This is a
+			<a href="https://jamstack.org" rel="external noopener">Jamstack</a>
+			website, built with
+			<a href="https://www.11ty.dev" rel="external noopener"
+				>Eleventy&nbsp;(11ty)</a
+			>
+			and deployed with
+			<a href="https://www.netlify.com/" rel="external noopener">Netlify</a>.
+			See
 			<a href="https://github.com/germanfrelo/website" rel="external noopener"
-				>código fuente</a
+				>source</a
 			>.
 		</p>
 	</div>

diff --git a/src/_includes/partials/site-header.html b/src/_includes/partials/site-header.html
@@ -5,7 +5,7 @@
 				href="/"
 				aria-label="{{ site.title }} - inicio"
 				class="site-header__logo"
-				>Germán Freixinós</a
+				>Germán Freixinós López</a
 			>
 
 			<nav>

diff --git a/src/about.html b/src/about.html
@@ -1,11 +1,11 @@
 ---
-title: "Sobre mí"
-description: "Información sobre mí: profesión, educación, conocimientos, idiomas, etc."
+title: "About"
+description: "Information about Germán Freixinós López, a front-end web developer."
 layout: "layouts/base.html"
 ---
 
 <div class="wrapper flow">
-	<h1>Sobre mí</h1>
+	<h1>About</h1>
 
 	<div class="flow">
 		<picture>
@@ -14,90 +14,100 @@ <h1>Sobre mí</h1>
 			<img
 				class="avatar avatar--about"
 				src="/assets/images/german-freixinos.jpg"
-				alt="Germán Freixinós"
+				alt="Germán Freixinós López"
 				width="1024"
 				height="1024"
 			/>
 		</picture>
 
 		<div class="flow">
 			<p>
-				Me llamo <strong>Germán Freixinós López</strong> y soy
-				<strong>desarrollador web front&#8209;end</strong>, con pasión por las
-				tecnologías web y en especial el diseño web (CSS, UI y UX).
-			</p>
-			<p>
-				Trabajo en
-				<a href="https://www.vinissimus.com" rel="external noopener"
-					>Vinissimus</a
-				>
-				como <strong>Junior Front&#8209;end Developer</strong>.
-			</p>
-			<p>
-				Sigo formándome en desarrollo web front&#8209;end todos los días;
-				actualmente estoy
-				<strong>aprendiendo React.js</strong> en el curso
-				<a
-					href="https://www.udemy.com/course/complete-react-developer-zero-to-mastery"
-					rel="external noopener"
-					>Complete React Developer in 2022</a
-				>.
-			</p>
-			<p>
-				También soy graduado en
-				<strong
-					>Ingeniería Técnica Industrial, especialidad en Electrónica
-					Industrial</strong
-				>, por la Universidad Politécnica de Cartagena.
+				I'm <strong>Germán</strong>, a
+				<strong>front&#8209;end web developer</strong> with 1 year of working
+				experience developing websites and web apps. I'm passionate about web
+				technologies, specially <strong>CSS, UI and Design Systems</strong>. I
+				live in <strong>Murcia, Spain</strong>.
 			</p>
+
 			<p>
-				En cuanto a los <strong>idiomas</strong>: soy nativo en
-				<strong>español</strong>; tengo un nivel <strong>B2 en inglés</strong>;
-				y estoy aprendiendo <strong>francés</strong>.
+				I'm currently <strong>improving my React skills</strong> with the
+				interactive course
+				<a href="https://www.joyofreact.com" rel="external noopener"
+					>The Joy of React</a
+				>. I also started <strong>learning Figma</strong> recently.
 			</p>
 		</div>
 	</div>
 
-	<h2><i>Stack</i> tecnológico</h2>
+	<h2>Technologies and tools</h2>
+
+	<p>These are the technologies and tools I have experience with:</p>
 
 	<ul role="list" class="l-grid-2">
 		<li class="[ card ] [ l-stack-xs ]">
-			<p class="weight-bold">Lenguajes</p>
+			<p class="weight-bold">Languages</p>
 			<ul role="list" class="l-cluster-xs">
 				<li class="tag">HTML</li>
 				<li class="tag">CSS</li>
 				<li class="tag">JavaScript</li>
 			</ul>
-			<p class="text-300">Aprox. 2 años de experiencia formativa</p>
 		</li>
 		<li class="[ card ] [ l-stack-xs ]">
-			<p class="weight-bold">Metodologías CSS</p>
+			<p class="weight-bold">CSS methodologies</p>
 			<ul role="list" class="l-cluster-xs">
 				<li class="tag">BEM</li>
 				<li class="tag">CUBE CSS</li>
 			</ul>
 		</li>
 		<li class="[ card ] [ l-stack-xs ]">
-			<p class="weight-bold"><i>Frameworks</i> JavaScript</p>
+			<p class="weight-bold">CSS preprocessors</p>
+			<ul role="list" class="l-cluster-xs">
+				<li class="tag">Sass</li>
+			</ul>
+		</li>
+		<li class="[ card ] [ l-stack-xs ]">
+			<p class="weight-bold">JavaScript frameworks</p>
 			<ul role="list" class="l-cluster-xs">
 				<li class="tag">React.js</li>
 			</ul>
 		</li>
 		<li class="[ card ] [ l-stack-xs ]">
-			<p class="weight-bold">Herramientas</p>
+			<p class="weight-bold">Testing</p>
+			<ul role="list" class="l-cluster-xs">
+				<li class="tag">Cypress (E2E)</li>
+			</ul>
+		</li>
+		<li class="[ card ] [ l-stack-xs ]">
+			<p class="weight-bold">Tools</p>
 			<ul role="list" class="l-cluster-xs">
+				<li class="tag">VS Code</li>
 				<li class="tag">Git</li>
 				<li class="tag">GitHub</li>
 				<li class="tag">npm</li>
+				<li class="tag">Eleventy&nbsp;(11ty)</li>
 				<li class="tag">Prettier</li>
 				<li class="tag">Stylelint</li>
 				<li class="tag">ESLint</li>
-				<li class="tag">Eleventy&nbsp;(11ty)</li>
+				<li class="tag">Jira</li>
+				<li class="tag">Confluence</li>
 			</ul>
 		</li>
 	</ul>
 
-	<h2>Online</h2>
+	<h2>Languages</h2>
+
+	<dl class="flow">
+		<dt>Spanish</dt>
+		<dd>Native</dd>
+
+		<dt>English</dt>
+		<dd>Intermediate&nbsp;(B2)</dd>
+
+		<dt>French</dt>
+		<dd>Basic</dd>
+	</dl>
+
+	<h2>My other profiles</h2>
 
 	<ul role="list" class="l-cluster-xs">
 		<li>
@@ -162,28 +172,14 @@ <h2>Online</h2>
 		</li>
 	</ul>
 
-	<h2 id="contact">Contacto</h2>
+	<h2 id="contact">Contact information</h2>
 
-	<p>Puedes ponerte en contacto conmigo de las siguientes formas:</p>
 	<address>
-		<ul class="flow">
-			<li>
-				<p>
-					Por mensaje en
-					<a
-						class="weight-bold"
-						href="https://www.linkedin.com/in/germanfrelo"
-						rel="external noopener"
-						>LinkedIn</a
-					>.
-				</p>
-			</li>
-			<li>
-				<p>
-					Por correo electrónico a
-					<span class="weight-bold">hola@germanfrelo.dev</span>.
-				</p>
-			</li>
-		</ul>
+		<p>
+			You can contact me on
+			<a href="https://www.linkedin.com/in/germanfrelo" rel="external noopener"
+				>LinkedIn</a
+			>, or by e-mail at <span>hola [at] germanfrelo.dev</span>.
+		</p>
 	</address>
 </div>
diff --git a/src/index.html b/src/index.html
@@ -1,6 +1,6 @@
 ---
 title: ""
-description: "Sitio web personal de Germán Freixinós, desarrollador web front-end."
+description: "Home page of Germán Freixinós López, a front-end web developer."
 layout: "layouts/base.html"
 ---
 
@@ -12,28 +12,25 @@
 			<img
 				class="avatar"
 				src="/assets/images/german-freixinos.jpg"
-				alt="Germán Freixinós"
+				alt="Germán Freixinós López"
 				width="1024"
 				height="1024"
 			/>
 		</picture>
 	</div>
 
-	<h1>Germán Freixinós</h1>
+	<h1>Germán Freixinós López</h1>
 
+	<p><strong>Front&#8209;end Web Developer</strong></p>
 	<p>
-		<strong>Junior Front&#8209;end Developer</strong> en
-		<a href="https://www.vinissimus.com" rel="external noopener">Vinissimus</a>.
+		I'm passionate about web technologies, specially
+		<strong>CSS, UI and Design Systems</strong>.
 	</p>
 	<p>
-		Me apasionan las tecnologías web y en especial el diseño web (CSS, UI y UX).
-	</p>
-
-	<p>
-		Puedes ver
-		<a href="/portfolio/"><strong>mi portfolio</strong></a
-		>, saber más <a href="/about/"><strong>sobre mí</strong></a> y
-		<a href="/about#contact"><strong>contactarme</strong></a
+		You can see
+		<a href="/portfolio/"><strong>my portfolio</strong></a
+		>, know more <a href="/about/"><strong>about me</strong></a> and
+		<a href="/about#contact"><strong>contact me</strong></a
 		>.
 	</p>
 </div>