A modern, animated portfolio website showcasing Matheus Caiser's work as a Full Stack Developer
- ✨ Features
- 🛠️ Tech Stack
- 🚀 Quick Start
- 📦 Available Scripts
- 🚀 CI/CD - GitHub Actions
- 🚀 Recent Improvements
- 🎨 Customization Guide
- 📁 Project Structure
- 🏗️ Architecture
- 🚀 Deployment
- 🐳 Docker
- 📋 Changelog
- 📄 License
- 🙏 Credits
- 🤝 Contributing
- 👨💻 Author
Para garantir a estabilidade do projeto, seguimos um processo rigoroso e bem definido para correções de emergência em produção. Este fluxo de trabalho é a nossa "Regra de Ouro" para lidar com bugs críticos de forma rápida e segura.
➡️ Leia o Guia Completo do Processo de Hotfix
- 🎨 Modern Portfolio Design - Clean, responsive portfolio with dark theme
- ⚡ Animated Background - Canvas-based particle animation system
- 📱 Responsive Design - Mobile-first approach with adaptive layouts
- 🎯 Smooth Scrolling Navigation - Anchor-based navigation with smooth scroll behavior
- 📧 Contact Form - Integrated form with validation and email integration via FormSubmit
- 🏗️ Clean Architecture - Services, hooks, and components layered approach
- 🔧 Type-Safe Development - Full TypeScript implementation with strict typing
- ⚡ Performance Optimized - Vite build system with optimized bundle size
- ♿ Accessibility - Semantic HTML, ARIA labels, and keyboard navigation
- 🎨 SCSS Styling - Centralized design system with variables and animations
- 🚀 CI/CD Integration - GitHub Actions with automated testing and deployment
- React 18.3.1 - UI library with modern hooks and concurrent features
- TypeScript 5.9.3 - Type safety and enhanced developer experience
- SCSS 1.93.2 - Advanced CSS preprocessing with variables and mixins
- Vite 7.2.0 - Fast build tool and development server
- Lucide React 0.552.0 - Beautiful, customizable icons
- React Helmet Async 2.0.5 - Document head management for SEO
- Vercel Analytics 1.5.0 - Privacy-focused web analytics
- ESLint 9.39.1 - Code linting with React and TypeScript rules
- pnpm 10.20.0 - Fast, efficient package manager (via corepack)
- Semantic Release 25.0.1 - Automated versioning and changelog generation
- Vercel CLI 34.2.0 - Deployment and project management
- Node.js: A versão exata está definida no arquivo
.nvmrc. Se você usanvm, apenas rodenvm usena raiz do projeto. - pnpm: Versão
10.20.0ou superior (instalado viacorepack).
- Clone the repository
git clone https://github.com/JaegerCaiser/mrdeveloper.git
cd mrdeveloper- Install dependencies
pnpm install- Start development server
pnpm dev- Open in browser
http://localhost:3000
| Command | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Create production build |
pnpm preview |
Preview production build locally |
pnpm lint |
Lint code with ESLint |
pnpm lint:fix |
Fix linting issues automatically |
pnpm lint:yaml |
Lint YAML files in workflows |
pnpm test:ci |
Run CI tests (placeholder) |
Este projeto utiliza GitHub Actions com infraestrutura completa de CI/CD seguindo o padrão Gitflow, proporcionando deploy automatizado e monitoramento contínuo.
- Trigger: Push na branch
develop - Recursos:
- 🧪 Testes automatizados (
pnpm run test:ci) - 🔍 Linting (
pnpm run lint) - 🏗️ Build de produção (
pnpm run build) - 🚀 Deploy automático para Vercel (ambiente develop)
- 📊 Rastreamento de deployments via GitHub Deployments API
- 📋 Upload de logs de erro em caso de falha
- 🧪 Testes automatizados (
- Trigger: Pull Requests para
main+ Push em branchesrelease/* - Recursos:
- 🧪 Testes e linting
- 🚀 Deploy preview no Vercel (por PR)
- Comentários automáticos nos PRs com links de preview
- 🛡️ Semantic Release: Geração de versões beta automáticas em push para
release/*(quando não há PR aberto). - ⚡ Otimização de Workflow:
- Detecção de Duplicatas: Um job
check-duplicate-runverifica se já existe uma execução para o PR, evitando que o workflow depushrode desnecessariamente. - Status Checks Limpos: Jobs são pulados (
skipped) ao invés de cancelados (cancelled), mantendo os status checks do PR sempre corretos e evitando bloqueios de merge. - Economia de Recursos: Evita o desperdício de Actions minutes com execuções duplicadas.
- Detecção de Duplicatas: Um job
- Trigger: Push na branch
main(após merge derelease/*ouhotfix/*) - Recursos:
- 🧪 Testes completos e linting
- 🚀 Deploy automático para produção no Vercel
- 🏷️ Versionamento automático com tags de release
- 📋 Logs detalhados de erro
- 🔒 Controle rigoroso de qualidade
- Cache Inteligente: Redução de ~25-40% no tempo de execução
- 📦 Cache de dependências pnpm
- 🏗️ Cache de build artifacts (
.vite,node_modules/.cache,.eslintcache) - 🚀 Cache do Vercel CLI
- 🔍 Cache do ESLint
VERCEL_TOKEN=your_vercel_token_here
VERCEL_ORG_ID=your_vercel_org_id_here
VERCEL_PROJECT_ID=your_vercel_project_id_here
- Acesse Vercel Dashboard
- Settings > Tokens → Crie um novo token
- Para Org ID: Execute
vercel org lsno terminal - Para Project ID: Execute
vercel project lsno terminal
- 🏠 Produção: www.mrdeveloper.com.br (deploy automático em push para
main) - 🧪 Desenvolvimento: Deploy automático em push para
develop - 👀 Preview: Deploy automático em PRs (comentários com links)
- 📍 Local: GitHub Repository > Actions
- 📋 Logs: Artefatos de erro disponíveis em caso de falhas (veja Workflows Disponíveis)
- 🚨 Alertas: Notificações automáticas em falhas de CI/CD
# Criar feature branch
git checkout -b feature/nova-funcionalidade
# Desenvolver e commitar
git add .
git commit -m "feat: adiciona nova funcionalidade"
# Push (executa CI automaticamente)
git push origin feature/nova-funcionalidade
# Criar PR para develop (deploy preview automático)
# Após merge, criar PR para main (deploy produção)- #107: A complete overhaul of the CI/CD workflows, focusing on efficiency, clarity, and best practices. This historic PR documents a deep-dive into debugging GitHub Actions, resulting in:
- Path Filtering: Workflows now intelligently skip unnecessary jobs for documentation-only changes.
- Workflow Simplification: Removed redundant actions (
bobheadxi/deployments) in favor of native GitHub Actionsenvironmentfeatures. - Bug Fixes: Resolved multiple subtle bugs related to git history, action versions, and environment variable handling.
- Enhanced Documentation: The PR description itself serves as a detailed log of the lessons learned.
- Problema Resolvido: Slow Vercel builds due to
npx pnpmdownloads (~21s overhead) - Solução: Native pnpm support via Node.js corepack integration
- Implementação: Added
packageManager: "pnpm@10.20.0"field and updatedvercel.jsonwithcorepack pnpmcommands - Resultado: ~55% faster builds (9-13 seconds improvement) with consistent package manager across environments
- Problema Resolvido: ERR_PNPM_BAD_PM_VERSION conflicts between workflow configs and package.json
- Solução: Removed version specifications from
pnpm/action-setup@v4across all workflows - Implementação: Consistent pnpm@10.20.0 usage via packageManager field in all environments
- Resultado: Eliminated version conflicts and improved CI/CD reliability
- Problema Resolvido: Complex manual versioning and changelog management
- Solução: Automated semantic versioning based on conventional commits
- Implementação: Industry-standard semantic-release with GitHub integration
- Resultado: Automatic PATCH/MINOR/MAJOR versioning with generated changelogs
- 2 Core Documentation Files in
.github/directory:WORKFLOW.md- Complete CI/CD documentationcopilot-instructions.md- AI assistant guidelines
- Enhanced Copilot Instructions: Improved GitHub CLI command execution guidelines
- Clean Structure: Removed redundant and outdated documentation files
Header (src/components/Header.tsx)
- Change logo initials (currently "BS")
- Update navigation links
Hero Section (src/sections/Hero.tsx)
<h1 className="hero__title">
Hello, I'm <span>Matheus</span>.
<br />
I'm a full stack web developer.
</h1>About Section (src/sections/About.tsx)
- Replace bio paragraphs with personal description
- Update skills array:
const skills = [
"HTML",
"REACT",
"EXPRESS.JS",
"JAVASCRIPT",
"CSS",
"MONGODB",
"GIT",
"SASS",
"NEXT.JS",
"NODE.JS",
];- Replace
src/assets/profile.pngwith your photo
Experience (src/sections/Experience.tsx)
const items: ExperienceItem[] = [
{
company: "DBC Company (Unicred)",
role: "Front-end Developer",
period: "January 2022 — Present",
description:
"Working as front-end developer building products for Unicred's internet banking cooperative...",
},
// Add other experiences from experienceData.tsx
];Contact (src/sections/Contact.tsx)
- Update social media links in Footer component
- Integrate form service (Formspree, EmailJS, etc.)
- Change copyright name to "MATHEUS CAISER"
Edit src/styles/_variables.scss:
$bg: #0a192f; // Main background
$bg-light: #112240; // Card backgrounds
$text: #8892b0; // Body text
$text-bright: #ccd6f6; // Headings
$accent: #64ffda; // Accent colorUpdate Google Fonts import in src/index.scss and variables in src/styles/_variables.scss.
Customize in src/components/AnimatedBackground.tsx:
const particleCount = 80; // Number of particles
const connectionDistance = 150; // Connection distancesrc/
├── components/
│ ├── AnimatedBackground.tsx # Canvas particle animation system
│ ├── Header.tsx & Header.scss # Fixed navigation header
│ ├── Footer.tsx & Footer.scss # Social links and copyright
│ └── SkillItem.tsx # Reusable skill item component
├── sections/
│ ├── Hero.tsx & Hero.scss # Landing section with animations
│ ├── About.tsx & About.scss # Bio and skills section
│ ├── Experience.tsx & Experience.scss # Work history
│ ├── Contact.tsx & Contact.scss # Contact form (UI only)
│ └── experienceData.tsx # Experience data configuration
├── services/
│ ├── contactService.ts # Contact form business logic & API
│ ├── index.ts # Service exports
│ └── __tests__/ # Service unit tests
├── hooks/
│ ├── useContactForm.ts # Contact form state management
│ └── index.ts # Hook exports
├── styles/
│ ├── _variables.scss # Theme variables and design tokens
│ ├── animations.scss # CSS animations and keyframes
│ └── layout.scss # Main layout and responsive styles
├── utils/
│ └── Particle.ts # Particle animation utilities
├── assets/
│ ├── profile.png # Profile photo
│ ├── logo.svg # Logo assets
│ └── mustache.svg # Icon assets
├── App.tsx & App.scss # Main app component and styles
├── main.tsx # App entry point
├── index.scss # Global styles
└── react-app-env.d.ts # TypeScript declarations
This project follows Clean Architecture principles with clear separation of concerns:
- Business Logic: API calls, data validation, and external integrations
- contactService.ts: Handles contact form submission to FormSubmit API
- Error Handling: Centralized error management and user feedback
- State Management: Custom hooks for component logic
- useContactForm.ts: Manages form state, validation, and submission flow
- Reusability: Logic can be reused across multiple components
- UI Only: Pure presentation components focused on rendering
- Props Interface: Clear data contracts with TypeScript interfaces
- Separation: No business logic, only JSX and styling
- Semantic Release: Automated versioning and changelog generation
- Conventional Commits: Intelligent version bumping based on commit types
- Branch Protection: Status checks integration with automated release handling
- Documentation Suite: Streamlined CI/CD documentation in
.github/directory
- Gitflow: Feature branches → develop → release → main
- Automated Testing: Comprehensive CI/CD with preview and production environments
- Quality Gates: Linting, building, and deployment validation at each stage
pnpm build
vercel --prodpnpm build
netlify deploy --prod --dir=build- Add to
package.json:
"homepage": "https://www.mrdeveloper.com.br/"- Install gh-pages:
pnpm add -D gh-pages- Add scripts:
"predeploy": "pnpm build",
"deploy": "gh-pages -d build"- Deploy:
pnpm deploydocker build -t portfolio .docker run -p 3000:3000 portfoliodocker-compose up- ⚡ Corepack pnpm Integration: ~55% faster builds with native pnpm support via Node.js corepack
- 🔧 CI/CD Optimization: Resolved ERR_PNPM_BAD_PM_VERSION conflicts across all workflows
- 📦 Package Manager: Added
packageManager: "pnpm@10.20.0"field for consistent versioning - 🚀 Vercel Performance: Eliminated npx overhead, reducing build times by 9-13 seconds
- 🛡️ Semantic Release Migration: Automated versioning replacing manual release process
- 📚 Documentation Cleanup: Streamlined documentation (removed 5 outdated files)
- 🌐 Custom Domain Setup: Added homepage field and CNAME file for GitHub Pages custom domain support
- 📖 README Updates: Updated project structure, features, and deployment instructions
- 🚀 Initial release with complete portfolio functionality
- 🎨 Modern design with animated background
- 📧 Contact form with service layer integration
- 🏗️ Clean architecture implementation
- ⚡ Vite build system with TypeScript
MIT License - feel free to use this template for your own portfolio!
- Design inspiration: benscott.dev
- Icons: Lucide React
- Fonts: Google Fonts
Contributions, issues, and feature requests are welcome!
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add: amazing feature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Matheus Caiser
- GitHub: @JaegerCaiser
- Email: matheus.caiser@gmail.com
Made with ❤️ using React + TypeScript + Vite
Portfolio of Matheus Caiser - Full Stack Developer
⭐ If this project helped you, leave a star!
Made with ❤️ and ☕ by Matheus Caiser