JaegerCaiser · JaegerCaiser · Oct 29, 2025 · Oct 29, 2025 · Oct 29, 2025 · Oct 29, 2025
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -58,28 +58,17 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "22.x"
-          cache: "pnpm"
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
 
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
 
-      - name: Deploy to Vercel (Production)
-        env:
-          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
-          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
-        run: |
-          pnpm vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
-          pnpm vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
-          pnpm vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
 
   # -----------------------------------------------------------------
   # JOB 3: Deploy de Preview
@@ -98,28 +87,43 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "22.x"
-          cache: "pnpm"
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
 
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Get Repo ID
+        if: github.event_name == 'pull_request'
+        run: |
+          REPO_ID=$(curl -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" https://api.github.com/repos/${{ github.repository }} | jq -r .id)
+          echo "REPO_ID=$REPO_ID" >> $GITHUB_ENV
 
-      - name: Deploy to Vercel (Preview)
-        env:
-          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
-          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+      - name: Notify Vercel for PR Comment (if PR)
+        if: github.event_name == 'pull_request'
         run: |
-          pnpm vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
-          pnpm vercel build --token=${{ secrets.VERCEL_TOKEN }}
-          pnpm vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
+          curl -X POST "https://api.vercel.com/v13/deployments" \
+            -H "Authorization: Bearer ${{ secrets.VERCEL_TOKEN }}" \
+            -H "Content-Type: application/json" \
+            -d '{
+              "name": "mrdeveloper",
+              "source": "cli",
+              "gitSource": {
+                "type": "github",
+                "repo": "${{ github.repository }}",
+                "ref": "${{ github.head_ref }}",
+                "sha": "${{ github.sha }}",
+                "repoId": ${{ env.REPO_ID }}
+              }
+            }'
+
+
 
   # -----------------------------------------------------------------
   # JOB 4: Criar Tag de Versão (Sem mudanças)

diff --git a/index.html b/index.html
@@ -1,12 +1,36 @@
 <!doctype html>
-<html lang="en">
+<html lang="pt-BR">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#0a192f" />
-    <meta name="description" content="Full Stack Web Developer - Portfolio" />
+    <title>Matheus Caiser • Desenvolvedor Full Stack</title>
+    <meta
+      name="description"
+      content="Portfólio de Matheus Caiser, desenvolvedor web Full Stack especialista em criar soluções modernas e performáticas com React, Node.js, TypeScript e outras tecnologias de ponta."
+    />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://www.mrdeveloper.com.br/" />
+    <meta property="og:title" content="Matheus Caiser • Desenvolvedor Full Stack" />
+    <meta
+      property="og:description"
+      content="Portfólio de Matheus Caiser, desenvolvedor web Full Stack especialista em criar soluções modernas e performáticas com React, Node.js, TypeScript e outras tecnologias de ponta."
+    />
+    <meta property="og:image" content="https://www.mrdeveloper.com.br/src/logo.svg" />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://www.mrdeveloper.com.br/" />
+    <meta property="twitter:title" content="Matheus Caiser • Desenvolvedor Full Stack" />
+    <meta
+      property="twitter:description"
+      content="Portfólio de Matheus Caiser, desenvolvedor web Full Stack especialista em criar soluções modernas e performáticas com React,Node.js, TypeScript e outras tecnologias de ponta."
+    />
+    <meta property="twitter:image" content="https://www.mrdeveloper.com.br/src/logo.svg" />
+
     <link rel="icon" type="image/svg+xml" href="/src/logo.svg" />
-    <title>Matheus Caiser • Full Stack Developer</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "lucide-react": "^0.548.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-helmet-async": "^2.0.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import "./index.scss";
 import App from './App';
 import reportWebVitals from './reportWebVitals';
@@ -9,7 +10,9 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <HelmetProvider>
+      <App />
+    </HelmetProvider>
   </React.StrictMode>
 );
 

diff --git a/src/sections/About.tsx b/src/sections/About.tsx
@@ -1,22 +1,30 @@
+import { Helmet } from "react-helmet-async";
 import "./About.scss";
 import profileImage from "../assets/profile.png";
 import SkillItem from "../components/SkillItem";
 
 const About: React.FC = () => {
   return (
     <section id="about" className="about" aria-label="About">
+      <Helmet>
+        <title>Sobre Mim • Matheus Caiser</title>
+        <meta
+          name="description"
+          content="Desenvolvedor Full Stack com mais de 13 anos de experiência, especialista em React, React Native, Node.js, Golang, Linux e Docker. Apaixonado por criar soluções inovadoras e pela filosofia de aprendizado contínuo."
+        />
+      </Helmet>
       <h2 className="about__heading section-heading">About</h2>
       <div className="about__content">
         <div className="profile profile__fade-in">
           <div className="profile__picture">
             <img
               src={profileImage}
-              alt="Profile picture"
+              alt="A headshot of Matheus Caiser"
               className="profile__image"
             />
           </div>
           <p className="profile__blurb">
-            Dynamic and seasoned Full Stack Developer with over 8 years of
+            Dynamic and seasoned Full Stack Developer with over 13 years of
             comprehensive experience in web development and software
             engineering. Proficient in an array of modern technologies including
             React, React Native, Node.js, Golang, Linux, and Docker. Known for a

diff --git a/src/sections/Contact.tsx b/src/sections/Contact.tsx
@@ -1,4 +1,5 @@
 import { useState, useCallback, useMemo } from "react";
+import { Helmet } from "react-helmet-async";
 import "./Contact.scss";
 
 const Contact: React.FC = () => {
@@ -109,6 +110,13 @@ const Contact: React.FC = () => {
 
   return (
     <section id="contact" className="contact" aria-label="Contact">
+      <Helmet>
+        <title>Contato • Matheus Caiser</title>
+        <meta
+          name="description"
+          content="Entre em contato com Matheus Caiser para discutir projetos, oportunidades de trabalho ou para tirar dúvidas. Envie uma mensagem através do formulário de contato."
+        />
+      </Helmet>
       <h2 className="contact__heading section-heading">Contact</h2>
       <p className="contact__text">
         Have a question or want to work together? Leave your details and

diff --git a/src/sections/Experience.tsx b/src/sections/Experience.tsx
@@ -1,4 +1,5 @@
 import React, { memo, useMemo } from "react";
+import { Helmet } from "react-helmet-async";
 import "./Experience.scss";
 import { experienceData, ExperienceItem } from "./experienceData";
 
@@ -64,6 +65,13 @@ const Experience: React.FC = memo(() => {
       itemScope
       itemType="https://schema.org/ItemList"
     >
+      <Helmet>
+        <title>Experiência • Matheus Caiser</title>
+        <meta
+          name="description"
+          content="Linha do tempo da carreira de Matheus Caiser, detalhando sua experiência profissional, projetos e tecnologias utilizadas em cada etapa."
+        />
+      </Helmet>
       <h2 className="experience__heading section-heading">Experience</h2>
       <div
         className="experience__timeline"

diff --git a/src/sections/Hero.tsx b/src/sections/Hero.tsx
@@ -1,21 +1,29 @@
 import { ArrowRight, Download } from "lucide-react";
+import { Helmet } from "react-helmet-async";
 import AnimatedBackground from "../components/AnimatedBackground";
 import "./Hero.scss";
 
 const Hero: React.FC = () => {
   return (
     <section id="hero" className="hero" aria-label="Introdução">
+      <Helmet>
+        <title>Matheus Caiser • Desenvolvedor Full Stack</title>
+        <meta
+          name="description"
+          content="Portfólio de Matheus Caiser, desenvolvedor web Full Stack especialista em criar soluções modernas e performáticas com React, Node.js, TypeScript e outras tecnologias de ponta."
+        />
+      </Helmet>
       <AnimatedBackground />
       <div className="hero__content">
         <div className="hero__inner">
-          <div className="hero__title">
-            <div className="hero__line-1">
+          <h1 className="hero__title">
+            <span className="hero__line-1">
               Hello, I&apos;m <span>Matheus</span>.
-            </div>
-            <div className="hero__line-2">
+            </span>
+            <span className="hero__line-2">
               I&apos;m a full stack web developer.
-            </div>
-          </div>
+            </span>
+          </h1>
           <div className="hero__cta-group">
             <a href="#about" className="hero__cta hero__cta--primary">
               View my work

diff --git a/src/sections/Writing.tsx b/src/sections/Writing.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo } from "react";
+import { Helmet } from "react-helmet-async";
 
 type Post = { title: string; url: string; date: string };
 
@@ -19,6 +20,13 @@ const Writing: React.FC = () => {
 
   return (
     <section id="writing" className="section writing" aria-label="Escritos">
+      <Helmet>
+        <title>Blog • Matheus Caiser</title>
+        <meta
+          name="description"
+          content="Artigos e tutoriais sobre desenvolvimento de software, React, TypeScript, Node.js e boas práticas de programação."
+        />
+      </Helmet>
       <h3 className="section__title">Escritos</h3>
       <ul className="writing__list">
         {formattedPosts.map((post) => (