A modern, multilingual portfolio website showcasing my professional profile, knowledge, and work. Built with Next.js 16 and featuring internationalization support.

• Application
• Technologies
  • Portfolio
  • Blog
• Getting Started
  • Local Development
  • Docker Deployment
• Folder Structure
• Features
• Goals Accomplished

🔗 Portfolio: https://mayra.dev
🔗 Blog: https://blog.mayra.dev

• Next.js v16.0.0 (App Router with Turbopack)
• React v19.2.0
• TypeScript v5
• Tailwind CSS v4
• next-intl v4.4.0 (Internationalization)
• next-themes v0.4.6 (Dark/Light mode)
• react-icons v5.5.0
• Package Manager: pnpm v10.6.5
• Deploy: Vercel

• WordPress latest
• MySQL v8
• Docker Compose (via Coolify)
• Deploy: Self-hosted with Coolify

• Node.js >= 20.9
• pnpm >= 10.6.5

# Install dependencies
pnpm install

# Run development server
pnpm dev

# Build for production
pnpm build

# Start production server
pnpm start

# Run linter
pnpm lint

Open http://localhost:3030 with your browser to see the result.

• Docker
• Docker Compose (optional)

# Build the image
docker build -t portfolio:latest .

# Run the container
docker run -d \
  --name portfolio \
  -p 3030:3030 \
  -e NODE_ENV=production \
  -e PORT=3030 \
  --restart unless-stopped \
  portfolio:latest

# View logs
docker logs -f portfolio

# Stop the container
docker stop portfolio

# Remove the container
docker rm portfolio

# Rebuild the image (no cache)
docker build --no-cache -t portfolio:latest .

# Build and start the container
docker-compose up -d

# View logs
docker-compose logs -f portfolio

# Stop the container
docker-compose down

# Rebuild the image
docker-compose build --no-cache

Note: If you get a network error with Docker Compose, you may need to create the external network first or remove the network configuration from docker-compose.yml.

The application will be available at http://localhost:3030.

The Docker setup uses a multi-stage build for optimal image size:

• Stage 1: Install dependencies with pnpm
• Stage 2: Build the Next.js application
• Stage 3: Create minimal production runtime

The container runs as a non-root user for enhanced security and uses Next.js standalone output mode for efficient deployment.

📦portfolio
┣ 📂app
┃ ┣ 📂[locale]              # Internationalized routes
┃ ┃ ┣ 📜layout.tsx          # Root layout with theme provider
┃ ┃ ┗ 📜page.tsx            # Main page
┃ ┣ 📂components            # React components
┃ ┃ ┣ 📜AboutMe.tsx         # About me section
┃ ┃ ┣ 📜Academic.tsx        # Academic background
┃ ┃ ┣ 📜Banner.tsx          # Hero banner
┃ ┃ ┣ 📜Contact.tsx         # Contact section
┃ ┃ ┣ 📜Experience.tsx      # Work experience
┃ ┃ ┣ 📜Header.tsx          # Navigation header
┃ ┃ ┣ 📜Projects.tsx        # Projects showcase
┃ ┃ ┗ 📜ThemeProvider.tsx   # Theme context provider
┃ ┗ 📜globals.css           # Global styles
┣ 📂i18n                    # Internationalization config
┃ ┣ 📜request.ts
┃ ┗ 📜routing.ts
┣ 📂messages                # Translation files
┃ ┣ 📜en.json               # English translations
┃ ┗ 📜pt.json               # Portuguese translations
┣ 📂public                  # Static assets
┃ ┣ 📜favicon.ico
┃ ┗ 📜...
┣ 📜next.config.ts          # Next.js configuration
┣ 📜tailwind.config.ts      # Tailwind configuration
┣ 📜tsconfig.json           # TypeScript configuration
┗ 📜package.json

• 🌍 Multilingual Support - Portuguese and English versions using next-intl
• 🌓 Dark/Light Mode - Theme switching with system preference detection
• 📱 Fully Responsive - Mobile-first design approach
• ⚡ Performance Optimized - Built with Next.js 16 and Turbopack
• 🎨 Modern UI - Clean design with Tailwind CSS v4
• ♿ SEO Optimized - Proper meta tags and semantic HTML
• 🔄 Server Components - Leveraging React Server Components for better performance

• SEO optimization
• Header with navigation
• Hero banner
• About me section
• Work experience timeline
• Academic background
• Projects showcase
• Contact section
• English version (i18n support)
• Spanish version (i18n support)
• Mobile responsive version
• Dark/Light theme toggle
• Modern tech stack migration (Angular → Next.js)

This project is private and proprietary.

Made with ❤️ by Mayra Amaral