A modern, elegant single-page application (SPA) showcasing the academic career of Àlex López, Ph.D. — an interdisciplinary ecologist and data scientist working at the intersection of biodiversity, data analysis, statistical modelling, and machine learning.
🔗 Live Demo: alex-lopez-phd.vercel.app
- Custom Theme System — Dual themes ("Alex" dark theme & "AlexLight" light theme) crafted with OKLCH color space for vibrant, accessible colors
- Glassmorphism Aesthetic — Cards with
backdrop-blur-xland transparent backgrounds create a modern, premium look - Subtle Animations — Smooth transitions, hover effects, and a dynamic rotating specialty text in the hero section
- Responsive Typography — Fluid text scaling from mobile to desktop (
text-5xl md:text-7xl lg:text-8xl)
- Sticky Navbar — Always-accessible navigation with glass blur effect
- Smooth Scroll — Custom scroll-to-section function with offset for fixed header
- Theme Toggle — Light/dark mode switcher for user comfort
- Mobile-First Menu — Responsive dropdown menu for smaller screens
- Semantic Icons — Lucide React & React Icons for intuitive visual cues
| Component | Description |
|---|---|
Hero |
Main profile section with animated specialty carousel, bio, and social links |
Publications |
Academic publications list with glassmorphic cards, journal info, and DOI links |
Projects |
Project showcase in a 2-column grid with technology tags and repository links |
Timeline |
Vertical timeline showing education and certifications with alternating layout |
Conferences |
Congress presentations with year badges, location, and theme tags |
Navbar |
Responsive navigation with icon-labeled links and theme toggle |
Footer |
Simple, clean footer component |
ThemeToggle |
Dark/light mode switch |
AlexLopezPHD/
├── public/
│ └── img/ # Static images (profile picture)
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── Navbar.jsx # Navigation bar with smooth scroll
│ │ ├── Hero.jsx # Main profile & content section
│ │ ├── Publications.jsx # Academic publications display
│ │ ├── Projects.jsx # Project showcase cards
│ │ ├── Timeline.jsx # Education timeline
│ │ ├── Conferences.jsx # Congress presentations
│ │ ├── ThemeToggle.jsx # Dark/light mode toggle
│ │ └── Footer.jsx # Footer component
│ ├── data/ # Content data files
│ │ ├── publications.js # Publications data
│ │ ├── projects.js # Projects data
│ │ └── conferences.js # Conferences data
│ ├── pages/
│ │ └── home/
│ │ └── Home.jsx # Main page composition
│ ├── routes/
│ │ └── AppRoutes.jsx # Route configuration
│ ├── context/ # React context providers
│ ├── App.jsx # Root application component
│ ├── main.jsx # Entry point
│ └── index.css # Tailwind + DaisyUI theming
├── index.html # HTML template with SEO meta tags
├── vite.config.js # Vite configuration
├── package.json
└── vercel.json # Vercel deployment config
| Technology | Version | Purpose |
|---|---|---|
| React | 19.2.0 | UI Framework |
| Vite | 5.4.1 | Build Tool & Dev Server |
| Tailwind CSS | 4.1.17 | Utility-first styling |
| DaisyUI | 5.5.5 | Component library & theming |
| React Router | 7.9.6 | Client-side routing |
| Lucide React | 0.554.0 | Icon library |
| React Icons | 5.5.0 | Additional icons (Fa, Si) |
| PropTypes | 15.8.1 | Runtime type checking |
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/Calotriton/AlexLopezPHD.git
# Navigate to project directory
cd AlexLopezPHD
# Install dependencies
npm install
# Start development server
npm run devThe app will be available at http://localhost:5173
The index.html includes comprehensive SEO meta tags:
- ✅ Title and description meta tags
- ✅ Open Graph tags for social sharing
- ✅ Twitter Card meta tags
- ✅ Canonical URL
- ✅ Keywords meta tag
- ✅ Robot directives
- ✅ Google Site Verification
Àlex López, Ph.D. is an interdisciplinary ecologist and data scientist specializing in:
🌿 Freshwater & Marine Ecosystems
🐸 Herpetology
📊 Biostatistics & Data Analysis
🤖 Machine Learning for Ecology
Frontend Developer & UX/UI Designer
