Added extra Project section and fixed banner

Signed-off-by: Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>
master
Tuan-Dat Tran 2024-04-30 10:15:56 +02:00
parent 212df970b8
commit 116a36c4a9
9 changed files with 115 additions and 176 deletions

View File

@ -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));

View File

@ -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"}
}
}

View File

@ -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 {}
}
}

View File

@ -17,6 +17,8 @@ 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",
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 ",
@ -27,8 +29,11 @@ pub fn Home() -> Element {
"gitea"},
", while this page is still in the proccess of being built? 😊"
},
},
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",

View File

@ -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" },

View File

@ -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 {

View File

@ -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" }

View File

@ -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]

View File

@ -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}",