Merge pull request #46 from INESCTEC/feat/ui-enhancements

Redesign / UI improvements

Author: itsjrsa

package-lock.json

@@ -4,6 +4,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/free-brands-svg-icons": "^7.1.0",
     "@fortawesome/free-regular-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
@@ -12,13 +13,11 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "antd": "^5.21.4",
-    "axios": "^1.7.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.25.1",
     "react-scripts": "5.0.1",
     "react-scroll": "^1.9.0",
-    "react-tooltip": "^5.28.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

package.json

@@ -8,7 +8,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="INESC TEC Open Source Software Website"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

public/index.html

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "INESC TEC OSS",
+  "name": "INESC TEC Open Source Software Website",
   "icons": [
     {
       "src": "favicon-16x16.ico",
@@ -30,6 +30,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
+  "theme_color": "#0C85B0",
   "background_color": "#ffffff"
 }

public/manifest.json

@@ -1,4 +1,40 @@
 [
+    {
+        "project_area": "Energy",
+        "project_name": "Data-driven tools for LV grids operation",
+        "project_logo": null,
+        "project_website": null,
+        "project_description": "GridSights is a modular API for managing grid topology, processing historical data, and performing distributed state estimation to predict voltages at unmeasured nodes. VoltTune is a Python tool that detects and corrects voltage violations in distribution networks using a greedy optimisation algorithm, historical sensitivity matrices, and available flexibility (load reduction or injection).",
+        "project_topic": "dd-tools-lv-grids",
+        "project_tags": ["Energy", "lv-grids-ops"]
+    },
+    {
+        "project_area": "Energy",
+        "project_name": "Predigrid",
+        "project_logo": null,
+        "project_website": null,
+        "project_description": "Modular forecasting service for MV and LV grid nodes integrates data ingestion, cleansing, and storage with state-of-the-art predictive models for short-term consumption and generation forecasting (up to 96 hours ahead). The service processes active and reactive power time series, incorporates external inputs such as numerical weather predictions, and computes error metrics to assess model accuracy. It also provides configurable access to forecasts and measurements through non-relational databases.",
+        "project_topic": "predigrid",
+        "project_tags": ["Energy", "forecasting", "mv-grids", "lv-grids"]
+    },
+    {
+        "project_area": "Energy",
+        "project_name": "FlexiHome",
+        "project_logo": null,
+        "project_website": null,
+        "project_description": "Software architecture for HEMS that offers a modular way of exploring the systems, incorporating a set of services mainly for consumers, but also for retailers, DSO, and flexibility service providers. The services can be transversal (common to any HEMS flavour, such as account management), energy micro-services and agentic AI-based. Beyond the backend algorithms, it has a specific front end as a mobile app (HEMS connect) whose main goal is to show, inform, and manage the energy consumption of a household and optimise the different eligible loads.",
+        "project_topic": "flexihome",
+        "project_tags": ["Energy", "home-energy-management"]
+    },
+    {
+        "project_area": "Energy",
+        "project_name": "EV Forecasting",
+        "project_logo": null,
+        "project_website": null,
+        "project_description": "Forecasting services and tools for electric vehicle related forecasting tasks.",
+        "project_topic": "ev-forecasting",
+        "project_tags": ["Energy", "forecasting", "ev"]
+    },
     {
         "project_area": "Energy",
         "project_name": "Predico",

public/projects_input.json

@@ -1,49 +1,21 @@
 body {
   margin: 0;
-  font-family: Arial, sans-serif;
-  background-color: #121212;
-  color: #fff;
 }
 
 .App {
   text-align: center;
 }
 
-.main-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 2rem;
+/* Page transition animation */
+.page-transition {
+  animation: fadeIn 0.3s ease-in-out;
 }
 
-.text-section {
-  flex: 1;
-  padding-right: 2rem;
-}
-
-.text-section h1 {
-  font-size: 4rem;
-  line-height: 1.2;
-  color: #2876B9; 
-}
-
-.text-section h1 span {
-  display: block;
-}
-
-.explore-link {
-  display: inline-block;
-  margin-top: 2rem;
-  font-size: 1.5rem;
-  color: #2876B9; 
-  text-decoration: none;
-}
-
-.image-section {
-  flex: 1;
-}
-
-.main-image {
-  width: 100%;
-  max-width: 600px; 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }

src/App.css

@@ -1,16 +1,33 @@
-import React from 'react';
-import { Route, Routes } from 'react-router-dom';
+import React, { Suspense, lazy } from 'react';
+import { Route, Routes, useLocation } from 'react-router-dom';
 import './App.css';
-import HomePage from './pages/HomePage';
-import ProjectsPage from './pages/ProjectsPage';
+
+// Code splitting - lazy load pages
+const HomePage = lazy(() => import('./pages/HomePage'));
+const ProjectsPage = lazy(() => import('./pages/ProjectsPage'));
+const NotFoundPage = lazy(() => import('./pages/NotFoundPage'));
+
+// Loading spinner component
+const PageLoader = () => (
+  <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-dark-blue to-light-blue">
+    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white"></div>
+  </div>
+);
 
 function App() {
+  const location = useLocation();
+
   return (
     <div className="App">
-      <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/projects" element={<ProjectsPage />} />
-      </Routes>
+      <Suspense fallback={<PageLoader />}>
+        <div key={location.pathname} className="page-transition">
+          <Routes location={location}>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/projects" element={<ProjectsPage />} />
+            <Route path="*" element={<NotFoundPage />} />
+          </Routes>
+        </div>
+      </Suspense>
     </div>
   );
 }

src/App.js

@@ -1,8 +1,11 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import App from './App';
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+test('renders without crashing', () => {
+  render(
+    <MemoryRouter>
+      <App />
+    </MemoryRouter>
+  );
 });