Travel Journal - React Project
Project Overview:
I developed an interactive Travel Journal using React, showcasing beautiful travel destinations with dynamic cards. This project demonstrates my skills in React component architecture, responsive design, CSS animations, and data management.
Key Features:
Dynamic Card Components:
Each travel destination is rendered as a reusable card component with props for title, description, date, and location.
Interactive UI Elements:
- Hover effects with smooth scaling (1.05x) and shadow transitions
- Gradient backgrounds with subtle animations (fade-in)
- Responsive buttons with hover states
Modern Styling:
- Dual-tone gradients (#5f2c82 to #49a09d) for headers/footers
- Custom box-shadows and rounded corners
- Mobile-responsive layout with media queries
Data Management:
- External
data.js file for clean separation of content
Array.map() for efficient component rendering
Technical Highlights:
React Fundamentals:
Component-based architecture with proper props usage
CSS Techniques:
- Flexbox layouts with responsive columns
- CSS animations (
@keyframes) for smooth transitions
- Google Maps integration via styled links
Accessibility:
Semantic HTML structure and color-contrast compliant design
Design Choices:
Chose a travel theme to demonstrate content organization skills. Implemented a "card UI" pattern popular in modern web apps. Used purple-teal gradients to evoke a sense of adventure.
