feat: added curriculum page and enabled versioning - 0.1.0

package.json

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

src/components/NavBar.vue

@@ -1,7 +1,15 @@
 <script setup lang="ts">
 import { useTheme } from 'vuetify'
+import { useI18n } from 'vue-i18n'
 
 const theme = useTheme()
+const { locale } = useI18n()
+
+const toggleLanguage = () => {
+  const newLocale = locale.value === 'en' ? 'pt' : 'en'
+  locale.value = newLocale
+  localStorage.setItem('locale', newLocale)
+}
 </script>
 
 <template>
@@ -12,16 +20,12 @@ const theme = useTheme()
       >
       <div class="d-flex flex-grow-1 align-center flex-wrap justify-center justify-md-end">
         <v-btn to="/" size="small" class="mx-1"> {{ $t('nav.home') }} </v-btn>
-        <v-btn to="/about" size="small" class="mx-1"> {{ $t('nav.about') }} </v-btn>
+        <v-btn to="/curriculum" size="small" class="mx-1"> {{ $t('nav.curriculum') }} </v-btn>
         <v-btn to="/projects" size="small" class="mx-1"> {{ $t('nav.projects') }} </v-btn>
-        <v-btn
-          variant="outlined"
-          size="small"
-          class="mx-1"
-          @click="$i18n.locale = $i18n.locale === 'en-US' ? 'pt-BR' : 'en-US'"
-        >
+        <v-btn to="/about" size="small" class="mx-1"> {{ $t('nav.about') }} </v-btn>
+        <v-btn variant="outlined" size="small" class="mx-1" @click="toggleLanguage">
           <span class="d-none d-sm-inline">
-            {{ $i18n.locale === 'en-US' ? 'PT-BR' : 'EN-US' }}
+            {{ locale === 'en' ? 'PT-BR' : 'EN-US' }}
           </span>
           <v-icon>mdi-translate</v-icon>
         </v-btn>

src/components/PageFooter.vue

@@ -1,9 +1,13 @@
+<script setup lang="ts">
+import { version } from '../../package.json'
+</script>
+
 <template>
   <v-footer
     class="d-flex align-center justify-center flex-wrap text-center mx-auto px-2 px-sm-4 py-3"
   >
-    <span class="text-caption text-sm-body-2"
-      >&copy; Reverendyz {{ new Date().getFullYear() }}</span
-    >
+    <span class="text-caption text-sm-body-2">
+      &copy; Reverendyz {{ new Date().getFullYear() }} | {{ version }}
+    </span>
   </v-footer>
 </template>

src/components/ProjectsCard.vue

@@ -31,7 +31,12 @@ const props = defineProps<{
     <v-card-subtitle> {{ props.subtitle }} </v-card-subtitle>
 
     <v-card-actions>
-      <v-btn color="orange-lighten-2" :text="$t('projects.button.explore')"></v-btn>
+      <v-btn
+        color="orange-lighten-2"
+        @click="show = !show"
+        :ripple="false"
+        :text="$t('projects.button.explore')"
+      ></v-btn>
 
       <v-spacer></v-spacer>
 

src/i18n.ts

@@ -2,8 +2,11 @@ import { createI18n } from 'vue-i18n'
 import enUS from '@/locales/en-US.json'
 import ptBR from '@/locales/pt-BR.json'
 
+// Get saved locale from localStorage or default to 'pt'
+const savedLocale = localStorage.getItem('locale') || 'pt'
+
 export const i18n = createI18n({
-  locale: 'pt',
+  locale: savedLocale,
   legacy: false,
   fallbackLocale: 'en',
   messages: {

src/locales/en-US.json

@@ -13,7 +13,8 @@
     "home": "Home",
     "about": "About",
     "projects": "Projects",
-    "theme": "Theme"
+    "theme": "Theme",
+    "curriculum": "Curriculum"
   },
   "projects": {
     "title": "My Projects",
@@ -63,5 +64,70 @@
       "Bachelor's Degree in Information Systems - FESPPR (2021)",
       "Postgraduate in Cybersecurity - PUCPR (2025)"
     ]
+  },
+  "curriculum": {
+    "title": "Professional Experience",
+    "subtitle": "My career journey in DevOps and IT",
+    "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"
+        ]
+      },
+      "landis": {
+        "position": "Sr DevOps Engineer",
+        "description": "Leading DevOps initiatives and infrastructure management for enterprise solutions.",
+        "highlights": [
+          "Deploy standard environments containing GCP resources as Kubernetes, instances and storage",
+          "Maintain GitLab pipelines, improving execution time and business logic",
+          "Developed automation scripts with Bash, Python, and PowerShell to achieve reliable configuration",
+          "Spread DevOps culture throughout the development team"
+        ]
+      },
+      "freelancer": {
+        "position": "DevOps Consultant",
+        "description": "Providing DevOps consulting services for various clients.",
+        "highlights": [
+          "Responsible for maintaining, deploying, and automating processes",
+          "Moved applications from private providers to Azure, improving dev team performance with pipelines, automation scripts, and architecture design utilizing Kubernetes and CDN"
+        ]
+      },
+      "trimble": {
+        "position": "DevOps Engineer",
+        "description": "Building and maintaining platform infrastructure to support development teams.",
+        "highlights": [
+          "Maintained pipelines, infrastructure, and built a platform team to help developers thrive",
+          "Deployed infrastructure using Terraform and Terragrunt",
+          "Worked with all main cloud providers to deliver the best experience for the development team"
+        ]
+      },
+      "arauco2": {
+        "position": "Support Analyst",
+        "description": "Network administration and infrastructure management.",
+        "highlights": [
+          "Network administrator dealing with firewall rules, network management, Wi-Fi improvement and placement projects",
+          "Major network configurations related to Azure servers, preparing and segmenting Azure networking for VPN connections"
+        ]
+      },
+      "arauco1": {
+        "position": "Administrative Assistant",
+        "description": "Network and telephony administration.",
+        "highlights": [
+          "Improved and managed telephony and network solutions",
+          "Managed provider invoices and uploaded information to SAP"
+        ]
+      },
+      "intern": {
+        "position": "Intern",
+        "description": "IT support and device management.",
+        "highlights": [
+          "Managed and fixed computers and devices. Participated actively in a project to update weighing scale software"
+        ]
+      }
+    }
   }
 }

src/locales/pt-BR.json

@@ -63,5 +63,70 @@
       "Bacharelado em Sistemas de Informação - FESPPR (2021)",
       "Pós-graduação em Cibersegurança - PUCPR (2025)"
     ]
+  },
+  "curriculum": {
+    "title": "Experiência Profissional",
+    "subtitle": "Minha jornada de carreira em DevOps e TI",
+    "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"
+        ]
+      },
+      "landis": {
+        "position": "Engenheiro DevOps Sênior",
+        "description": "Liderando iniciativas DevOps e gerenciamento de infraestrutura para soluções empresariais.",
+        "highlights": [
+          "Implantação de ambientes padrão contendo recursos GCP como Kubernetes, instâncias e armazenamento",
+          "Manutenção de pipelines GitLab, melhorando tempo de execução e lógica de negócios",
+          "Desenvolvimento de scripts de automação com Bash, Python e PowerShell para alcançar configuração confiável",
+          "Disseminação da cultura DevOps em toda a equipe de desenvolvimento"
+        ]
+      },
+      "freelancer": {
+        "position": "Consultor DevOps",
+        "description": "Fornecendo serviços de consultoria DevOps para diversos clientes.",
+        "highlights": [
+          "Responsável por manter, implantar e automatizar processos",
+          "Migração de aplicações de provedores privados para Azure, melhorando o desempenho da equipe de desenvolvimento com pipelines, scripts de automação e design de arquitetura utilizando Kubernetes e CDN"
+        ]
+      },
+      "trimble": {
+        "position": "Engenheiro DevOps",
+        "description": "Construindo e mantendo infraestrutura de plataforma para apoiar equipes de desenvolvimento.",
+        "highlights": [
+          "Manutenção de pipelines, infraestrutura e construção de uma equipe de plataforma para ajudar desenvolvedores a prosperarem",
+          "Implantação de infraestrutura usando Terraform e Terragrunt",
+          "Trabalho com todos os principais provedores de nuvem para entregar a melhor experiência para a equipe de desenvolvimento"
+        ]
+      },
+      "arauco2": {
+        "position": "Analista de Suporte",
+        "description": "Administração de redes e gerenciamento de infraestrutura.",
+        "highlights": [
+          "Administrador de rede lidando com regras de firewall, gerenciamento de rede, projetos de melhoria e posicionamento de Wi-Fi",
+          "Configurações de rede importantes relacionadas a servidores Azure, preparando e segmentando redes Azure para conexões VPN"
+        ]
+      },
+      "arauco1": {
+        "position": "Assistente Administrativo",
+        "description": "Administração de redes e telefonia.",
+        "highlights": [
+          "Melhoria e gerenciamento de soluções de telefonia e rede",
+          "Gerenciamento de faturas de provedores e carregamento de informações no SAP"
+        ]
+      },
+      "intern": {
+        "position": "Estagiário",
+        "description": "Suporte de TI e gerenciamento de dispositivos.",
+        "highlights": [
+          "Gerenciamento e reparo de computadores e dispositivos. Participação ativa em projeto de atualização de software de balanças"
+        ]
+      }
+    }
   }
 }

src/router/index.ts

@@ -1,6 +1,4 @@
-import AboutView from '@/views/AboutView.vue'
 import HomeView from '@/views/HomeView.vue'
-import ProjectsView from '@/views/ProjectsView.vue'
 import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
@@ -13,14 +11,19 @@ const router = createRouter({
     },
     {
       path: '/about',
-      component: AboutView,
+      component: () => import('@/views/AboutView.vue'),
       name: 'About',
     },
     {
       path: '/projects',
-      component: ProjectsView,
+      component: () => import('@/views/ProjectsView.vue'),
       name: 'Projects',
     },
+    {
+      path: '/curriculum',
+      component: () => import('@/views/CurriculumView.vue'),
+      name: 'Curriculum',
+    },
   ],
 })
 

src/views/CurriculumView.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t, tm } = useI18n()
+
+const experienceData = [
+  { key: 'landis', period: 'Oct. 2024 – Current', company: 'Landis+Gyr' },
+  { key: 'freelancer', period: 'Oct. 2022 – Current', company: 'Freelancer' },
+  { 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' },
+  { key: 'intern', period: '2015 – 2017', company: 'Arauco do Brazil' },
+]
+
+const experienceItems = computed(() =>
+  experienceData.map((exp) => ({
+    period: exp.period,
+    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[],
+  })),
+)
+</script>
+
+<template>
+  <v-container class="my-5">
+    <v-row>
+      <v-col cols="12" class="text-center mb-4">
+        <h1>{{ $t('curriculum.title') }}</h1>
+        <p class="text-h6 text-medium-emphasis">{{ $t('curriculum.subtitle') }}</p>
+      </v-col>
+      <v-col cols="12">
+        <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'"
+            size="small"
+          >
+            <template v-slot:opposite>
+              <div class="text-h6 font-weight-bold" :class="index === 0 ? 'text-primary' : ''">
+                {{ item.period }}
+              </div>
+            </template>
+
+            <v-card :elevation="index === 0 ? 8 : 2" :class="index === 0 ? 'border-primary' : ''">
+              <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">
+                  {{ $t('curriculum.current') }}
+                </v-chip>
+              </v-card-title>
+              <v-card-subtitle class="text-h6 mt-1">
+                {{ item.company }}
+              </v-card-subtitle>
+              <v-card-text>
+                <p class="mb-3">{{ item.description }}</p>
+                <v-list density="compact" class="bg-transparent">
+                  <v-list-item
+                    v-for="(highlight, hIndex) in item.highlights"
+                    :key="hIndex"
+                    class="px-0"
+                  >
+                    <template v-slot:prepend>
+                      <v-icon color="primary" size="small">mdi-check-circle</v-icon>
+                    </template>
+                    <v-list-item-title class="text-wrap">{{ highlight }}</v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-card-text>
+            </v-card>
+          </v-timeline-item>
+        </v-timeline>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped>
+.custom-timeline {
+  margin-left: 0;
+}
+
+.border-primary {
+  border: 2px solid rgb(var(--v-theme-primary));
+}
+</style>