# Laurent-Philippe Albou - Personal Website

A modern, responsive personal website showcasing Laurent-Philippe Albou's work as a research scientist, AI developer, and photographer.

## 🌟 Features

- **Modern Design**: Clean, professional design with smooth animations and transitions
- **Responsive Layout**: Optimized for all devices (desktop, tablet, mobile)
- **Interactive Elements**: Smooth scrolling, hover effects, and dynamic navigation
- **Photography Portfolio**: Showcase of astronomy, nature, and landscape photography
- **Project Showcase**: Featured open-source projects and AI libraries
- **Research Highlights**: Academic publications and research areas
- **Contact Integration**: Direct email integration with contact form

## 🚀 Technologies Used

- **HTML5**: Semantic markup with accessibility features
- **CSS3**: Modern CSS with CSS Grid, Flexbox, and custom properties
- **JavaScript**: Vanilla JS for interactions and animations
- **Font Awesome**: Icon library for consistent iconography
- **Google Fonts**: Inter font family for typography
- **Responsive Design**: Mobile-first approach with breakpoints

## 📁 Project Structure

```
├── index.html          # Main HTML file
├── styles.css          # CSS stylesheet
├── script.js           # JavaScript functionality
├── assets/             # Image assets
│   ├── LPA-2022.JPG   # Profile photo
│   ├── M51 LRGB PS Ha - v2.jpg  # Astronomy photos
│   ├── sun-bw.jpg     # Solar photography
│   ├── m16v3.jpg      # Nebula photography
│   └── ...            # Other photos
└── README.md          # Project documentation
```

## 🎨 Design Highlights

### Color Palette
- Primary: `#2563eb` (Blue)
- Secondary: `#f59e0b` (Amber)
- Accent: `#10b981` (Emerald)
- Dark: `#1f2937` (Gray-800)
- Light: `#f8fafc` (Slate-50)

### Typography
- Font Family: Inter (Google Fonts)
- Headings: 600-700 weight
- Body: 400 weight
- Accent text: Gradient background-clip for highlights

### Layout
- Max width: 1200px
- Grid-based responsive layout
- Card-based content organization
- Smooth scroll behavior with offset navigation

## 📱 Responsive Breakpoints

- **Desktop**: 1200px+ (Default)
- **Tablet**: 768px - 1199px
- **Mobile**: 320px - 767px

## 🔧 Interactive Features

### Navigation
- Fixed navigation with backdrop blur
- Mobile hamburger menu
- Active section highlighting
- Smooth scroll to sections

### Animations
- Intersection Observer for scroll-triggered animations
- Hover effects on cards and buttons
- Typing animation for hero title
- Loading states for content

### Photography Gallery
- Lightbox modal for full-size viewing
- Hover overlays with photo information
- Responsive grid layout
- Lazy loading for performance

### Contact Form
- Client-side validation
- mailto integration
- Success notifications
- Form reset after submission

## 🎯 Sections Overview

### Hero Section
- Professional introduction
- Social media links
- Call-to-action buttons
- Profile photo with gradient overlay

### About Section
- Personal background and education
- Current role at Institut Roche
- Statistics cards with animations
- Professional journey highlights

### Research Section
- Research areas with icons
- Featured publications
- Link to Google Scholar profile
- Background in bioinformatics and AI

### Projects Section
- Featured open-source projects
- Technology stack tags
- GitHub repository links
- AbstractCore.ai showcase

### Photography Section
- Categorized photo galleries
- Astronomy and nature photography
- Landscape and travel photos
- Professional photography showcasing personal interests

### Contact Section
- Multiple contact methods
- Social media profiles
- Contact form with validation
- Location and availability

## 🔗 External Links

- **GitHub**: [lpalbou](https://github.com/lpalbou)
- **LinkedIn**: [Laurent-Philippe Albou](https://fr.linkedin.com/in/laurent-philippe-albou)
- **Google Scholar**: [Research Profile](https://scholar.google.com/citations?user=29P1njkAAAAJ&hl=en)
- **Medium**: [@lpalbou](https://medium.com/@lpalbou)
- **ORCID**: [0000-0001-5801-1974](https://orcid.org/0000-0001-5801-1974)
- **AbstractCore.ai**: [Website](http://www.abstractcore.ai/)

## 🚀 Getting Started

1. **Clone the repository** (if using version control)
2. **Open index.html** in a modern web browser
3. **No build process required** - pure HTML, CSS, and JavaScript

### Local Development
```bash
# Simple HTTP server (Python 3)
python -m http.server 8000

# Or using Node.js
npx serve .

# Then visit http://localhost:8000
```

## 📊 Performance Optimizations

- **Image Optimization**: Lazy loading for photos
- **CSS Optimization**: Efficient selectors and minimal reflows
- **JavaScript**: Vanilla JS for minimal overhead
- **Font Loading**: Preconnect to Google Fonts
- **Critical Path**: Above-the-fold content prioritized

## ♿ Accessibility Features

- Semantic HTML structure
- Alt text for all images
- Keyboard navigation support
- High contrast color ratios
- Screen reader compatible
- Focus management for interactive elements

## 🔮 Future Enhancements

- [ ] Blog section for research articles
- [ ] Dark mode toggle
- [ ] Multi-language support (French/English)
- [ ] Advanced photo filtering and search
- [ ] Real-time contact form backend
- [ ] Progressive Web App features
- [ ] Advanced animations with GSAP

## 📄 License

This website is created for Laurent-Philippe Albou's personal use. All content, including photos and text, is copyrighted. Please contact for permissions regarding reuse.

## 🤝 Contributing

This is a personal website, but feedback and suggestions are welcome! Feel free to reach out through the contact form or social media.

---

**Built with ❤️ for showcasing the intersection of science, technology, and art.**

*Last updated: October 2025*