Skip to content

Sven Relijveld - Portfolio Website

A professional portfolio website for Sven Relijveld, Data Engineer & Solution Architect at OneDNA, showcasing expertise in Azure, Databricks, and AI solutions with a modern full-stack architecture.

Table of Contents

Overview

This portfolio website presents a comprehensive showcase of professional experience, skills, and projects in data engineering and solution architecture. Built with modern web technologies, it features a responsive design, functional contact system, and professional presentation of real-world projects.

Key Highlights

  • Professional Experience: 13+ years in data engineering and solution architecture
  • Real Projects: Authentic project showcases based on actual client work
  • Modern Stack: React, TypeScript, FastAPI, and Tailwind CSS
  • Email Integration: Functional contact form with SMTP email delivery
  • Responsive Design: Mobile-first approach with dark mode support
  • Cloud-Native: Deployed on Azure Container Apps with CI/CD

Features

Multi-Page Architecture

  • Home Page: Hero section, skills overview, and project highlights
  • About Page: Detailed professional journey and company information
  • Projects Page: Comprehensive project portfolio with case studies
  • Experience Page: Animated timeline of professional positions
  • Contact Page: Functional contact form with email notifications

Email System

  • Dual Email Functionality: Notification and confirmation emails
  • Professional Templates: HTML emails matching website branding
  • SMTP Integration: Gmail-based email delivery
  • Error Handling: Robust error management and user feedback

UI/UX Features

  • OneDNA Branding: Professional pink accent colors
  • Dark Mode: Full dark/light theme support
  • Responsive Design: Mobile, tablet, and desktop optimized
  • Smooth Animations: CSS transitions and scroll-based animations
  • Component Library: shadcn/ui for consistent design system

Tech Stack

Frontend

  • Framework: React 18 with TypeScript
  • Routing: Wouter for client-side navigation
  • Styling: Tailwind CSS with CSS custom properties
  • Components: shadcn/ui built on Radix UI primitives
  • Icons: Lucide React
  • Build Tool: Vite for development and production
  • State Management: TanStack Query for server state

Backend

  • API Framework: FastAPI with Python 3.11
  • Email Service: SMTP with Python's built-in libraries
  • Validation: Pydantic for API validation
  • Server: Uvicorn ASGI server

Infrastructure

  • Hosting: Azure Container Apps
  • Registry: Azure Container Registry
  • Secrets: Azure Key Vault
  • Monitoring: Application Insights + Log Analytics
  • IaC: Bicep templates
  • CI/CD: GitHub Actions (two-phase deployment)
  • Documentation: MkDocs on Azure Static Web App

Architecture

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Frontend      │    │   Nginx         │    │   FastAPI       │
│   (React/Vite)  │────│   (Reverse      │────│   (Email API)   │
│   Container     │    │    Proxy)       │    │   Container     │
└─────────────────┘    └─────────────────┘    └─────────────────┘
         │                        │                        │
         ▼                        ▼                        ▼
┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Browser       │    │   Azure CDN     │    │   Gmail SMTP    │
│   (User)        │    │   (Static)      │    │   (Email)       │
└─────────────────┘    └─────────────────┘    └─────────────────┘

Data Flow

  1. Static Content: React components served via Nginx container
  2. Contact Form: Form submission → Validation → FastAPI → Email delivery → User feedback
  3. Monitoring: All components log to Application Insights

Getting Started

Prerequisites

  • Node.js 20+ and npm
  • Python 3.11+
  • Docker Desktop
  • Git
  • Azure CLI (for deployments)

Installation

  1. Clone the repository
git clone https://github.com/SvenRelijveld1995/portfolio.git
cd portfolio
  1. Install dependencies
npm install
pip install -r api/requirements.txt
  1. Set up environment variables
cp .env.example .env
# Edit .env with your configuration
  1. Start development servers
npm run dev

Docker Development

# Build and run with Docker Compose
docker-compose up --build

# Run in detached mode
docker-compose up -d

# Stop services
docker-compose down

Environment Variables

Required Variables

# Email Configuration (Required for contact form)
EMAIL_ADDRESS=your-email@gmail.com
EMAIL_PASSWORD=your-gmail-app-password

Optional Variables

NODE_ENV=development

Email Configuration

Gmail SMTP Setup

  1. Enable 2FA on your Gmail account
  2. Generate App Password:
  3. Go to Google Account Settings
  4. Select "Mail" as the app
  5. Generate a 16-character password
  6. Set Environment Variables:
  7. EMAIL_ADDRESS: Your Gmail address
  8. EMAIL_PASSWORD: The generated App Password (not your regular password)

Email Features

  • Notification Emails: Sent to sven.relijveld@onedna.nl with contact details
  • Confirmation Emails: Sent to form submitters with professional branding
  • HTML Templates: Responsive design matching website aesthetics

Project Structure

portfolio/
├── client/                 # Frontend React application
│   ├── src/
│   │   ├── components/     # Reusable UI components
│   │   ├── pages/          # Page components
│   │   ├── assets/         # Images and static assets
│   │   ├── hooks/          # Custom React hooks
│   │   └── lib/            # Utility functions
│   └── public/             # Static files (CVs, images)
├── api/                    # FastAPI backend
│   ├── main.py             # FastAPI application
│   └── requirements.txt    # Python dependencies
├── infra/                  # Azure Bicep IaC templates
│   ├── main.bicep
│   └── modules/
├── .github/workflows/      # CI/CD pipelines
├── docs/                   # MkDocs documentation
├── Dockerfile.frontend     # Frontend container image
├── Dockerfile.backend      # Backend container image
├── docker-compose.yml      # Local development
├── nginx.conf              # Nginx reverse proxy config
└── mkdocs.yml              # Documentation config

Development

Development Commands

# Start development environment
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Type checking
npm run check

FastAPI Development

# Start FastAPI server separately
cd api
python -m uvicorn main:app --reload --port 8000

# Test API endpoints
curl http://localhost:8000/health

Deployment

The project uses a two-phase CI/CD pipeline via GitHub Actions:

  1. Phase 1: Infrastructure — Deploys Azure resources via Bicep
  2. Phase 2: Application — Builds Docker images and deploys to Container Apps

See Deployment Documentation for full details.

API Documentation

See API Endpoints for the complete API reference.

License

This project is licensed under the MIT License.

Built by Sven Relijveld Data Engineer & Solution Architect at OneDNA