Styling and MVP content

.vitepress/config.mts

@@ -1,4 +1,5 @@
-import { DefaultTheme, defineConfig } from 'vitepress';
+import { createContentLoader, DefaultTheme, defineConfig } from 'vitepress';
+import { fromContentDataToBlogPost } from '../utils.mts';
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -37,10 +38,6 @@ export default defineConfig({
       { text: 'Resume', link: '/curriculum' },
     ],
 
-    sidebar: {
-      '/posts': postsSideBar(),
-    },
-
     socialLinks: [
       { icon: 'github', link: 'https://github.com/rodolphocastro' },
       {
@@ -55,12 +52,3 @@ export default defineConfig({
     },
   },
 });
-
-function postsSideBar(): DefaultTheme.SidebarItem[] {
-  return [
-    {
-      text: '1 - Why',
-      link: 'posts/001-why.md',
-    },
-  ];
-}

.vitepress/theme/ArticleCard.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="card" @click="redirectToPost">
+    <a>{{ post.title }}</a>
+    <p>{{ new Date(post.postDate).toLocaleDateString() }}</p>
+    <p>{{ post.author }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    post: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    redirectToPost() {
+      window.location.href = this.post.url;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.card {
+  border: 1px solid #ccc;
+  padding: 10px;
+  cursor: pointer;
+}
+
+.card a {
+  font-size: 18px;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+.card p {
+  font-size: 14px;
+  margin-bottom: 5px;
+}
+</style>

.vitepress/theme/ArticleList.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="article-list">
+    <div class="row" v-for="row in rows" :key="row">
+      <div class="col" v-for="post in row" :key="post.id">
+        <ArticleCard :post="post" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ArticleCard from './ArticleCard.vue';
+
+export default {
+  name: 'ArticleList',
+  components: {
+    ArticleCard,
+  },
+  props: {
+    posts: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    rows() {
+      const sortedPosts = this.posts.sort((a, b) => b.date - a.date);
+      const rows = [];
+      let currentRow = [];
+      for (let i = 0; i < sortedPosts.length; i++) {
+        currentRow.push(sortedPosts[i]);
+        if (currentRow.length === 2 || i === sortedPosts.length - 1) {
+          rows.push(currentRow);
+          currentRow = [];
+        }
+      }
+      return rows;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -10px;
+}
+
+.col {
+  flex: 1 0 50%;
+  padding: 10px;
+}
+</style>

.vitepress/theme/style.css

@@ -94,13 +94,13 @@
   --vp-home-hero-name-color: transparent;
   --vp-home-hero-name-background: -webkit-linear-gradient(
     120deg,
-    #bd34fe 30%,
+    #006eff 30%,
     #41d1ff
   );
 
   --vp-home-hero-image-background-image: linear-gradient(
     -45deg,
-    #bd34fe 50%,
+    #00eeff 50%,
     #47caff 50%
   );
   --vp-home-hero-image-filter: blur(44px);

posts/001-why.md

@@ -1,6 +1,9 @@
 ---
+date: 2024-09-17
 title: 'Why have a static blog?'
 description: 'my thoughts on building my own blog from scratch'
+author: Rodolpho Alves
+published: true
 lang: en
 ---
 
@@ -15,3 +18,26 @@ So, as a small PTO project, I have decided to give it a go in rewriting this int
 ## How
 
 After some research (on Google and ChatGPT both) I decided to either use `astro` or `vitepress` for this project but I ended up picking `vitepress` due to its flexibility and given that I already used `astro` on [my gravel cycling's website](https://github.com/rodolphocastro/br.com.gravel-alves) and already ran into some hiccups when trying to make things a bit more 'seamless' (such as having a simple modal) to provide users a more pleasant experience.
+
+### The journey to create this website
+
+So first things first I created a high-level plan of things I needed in order to have the bare minimum of this working:
+
+- [ ] a way to create content using markdown
+- [ ] a way to have such content listed programmatically
+- [ ] a way to support content being both in portuguese and english
+- [ ] a way to have this website automatically deployed to my github pages
+
+After I picked `vitepress` as the tool I quickly went to its [docs](https://vitepress.dev/guide/what-is-vitepress) and [source code](https://github.com/vuejs/vitepress/tree/main/docs) to understand the mechanics of vitepress and what constraints were imposed as well as which APIs I had available to play with.
+
+I quickly understood how the i18n built-in support worked (and its quirks with the default language, a bit of a bummer) and went straight ahead to lay down the foundation of this website: replacing the default index with something more personal and that could take me from a home page over to my curriculum. Why the curriculum? Because it didn't require me to learn how to deal with the content loading API just yet and gave me time to play around the settings on the default theme!
+
+With the curriculum out of the way I decided it was time to set up some guardrails so I quickly googled up and learned how to use the latest (at time of writing) ESLint 9.x and Prettier, this wasn't as smooth as I expected since my last experience with ESLint was pretty outdated but after understanding the flat config things got to an acceptable point.
+
+Finally I went ahead and began tapping into the more advanced stuff, looking at the official VueJS blog to see samples of how the content loading api worked and how I could use it to support posting in both pt-br and en-us without having to manually keep two different sidebars. This went smooth, after learning the difference between `.ts` and `.mts`, and I then turned my focus on using GitHub Copilot to help me scaffold two Vue components: one to list all the Articles and one to act as a Card itself.
+
+### Closing remarks
+
+Yes this was a bit over-engineered but not as much as this site's previous iteration! Looking at the code footprint this is way more straightforward and maintainable for a one-person project while still providing plenty of room for growth. One day I might want to install TailwindCss to make this a bit prettier but for now the default Vitepress theme suffices.
+
+Albeit it feeling odd to use a "documentation" framework to built a site that contains articles and my resume the framework holds up surprisingly well, is quite quick to compile and deploy and doesn't lack documentation!

posts/index.md

@@ -1,6 +1,16 @@
 ---
 title: Posts
 description: Index for all posts
+published: false
 ---
 
-Pick a post from the sidebar and let's get into it!
+<script setup>
+    import { data as blogPosts } from "./posts.data.mts"
+    import ArticleList from "../.vitepress/theme/ArticleList.vue"
+</script>
+
+## All posts
+
+There are {{ blogPosts.length }} posts, pick one from the cards below.
+
+<ArticleList :posts="blogPosts" />

posts/posts.data.mts

@@ -0,0 +1,9 @@
+import { createContentLoader } from 'vitepress';
+import { fromContentDataToBlogPost } from '../utils.mts';
+
+export default createContentLoader('posts/*.md', {
+  excerpt: true,
+  transform(data) {
+    return fromContentDataToBlogPost(data);
+  },
+});

pt/curriculum/index.md

@@ -0,0 +1,104 @@
+---
+title: 'Meu currículo'
+description: 'meu currículo profissional'
+lang: pt
+lastUpdated: true
+---
+
+## Sobre
+
+Tenho mais de 10 anos de experiência em TI, tendo passado pela jornada de Engenheiro de Software, Líder Técnico, Arquiteto de Soluções e, atualmente, sou Gerente de Engenharia, onde me concentro em resolver problemas por meio de tecnologia e pessoas.
+
+Há uma ideia equivocada de que pessoas de TI tendem a ser introspectivas e, às vezes, um pouco menos empáticas (quem nunca ouviu uma piada sobre ser "culpa do usuário", certo?). No entanto, minha experiência me mostra uma história diferente: à medida que aplicamos boas práticas de liderança – motivando, engajando e promovendo melhorias contínuas nos processos e nas pessoas – profissionais de TI realmente se destacam e fazem uma grande diferença ao resolver problemas dos nossos usuários e entregar valor não apenas aos clientes, mas também promovendo o desenvolvimento de suas próprias carreiras. Pessoas empoderadas e engajadas movem montanhas, mesmo que seja um pequeno incremento de cada vez!
+
+Como líder, garanto que minhas equipes e projetos estejam conectados às oportunidades que oferecem o maior valor possível aos nossos usuários, sendo ágeis e transparentes em todas as demandas e áreas de uma organização. Asseguro que estamos executando e irradiando nossas estratégias de longo prazo em incrementos menores, quinzenais e trimestrais, além de aperfeiçoar nossas equipes por meio de qualificação formal e informal.
+
+Minhas principais habilidades são: uma visão completa de projeto, equilibrando Arquitetura de Soluções (mobile, web e backend) com Produto (backlog, priorização, roadmap e visão), utilizando dados como suporte para a tomada de decisões (Analytics e Dashboards construídos em diferentes ferramentas e stacks) e executando estratégias para garantir a qualidade das nossas soluções (focando na estratégia correta, processo e execução de testes automatizados). Busco e promovo a melhoria contínua das equipes sendo um Líder Ágil (promovendo um ambiente seguro para o Scrum e 1:1s focadas no desenvolvimento de carreira e oportunidades de crescimento dentro dos nossos produtos) e a melhoria contínua dos processos e da organização, tanto para Produto quanto para Engenharia (Scaled Agile, Planejamento Trimestral e de Sprints, OKRs, Priorização e patrocínio de iniciativas, participação em Chapters e Guilds).
+
+## Educação
+
+### Bacharel em Sistemas de Informação - Universidade Tecnológica Federal do Paraná
+
+Cursado entre 2012 e 2019, este curso de 4 anos proporcionou conhecimento profundo em desenvolvimento de sistemas, administração de redes e gerenciamento de banco de dados, além de expertise no design e manutenção de sites, plataformas de e-commerce e tecnologias móveis.
+
+Embora o curso tenha sido prorrogado devido a questões burocráticas relacionadas às leis de estágio no Brasil, a experiência ofereceu insights valiosos sobre como lidar com desafios do mundo real enquanto desenvolvia expertise técnica. Este período estendido permitiu uma compreensão mais abrangente tanto dos aspectos acadêmicos quanto práticos do campo.
+
+O programa também incluiu treinamento em segurança de TI, planejamento de recursos e liderança de equipe. Além disso, envolveu a prestação de serviços de consultoria para iniciativas de pesquisa e desenvolvimento, possibilitando a aplicação de soluções estratégicas para atender às necessidades organizacionais.
+
+### Ensino Médio - Centro Federal de Educação Tecnológica de São Paulo (CEFET/SP)
+
+De 2008 a 2011, frequentei o ensino médio em uma escola federal muito respeitada na cidade de Cubatão. Além do currículo padrão do ensino médio, ao longo desses 3 anos, participei de aulas opcionais de Desenvolvimento de Software (utilizando a linguagem C).
+
+## Experiência Profissional
+
+### Trimble Transportation
+
+Atuo como Gerente de Engenharia, liderando squads ágeis compostos por Engenheiros de Software e Engenheiros de Teste de Software, alinhando expectativas e roadmap com Gerentes de Produto e Stakeholders de Negócio para garantir que as funcionalidades sejam viáveis dentro do roadmap e sugerir elementos inovadores para dores dos clientes presentes no mercado.
+
+Faço coaching de Engenheiros de Software individualmente para alinhar expectativas e apoiar seus planos de desenvolvimento de carreira, desde o nível P1 até o nível P5.
+
+Planejo e aplico novas práticas e processos de Engenharia para garantir que as entregas atendam nossos padrões de qualidade sem comprometer a velocidade de entrega, incluindo a introdução de novas tecnologias, KPIs, bem como processos como Agile Discovery (incluindo Produto e UX) para reduzir o risco de construir uma funcionalidade que possa não gerar receita suficiente para se sustentar.
+
+Desenvolvo, juntamente com Gerentes de Produto e Líderes de UX, roadmap e funcionalidades necessárias para novos produtos, entrar em novos mercados ou atrair mais clientes.
+
+Uso LLMs (como GPT4 e LLAMA2) para me apoiar ao treinar engenheiros ou disseminar informações sobre as práticas que estamos aplicando, além de criar agentes que oferecem suporte a outras áreas de operações (como PX, CX e Suporte), reduzindo o tempo necessário para encontrar uma informação que eles precisavam das squads de engenharia.
+
+- **Fev 2021 - presente**: Gerente de Engenharia M2
+- **Ago 2020 - Fev 2021**: Engenheiro de Software P3
+
+### MPS Informática
+
+- **Maio 2018 - Agosto 2020**: Analista e Arquiteto de Software
+- **Janeiro 2017 - Maio 2018**: Desenvolvedor de Software
+- **Junho 2015 - Dezembro 2016**: Estagiário em Desenvolvimento de Software
+
+### Universidade Tecnológica Federal do Paraná
+
+- **Abril 2013 - Abril 2015**: Bolsista no programa PET-CoCE
+
+## Idiomas
+
+| Idioma                  | Nível         |
+| ----------------------- | ------------- |
+| 🇧🇷 Português Brasileiro | Nativo        |
+| 🇺🇸 Inglês               | Fluente       |
+| 🇪🇸 Espanhol             | Intermediário |
+| 🇫🇷 Francês              | Básico        |
+
+## Certificados
+
+### Coach Certificado em OKR
+
+Emitido por: Expert in the outcome mindset method  
+Emitido em: Dezembro 2021  
+[Certificação](https://lp.workboard.com/rs/047-RAB-974/images/Rodolpho_Alves.pdf?mkt_tok=MDQ3LVJBQi05NzQAAAGBg77NoZtzEQhzGixPG19lg85M5EMQQuxxQqAhUdWCGlPNXQBU8G7jDTm012nTsHX_8liMhzK8lPNwq0GrviTIA-CcThYZfo0LqqmOUp5m)
+
+### Workshop Acelerador de Equipes
+
+Baseado nos papéis de Belbin, liderança situacional e colaboração eficaz em equipe.  
+Emitido por: Trimble Inc  
+Emitido em: Março 2021
+
+### As 6 Práticas Críticas para Liderar uma Equipe
+
+Baseado nas [seis práticas críticas](https://www.franklincovey.com/courses/6-critical-practices/) da FranklinCovey para liderar uma equipe.  
+Emitido por: Trimble Inc  
+Emitido em: Novembro 2020
+
+### Microsoft Certified: Azure Solutions Architect Expert (10/2019)
+
+Emitido por: Microsoft  
+Emitido em: Outubro 2019  
+[Certificação](https://www.credly.com/badges/13879309-a966-434f-87bc-81ec3793d3e2/linked_in_profile)
+
+### Microsoft Certified: Azure Developer Associate (03/2020)
+
+Emitido por: Microsoft  
+Emitido em: Março 2020  
+[Certificação](https://www.credly.com/badges/81c1dfb5-0d6a-415f-8549-8a0ac6a0f957/linked_in_profile)
+
+### Certificação Scrum Fundamentals (01/2020)
+
+Emitido por: SCRUMstudy - Accreditation Body for Scrum and Agile  
+Emitido em: Janeiro 2020  
+ID da Credencial: 756669

pt/posts/001-why.md

@@ -0,0 +1,43 @@
+---
+date: 2024-09-17
+title: 'Pq ter um blog estático?'
+description: 'Minhas reflexões sobre construir meu próprio blog do zero'
+author: Rodolpho Alves
+published: true
+lang: pt
+---
+
+## Por que
+
+Aqui vamos nós de novo! Esta é a segunda vez que tento reescrever meu 'site' pessoal em algo que eu realmente goste.
+
+Um pouco de contexto: até agora, este site foi construído com Vue 2 e acabou sendo um pouco superdimensionado, considerando que ele só exibe algumas informações estáticas.
+
+Então, como um pequeno projeto de PTO, decidi tentar reescrevê-lo para algo mais adequado para conteúdo estático! Isso também servirá como uma oportunidade para eu me reconectar com algumas das minhas habilidades de Engenharia de Software, que ficaram latentes nos últimos anos enquanto foquei mais nos aspectos gerenciais da minha carreira.
+
+## Como
+
+Após algumas pesquisas (no Google e no ChatGPT), decidi usar `astro` ou `vitepress` para este projeto, mas acabei optando por `vitepress` por sua flexibilidade. Já usei `astro` no [meu site de ciclismo gravel](https://github.com/rodolphocastro/br.com.gravel-alves) e enfrentei alguns desafios ao tentar tornar as coisas um pouco mais "fluídas" (como adicionar um modal simples) para proporcionar uma experiência melhor ao usuário.
+
+### A jornada para criar este site
+
+Primeiro de tudo, criei um plano de alto nível sobre o que eu precisaria para ter o mínimo necessário para o site funcionar:
+
+- [ ] uma maneira de criar conteúdo usando markdown
+- [ ] uma forma de listar esse conteúdo programaticamente
+- [ ] suporte para conteúdo em português e inglês
+- [ ] um jeito de implementar o deploy automático do site no GitHub Pages
+
+Após escolher o `vitepress` como ferramenta, fui direto para a [documentação](https://vitepress.dev/guide/what-is-vitepress) e o [código fonte](https://github.com/vuejs/vitepress/tree/main/docs) para entender a mecânica do `vitepress`, as limitações e as APIs disponíveis.
+
+Logo entendi como funcionava o suporte embutido para i18n (com algumas peculiaridades na definição do idioma padrão) e comecei a trabalhar na base do site: substituí o index padrão por algo mais pessoal, que me levasse de uma página inicial até meu currículo. Por que o currículo? Porque isso não exigia que eu aprendesse a lidar com a API de carregamento de conteúdo logo de cara, me dando tempo para ajustar as configurações do tema padrão.
+
+Com o currículo pronto, decidi configurar algumas regras básicas, então pesquisei como usar o ESLint 9.x e Prettier (a versão mais recente no momento). A transição não foi tão suave, já que minha última experiência com ESLint estava desatualizada, mas, após entender a configuração flat, as coisas ficaram aceitáveis.
+
+Por fim, comecei a explorar funcionalidades mais avançadas, consultando o blog oficial do VueJS para ver exemplos de como a API de carregamento de conteúdo funcionava e como poderia usá-la para postar em pt-br e en-us sem precisar manter duas barras laterais separadas. Isso fluiu bem, após entender a diferença entre `.ts` e `.mts`, e então foquei em usar o GitHub Copilot para me ajudar a criar dois componentes Vue: um para listar todos os artigos e outro para atuar como um cartão de exibição.
+
+### Considerações finais
+
+Sim, isso foi um pouco superdimensionado, mas não tanto quanto a versão anterior do site! Observando o código, agora ele é muito mais simples e fácil de manter para um projeto de uma pessoa só, ainda assim oferecendo bastante espaço para crescimento. Um dia, talvez eu instale o TailwindCss para deixá-lo mais bonito, mas, por enquanto, o tema padrão do Vitepress é suficiente.
+
+Embora pareça estranho usar um framework de "documentação" para construir um site que contém artigos e meu currículo, o framework se sustenta surpreendentemente bem, é bastante rápido para compilar e fazer o deploy, e a documentação é bem completa!

pt/posts/index.md

@@ -0,0 +1,18 @@
+---
+title: Posts
+description: Índice para todos os posts
+published: false
+---
+
+<script setup>
+    import { data as blogPosts } from "./posts.data.mts"
+    import ArticleList from "../../.vitepress/theme/ArticleList.vue"
+
+
+</script>
+
+## All posts
+
+Existem {{ blogPosts.length }} posts, escolha um na barra lateral ou nos cards abaixo.
+
+<ArticleList :posts="blogPosts" />

pt/posts/posts.data.mts

@@ -0,0 +1,9 @@
+import { createContentLoader } from 'vitepress';
+import { fromContentDataToBlogPost } from '../../utils.mts';
+
+export default createContentLoader('pt/posts/*.md', {
+  excerpt: true,
+  transform(data) {
+    return fromContentDataToBlogPost(data);
+  },
+});