Miguel Martins - @omiguelsma - Modern Personal Website

A modern, responsive personal website for Miguel Martins, built with HTML5, CSS3, and vanilla JavaScript.

Features

🎨 Modern Design

• Clean, minimalist design with modern typography
• Responsive layout that works on all devices
• Smooth animations and transitions
• Professional color scheme with CSS custom properties

📱 Responsive & Mobile-First

• Mobile-first responsive design
• Hamburger menu for mobile navigation
• Optimized for all screen sizes
• Touch-friendly interface

⚡ Performance

• Fast loading with optimized assets
• Lazy loading for images
• Smooth scrolling and animations
• Minimal JavaScript footprint

🎯 User Experience

• Intuitive navigation with active state highlighting
• Smooth scroll animations
• Back-to-top button
• Loading animations
• Form validation (when applicable)

File Structure

website/
├── index.html      # Home page
├── styles.css      # Main stylesheet
├── script.js       # JavaScript functionality
├── README.md       # This file
├── images/         # Original images

Pages

Home Page (index.html)

• Hero section with introduction
• About section
• Research areas overview
• Podcast section
• Partnerships section
• Footer with social links

Planned Pages (to be created)

• formation.html - Detailed Formation information
• teaching.html - Teaching experience and courses
• certs.html - Detailed Certifications information
• projects.html - Project portfolio
• links_and_contact.html - Useful links and Contact information

Technologies Used

• HTML5 - Semantic markup
• CSS3 - Modern styling with Grid, Flexbox, and custom properties
• Vanilla JavaScript - Interactive functionality
• Font Awesome - Icons
• Google Fonts - Typography (Inter font family)

CSS Features

Custom Properties (CSS Variables)

:root {
    --primary-color: #2563eb;
    --secondary-color: #64748b;
    --text-primary: #1e293b;
    /* ... more variables */
}

Modern Layout

• CSS Grid for main layouts
• Flexbox for component layouts
• Responsive breakpoints
• Mobile-first approach

Animations

• Smooth transitions
• Scroll-triggered animations
• Hover effects
• Loading animations

JavaScript Features

Navigation

• Mobile menu toggle
• Active link highlighting
• Smooth scrolling
• Navbar scroll effects

Animations

• Intersection Observer for scroll animations
• Fade-in effects
• Typing effect (optional)

User Experience

• Back-to-top button
• Form validation
• Loading states
• Error handling

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers

Getting Started

1. Clone or download the repository
2. Open index.html in a web browser
3. The website should work immediately without any build process

Customization

Colors

Edit the CSS custom properties in styles.css:

:root {
    --primary-color: #your-color;
    --secondary-color: #your-color;
    /* ... */
}

Content

• Update content in index.html
• Add new pages following the same structure
• Modify styles in styles.css
• Add functionality in script.js

Images

• Replace images in the /images directory
• Update image paths in HTML files
• Optimize images for web use

Performance Tips

1. Optimize Images: Use WebP format when possible, compress images
2. Minimize HTTP Requests: Combine CSS/JS files if needed
3. Use CDN: Font Awesome and Google Fonts are loaded from CDN
4. Lazy Loading: Images are lazy-loaded for better performance

Accessibility

• Semantic HTML structure
• ARIA labels where appropriate
• Keyboard navigation support
• Screen reader friendly
• High contrast ratios
• Focus indicators

License

This project is for personal use. Please respect the original content and design.

Contact

For questions or suggestions about this website, please contact Miguel Martins.

---

Note: This is a modern redesign of the original website located in the repository https://github.com/cragkhit/cragkhit.github.io#. Some original content and structure have been preserved, implementing modern web design principles and best practices.