🚀 Nergy.space - Personal Portfolio

A modern, responsive portfolio website built with Angular 20, featuring dynamic weather integration, technology showcase, and beautiful Material Design components.

🌐 Live Demo • 📖 Documentation

---

✨ Features

🎨 Modern UI/UX

• Material Design 3 components with beautiful animations
• Responsive design that works on all devices
• Dark/Light theme support with dynamic switching
• Smooth transitions and micro-interactions
• Accessibility-first approach with ARIA labels

🌤️ Dynamic Weather Integration

• Real-time weather data for Utrecht, Netherlands
• 7-day forecast with beautiful weather icons
• Serverless API integration using DigitalOcean Functions
• Automatic updates and error handling

🛠️ Technology Showcase

• Interactive tech cards with hover effects
• Categorized technologies: Professional, Hobby, Tools, Archive
• Direct links to technology documentation
• Sortable views (alphabetical/custom order)
• Professional tech stack including Azure, C#, Angular, Docker
• Hobby projects featuring Deno, Fresh, Vue, Preact

🚀 Performance & DevOps

• Docker containerization with multi-stage builds
• Nginx reverse proxy for optimal performance
• CI/CD pipeline with GitHub Actions
• Code quality with ESLint and Prettier
• TypeScript for type safety
• Standalone components for better tree-shaking

🎯 Developer Experience

• Hot reload during development
• Comprehensive linting and formatting rules
• Modern Angular CLI with latest features
• FontAwesome icons for consistent iconography

---

🛠️ Tech Stack

Frontend Framework

UI Components & Styling

Backend & Database

DevOps & Deployment

Development Tools

---

🚀 Quick Start

Prerequisites

• Node.js 22+
• npm or yarn
• Docker (optional)

Local Development

# Clone the repository
git clone https://github.com/Nergy101/Portfolio.git
cd Portfolio

# Install dependencies
npm install

# Start development server
npm start

# Open http://localhost:4200 in your browser

Docker Deployment

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

# Run the container
docker run -p 4200:80 portfolio:latest

# Or use docker-compose
docker-compose up -d

Available Scripts

Command	Description
npm start	Start development server
npm run build	Build for production
npm run test	Run unit tests
npm run lint	Run ESLint
npm run format	Format code with Prettier
npm run check	Run format and lint checks

---

📁 Project Structure

Portfolio/
├── 📁 src/
│   ├── 📁 app/
│   │   ├── 📁 components/
│   │   │   ├── 📁 dialogs/          # Modal dialogs
│   │   │   ├── 📁 footer/           # Footer component
│   │   │   ├── 📁 header/           # Header component
│   │   │   ├── 📁 landing/          # Main landing page
│   │   │   ├── 📁 menu/             # Navigation menu
│   │   │   ├── 📁 tech-card/        # Technology cards
│   │   │   └── 📁 weather-card/     # Weather widget
│   │   └── 📁 services/             # Angular services
│   ├── 📁 assets/
│   │   ├── 📁 techs/                # Technology icons
│   │   ├── 📁 weather-icons/        # Weather icons
│   │   └── 📁 prebuilt-themes/      # Theme files
│   └── 📁 environments/             # Environment configs
├── 📁 config/                       # Nginx configuration
├── 🐳 Dockerfile                    # Multi-stage Docker build
├── 🐳 docker-compose.yml           # Docker Compose setup
└── 📄 package.json                  # Dependencies and scripts

---

🌟 Key Features in Detail

Weather Integration

• Fetches real-time weather data from DigitalOcean Functions
• Displays 7-day forecast with custom weather icons
• Automatic error handling and loading states
• Configurable city parameter (currently set to Utrecht)

Technology Showcase

• Professional Techs: Azure, C#, TypeScript, Angular, Docker, Git
• Hobby Techs: Deno, Fresh, Vue, Preact, Python, GraphQL
• Tools: VS Code, Cursor, GitHub Copilot, Prettier
• Archive: Previously used technologies for reference

Component Architecture

• Standalone Components: Modern Angular 20 architecture
• Signal-based State: Reactive state management
• Material Design: Consistent UI components
• Responsive Design: Mobile-first approach

---

🌐 Internationalization (i18n)

This project uses Tolgee for internationalization management. The configuration is set up to pull translations from a Tolgee instance and store them locally.

Tolgee Configuration

The project uses a .tolgeerc configuration file to manage translations:

{
  "apiKey": "<add-key-here>",
  "apiUrl": "<add-url-here>>",
  "pull": {
    "path": "./src/assets/translations",
    "format": "JSON_ICU",
    "delimiter": ""
  },
  "patterns": ["src/**/*.ts", "src/**/*.html"]
}

Translation Management

• Translation Files: Stored in src/assets/translations/
• Supported Languages: English (US/GB), Dutch (NL), German (DE)
• Format: JSON with ICU message format support
• Patterns: Scans TypeScript and HTML files for translation keys

Adding New Translations

1. Add translation keys to your components using the | translate pipe
2. Run Tolgee CLI to pull latest translations:

   npx @tolgee/cli pull

3. The translations will be automatically updated in src/assets/translations/

Development Workflow

• Translation keys are automatically detected in your code
• Use the | translate pipe in templates: {{ 'key.name' | translate }}
• The custom TranslatePipe handles translation resolution
• Language switching is managed through the TranslationsService

---

Playwright End-to-End Testing

This project uses Playwright for end-to-end browser testing. To get started:

cd playwright
npm install
npm run install-browsers
npm test

• Tests are located in playwright/tests/.
• Configuration is in playwright/playwright.config.ts.
• See playwright/README.md for more details.

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

• Angular Team for the amazing framework
• Material Design for beautiful UI components
• FontAwesome for the icon library
• DigitalOcean for serverless functions
• OpenWeatherMap for weather data inspiration

---

Made with ❤️ by Nergy