A modern, responsive GitHub Pages website for the GRAAL Lab at the University of Genoa. The site showcases repositories, tools, and resources for marine robotics research, with a focus on control architectures, manipulation, and navigation.
- Responsive Design: Mobile-first approach that works seamlessly on all devices
- Dark/Light Theme Toggle: Built-in theme switching with local storage persistence
- Interactive Elements: Animated sonar visualization that responds to mouse movement
- Modern Styling: Clean, professional design using CSS variables and custom properties
- Accessibility: Semantic HTML with ARIA labels and keyboard navigation
-
Clone the repository:
git clone https://github.com/GRAAL-Lab/graal-lab.github.io.git cd graal-lab.github.io -
Open the site locally:
- Option 1: Open
index.htmldirectly in your browser - Option 2: Use a local server (recommended for testing):
# Using Python 3 python -m http.server 8000 # Using Python 2 python -m SimpleHTTPServer 8000 # Using Node.js (http-server) npx http-server
- Then navigate to
http://localhost:8000
- Option 1: Open
-
Make your changes and refresh the browser to see updates
Edit the navigation links and branding in index.html within the <header> element:
<nav class="nav" id="mobile-nav" aria-label="Primary navigation">
<a href="https://your-url.com" target="_blank" rel="noopener noreferrer">Link Title</a>
</nav>Edit the hero section text in index.html (around line 44):
<div class="eyebrow">Your Category</div>
<h1>Your Title</h1>
<p>Your description text here...</p>Find the <section class="section" id="repositories"> section and add new repository cards:
<article class="card">
<h3>Repository Name</h3>
<p>Description of the repository...</p>
<a href="https://github.com/GRAAL-Lab/repo-name" target="_blank">View on GitHub</a>
</article>Place new images in the img/ folder and reference them in HTML:
<img src="img/your-image.png" alt="Description" />Colors are managed with CSS custom properties in css/styles.css. Edit the :root variables for light mode and body.dark-theme for dark mode:
:root {
--bg: #f4f8fb; /* Background color */
--text: #0f2a33; /* Text color */
--accent: #2bbbd8; /* Primary accent color */
--accent-soft: #007f97; /* Secondary accent */
--accent-deep: #1f8ea3; /* Tertiary accent */
--shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
--radius: 24px; /* Border radius */
}Media queries are included in the CSS. Mobile-first design means styles apply to all devices, then are overridden for larger screens:
@media (max-width: 768px) {
/* Mobile adjustments */
}Core features in js/script.js:
- Current Year: Automatically updates the year in the footer
- Theme Toggle: Switch between dark/light themes with persistence
- Mobile Menu: Hamburger menu for navigation
- Sonar Animation: Interactive mouse-tracking animation
To add custom JavaScript:
- Add new functions to
script.js - Attach event listeners to HTML elements using their IDs or classes
- Keep interactive code lightweight and user-friendly
This repository is set up for automatic GitHub Pages deployment:
- Push changes to the
mainbranch - GitHub automatically builds and deploys the site
- Access your site at
https://GRAAL-Lab.github.io/
- Update site title and description in
<head> - Replace logo in
img/folder - Update header navigation links
- Modify hero section text and tagline
- Add your repositories to the repositories section
- Customize color scheme if desired
- Test on mobile and desktop
- Verify all links work correctly
Theme toggle not working: Clear browser cache and local storage, then refresh Images not loading: Check that image paths in HTML match the actual file locations Mobile menu not closing: Ensure JavaScript is enabled in your browser Styling looks off: Try clearing browser cache (Ctrl+Shift+Delete or Cmd+Shift+Delete)