Front-end UI/UX Improvements for Docs

CLAUDE.md

@@ -0,0 +1,22 @@
+# Hopsworks Documentation - Claude Guidance
+
+## Build Commands
+- Build and serve locally: `python -m mkdocs serve`
+- Check links: `mkdocs serve & sleep 30 && linkchecker http://127.0.0.1:8000/ && kill $!`
+- Install dependencies: `pip install -r requirements-docs.txt`
+
+## Project Structure
+- Documentation source in `/docs` directory
+- Navigation defined in `mkdocs.yml`
+- CSS customization in `/docs/css/`
+
+## Style Guidelines
+- Use Markdown for all documentation files
+- Follow Material Design styling conventions
+- Include descriptive alt text for all images
+- Create concise, focused pages with clear headings
+- Use admonitions for important notes/warnings
+- Place new images in appropriate subdirectories under `/docs/assets/images/`
+- Maintain consistent navigation structure in `mkdocs.yml`
+- Use kebab-case for filenames (e.g., `feature-server.md`)
+- Keep code examples concise and well-commented

README.md

@@ -56,4 +56,9 @@ linkchecker http://127.0.0.1:8000/
 
 # If ok just kill the server
 kill -9 $SERVER_PID
-```
+```
+
+
+## Maintenance
+Always update the robot.txt to desintex previous versions of hopsworks documentation (located in doc/robots.txt) 
+

docs/css/animation.css

@@ -0,0 +1,25 @@
+/**
+ * Styles for background animation
+ */
+
+.hero-section {
+  position: relative;
+  overflow: hidden;
+}
+
+.bg-animation-canvas {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100vw; /* Use viewport width instead of percentage */
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+}
+
+/* Ensure content sits above the animation */
+.hero-content {
+  position: relative;
+  z-index: 1;
+}