115 lines
4.3 KiB
Vue
115 lines
4.3 KiB
Vue
<template>
|
|
<section class="text-white mt-18" id="about">
|
|
<div class="absolute z-0 top-[93rem] inset-x-0 h-64 flex items-start">
|
|
<div
|
|
class="h-24 w-64 bg-gradient-to-br from-primary via-secondary blur-2xl to-[#570cac] opacity-20"
|
|
></div>
|
|
</div>
|
|
<div
|
|
class="md:grid md:grid-cols-2 gap-8 items-center py-8 px-4 xl:gap-16 sm:py-16 xl:px-16 z-1"
|
|
>
|
|
<div data-aos="flip-right">
|
|
<h2 class="text-4xl font-bold text-white text-left mb-8">
|
|
My Education
|
|
</h2>
|
|
<div class="space-y-8 py-8">
|
|
<div
|
|
v-for="el in education"
|
|
:key="el.id"
|
|
class="flex items-center md:w-[80%] w-full rounded-xl bg-gray-900 shadow-lg border border-[#1f1641]"
|
|
>
|
|
<div class="w-1/4 items-center justify-center flex">
|
|
<img
|
|
src="https://img.icons8.com/ios-glyphs/60/ffffff/graduation-cap--v1.png"
|
|
alt="graduation-cap--v1"
|
|
/>
|
|
</div>
|
|
<div class="w-3/4 pl-4 py-2">
|
|
<h3
|
|
class="text-2xl font-semibold uppercase text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary lg:text-xl"
|
|
>
|
|
{{ el.institution }}
|
|
</h3>
|
|
<p class="text-white">{{ el.course }}</p>
|
|
<p class="text-gray-400">{{ el.year }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mt-4 md:mt-0 text-left flex flex-col z-10 h-full"
|
|
data-aos="flip-right"
|
|
>
|
|
<h2 class="text-4xl font-bold text-white md:text-center text-left mb-4">
|
|
More
|
|
<span
|
|
class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary"
|
|
>About</span
|
|
>
|
|
Me
|
|
</h2>
|
|
<p class="text-base lg:text-lg mt-8 py-8 text-justify">
|
|
I am a Software Engineering student from Portugal with 4+ years of
|
|
experience from my internships and Self Learning + Personal Projects.
|
|
I am passionate about technology and always eager to learn more. I am
|
|
currently pursuing my Bachelor's on Software Engineering after having
|
|
completed a CTeSP in programming, where I gained a solid foundation in
|
|
C, .NET, PHP, Java, and MySQL. In my free time I've taken a few online
|
|
courses on Unity 3D, Swift/SwiftUI, Cypress, Git, React, Golang. I've
|
|
also had the pleasure to be a QA/QC Intern at VOID Software in Leiria
|
|
for five months. There, I contributed to the testing and quality
|
|
assurance of several projects, using Cypress and Cucumber to automate
|
|
and streamline the testing process and Git to manage the source code
|
|
and collaborate with the development team. I am always looking for new
|
|
challenges and opportunities to grow as a developer.
|
|
</p>
|
|
<div class="grid grid-cols-3 gap-4 max-w-lg pt-8">
|
|
<div
|
|
class="text-center rounded-xl bg-gray-900 shadow-lg border border-[#1f1641] p-3"
|
|
>
|
|
<h3 class="text-white font-bold text-xl sm:text-2xl lg:text-3xl">
|
|
+200
|
|
</h3>
|
|
<p class="text-sm sm:text-base text-gray-300">Happy Clients</p>
|
|
</div>
|
|
<div
|
|
class="text-center rounded-xl bg-gray-900 shadow-lg border border-[#1f1641] p-3"
|
|
>
|
|
<h3 class="text-white font-bold text-xl sm:text-2xl lg:text-3xl">
|
|
+4
|
|
</h3>
|
|
<p class="text-sm sm:text-base text-gray-300">Years Experience</p>
|
|
</div>
|
|
<div
|
|
class="text-center rounded-xl bg-gray-900 shadow-lg border border-[#1f1641] p-3"
|
|
>
|
|
<h3 class="text-white font-bold text-xl sm:text-2xl lg:text-3xl">
|
|
+300
|
|
</h3>
|
|
<p class="text-sm sm:text-base text-gray-300">Projects</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
const education = ref([
|
|
{
|
|
id: 1,
|
|
course: "CTeSP in Programing and IT",
|
|
institution: "Polytechnic of Leiria",
|
|
year: "2023",
|
|
},
|
|
{
|
|
id: 2,
|
|
course: "Bachelor's Degree in Software Engineering",
|
|
institution: "Polytechnic of Leiria",
|
|
year: "2026 (Expected)",
|
|
},
|
|
]);
|
|
</script>
|