feature: added profile avatar and chips for tech stack

package.json

@@ -1,6 +1,6 @@
 {
   "name": "revz-homepage",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "private": true,
   "type": "module",
   "engines": {
@@ -48,4 +48,4 @@
     "vitest": "^4.0.14",
     "vue-tsc": "^3.1.5"
   }
-}
+}

src/components/ProjectsCard.vue

@@ -12,9 +12,8 @@ const props = defineProps<{
 </script>
 
 <template>
-  <v-card class="mx-auto">
+  <v-card class="mx-auto" max-width="400">
     <v-img height="200px" :src="props.imgSrc" cover></v-img>
-
     <v-card-title>
       <a
         class="text-decoration-none"

src/locales/en-US.json

@@ -67,15 +67,19 @@
   },
   "curriculum": {
     "title": "Professional Experience",
-    "subtitle": "My career journey in DevOps and IT",
+    "subtitle": "My career as DevOps and IT",
+    "summary": "I constantly seek to expand my skills and knowledge in DevSecOps, development and architecture. Spreading the DevOps culture and promoting security practices throughout all stages of the software development lifecycle.",
+    "stack": "Tech Stack",
     "current": "Current",
     "experience": {
       "vwb": {
         "position": "IT Architect",
         "description": "Leading IT architecture initiatives.",
         "highlights": [
           "Developing solution architectures for internal projects and clients",
-          "Collaborating with cross-functional teams to ensure successful implementation of proposed solutions"
+          "Collaborating with cross-functional teams to ensure successful implementation of proposed solutions",
+          "Setting up and managing local Kubernetes Cluster and AWS EKS",
+          "Implementing CI/CD pipelines using GitHub Actions and Terraform for infrastructure automation"
         ]
       },
       "landis": {

src/locales/pt-BR.json

@@ -67,15 +67,19 @@
   },
   "curriculum": {
     "title": "Experiência Profissional",
-    "subtitle": "Minha jornada de carreira em DevOps e TI",
+    "subtitle": "Minha carreira como DevOps e TI",
+    "summary": "Procuro constantemente expandir minhas habilidades e conhecimentos em DevSecOps, desenvolvimento e arquitetura. Espalhando a cultura DevOps e promovendo práticas de segurança em todas as etapas do ciclo de vida do desenvolvimento de software.",
+    "stack": "Stack Tecnológica",
     "current": "Atual",
     "experience": {
       "vwb": {
         "position": "Arquiteto de TI",
         "description": "Liderando iniciativas de arquitetura de TI.",
         "highlights": [
           "Desenvolvimento de arquiteturas de soluções para projetos internos e clientes",
-          "Colaboração com equipes multifuncionais para garantir a implementação bem-sucedida das soluções propostas"
+          "Colaboração com equipes multifuncionais para garantir a implementação bem-sucedida das soluções propostas",
+          "Configuração e administração de Cluster Kubernetes local e AWS EKS",
+          "Implementação de pipelines CI/CD usando GitHub Actions e Terraform para automação de infraestrutura"
         ]
       },
       "landis": {

src/views/CurriculumView.vue

@@ -5,8 +5,9 @@ import { useI18n } from 'vue-i18n'
 const { t, tm } = useI18n()
 
 const experienceData = [
-  { key: 'landis', period: 'Oct. 2024 – Current', company: 'Landis+Gyr' },
+  { key: 'vwb', period: 'Feb. 2026 – Current', company: 'Volkswagen Brazil' },
   { key: 'freelancer', period: 'Oct. 2022 – Current', company: 'Freelancer' },
+  { key: 'landis', period: 'Oct. 2024 – Feb. 2026', company: 'Landis+Gyr' },
   { key: 'trimble', period: 'Jul. 2022 – Sep. 2024', company: 'Trimble Inc.' },
   { key: 'arauco2', period: '2021 – 2022', company: 'Arauco Forest Brazil' },
   { key: 'arauco1', period: '2017 – 2021', company: 'Arauco Forest Brazil' },
@@ -16,39 +17,67 @@ const experienceData = [
 const experienceItems = computed(() =>
   experienceData.map((exp) => ({
     period: exp.period,
+    isCurrent: exp.period.includes('Current'),
     position: t(`curriculum.experience.${exp.key}.position`),
     company: exp.company,
     description: t(`curriculum.experience.${exp.key}.description`),
     highlights: tm(`curriculum.experience.${exp.key}.highlights`) as string[],
   })),
 )
+
+const calculateAge = computed(() => {
+  const birthDate = new Date('1997-06-06')
+  const today = new Date()
+  let age = today.getFullYear() - birthDate.getFullYear()
+  const monthDiff = today.getMonth() - birthDate.getMonth()
+  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+    age--
+  }
+  return age
+})
 </script>
 
 <template>
   <v-container class="my-5">
     <v-row>
-      <v-col cols="12" class="text-center mb-4">
+      <v-col cols="12" md="3" class="text-center text-md-right mb-4">
+        <v-avatar image="profile.jpeg" size="200" />
+      </v-col>
+      <v-col cols="12" md="7" class="text-center text-md-left align-self-center mb-4">
         <h1>{{ $t('curriculum.title') }}</h1>
-        <p class="text-h6 text-medium-emphasis">{{ $t('curriculum.subtitle') }}</p>
+        <p class="text-h6 text-medium-emphasis">
+          Felipe Moreira dos Santos - {{ calculateAge }}y - {{ $t('curriculum.subtitle') }}
+        </p>
+        <p class="text-body-1 mt-3">
+          {{ $t('curriculum.summary') }}
+        </p>
+        <p class="text-caption mt-3">
+          E-MAIL: <a href="mailto:fmsantos1997@hotmail.com"> fmsantos1997@hotmail.com </a>
+        </p>
       </v-col>
-      <v-col cols="12">
+      <v-col cols="9">
         <v-timeline side="end" align="start" class="custom-timeline">
           <v-timeline-item
             v-for="(item, index) in experienceItems"
             :key="index"
-            :dot-color="index === 0 ? 'primary' : 'secondary'"
+            :dot-color="item.isCurrent ? 'primary' : 'secondary'"
             size="small"
           >
             <template v-slot:opposite>
-              <div class="text-h6 font-weight-bold" :class="index === 0 ? 'text-primary' : ''">
+              <div class="text-h6 font-weight-bold" :class="item.isCurrent ? 'text-primary' : ''">
                 {{ item.period }}
               </div>
             </template>
 
-            <v-card :elevation="index === 0 ? 8 : 2" :class="index === 0 ? 'border-primary' : ''">
+            <v-card
+              :elevation="item.isCurrent ? 8 : 2"
+              :class="item.isCurrent ? 'border-primary equal-height-card' : 'equal-height-card'"
+              class="d-flex flex-column"
+              max-width="900"
+            >
               <v-card-title class="d-flex align-center flex-wrap">
                 <span class="text-h5 mr-2">{{ item.position }}</span>
-                <v-chip v-if="index === 0" color="success" size="small" class="ml-2">
+                <v-chip v-if="item.isCurrent" color="success" size="small" class="ml-2">
                   {{ $t('curriculum.current') }}
                 </v-chip>
               </v-card-title>
@@ -74,6 +103,114 @@ const experienceItems = computed(() =>
           </v-timeline-item>
         </v-timeline>
       </v-col>
+      <v-col md="3" sm="12" xs="12" class="text-center align-center mt-8">
+        <h3 class="text-h6 mb-4">{{ $t('curriculum.stack') }}</h3>
+        <div class="d-flex flex-column align-center ga-2">
+          Tools
+          <v-chip prepend-icon="mdi-docker" variant="tonal" size="small" class="tech-chip">
+            Docker
+          </v-chip>
+          <v-chip prepend-icon="mdi-kubernetes" variant="tonal" size="small" class="tech-chip">
+            Kubernetes
+          </v-chip>
+          <v-chip prepend-icon="mdi-kubernetes" variant="tonal" size="small" class="tech-chip">
+            Helm
+          </v-chip>
+          <v-chip prepend-icon="mdi-terraform" variant="tonal" size="small" class="tech-chip">
+            Terraform
+          </v-chip>
+          <v-chip prepend-icon="mdi-ansible" variant="tonal" size="small" class="tech-chip">
+            Ansible
+          </v-chip>
+          <v-chip prepend-icon="mdi-git" variant="tonal" size="small" class="tech-chip">
+            Git
+          </v-chip>
+          <v-chip prepend-icon="mdi-microsoft-azure" variant="tonal" size="small" class="tech-chip">
+            Azure Pipelines
+          </v-chip>
+          <v-chip prepend-icon="mdi-github" variant="tonal" size="small" class="tech-chip">
+            Github Actions
+          </v-chip>
+          <v-chip prepend-icon="mdi-gitlab" variant="tonal" size="small" class="tech-chip">
+            Buildkite
+          </v-chip>
+          <v-chip
+            prepend-icon="mdi-arrow-decision-auto-outline"
+            variant="tonal"
+            size="small"
+            class="tech-chip"
+          >
+            Jenkins
+          </v-chip>
+          <v-chip prepend-icon="mdi-google-cloud" variant="tonal" size="small" class="tech-chip">
+            Google Cloud Platform
+          </v-chip>
+          <v-chip prepend-icon="mdi-microsoft-azure" variant="tonal" size="small" class="tech-chip">
+            Azure
+          </v-chip>
+          <v-chip prepend-icon="mdi-aws" variant="tonal" size="small" class="tech-chip">
+            Amazon Web Services
+          </v-chip>
+          <v-chip prepend-icon="mdi-monitor-eye" variant="tonal" size="small" class="tech-chip">
+            Grafana
+          </v-chip>
+          <v-chip prepend-icon="mdi-apache-kafka" variant="tonal" size="small" class="tech-chip">
+            Kafka
+          </v-chip>
+          <v-chip prepend-icon="mdi-rabbit" variant="tonal" size="small" class="tech-chip">
+            RabbitMQ
+          </v-chip>
+          <v-chip
+            prepend-icon="mdi-arrow-decision-outline"
+            variant="tonal"
+            size="small"
+            class="tech-chip"
+          >
+            NGINX
+          </v-chip>
+          Languages
+          <v-chip prepend-icon="mdi-language-go" variant="tonal" size="small" class="tech-chip">
+            Golang
+          </v-chip>
+          <v-chip prepend-icon="mdi-language-python" variant="tonal" size="small" class="tech-chip">
+            Python
+          </v-chip>
+          <v-chip
+            prepend-icon="mdi-language-typescript"
+            variant="tonal"
+            size="small"
+            class="tech-chip"
+          >
+            TypeScript
+          </v-chip>
+          <v-chip prepend-icon="mdi-language-java" variant="tonal" size="small" class="tech-chip">
+            Java
+          </v-chip>
+          <v-chip prepend-icon="mdi-language-c" variant="tonal" size="small" class="tech-chip">
+            C
+          </v-chip>
+          Scripting
+          <v-chip prepend-icon="mdi-bash" variant="tonal" size="small" class="tech-chip">
+            Bash
+          </v-chip>
+          <v-chip prepend-icon="mdi-language-python" variant="tonal" size="small" class="tech-chip">
+            Python
+          </v-chip>
+          Misc
+          <v-chip prepend-icon="mdi-vuejs" variant="tonal" size="small" class="tech-chip">
+            VueJS
+          </v-chip>
+          <v-chip prepend-icon="mdi-react" variant="tonal" size="small" class="tech-chip">
+            React
+          </v-chip>
+          <v-chip prepend-icon="mdi-language-java" variant="tonal" size="small" class="tech-chip">
+            SpringBoot
+          </v-chip>
+          <v-chip prepend-icon="mdi-material-design" variant="tonal" size="small" class="tech-chip">
+            Material UI
+          </v-chip>
+        </div>
+      </v-col>
     </v-row>
   </v-container>
 </template>
@@ -86,4 +223,8 @@ const experienceItems = computed(() =>
 .border-primary {
   border: 2px solid rgb(var(--v-theme-primary));
 }
+
+.tech-chip {
+  width: 200px;
+}
 </style>

src/views/ProjectsView.vue

@@ -8,17 +8,19 @@ const cards = [
   },
   {
     id: 'dns-c',
-    imgSrc: 'https://avatars.githubusercontent.com/u/48569886?v=4',
+    imgSrc:
+      'https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/C_Programming_Language.svg/500px-C_Programming_Language.svg.png',
     url: 'https://github.com/Reverendyz/dns-c',
   },
   {
     id: 'blockchain-example',
-    imgSrc: 'https://avatars.githubusercontent.com/u/48569886?v=4',
+    imgSrc:
+      'https://bernardmarr.com/img/What%20Is%20Blockchain%20A%20Super%20Simple%20Guide%20Anyone%20Can%20Understand.png',
     url: 'https://github.com/Reverendyz/blockchain-example',
   },
   {
     id: 'adocli',
-    imgSrc: 'https://avatars.githubusercontent.com/u/48569886?v=4',
+    imgSrc: 'https://miro.medium.com/0*2Xt3M12GK4fbPO71.png',
     url: 'https://github.com/Reverendyz/adocli',
   },
 ]
@@ -40,11 +42,13 @@ const cards = [
       <v-col
         v-for="card in cards"
         :key="card.id"
-        cols="6"
-        md="4"
+        lg="4"
+        md="6"
+        sm="12"
+        xl="12"
         class="text-center mb-4 mb-sm-8 px-2 px-sm-4"
       >
-        <ProjectsCard
+        <projects-card
           :title="$t(`projects.cards.${card.id}.title`)"
           :subtitle="$t(`projects.cards.${card.id}.subtitle`)"
           :text="$t(`projects.cards.${card.id}.text`)"