# Portfolio Page A modern, responsive portfolio website built with React, TypeScript, and Vite. This project showcases professional skills, projects, certifications, and services in an elegant and interactive interface. ## About This Project This portfolio website serves as a comprehensive showcase of professional experience and capabilities. It features: - **Modern Design**: Clean, responsive design that works seamlessly across all devices - **Interactive Sections**: Engaging hero section, about me, skills showcase, project gallery, certifications, and services - **Theme Support**: Built-in light/dark theme toggle for enhanced user experience - **Performance Optimized**: Built with Vite for fast loading and optimal performance - **TypeScript**: Fully typed codebase for better development experience and code reliability ## Features - **Hero Section**: Eye-catching introduction with personal branding and smooth scroll to projects - **About Section**: Professional background and personal story - **Skills Section**: Technical expertise with visual skill indicators - **Projects Section**: Portfolio of completed projects with descriptions and links - **Certifications Section**: Professional certifications and achievements - **Services Section**: Available professional services - **Contact Section**: Functional contact form with backend email integration - **Multi-page Routing**: React Router with smooth hash navigation between sections - **Legal Compliance**: German Impressum page for legal requirements - **Theme Support**: Built-in light/dark theme toggle with persistence - **Responsive Navigation**: Mobile-friendly navigation with hamburger menu - **Backend Integration**: Node.js/Express server with Gmail SMTP for contact form - **Enhanced UX**: Detailed error handling, loading states, and user feedback ## Technology Stack ### Frontend - **React 18** with TypeScript for type-safe component development - **Vite** for fast development and optimized production builds - **React Router Dom** for multi-page navigation and hash-based scrolling - **SCSS** with modular architecture and theme system - **Lucide React** for consistent iconography ### Backend - **Node.js** with Express.js for RESTful API - **Nodemailer** with Gmail SMTP integration for contact form - **Joi** for request validation and data sanitization - **Express Rate Limit** for API protection and spam prevention - **CORS** for secure cross-origin requests ### Development & Quality - **TypeScript** for enhanced developer experience and code reliability - **ESLint** for consistent code standards and best practices - **Vite HMR** for instant development feedback ## Planned Additions ### Protected Admin Panel A secure, password-protected administrative interface is planned for future releases. This admin panel will provide: - **Content Management**: Easy editing of personal information, skills, and project details - **Project Management**: Add, edit, and remove projects from the portfolio - **Skills Management**: Update technical skills and proficiency levels - **Certifications Management**: Maintain and update professional certifications - **Real-time Updates**: Changes will be reflected immediately on the public portfolio - **Secure Authentication**: Protected access to prevent unauthorized modifications This feature will enable dynamic content updates without requiring code changes, making the portfolio easily maintainable and always up-to-date. ### Language Localization (i18n) Multi-language support to make the portfolio accessible to an international audience: - **Primary Languages**: English and German localization - **Extensible Framework**: Architecture designed to support additional languages easily - **Dynamic Language Switching**: Real-time language toggle in the navigation - **Localized Content**: All text content, including: - Navigation labels and menu items - Section titles and descriptions - Button text and form labels - Error messages and status notifications - Project descriptions and technical details - Skills and certifications descriptions - **Browser Language Detection**: Automatic language selection based on user's browser settings - **Persistent Language Preference**: User's language choice saved and remembered across sessions - **SEO Optimization**: Proper language meta tags and hreflang attributes for better search engine visibility - **Professional Translation**: Native-quality translations for both English and German content The localization system will be implemented using React Context and TypeScript for type-safe translations, ensuring consistent and maintainable multi-language support. ## Getting Started ### Prerequisites - Node.js (version 18 or higher) - npm or yarn package manager ### Installation 1. Clone the repository: ```bash git clone https://github.com/LuciusShadow/portfolio-page.git cd portfolio-page ``` 2. Install dependencies: ```bash npm install ``` 3. Start the development server: ```bash npm run dev ``` 4. Set up the backend (for contact form functionality): ```bash cd backend npm install ``` 5. Create a `.env` file in the backend directory with your Gmail credentials: ```env EMAIL_SERVICE=gmail EMAIL_USER=your-email@gmail.com EMAIL_PASS=your-app-password RECIPIENT_EMAIL=your-email@gmail.com RECIPIENT_NAME=Your Name FRONTEND_URL=http://localhost:5173 ``` 6. Start the backend server: ```bash node server.js ``` 7. Open your browser and navigate to `http://localhost:5173` ### Backend Setup Notes - The contact form requires a Gmail account with an app-specific password - Generate an app password in your Google Account settings (2-factor authentication required) - The backend server runs on port 3002 by default - CORS is configured to allow requests from the frontend development server ### Building for Production ```bash npm run build ``` The built files will be available in the `dist` directory. ## Project Structure ``` portfolio-page/ ├── backend/ # Node.js Express backend for contact form │ ├── middleware/ # Validation and security middleware │ ├── routes/ # API route handlers (contact form) │ ├── services/ # Email service with Gmail integration │ ├── server.js # Express server configuration │ └── .env # Environment variables (Gmail credentials) ├── src/ │ ├── app/ # Main application components │ │ ├── page.tsx # HomePage component with all sections │ │ └── AppRouter.tsx # React Router setup with hash navigation │ ├── assets/ # Static assets (images, icons) │ ├── components/ # Reusable UI components │ │ ├── layout/ # Navigation, Footer, MobileMenu │ │ ├── sections/ # Hero, About, Skills, Projects, etc. │ │ └── ThemeToggle.tsx # Dark/light theme switcher │ ├── config/ # Configuration files │ │ ├── api.ts # API endpoints configuration │ │ └── personal.ts # Personal information and social links │ ├── data/ # TypeScript type definitions │ │ ├── Project.ts # Project data structure │ │ ├── Skill.ts # Skills and proficiency levels │ │ ├── Service.ts # Professional services offered │ │ └── Certification.ts # Professional certifications │ ├── pages/ # Page components for routing │ │ └── ImprintPage.tsx # German legal compliance page │ ├── scss/ # Modular SCSS styling │ │ ├── themes/ # Light/dark theme variables │ │ ├── layout/ # Navigation, footer styling │ │ ├── sections/ # Individual section styles │ │ ├── globals.scss # Global styles and resets │ │ ├── variables.scss # SCSS variables and breakpoints │ │ └── mixins.scss # Reusable SCSS mixins │ ├── utils/ # Utility functions │ │ └── scrollUtils.ts # Smooth scrolling navigation helpers │ └── main.tsx # Application entry point ├── dist/ # Production build output ├── vite.config.ts # Vite configuration ├── tsconfig.json # TypeScript configuration └── package.json # Dependencies and scripts ``` ## Contributing This is a personal portfolio project. While contributions are not expected, suggestions and feedback are always welcome! ## License This project is for personal use and portfolio demonstration purposes.