Updated pages to use the changed html elements

assets/css/project.css

@@ -0,0 +1,21 @@
+h1 {
+    font-family: 'Indie Flower', cursive;
+    font-size: 75px;
+    text-align: center;
+    color: var(--clr-primary-a60);
+}
+
+p {
+    font-family: Lexend, serif;
+    color: var(--clr-primary-a60);
+    width: fit-content;
+    margin: 8px auto 8px auto;
+    font-size: 24px;
+}
+
+@media (width <= 750px) {
+    p {
+        max-width: 90vw;
+        font-size: 20px;
+    }
+}

assets/css/projects.css

@@ -1,14 +1,66 @@
 .project {
     display: flex;
     flex-direction: column;
-    background-color: rgba(50,50,75,0.8);
+    background-image: radial-gradient(circle at top left, var(--clr-primary-a10), var(--clr-primary-a50));
     border-radius: 12px;
+    max-width: 40vw;
+    height: 250px;
+    margin: 8px auto 8px auto;
+    padding: 8px;
+}
+
+.project-info {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-content: center;
+    margin: 0 4px 4px 4px;
 }
 
 .project > h1 {
+    flex-grow: 1;
     color: white;
+    font-family: 'Indie Flower', cursive;
+    width: fit-content;
+    font-size: 40px;
+    margin: 8px;
 }
 
 .project-desc {
     color: white;
+    font-family: Lexend, serif;
+    width: fit-content;
+    margin: 0;
+}
+
+.project-view {
+    align-self: flex-end;
+    width: fit-content;
+    font-family: Lexend, serif;
+    text-align: right;
+}
+
+h1 {
+    font-family: 'Indie Flower', cursive;
+    font-size: 60px;
+    text-align: center;
+    color: var(--clr-primary-a60);
+}
+
+h2 {
+    font-family: 'Indie Flower', cursive;
+    font-size: 40px;
+    text-align: center;
+    color: var(--clr-primary-a60);
+}
+
+@media (width <= 750px) {
+    .project {
+        max-width: 80vw;
+        height: 150px;
+    }
+
+    h2 {
+        font-size: 24px;
+    }
 }

src/pages/mod.rs

@@ -6,33 +6,38 @@ use crate::html::{Page, Render};
 use actix_web::{Responder, get};
 
 pub(crate) struct BasePage {
-    page: Page
+    page: Page,
 }
 
 impl BasePage {
-    pub(crate) fn new(title: &'static str) -> Self {
+    pub(crate) fn new<T>(title: T) -> Self
+    where
+        T: Into<String>,
+    {
         let mut page = Page::new(title);
         // header
         let mut header = div::new("header", vec!["header"]);
-        let name = p::new("name", vec!["name"], "AINDUSTRIES".to_string());
+        let name = p::new("name", vec!["name"], "AINDUSTRIES");
         let mut buttons = div::new("buttons", vec!["nav-buttons"]);
-        let home = a::new("home", vec!["nav-button"], "/", "Home".to_string());
+        let home = a::new("home", vec!["nav-button"], "/", "Home");
-        let projects = a::new("projects", vec!["nav-button"], "/projects", "Projects".to_string());
+        let projects = a::new("projects", vec!["nav-button"], "/projects", "Projects");
         buttons.append_element(home);
         buttons.append_element(projects);
         header.append_element(name);
         header.append_element(buttons);
         // background
-        let image = img::new("background", vec!["background"], "static/img/background.png");
+        let image = img::new(
+            "background",
+            vec!["background"],
+            "/static/img/background.png",
+        );
         // css
-        let base = link::new("stylesheet", "static/css/base.css");
+        let base = link::new("stylesheet", "/static/css/base.css");
         // add elements to the page in order
         page.append_element_to_head(base);
         page.append_element_to_body(image);
         page.append_element_to_body(header);
-        Self {
+        Self { page }
-            page
-        }
     }
 
     pub(crate) fn append_element_to_head(&mut self, element: impl Render + 'static) {
@@ -54,10 +59,12 @@ async fn index() -> impl Responder {
     let mut page = BasePage::new("AINDUSTRIES");
     // introduction
     let mut intro = div::new("intro", vec!["intro"]);
-    let hi = h1::new("Hello and welcome!".to_string());
+    let hi = h1::new("Hello and welcome!");
-    let detail = h2::new("This here is a small website to show the passion I have for computers.<br>\
+    let detail = h2::new(
+        "This here is a small website to show the passion I have for computers.<br>\
     I have always had a good time creating and discovering new things.<br>\
-    Your may discover some of my projects here on this showcase.".to_string());
+    Your may discover some of my projects here on this showcase.",
+    );
     intro.append_element(hi);
     intro.append_element(detail);
     // css

src/pages/projects.rs

@@ -1,25 +1,64 @@
-use actix_web::{get, Responder};
-use crate::html::elements::{div, h1, p, a, link};
-use crate::html::{Render};
 use super::BasePage;
+use crate::html::Render;
+use crate::html::elements::{a, div, h1, h2, link, p};
+use actix_web::{Responder, get, web};
 
 #[get("/projects")]
 async fn projects() -> impl Responder {
     let mut page = BasePage::new("Projects");
+    let title = h1::new("My projects");
+    let desc = h2::new(
+        "Here you will find all my projects which deserve to be shown<br>\
+    (I've done a lot of small projects but they are not worth it.)",
+    );
     let mut website = div::new("project-website", vec!["project"]);
-    let title = h1::new("Website".to_string());
+    let website_title = h1::new("Website");
-    let desc = p::new("website-desc", vec!["project-desc"], "This project is the website you are currently on.".to_string());
+    let mut info = div::new("project-website-info", vec!["project-info"]);
-    let view = a::new("website-view", vec!["project-view"], "website" , "View More".to_string());
+    let website_desc = p::new(
-    website.append_element(title);
+        "website-desc",
-    website.append_element(desc);
+        vec!["project-desc"],
-    website.append_element(view);
+        "This project is the website you currently are on.",
+    );
+    let view = a::new(
+        "website-view",
+        vec!["project-view"],
+        "/projects/website",
+        "Learn More",
+    );
+    info.append_element(website_desc);
+    info.append_element(view);
+    website.append_element(website_title);
+    website.append_element(info);
     let css = link::new("stylesheet", "/static/css/projects.css");
     page.append_element_to_head(css);
+    page.append_element_to_body(title);
+    page.append_element_to_body(desc);
     page.append_element_to_body(website);
     page.render()
 }
 #[get("/projects/{project}")]
-async fn project() -> impl Responder {
+async fn project(project: web::Path<String>) -> impl Responder {
-    let page = BasePage::new("Project");
+    let project = project.into_inner();
+    let mut page = BasePage::new(format!("Project-{}", project));
+    match project.as_str() {
+        "website" => {
+            let title = h1::new("Website");
+            let desc = p::new(
+                "description",
+                vec!["description"],
+                "This project, the website you are on, \
+            is made in Rust such that all the pages are generated by code.<br>\
+            That is that each html element is represented by a struct which implements the Render trait (as in render the element to html).<br>\
+            As it is right now the system is not that impressive but I believe it can do amazing things in the futur.<br>\
+            <br>\
+            Wish to see more? Check out the gitea repository: ",
+            );
+            page.append_element_to_body(title);
+            page.append_element_to_body(desc);
+        }
+        _ => {}
+    }
+    let css = link::new("stylesheet", "/static/css/project.css");
+    page.append_element_to_head(css);
     page.render()
 }