Improved the API for serving static files. Styles improved.

.gitignore

@@ -1 +1,2 @@
 deploy_to_*
+run

backend/src/routers/assetRouter.js

@@ -1,22 +1,7 @@
 const express = require("express");
-var fs = require('fs');
 var path = require('path');
-const cors = require('cors');
 const router = express.Router();
 
-var mime = {
-    html: 'text/html',
-    txt: 'text/plain',
-    css: 'text/css',
-    gif: 'image/gif',
-    jpg: 'image/jpeg',
-    png: 'image/png',
-    svg: 'image/svg+xml',
-    js: 'application/javascript',
-    mp4: 'video/mp4',
-    ogv: 'video/ogg'
-};
-
 // Read (GET) an asset
 router.get("/images/projects/:projectId/:imagePath", async (req, res) => {
     var reqpath = req.url.toString().split('?')[0];
@@ -31,18 +16,14 @@ router.get("/images/projects/:projectId/:imagePath", async (req, res) => {
         }
         file = file.replace("/assets/images/", "/assets/images_scaled/x" + width + "/");
     }
-    var type = mime[path.extname(file).slice(1)] || 'text/plain';
-    var s = fs.createReadStream(file);
-    s.on('open', function () {
-        res.setHeader('Content-Type', type);
-        res.setHeader('Accept-Ranges', 'bytes');
-        res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
-        s.pipe(res);
-    });
-    s.on('error', function () {
-        res.setHeader('Content-Type', 'text/plain');
-        res.statusCode = 404;
-        res.end('Not found');
+    res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
+    var options = {root: path.join(__dirname, "../../")}
+    res.sendFile(file, options, function(err){
+        if (err){
+            res.setHeader('Content-Type', 'text/plain');
+            res.statusCode = 404;
+            res.end('Not found');
+        }
     });
 });
 
@@ -60,17 +41,14 @@ router.get("/images/profile/:imagePath", async (req, res) => {
         }
         file = file.replace("/assets/images/", "/assets/images_scaled/x" + width + "/");
     }
-    var type = mime[path.extname(file).slice(1)] || 'text/plain';
-    var s = fs.createReadStream(file);
-    s.on('open', function () {
-        res.setHeader('Content-Type', type);
-        res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
-        s.pipe(res);
-    });
-    s.on('error', function () {
-        res.setHeader('Content-Type', 'text/plain');
-        res.statusCode = 404;
-        res.end('Not found');
+    res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
+    var options = {root: path.join(__dirname, "../../")}
+    res.sendFile(file, options, function(err){
+        if (err){
+            res.setHeader('Content-Type', 'text/plain');
+            res.statusCode = 404;
+            res.end('Not found');
+        }
     });
 });
 

frontend/src/app/app.scss

@@ -15,6 +15,8 @@ app-root {
   
   main{
     flex-grow: 1;
+    max-width: 120em;
+    margin: auto;
   }
 }
 

frontend/src/app/home/home.scss

@@ -70,24 +70,34 @@ section#catalog{
         display: inline-block;
         vertical-align: top;
         width: calc(33% - 1.2em);
-        max-width: 18em;
-        aspect-ratio: 1 / 1;
+        max-width: 15em;
+        aspect-ratio: 1;
         overflow: hidden;
         border: 0.1em solid variables.$primary-brown;
         border-radius: 0.3em;
         margin: 0.5em;
         font-size: initial;
         
+        @media only screen and (max-width : 600px) {
+            width: calc(33% - 0.12em);
+            margin: 0;
+            border-radius: 0;
+        }
+        
         img.project-image, img.project-image-alt{
             object-fit: cover;
             object-position: center;
             width: 100%;
             height: 100%;
             scale: 1;
-            transition: scale 0.5s ease-in-out, opacity 1s ease-in-out;
             position: absolute;
             left: 0;
             transition: opacity 0.5s ease-in-out, scale 0.5s ease-in-out;
+            
+            @media only screen and (max-width : 600px) {
+                width: 100%;
+                height: 100%;
+            }
         }
 
         div.project_details{
@@ -110,24 +120,14 @@ section#catalog{
                 bottom: 0em;
                 color: var(--accent-gold);
                 font-size: 150%;
+                line-height: 1;
+                
+                @media only screen and (max-width : 600px){font-size: 120%;}
             }
         }
     }
 }
 
-@media only screen and (max-width : 600px) {
-    section#catalog article{
-        width: calc(33% - 0.12em);
-        margin: 0;
-        border-radius: 0;
-        
-        img{
-            width: 100%;
-            height: 100%;
-        }
-    }
-}
-
 @media (hover: hover) {
     section#catalog article:hover img{scale: 1.2;}
     section#catalog article:hover div.project_details{opacity: 0.8;}

frontend/src/app/privacy/privacy.ts

@@ -1,10 +1,10 @@
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { PlatformLocation } from '@angular/common';
 import { Meta, Title } from '@angular/platform-browser';
 import { TranslateService, _, TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  selector: 'app-profile', templateUrl: './privacy.html', styleUrl: './privacy.scss',
+  selector: 'app-privacy', templateUrl: './privacy.html', styleUrl: './privacy.scss',
   standalone: true, imports: [TranslatePipe]
 })
 export class Privacy {

frontend/src/app/project/project.html

@@ -1,5 +1,5 @@
 @if (project){
-  <div id='details'>
+  <section id='details'>
     @if (project.images.length > 0){
       <img
         (click)=galleryOpen(1); id='img-1' class='img img_main'
@@ -10,8 +10,8 @@
     }
       <h2 id='project_title'>{{ project.title }}</h2>
       <p [innerHTML]='project.description'></p>
-  </div>
-  <div id='images'>
+  </section>
+  <section id='images'>
     @for (image of project.images; track image.id) {
       @if (image.id > 1){
         @if (image.video == 0){
@@ -35,7 +35,7 @@
         }
       }
     }
-  </div>
+  </section>
   <div id='gallery-cover' onClick='galleryClose();'></div>
     <div
       id='gallery'

frontend/src/app/project/project.scss

@@ -5,9 +5,8 @@ main{
     margin: auto;
 }
 
-div#details{
+section#details{
     min-height: 24em;
-    margin: auto 4em 0 4em;
     
     h2{
         font-size: 300%;
@@ -27,7 +26,7 @@ div#details{
     @media only screen and (max-width : 600px) {margin: auto 1em;}
 }
 
-div#images{text-align: center;}
+section#images{text-align: center;}
 
 img.img, video.img{
     vertical-align: middle;