A modern, responsive portfolio website showcasing my skills, projects, and professional experience as a Full Stack Developer specializing in Java and React.
This portfolio website serves as a comprehensive showcase of my professional journey, technical expertise, and project portfolio. It features a clean, responsive design with dark/light mode support and interactive elements to provide visitors with an engaging experience.
- Responsive Design: Fully responsive layout that works seamlessly across desktop, tablet, and mobile devices
- Dark/Light Mode: Theme toggle for user preference with system theme detection
- Interactive UI: Smooth scrolling, hover effects, and animations for an engaging user experience
- Contact Form: EmailJS-powered contact form with client-side validation
- SEO Optimized: Structured metadata and semantic HTML for better search engine visibility
- Accessibility: WCAG-compliant design elements for inclusive user experience
- Next.js 14: React framework with static site generation capabilities
- React 18: Component-based UI development with hooks
- TypeScript: Type-safe JavaScript for improved developer experience
- Tailwind CSS: Utility-first CSS framework for responsive design
- Radix UI: Unstyled, accessible UI components
- Lucide Icons: Beautiful, consistent icon set
- Tailwind CSS Animations: Smooth transitions and animations
- Class Variance Authority: Managing component variants
- Tailwind Merge: Smart class name merging
- Zod: TypeScript-first schema validation
- EmailJS: Client-side email sending for the contact form
- Sonner: Toast notifications for form feedback
- Next.js Image Optimization: Automatic image optimization
- Static Site Generation: Pre-rendered HTML for fast loading
- Code Splitting: Automatic code splitting for optimal loading
- GitHub Pages: Static site hosting
- GitHub Actions: Automated deployment workflow
The project follows a clean, modular architecture:
/app: Next.js app directory with page components and routing/components: Reusable UI components/hooks: Custom React hooks/lib: Utility functions and shared code/public: Static assets like images and fonts/config: Configuration files for third-party services
The UI is built with a component-based approach using a combination of custom components and Radix UI primitives, styled with Tailwind CSS:
- Button: Multi-variant button component
- Card: Container component for content sections
- Badge: Label component for skills and technologies
- ThemeToggle: Dark/light mode switcher
- Form Components: Validated input fields with error states
The contact form uses:
- EmailJS: For sending emails directly from the client-side
- Zod: For form validation schema
- Sonner: For toast notifications on submission success/failure
The website is built with accessibility and performance in mind:
- Semantic HTML: Proper heading hierarchy and landmark regions
- ARIA attributes: Enhanced screen reader support
- Keyboard navigation: Full keyboard accessibility
- Color contrast: WCAG AA compliant color schemes
- Optimized assets: Compressed images and efficient code splitting
© 2024 Lucas Becker. All rights reserved.