Added extra Project section and fixed banner
Signed-off-by: Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>master
Tuan-Dat Tran
parent
212df970b8
commit
116a36c4a9
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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"}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
27
src/home.rs
27
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",
|
||||
|
|
|
|||
|
|
@ -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" },
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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" }
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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}",
|
||||
|
|
|
|||
Loading…
Reference in New Issue