diff --git a/assets/tailwind.css b/assets/tailwind.css index c0073cc..60ec21a 100644 --- a/assets/tailwind.css +++ b/assets/tailwind.css @@ -586,34 +586,6 @@ video { inset-inline-start: -0.375rem; } -.start-0 { - inset-inline-start: 0px; -} - -.top-0 { - top: 0px; -} - -.bottom-0 { - bottom: 0px; -} - -.top-3 { - top: 0.75rem; -} - -.top-4 { - top: 1rem; -} - -.top-auto { - top: auto; -} - -.z-50 { - z-index: 50; -} - .m-16 { margin: 4rem; } @@ -658,10 +630,6 @@ video { margin-inline-end: 0.5rem; } -.me-3 { - margin-inline-end: 0.75rem; -} - .ms-4 { margin-inline-start: 1rem; } @@ -686,12 +654,12 @@ video { margin-top: 1rem; } -.block { - display: block; +.mb-8 { + margin-bottom: 2rem; } -.inline { - display: inline; +.block { + display: block; } .flex { @@ -727,14 +695,6 @@ video { height: 0.75rem; } -.h-6 { - height: 1.5rem; -} - -.h-7 { - height: 1.75rem; -} - .h-8 { height: 2rem; } @@ -771,14 +731,6 @@ video { width: 0.75rem; } -.w-6 { - width: 1.5rem; -} - -.w-7 { - width: 1.75rem; -} - .w-fit { width: -moz-fit-content; width: fit-content; @@ -788,10 +740,6 @@ video { width: 100%; } -.w-8 { - width: 2rem; -} - .min-w-fit { min-width: -moz-fit-content; min-width: fit-content; @@ -825,14 +773,6 @@ video { max-width: 36rem; } -.max-w-xs { - max-width: 20rem; -} - -.flex-shrink-0 { - flex-shrink: 0; -} - .cursor-pointer { cursor: pointer; } @@ -911,10 +851,6 @@ video { border-inline-start-width: 1px; } -.border-t { - border-top-width: 1px; -} - .border-gray-100 { --tw-border-opacity: 1; border-color: rgb(243 244 246 / var(--tw-border-opacity)); @@ -1037,10 +973,6 @@ video { padding: 0.25rem; } -.p-1\.5 { - padding: 0.375rem; -} - .p-2 { padding: 0.5rem; } @@ -1181,11 +1113,6 @@ video { letter-spacing: 0.1em; } -.text-blue-600 { - --tw-text-opacity: 1; - color: rgb(37 99 235 / var(--tw-text-opacity)); -} - .text-blue-800 { --tw-text-opacity: 1; color: rgb(30 64 175 / var(--tw-text-opacity)); @@ -1260,23 +1187,6 @@ video { color: rgb(133 77 14 / var(--tw-text-opacity)); } -.text-blue-500 { - --tw-text-opacity: 1; - color: rgb(59 130 246 / var(--tw-text-opacity)); -} - -.underline { - text-decoration-line: underline; -} - -.decoration-solid { - text-decoration-style: solid; -} - -.underline-offset-2 { - text-underline-offset: 2px; -} - .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -1313,20 +1223,10 @@ video { background-color: rgb(243 244 246 / var(--tw-bg-opacity)); } -.hover\:bg-gray-200:hover { - --tw-bg-opacity: 1; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)); -} - .hover\:bg-gradient-to-br:hover { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); } -.hover\:text-gray-900:hover { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - .hover\:text-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -1336,10 +1236,6 @@ video { text-decoration-line: underline; } -.hover\:no-underline:hover { - text-decoration-line: none; -} - .hover\:grayscale-0:hover { --tw-grayscale: grayscale(0); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); @@ -1491,11 +1387,6 @@ video { background-color: rgb(30 58 138 / var(--tw-bg-opacity)); } - .dark\:bg-gray-600 { - --tw-bg-opacity: 1; - background-color: rgb(75 85 99 / var(--tw-bg-opacity)); - } - .dark\:bg-gray-700 { --tw-bg-opacity: 1; background-color: rgb(55 65 81 / var(--tw-bg-opacity)); @@ -1541,21 +1432,11 @@ video { background-color: rgb(113 63 18 / var(--tw-bg-opacity)); } - .dark\:bg-blue-800 { - --tw-bg-opacity: 1; - background-color: rgb(30 64 175 / var(--tw-bg-opacity)); - } - .dark\:text-blue-300 { --tw-text-opacity: 1; color: rgb(147 197 253 / var(--tw-text-opacity)); } - .dark\:text-blue-500 { - --tw-text-opacity: 1; - color: rgb(59 130 246 / var(--tw-text-opacity)); - } - .dark\:text-cyan-400 { --tw-text-opacity: 1; color: rgb(34 211 238 / var(--tw-text-opacity)); @@ -1611,26 +1492,11 @@ video { color: rgb(253 224 71 / var(--tw-text-opacity)); } - .dark\:text-blue-200 { - --tw-text-opacity: 1; - color: rgb(191 219 254 / var(--tw-text-opacity)); - } - - .dark\:hover\:bg-gray-600:hover { - --tw-bg-opacity: 1; - background-color: rgb(75 85 99 / var(--tw-bg-opacity)); - } - .dark\:hover\:bg-gray-700:hover { --tw-bg-opacity: 1; background-color: rgb(55 65 81 / var(--tw-bg-opacity)); } - .dark\:hover\:text-white:hover { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); - } - .dark\:focus\:ring-cyan-800:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity)); diff --git a/src/components/mod.rs b/src/components/mod.rs index d4a7de8..8d630b0 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -84,7 +84,7 @@ pub fn Card(prop: CardProp) -> Element { pub fn UnderConstruction() -> Element { rsx! { div { - class:"rounded flex justify-between w-full p-4 border-b border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-600 m-16", + class:"rounded flex justify-between w-full p-4 border-b border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-600 my-8", div { class:"flex items-center mx-auto", p { @@ -97,3 +97,9 @@ pub fn UnderConstruction() -> Element { } } } + +pub fn HR() -> Element { + rsx! { + hr { class:"h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"} + } +} diff --git a/src/cv.rs b/src/cv.rs index bac3fc4..61f6dde 100644 --- a/src/cv.rs +++ b/src/cv.rs @@ -1,6 +1,6 @@ use dioxus::prelude::*; -use crate::components::H4; +use crate::components::{H4, HR}; #[component] pub fn CV() -> Element { @@ -8,13 +8,13 @@ pub fn CV() -> Element { div { class: "flex flex-col ", Introduction {}, - hr { class:"h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"}, + HR {} div { class: "flex justify-between", WorkExperience {}, Miscellaneous {}, }, - hr { class:"h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"}, + HR {}, Socials {} } } diff --git a/src/home.rs b/src/home.rs index 4a18716..02c907b 100644 --- a/src/home.rs +++ b/src/home.rs @@ -17,18 +17,23 @@ pub fn Home() -> Element { H5 { "Tuan-Dat Tran", span { class: "text-grey-600 dark:text-grey-500 text-lg", " (He/Him)" } }, div { class: "py-4", - P { "Hey there! πŸ‘‹πŸ»πŸ‘‹πŸΌπŸ‘‹πŸ½πŸ‘‹πŸΎπŸ‘‹πŸΏ" }, - P { "Welcome to my little place on the internet." }, - P { "While you're here, why don't you check out my other projects over on my ", - Link { - to: "https://git.tudattr.dev/explore/repos", - new_tab: true, - class: "inline-flex items-center font-medium hover:underline", - "gitea"}, - ", while this page is still in the proccess of being built? 😊" + div { + class: "mb-2", + P { "Hey there! πŸ‘‹πŸ»πŸ‘‹πŸΌπŸ‘‹πŸ½πŸ‘‹πŸΎπŸ‘‹πŸΏ" }, + P { "Welcome to my little place on the internet." }, + P { "While you're here, why don't you check out my other projects over on my ", + Link { + to: "https://git.tudattr.dev/explore/repos", + new_tab: true, + class: "inline-flex items-center font-medium hover:underline", + "gitea"}, + ", while this page is still in the proccess of being built? 😊" + }, }, - P { "I also offer IT-related consulting." }, - P { "Have a look at my CV and contact me if you're interested." }, + div { + P { "I also offer IT-related consulting." }, + P { "Have a look at my CV and contact me if you're interested." }, + } }, Link { to: "mailto:tuan-dat.tran@tudattr.dev", diff --git a/src/impressum.rs b/src/impressum.rs index 59795f5..c041334 100644 --- a/src/impressum.rs +++ b/src/impressum.rs @@ -1,7 +1,7 @@ use dioxus::prelude::{server_fn::error::ServerFnError, *}; use tracing::info; -use crate::components::{H1, P}; +use crate::components::{H1, HR, P}; #[component] pub fn Impressum() -> Element { @@ -22,7 +22,7 @@ pub fn Impressum() -> Element { P { "Birkenallee 24" }, P { "36037 Fulda" }, } - hr { class:"h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"} + HR {} div { class: "flex flex-col items-center", P { "tuan-dat.tran@tudattr.dev" }, diff --git a/src/layout/footer.rs b/src/layout/footer.rs index 15fe6a9..dce68db 100644 --- a/src/layout/footer.rs +++ b/src/layout/footer.rs @@ -7,8 +7,7 @@ pub fn Footer() -> Element { div { ToolsUsed {}, footer { - class:"bg-white rounded-lg shadow dark:bg-gray-800 my-4:wa - ", + class:"bg-white rounded-lg shadow dark:bg-gray-800 my-4:wa mb-4", div { class:"w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between", span { diff --git a/src/layout/header.rs b/src/layout/header.rs index 66e038d..8614887 100644 --- a/src/layout/header.rs +++ b/src/layout/header.rs @@ -28,7 +28,7 @@ pub fn Header() -> Element { Link { to: Route::CV {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "CV" } } li { - Link { to: Route::Publications {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "Publications/Projects" } + Link { to: Route::ProjectsPublications {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "Publications/Projects" } } li { Link { to: Route::Impressum {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "About" } diff --git a/src/main.rs b/src/main.rs index 82c0bc6..72d3b55 100644 --- a/src/main.rs +++ b/src/main.rs @@ -14,7 +14,7 @@ use crate::cv::CV; use crate::home::Home; use crate::impressum::Impressum; use crate::layout::Layout; -use crate::publications::Publications; +use crate::publications::ProjectsPublications; #[derive(Clone, Routable, Debug, PartialEq, serde::Serialize, serde::Deserialize)] pub enum Route { @@ -24,7 +24,7 @@ pub enum Route { #[route("/impressum")] Impressum {}, #[route("/publications")] - Publications {}, + ProjectsPublications {}, #[route("/resume")] CV {}, #[end_layout] diff --git a/src/publications.rs b/src/publications.rs index e5353a4..648cecd 100644 --- a/src/publications.rs +++ b/src/publications.rs @@ -1,11 +1,36 @@ use dioxus::prelude::*; -use crate::components::UnderConstruction; +use crate::components::{UnderConstruction, H1, HR}; #[component] -pub fn Publications() -> Element { +pub fn ProjectsPublications() -> Element { rsx! { UnderConstruction { }, + div { + H1 { "Publications" } + Publications { }, + }, + HR {}, + div { + H1 { "Projects" } + Projects { }, + } + } +} + +#[derive(Clone, PartialEq, Props)] +struct PublicationProp { + #[props(default = "".to_string())] + doi: String, + authors: String, + title: String, + conference: String, + #[props(default = "".to_string())] + description: String, +} + +fn Publications() -> Element { + rsx! { div { class: "flex gap-4 items-center", Publication { @@ -24,7 +49,8 @@ pub fn Publications() -> Element { well as the flow completion time, especially for small Data Center TCP (DCTCP) flows. around P4 programmable ASIC switches." - } + }, + Publication { doi: "https://git.tudattr.dev/AISE/seminar/src/branch/main/paper.pdf", conference: "Seminar", @@ -35,22 +61,10 @@ pub fn Publications() -> Element { by IoT fuzzers to circumvent the challenges presented by IoT devices and the constraints of the solutions proposed by the IoT fuzzers." - } + }, } } } - -#[derive(Clone, PartialEq, Props)] -struct PublicationProp { - #[props(default = "".to_string())] - doi: String, - authors: String, - title: String, - conference: String, - #[props(default = "".to_string())] - description: String, -} - fn Publication(prop: PublicationProp) -> Element { rsx! { Link { @@ -61,6 +75,55 @@ fn Publication(prop: PublicationProp) -> Element { class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white", "{prop.title}", }, + span { class: "text-lg text-gray-900 dark:text-white", "{prop.conference}" }, + p { + class:"font-normal text-gray-700 dark:text-gray-400", + "{prop.authors}", + } + p { + class:"font-normal text-gray-700 dark:text-gray-400", + "{prop.description}", + } + } + } +} + +fn Projects() -> Element { + rsx! { + Project { + url: "https://git.tudattr.dev/AISE/seminar/src/branch/main/paper.pdf", + kind: "Bachelorproject", + title: "Undisclosed Ethereum Smart Contract Fuzzer", + authors: "Tuan-Dat Tran", + description: " + In this ingoing project I am building an Ethereum + Smart Contract Fuzzer. More info will follow." + }, + } +} + +#[derive(Clone, PartialEq, Props)] +struct ProjectProp { + #[props(default = "".to_string())] + url: String, + authors: String, + title: String, + kind: String, + #[props(default = "".to_string())] + description: String, +} + +fn Project(prop: ProjectProp) -> Element { + rsx! { + Link { + class:"block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700", + to:"{prop.url}", + new_tab: true, + h5 { + class:"mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white", + "{prop.title}", + }, + p { class: "text-lg text-gray-900 dark:text-white", "{prop.kind}" }, p { class:"font-normal text-gray-700 dark:text-gray-400", "{prop.authors}",