Modern Portfolio Website

A cutting-edge personal portfolio website showcasing professional skills through an innovative, interactive interface with advanced visual storytelling and engaging user experience.

Features

• Modern UI Design: Bold typography, vibrant colors, and clean layouts.
• Interactive Elements: Animated card flips, micro-interactions, and hover effects.
• Responsive Design: Fully adaptive from mobile to desktop screens.
• Multilingual Support: Available in English, German, French, and Spanish.
• Grid-Based Layout: Modern block-based design pattern with vibrant color sections.
• Advanced CSS Animations: Smooth transitions, hover effects, and visual feedback.
• Skill Showcases: Interactive skill cards with flip animations.
• Project Showcases: Highlighted work samples with visual context.

Technology Stack

• React with TypeScript for robust frontend development
• Tailwind CSS for utility-first styling
• Framer Motion for fluid animations
• i18next for internationalization
• Express backend for API handling
• Responsive Design principles for all device compatibility

Project Structure

• /client - Frontend React application
• /server - Backend Express server
• /shared - Shared type definitions and utilities
• /public - Static assets and resources

Getting Started

1. Clone the repository
2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. The application will be available at http://localhost:3000

Building for Production

npm run build

This will create optimized production files in the /dist directory.

Features in Detail

Interactive Skill Cards

The HARDSKILLS/SOFTSKILLS cards feature a 3D flip effect with distinct styling for each side. The front displays technical skills while the back reveals soft skills with an elegantly contrasting design.

Internship Timeline

A dynamic slider that showcases different experiences with smooth transitions and navigation controls.

Responsive Grid Layout

The portfolio implements a modern grid-based layout that adapts seamlessly from mobile to desktop, maintaining visual hierarchy and aesthetic appeal across all device sizes.

Custom Animations

Includes subtle hover effects, transition animations, and interactive elements that provide visual feedback and enhance user experience.

Customization

You can easily customize:

• Color schemes in client/src/index.css
• Content in the respective component files
• Layout grid in Home.tsx
• Animations and transitions in component styles

License

MIT License

Author

Software Developer Portfolio