From 3e2987ad0cccebe4fe174e50f77d69f343df0b33 Mon Sep 17 00:00:00 2001 From: AINDUSTRIES Date: Mon, 6 Oct 2025 22:32:18 +0200 Subject: [PATCH] Updated pages to use the changed html elements --- assets/css/project.css | 21 ++++++++++++++ assets/css/projects.css | 54 ++++++++++++++++++++++++++++++++++- src/pages/mod.rs | 33 ++++++++++++--------- src/pages/projects.rs | 63 +++++++++++++++++++++++++++++++++-------- 4 files changed, 145 insertions(+), 26 deletions(-) create mode 100644 assets/css/project.css diff --git a/assets/css/project.css b/assets/css/project.css new file mode 100644 index 0000000..039a1ac --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/assets/css/projects.css b/assets/css/projects.css index 22d402a..ddb628e 100644 --- a/assets/css/projects.css +++ b/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; + } } \ No newline at end of file diff --git a/src/pages/mod.rs b/src/pages/mod.rs index 9341618..a6ee46c 100644 --- a/src/pages/mod.rs +++ b/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(title: T) -> Self + where + T: Into, + { 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 projects = a::new("projects", vec!["nav-button"], "/projects", "Projects".to_string()); + let home = a::new("home", vec!["nav-button"], "/", "Home"); + 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 { - page - } + Self { 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 detail = h2::new("This here is a small website to show the passion I have for computers.
\ + 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.
\ I have always had a good time creating and discovering new things.
\ - 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 diff --git a/src/pages/projects.rs b/src/pages/projects.rs index f2e66e4..8b423ef 100644 --- a/src/pages/projects.rs +++ b/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
\ + (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 desc = p::new("website-desc", vec!["project-desc"], "This project is the website you are currently on.".to_string()); - let view = a::new("website-view", vec!["project-view"], "website" , "View More".to_string()); - website.append_element(title); - website.append_element(desc); - website.append_element(view); + let website_title = h1::new("Website"); + let mut info = div::new("project-website-info", vec!["project-info"]); + let website_desc = p::new( + "website-desc", + vec!["project-desc"], + "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 { - let page = BasePage::new("Project"); +async fn project(project: web::Path) -> impl Responder { + 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.
\ + That is that each html element is represented by a struct which implements the Render trait (as in render the element to html).
\ + As it is right now the system is not that impressive but I believe it can do amazing things in the futur.
\ +
\ + 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() -} \ No newline at end of file +}