feat: English version

201flaviosilva · May 6, 2024 · 6c9d699 · 6c9d699
1 parent 4db75f3
commit 6c9d699
Show file tree

Hide file tree

Showing 8 changed files with 225 additions and 9 deletions.
diff --git a/FlavioSilva-EN.pdf b/FlavioSilva-EN.pdf
diff --git a/FlavioSilva-PT.pdf b/FlavioSilva-PT.pdf
diff --git a/FlavioSilva.pdf b/FlavioSilva.pdf
diff --git a/index.html b/index.html
@@ -11,6 +11,9 @@
 </head>
 
 <body>
+	<a href="./indexEN.html" class="language-switch">English</a>
+	<!--  -->
+
 	<div class="container">
 		<img src="./FlavioSticker.png" alt="Sticker" class="sticker">
 
@@ -29,22 +32,23 @@ <h2 class="heading-container"><span class="symbol">.</span><span class="heading"
 					</h2>
 					<p>
 						Sou Front-End/Game developer, com uma forte dedicação e organização.
-						Possuo ampla experiência em diversos projetos, os quais contribuíram para o aumento da minha
+						Possuo experiência em diversos projetos, os quais contribuíram para o aumento da minha
 						proatividade e habilidades
 						de trabalho em equipa. Além disso, mantenho um foco contínuo em melhorar os meus conhecimentos e
 						competências, através
-						de tecnologias de código aberto para a criação de jogos. Estou à procura de novos desafios para
-						expandir e consolidar os meus conhecimentos em programação.
+						de projetos paralelos e a criação de jogos. Estou à procura de novos desafios para
+						expandir e consolidar os meus conhecimentos.
 					</p>
 				</section>
 
-				<div>
+				<div class="social-skills">
 					<section class="social">
 						<h2 class="heading-container">
 							<span class="symbol">.</span><span class="heading">Contactos</span>
 						</h2>
 						<p>
 						<ul>
+							<li>Web: <span class="symbol">201flaviosilva.github.io</span></li>
 							<li>Github: <span class="symbol">201flaviosilva</span></li>
 							<li>Linkedin: <span class="symbol">Flávio Silva</span></li>
 							<li>Tel: <span class="symbol">+351 916 887 198</span></li>
@@ -93,8 +97,7 @@ <h2 class="heading-container">
 								</p>
 								<p class="description">Como professor, ensinei tecnologias de
 									desenvolvimento web e, através de exercícios práticos, preparei alunos para o
-									mercado de
-									trabalho.</p>
+									mercado de trabalho.</p>
 							</li>
 							<li>
 								<p>

diff --git a/indexEN.html b/indexEN.html
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/reset.min.css"
+		integrity="sha256-n81SgUrkQYk/j8F8crIAIXXYC+BvmW55MNdDamZPqJ0=" crossorigin="anonymous">
+	<link rel="stylesheet" href="./style.min.css">
+	<title>Flávio Silva</title>
+</head>
+
+<body>
+	<a href="./index.html" class="language-switch">Portugues</a>
+	<!--  -->
+
+	<div class="container">
+		<img src="./FlavioSticker.png" alt="Sticker" class="sticker">
+
+		<header>
+			<p class="tag-cv-container">
+				<span class="symbol">&lt</span><span class="heading">CV</span><span class="symbol">&gt</span>
+			</p>
+			<p class="name">Flávio Silva</p>
+			<p class="role">Front-End/Game Developer</p>
+		</header>
+
+		<main>
+			<div class="columns">
+				<section class="about-me">
+					<h2 class="heading-container"><span class="symbol">.</span><span class="heading">Biography</span>
+					</h2>
+					<p>
+						I am a Front-End/Game developer, with strong dedication and organization.
+						I have experience in various projects, which have contributed to increasing my
+						proactivity and teamwork skills. Additionally, I maintain a continuous focus on improving my
+						knowledge and
+						skills, through side projects and game creation. I am looking for new challenges to
+						expand and consolidate my knowledge.
+					</p>
+				</section>
+
+				<div class="social-skills">
+					<section class="social">
+						<h2 class="heading-container">
+							<span class="symbol">.</span><span class="heading">Contact</span>
+						</h2>
+						<p>
+						<ul>
+							<li>Web: <span class="symbol">201flaviosilva.github.io</span></li>
+							<li>Github: <span class="symbol">201flaviosilva</span></li>
+							<li>Linkedin: <span class="symbol">Flávio Silva</span></li>
+							<li>Tel: <span class="symbol">+351 916 887 198</span></li>
+							<li>@: <span class="symbol">[email protected]</span></li>
+						</ul>
+						</p>
+					</section>
+
+					<section class="skills">
+						<h2 class="heading-container">
+							<span class="symbol">.</span><span class="heading">Skills</span>
+						</h2>
+						<p>
+							HTML<span class="symbol">;</span>
+							CSS/SCSS<span class="symbol">;</span>
+							Javascript/Typescript<span class="symbol">;</span>
+							React, Redux<span class="symbol">;</span>
+							Jest/RTL/Vitest<span class="symbol">;</span>
+							Canvas API, Phaser<span class="symbol">;</span>
+							Godot, Python<span class="symbol">;</span>
+							Git/Github<span class="symbol">;</span>
+						</p>
+					</section>
+				</div>
+			</div>
+
+			<section class="work-experience">
+				<h2 class="heading-container">
+					<span class="symbol">.</span><span class="heading">Professional Experience</span>
+				</h2>
+				<ul>
+					<li>
+						<p>
+							<span class="title">Mindera</span>
+							-
+							<span class="role">2020/2024</span>
+						</p>
+						<ul>
+							<li>
+								<p>
+									<span class="title">Mindera School</span>
+									-
+									<span class="role">Teaching</span>
+									-
+									<span class="role">2022/2024</span>
+								</p>
+								<p class="description">As a teacher, I taught web development technologies and, through
+									practical exercises, prepared students for the
+									job market.</p>
+							</li>
+							<li>
+								<p>
+									<span class="title">FarFetch/NGG</span>
+									-
+									<span class="role">Front-End</span>
+									-
+									<span class="role">2023/2024</span>
+								</p>
+								<p class="description">I was involved in large-scale projects for brands associated with
+									Farfetch, responsible for the
+									development of features and maintenance, using Kanban methodology.</p>
+							</li>
+							<li>
+								<p>
+									<span class="title">VRAI/Heat</span>
+									-
+									<span class="role">Front-End</span>
+									-
+									<span class="role">2022/2023</span>
+								</p>
+								<p class="description">I took on the responsibility of maintenance and creation of new
+									features, according to client demands, adopting
+									the Sprint system.</p>
+							</li>
+							<li>
+								<p>
+									<span class="title">Mindera Gaming</span>
+									-
+									<span class="role">Game Dev</span>
+									-
+									<span class="role">2020/2022</span>
+								</p>
+								<p class="description">I developed the interface and interactivity for browser games,
+									including a Visual Editor for the internal Game Engine.</p>
+							</li>
+						</ul>
+					</li>
+					<li>
+						<p>
+							<span class="title">PC Recover</span>
+							-
+							<span class="role">Computer Technician</span>
+							-
+							<span class="role">400 Hours</span>
+						</p>
+						<p class="description">I was responsible for formatting, diagnosing, and repairing computer
+							systems.</p>
+					</li>
+				</ul>
+			</section>
+
+			<section class="education">
+				<h2 class="heading-container"><span class="symbol">.</span><span class="heading">Education</span>
+				</h2>
+				<ul>
+					<li>
+						<p>
+							<span class="title">Mindera School - Full Stack</span>
+							-
+							<span class="institution">Mindera</span>
+							-
+							<span class="institution">2019/2020</span>
+						</p>
+						<p class="description">An intensive course in Java, MySQL, HTML, CSS, JavaScript, React, and
+							Soft
+							Skills, which propelled my professional development.</p>
+					</li>
+					<li>
+						<p>
+							<span class="title">Computer Management Technician</span>
+							-
+							<span class="institution">ESAG</span>
+							-
+							<span class="institution">2013/2019</span>
+						</p>
+						<p class="description">In high school, I began my contact with programming and business
+							management,
+							which fostered my passion for technology.</p>
+					</li>
+				</ul>
+			</section>
+		</main>
+
+		<footer>
+			<p class="tag-cv-container">
+				<span class="symbol">&lt/</span><span class="heading">CV</span><span class="symbol">&gt</span>
+			</p>
+		</footer>
+	</div>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
 p,
 span,
 li {
@@ -14,8 +15,17 @@ body {
   background-color: black;
 }
 
+body a.language-switch {
+  position: fixed;
+  top: 0;
+  right: 0;
+  font-family: "VT323", monospace;
+  font-size: 24px;
+  color: red;
+}
+
 body div.container {
-  padding: 0 8px;
+  padding: 0 16px;
   display: flex;
   flex-direction: column;
   position: relative;

diff --git a/style.min.css b/style.min.css
diff --git a/style.scss b/style.scss
@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap"); // Matrix font
 
 $background-color: #2f2c40;
 $txt-heading-color: #f28157;
@@ -20,6 +21,7 @@ p,
 span,
 li {
   font-family: "Source Code Pro", monospace;
+  // font-family: "VT323", monospace; // Matrix font
   font-weight: 500;
   font-size: $space-m;
   color: $txt-main-color;
@@ -30,8 +32,17 @@ body {
   justify-content: center;
   background-color: black;
 
+  a.language-switch {
+    position: fixed;
+    top: 0;
+    right: 0;
+    font-family: "VT323", monospace;
+    font-size: $space-l;
+    color: red;
+  }
+
   div.container {
-    padding: 0 $space-xs;
+    padding: 0 $space-m;
     display: flex;
     flex-direction: column;
     // gap: $space-s;