Personal portfolio and blog website built with modern web technologies. Bilingual (English & Portuguese), fully responsive, with a focus on performance and user experience.
- Multiple collections - Projects and Blog posts
- Bilingual (i18n) - English & Portuguese with seamless language switching
- Type-safe markdown - Full TypeScript support for content
- Super fast performance - Static generation with Astro
- Accessible - ARIA labels, semantic HTML, keyboard navigation
- Responsive design - Mobile to desktop layouts
- Mobile hamburger menu - Animated navigation toggle with slide animations
- Mobile responsiveness audit - Grid, padding, and spacing fixes across all breakpoints
- Custom fonts with astro-font - Plus Jakarta Sans for body, JetBrains Mono for code
- SEO-friendly - Proper meta tags and structure
- Light & Dark mode - Theme switcher with persistence
- Search functionality - Real-time post and project search
- Smooth animations - Transitions and fade effects throughout
- Individual post pages - Full blog post viewing with metadata
- Projects showcase - Featured projects on homepage with details
- Full projects listing page - Complete projects grid with search
- About page - Professional profile with experience, education, certifications
- Statistics section - Animated counters for achievements
- Tech stack showcase - Interactive technology grid with icons
- Social links - GitHub, Twitter, Email integration
- Language-aware routing - Automatic locale detection and switching
- Two-column layouts - Modern hero section and about page design
- Post tags system - Categorized blog posts with tag navigation
- Pill-styled components - Professional card designs for content sections
- Create new posts
- Standardize icon sets and styling across components
- Share buttons on blog posts
- astro-robots-txt - Robots.txt generation
- @astrojs/sitemap - Sitemap generation
- @astrojs/rss - RSS feed for posts
- astro-compress - Asset compression
- astro-seo - Enhanced SEO control
- astro-analytics - Analytics integration
- astro-vtbot - view transitions
- astro-breadcrumbs - Breadcrumb navigation
- Core Web Vitals optimization
- View counter for posts
- Search.json for client-side search
- Syntax highlighting improvements
- SEO enhancements
- Code snippet copy button
- Custom 404 page
- Donations/Support page (Ko-fi, Buy Me A Coffee)
- Video content support
- Dynamic OG image generation
- Fuzzy search with FuseJS
- Newsletter integration
- Main Framework - Astro
- Type Checking - TypeScript
- Component Framework - React
- Styling - Tailwind CSS
- Code Formatting - Prettier
- Icons - Astro Icon with Material Symbols & UIm icon sets
- Internationalization - Astro i18n
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewVisit http://localhost:3000 to see your site.
Test across these breakpoints to ensure proper layout and functionality:
- Mobile (xs) - < 640px: Single column layouts, hamburger menu, stacked components
- Small (sm) - 640px+: Mobile menu transitions to desktop, 2-column grids start
- Medium (md) - 768px+: Full desktop layouts, 3-column grids, expanded spacing
- Large (lg) - 1024px+: Maximum content width, enhanced typography
- Extra Large (xl) - 1280px+: Full-width optimizations
- Index: Hero section responsiveness, statistics grid (2x2 → 4x1), tech stack grid
- Posts/Projects: Search functionality on mobile, grid layout transitions
- About: Two-column avatar+bio layout, pill-styled sections on all sizes
- Header: Hamburger menu animation, navigation transitions at sm breakpoint
- Dividers: Centered badges and gradients across all breakpoints
- Chrome DevTools: Responsive Design Mode (
Ctrl+Shift+M) - Test on real devices (phone, tablet) when possible
- Use Firefox responsive mode for additional browser testing
