Compare commits

...

6 Commits

Author SHA1 Message Date
Tuan-Dat Tran 837e19e111 Merge pull request 'Closes #2 and #5' (#7) from dev into master
Reviewed-on: #7
2024-05-21 23:00:22 +02:00
Tuan-Dat Tran 68bf62ee21 Updated Screenshot
Signed-off-by: Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>
2024-05-21 22:57:29 +02:00
Tuan-Dat Tran c73335c170 Added docker push script and build cicd
Signed-off-by: Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>
2024-05-21 22:54:44 +02:00
Tuan-Dat Tran 71798be854 Center div and some formulation in strings
Signed-off-by: Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>
2024-05-21 18:11:25 +02:00
Tuan-Dat Tran 0dd9cec4bd Centered the div and pretty language buttons
Signed-off-by: Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>
2024-05-21 17:03:40 +02:00
Tuan-Dat Tran 6ca89b3bd5 Added en-GB and de-DE
Signed-off-by: Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>
2024-05-21 16:39:11 +02:00
22 changed files with 725 additions and 302 deletions

View File

@ -0,0 +1,18 @@
name: Build Docker Image
on:
push:
branches:
- main
- dev
- cicd
jobs:
build:
name: Build
runs-on: [ubuntu-latest, aya01]
steps:
- uses: docker/setup-buildx-action@v3
- uses: docker/build-push-action@v5
with:
tags: tudattr/athome:latest

63
Cargo.lock generated
View File

@ -135,6 +135,8 @@ dependencies = [
"dioxus",
"dioxus-free-icons",
"dioxus-logger",
"dioxus-sdk",
"lazy_static",
"manganis",
"serde",
"tracing",
@ -902,6 +904,22 @@ dependencies = [
"tracing",
]
[[package]]
name = "dioxus-sdk"
version = "0.5.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "271adf41837fbbceb955fefd71816d4a3fbbab2829f8c0ea0364584b531ce999"
dependencies = [
"cfg-if",
"dioxus",
"js-sys",
"serde",
"serde_json",
"tracing",
"unic-langid",
"uuid",
]
[[package]]
name = "dioxus-signals"
version = "0.5.1"
@ -977,6 +995,17 @@ dependencies = [
"syn",
]
[[package]]
name = "displaydoc"
version = "0.2.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "487585f4d0c6655fe74905e2504d8ad6908e4db67f744eb140876906c2f3175d"
dependencies = [
"proc-macro2",
"quote",
"syn",
]
[[package]]
name = "encoding_rs"
version = "0.8.34"
@ -1252,8 +1281,10 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "94b22e06ecb0110981051723910cbf0b5f5e09a2062dd7663334ee79a9d1286c"
dependencies = [
"cfg-if",
"js-sys",
"libc",
"wasi",
"wasm-bindgen",
]
[[package]]
@ -2762,6 +2793,15 @@ dependencies = [
"once_cell",
]
[[package]]
name = "tinystr"
version = "0.7.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "83c02bf3c538ab32ba913408224323915f4ef9a6d61c0e85d493f355921c0ece"
dependencies = [
"displaydoc",
]
[[package]]
name = "tinyvec"
version = "1.6.0"
@ -3060,6 +3100,25 @@ version = "1.17.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "42ff0bf0c66b8238c6f3b578df37d0b7848e55df8577b3f74f92a69acceeb825"
[[package]]
name = "unic-langid"
version = "0.9.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "23dd9d1e72a73b25e07123a80776aae3e7b0ec461ef94f9151eed6ec88005a44"
dependencies = [
"unic-langid-impl",
]
[[package]]
name = "unic-langid-impl"
version = "0.9.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "0a5422c1f65949306c99240b81de9f3f15929f5a8bfe05bb44b034cc8bf593e5"
dependencies = [
"serde",
"tinystr",
]
[[package]]
name = "unicase"
version = "2.7.0"
@ -3131,6 +3190,10 @@ name = "uuid"
version = "1.8.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "a183cf7feeba97b4dd1c0d46788634f6221d87fa961b305bed08c851829efcc0"
dependencies = [
"getrandom",
"wasm-bindgen",
]
[[package]]
name = "valuable"

View File

@ -16,6 +16,8 @@ tracing = "0.1.40"
dioxus-logger = "0.5.0"
manganis = "0.2.2"
dioxus-free-icons = { version = "0.8", features = ["font-awesome-brands"] }
dioxus-sdk = { version = "0.5.0", features = ["i18n"] }
lazy_static = "1.4.0"
[features]
default = []

View File

@ -1,17 +1,19 @@
FROM rust:1.77.2 as builder
WORKDIR /athome/
FROM rust:1.77.2 as dioxus
RUN cargo install dioxus-cli@^0.5
RUN apt update && apt install nodejs npm -y && rm -rf /var/lib/apt/lists/*
RUN npm install -D tailwindcss
FROM builder
FROM dioxus as builder
WORKDIR /athome/
RUN apt-get update && apt-get install nodejs npm -y && rm -rf /var/lib/apt/lists/*
RUN npm install -D tailwindcss
COPY ./src/ ./src/
COPY ./assets/ ./assets/
COPY ./Cargo.toml ./Cargo.toml
COPY ./input.css ./input.css
COPY ./Dioxus.toml ./Dioxus.toml
COPY ./tailwind.config.js ./tailwind.config.js
RUN npx tailwindcss -i ./input.css -o ./assets/tailwind.css
RUN dx build --platform fullstack --release
ENTRYPOINT [ "./docs/athome" ]
RUN npx tailwindcss -i ./input.css -o ./assets/tailwind.css && dx build --platform fullstack --release
FROM dioxus as runner
WORKDIR /app/
COPY --from=builder /athome/docs/ ./docs/
CMD [ "./docs/athome" ]

View File

@ -4,4 +4,4 @@ My personal website.
## Screenshot
[[./resources/screenshot.png]]
[[./resources/screenshot.webp]]

View File

@ -554,6 +554,10 @@ video {
--tw-contain-style: ;
}
.static {
position: static;
}
.absolute {
position: absolute;
}
@ -618,10 +622,6 @@ video {
margin-inline-start: 2rem;
}
.mt-0 {
margin-top: 0px;
}
.mt-1 {
margin-top: 0.25rem;
}
@ -704,19 +704,11 @@ video {
width: 100%;
}
.w-96 {
width: 24rem;
}
.min-w-fit {
min-width: -moz-fit-content;
min-width: fit-content;
}
.min-w-full {
min-width: 100%;
}
.max-w-40 {
max-width: 10rem;
}
@ -753,6 +745,10 @@ video {
align-items: center;
}
.justify-start {
justify-content: flex-start;
}
.justify-center {
justify-content: center;
}
@ -765,28 +761,12 @@ video {
gap: 1rem;
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(2rem * var(--tw-space-x-reverse));
margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.self-center {
align-self: center;
}
.overflow-hidden {
overflow: hidden;
}
@ -795,10 +775,6 @@ video {
overflow-x: auto;
}
.whitespace-nowrap {
white-space: nowrap;
}
.rounded {
border-radius: 0.25rem;
}
@ -811,6 +787,20 @@ video {
border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-e-lg {
border-start-end-radius: 0.5rem;
border-end-end-radius: 0.5rem;
}
.rounded-s-lg {
border-start-start-radius: 0.5rem;
border-end-start-radius: 0.5rem;
}
.border {
border-width: 1px;
}
@ -947,10 +937,6 @@ video {
padding: 1rem;
}
.p-5 {
padding: 1.25rem;
}
.p-6 {
padding: 1.5rem;
}
@ -965,6 +951,11 @@ video {
padding-right: 0.625rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
@ -1156,6 +1147,12 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.grayscale {
--tw-grayscale: grayscale(100%);
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);
@ -1184,6 +1181,11 @@ video {
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.hover\:text-blue-700:hover {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
@ -1198,17 +1200,37 @@ video {
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);
}
.focus\:z-10:focus {
z-index: 10;
}
.focus\:text-blue-700:focus {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-4:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-blue-700:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(29 78 216 / var(--tw-ring-opacity));
}
.focus\:ring-cyan-300:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(103 232 249 / var(--tw-ring-opacity));
@ -1235,18 +1257,6 @@ video {
}
@media (min-width: 768px) {
.md\:flex {
display: flex;
}
.md\:items-center {
align-items: center;
}
.md\:justify-between {
justify-content: space-between;
}
.md\:bg-transparent {
background-color: transparent;
}
@ -1273,10 +1283,6 @@ video {
}
}
.rtl\:space-x-reverse:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 1;
}
@media (prefers-color-scheme: dark) {
.dark\:border-gray-600 {
--tw-border-opacity: 1;
@ -1408,6 +1414,21 @@ video {
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\:text-white:focus {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark\:focus\:ring-blue-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}
.dark\:focus\:ring-cyan-800:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity));

Binary file not shown.

Before

Width:  |  Height:  |  Size: 170 KiB

BIN
resources/screenshot.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

9
scripts/docker-push.sh Executable file
View File

@ -0,0 +1,9 @@
#!/bin/sh
VERSION=0.1.0
LOCAL_IMAGE="athome"
REMOTE_IMAGE="athome"
docker build -t $LOCAL_IMAGE .
docker tag $LOCAL_IMAGE:latest mos4/$REMOTE_IMAGE:$VERSION
docker push mos4/$REMOTE_IMAGE:$VERSION

View File

@ -1,4 +1,5 @@
use dioxus::prelude::*;
use dioxus_sdk::{i18n::use_i18, translate};
#[derive(PartialEq, Props, Clone)]
pub struct PProps {
@ -66,22 +67,49 @@ pub fn H5(props: PProps) -> Element {
pub struct CardProp {
#[props(default = "".to_string())]
class: String,
name: String,
gender: String,
picture: String,
children: Element,
}
pub fn Card(prop: CardProp) -> Element {
rsx! {
div {
class: "flex flex-col py-10 items-center min-w-fit",
class: "flex flex-col py-10 items-center min-w-fit text-white bg-gradient-to-r from-purple-500 to-blue-500 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 rounded-lg px-5 py-2.5 min-w-fit max-w-8",
div {
class: "text-white bg-gradient-to-r from-purple-500 to-blue-500 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 rounded-lg px-5 py-2.5 min-w-fit max-w-8 center",
{ prop.children }
class: "pb-4",
div {
class: "flex justify-between",
Picture {src: "{prop.picture}"},
}
}
H5 { "{prop.name}", span { class: "text-grey-600 dark:text-grey-500 text-lg", " {prop.gender}" } },
{ prop.children }
}
}
}
#[derive(PartialEq, Props, Clone)]
struct PictureProp {
#[props(default = "".to_string())]
class: String,
src: String,
}
fn Picture(prop: PictureProp) -> Element {
rsx! {
img {
class: "w-24 h-24 rounded-full shadow-lg",
src: "{prop.src}",
alt: "",
},
}
}
pub fn UnderConstruction() -> Element {
let i18 = use_i18();
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 my-8",
@ -89,9 +117,7 @@ pub fn UnderConstruction() -> Element {
class:"flex items-center mx-auto",
p {
class:"flex items-center text-sm font-normal text-gray-500 dark:text-gray-400",
span {
"This site is currenlty under construction",
}
span { { translate!(i18, "components.under_construction") } }
}
}
}

10
src/consulting.rs Normal file
View File

@ -0,0 +1,10 @@
use dioxus::prelude::*;
use crate::components::UnderConstruction;
#[component]
pub fn Consulting() -> Element {
rsx! {
UnderConstruction { },
}
}

115
src/cv.rs
View File

@ -1,4 +1,5 @@
use dioxus::prelude::*;
use dioxus_sdk::{i18n::use_i18, translate};
use crate::components::{H4, HR};
@ -21,6 +22,8 @@ pub fn CV() -> Element {
}
fn Introduction() -> Element {
let i18 = use_i18();
rsx! {
div {
class: "flex",
@ -28,71 +31,39 @@ fn Introduction() -> Element {
class: "rounded-full w-16 h-16 mx-16",
src: "/pictures/portrait.webp"
}
P {
"While studying for my bachelors degree I accumulated a lot of
industry and academic experience. My professional and personal
intererests are DevOps/IaC, Systems/Software Security and Computer
Networking. All of which I deepen in personal projects such as my
homelab and CTF challenges."
}
P { { translate!(i18, "cv.introduction") }}
}
}
}
fn WorkExperience() -> Element {
let i18 = use_i18();
rsx! {
div {
class: "ms-8 max-w-3/4",
H4 { "Work Experience" },
H4 { { translate!(i18, "cv.workexperience.title") } },
ol {
class:"relative border-s border-gray-200 dark:border-gray-700",
CVEntry {time: "2021 - now", title: "Research Assistant @ UDE",
CVEntry {time: translate!(i18, "cv.workexperience.ra_ude.time"), title: translate!(i18, "cv.workexperience.ra_ude.title"),
technologies: vec!["Rust".to_string(), "Python".to_string(), "P4".to_string(), "Linux".to_string(), "Docker".to_string(), "Kubernetes".to_string()],
description:
"While working for the Network Communication System Research
Group at the University Duisburg-Essen as a research assistant
I've assisted in research around software defined networking,
5G, congestion control algorithms and federated machine learning.
I've established and managed the research groups on-premise and
cloud infractructure, inventory system and online presence."
description: translate!(i18, "cv.workexperience.ra_ude.description")
},
CVEntry {time: "2021 - 2022", title: "Mentoring @ UDE",
CVEntry {time: translate!(i18, "cv.workexperience.ra_ude.time"), title: translate!(i18, "cv.workexperience.mentoring_ude.title"),
technologies: vec!["Powerpoint".to_string()],
description:
"As a mentor for students enrolling into the computer
science program of the University Duisburg-Essen I
introduced groups of ~20 freshmen to their new academic
environment at the beginning of each semester. Offering
additional organizational and technical guidance for
their first year in university."
description: translate!(i18, "cv.workexperience.mentoring_ude.description")
},
CVEntry {time: "2018 - 2020", title: "Software Engineer @ gefeba Engineering GmbH",
CVEntry {time: translate!(i18, "cv.workexperience.ra_ude.time"), title: translate!(i18, "cv.workexperience.se2_gefeba.title"),
technologies: vec!["C#".to_string(), "Angular".to_string(), "bootstrap".to_string(), "Entity Framework".to_string()],
description:
"As a software engineer at gefeba Engineering I worked
on the companies main software product, which was a
frame-based data exchange system to monitor industry
machinery using C# and Entity Framework. Another project
I worked on was a real time log visualization application
for the same machinery."
description: translate!(i18, "cv.workexperience.se2_gefeba.description")
},
CVEntry {time: "2016 - 2019", title: "Student Council Member @ UDE",
CVEntry {time: translate!(i18, "cv.workexperience.ra_ude.time"), title: translate!(i18, "cv.workexperience.student_fse.title"),
technologies: vec!["Linux".to_string(), "Networking".to_string(), "LaTeX".to_string()],
description:
"As a student council member I participated in faculty
committees and organized social events. My
main responsibilities as a member were the management
of the IT infrastructure and supporting students, be it
organizationally or subject-specific."
description: translate!(i18, "cv.workexperience.student_fse.description")
},
CVEntry {time: "2013 - 2015", title: "Software Engineer @ gefeba Engineering GmbH",
CVEntry {time: translate!(i18, "cv.workexperience.ra_ude.time"), title: translate!(i18, "cv.workexperience.se1_gefeba.title"),
technologies: vec!["C#".to_string(), "HTML".to_string(), "Javascript".to_string(), "CSS".to_string()],
description:
"After a school internship I got offered a job as a
Software Engineer. I mostly worked on internal ERP
projects, designed a tool which aided in managing
project related mail traffic and worked on the
internal master data management tool."
description: translate!(i18, "cv.workexperience.se1_gefeba.description")
},
}
},
@ -112,59 +83,67 @@ fn Miscellaneous() -> Element {
}
fn Education() -> Element {
let i18 = use_i18();
rsx! {
div {
H4 {"Education"},
H4 { { translate!(i18, "cv.education.title") } },
Entry {
title: "BSc Systems Engineering",
time { class:"mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500", "2015 - now"},
title: translate!(i18, "cv.education.bachelor.title"),
time { class:"mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500", { translate!(i18, "cv.education.bachelor.time") } },
},
}
}
}
fn Skills() -> Element {
let i18 = use_i18();
rsx! {
div {
H4 {"Skills"},
H4 { { translate!(i18, "cv.skills.title") }},
Entry {
title: "DevOps",
P { "Ansible" },
P { "Kubernetes" },
P { "GitOps" },
title: translate!(i18, "cv.skills.devops.title"),
P { { translate!(i18, "cv.skills.devops.ansible") } },
P { { translate!(i18, "cv.skills.devops.kubernetes") } },
P { { translate!(i18, "cv.skills.devops.gitops") } },
}Entry {
title: "Software Development",
P { "Rust" },
P { "Python" },
P { "C#" },
title: translate!(i18, "cv.skills.software_engineering.title"),
P { { translate!(i18, "cv.skills.software_engineering.rust") } },
P { { translate!(i18, "cv.skills.software_engineering.python") } },
P { { translate!(i18, "cv.skills.software_engineering.csharp") } },
}
}
}
}
fn Languages() -> Element {
let i18 = use_i18();
rsx! {
div {
H4 {"Languages"},
H4 { { translate!(i18, "cv.languages.title") } },
Entry {
P { "German (Native)" },
P { "English (C2)" },
P { "Vietnamese (B1)" },
P { "Japanese (A1)" },
P { {translate!(i18, "cv.languages.german") } },
P { {translate!(i18, "cv.languages.english") } },
P { {translate!(i18, "cv.languages.vietnamese") } },
P { {translate!(i18, "cv.languages.japanese") } },
}
}
}
}
fn Interests() -> Element {
let i18 = use_i18();
rsx! {
div {
H4 {"Interests"}
H4 { { translate!(i18, "cv.interests.title") } },
Entry {
P { "Coffee" },
P { "Tech/IT" },
P { "Guitar" },
P { "Mechanical Keyboards" },
P { { translate!(i18, "cv.interests.coffee") } },
P { { translate!(i18, "cv.interests.tech_it") } },
P { { translate!(i18, "cv.interests.guitar") } },
P { { translate!(i18, "cv.interests.mechanical_keyboards") } },
}
}
}

View File

@ -1,66 +1,39 @@
use crate::components::{Card, H5, P};
use crate::components::{Card, P};
use dioxus::prelude::*;
use dioxus_sdk::{i18n::use_i18, translate};
#[component]
pub fn Home() -> Element {
let i18 = use_i18();
rsx! {
Card {
name: translate!(i18, "home.card.name"),
gender: translate!(i18, "home.card.gender"),
picture: "/pictures/comfy.webp",
div {
class: "p-5",
class: "py-4",
div {
class: "pb-4",
div {
class: "flex justify-between",
Picture {src: "/pictures/comfy.webp"},
}
}
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 ",
Link {
to: "https://git.tudattr.dev/explore/repos",
new_tab: true,
class: "inline-flex items-center font-medium hover:underline",
"gitea"},
"?"
},
class: "mb-2",
P { { translate!(i18, "home.card.l1") } },
P { { translate!(i18, "home.card.l2") } },
P { { translate!(i18, "home.card.l3") },
Link {
to: "https://git.tudattr.dev/explore/repos",
new_tab: true,
class: "inline-flex items-center font-medium hover:underline",
"gitea"},
{ translate!(i18, "home.card.l3_1") }
},
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",
class: "w-fit relative inline-flex items-center justify-center p-1 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white w-fill",
p {
class: "p-1",
"Get in touch."
}
},
},
Link {
to: "mailto:tuan-dat.tran@tudattr.dev",
class: "w-fit relative inline-flex items-center justify-center p-1 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white w-fill",
p {
class: "p-1",
{ translate!(i18, "home.card.contact_button") }
}
}
},
}
}
#[derive(PartialEq, Props, Clone)]
struct PictureProp {
#[props(default = "".to_string())]
class: String,
src: String,
}
fn Picture(prop: PictureProp) -> Element {
rsx! {
img {
class: "w-24 h-24 rounded-full shadow-lg",
src: "{prop.src}",
alt: "",
},
}
}

View File

@ -1,4 +1,5 @@
use dioxus::prelude::*;
use dioxus_sdk::{i18n::use_i18, translate};
use tracing::info;
use crate::components::{H1, HR, P};
@ -6,38 +7,40 @@ use crate::components::{H1, HR, P};
#[component]
pub fn Impressum() -> Element {
let mut show_impressum = use_signal(|| false);
let i18 = use_i18();
rsx! {
if show_impressum() {
div {
class: "flex flex-col items-center",
button {
onclick: move |_| {
info!("Hide impressum.");
div {
class: "flex flex-col items-center",
button {
onclick: move |_| {
info!("Hide impressum.");
},
H1 { { translate!(i18, "impressum.on") } },
},
H1 { "Impressum" },
P { "Tuan-Dat Tran" },
P { "c/o AutorenServices.de" },
P { "Birkenallee 24" },
P { "36037 Fulda" },
},
P { "Tuan-Dat Tran" },
P { "c/o AutorenServices.de" },
P { "Birkenallee 24" },
P { "36037 Fulda" },
}
HR {}
div {
class: "flex flex-col items-center",
P { "tuan-dat.tran@tudattr.dev" },
P { "+49 176 83468388" },
HR {}
div {
class: "flex flex-col items-center",
P { "tuan-dat.tran@tudattr.dev" },
P { "+49 176 83468388" },
}
}
} else {
div {
class: "flex flex-col items-center p-3",
button {
onclick: move |_| async move {
info!("Showing impressum.");
show_impressum.set(true);
},
H1 { "Show Impressum" },
H1 { { translate!(i18, "impressum.off") } },
},
}
}

2
src/languages.rs Normal file
View File

@ -0,0 +1,2 @@
pub static EN_GB: &str = include_str!("./languages/en-GB.json");
pub static DE_DE: &str = include_str!("./languages/de-DE.json");

151
src/languages/de-DE.json Normal file
View File

@ -0,0 +1,151 @@
{
"id": "de-DE",
"texts": {
"headers": {
"home": "Home",
"cv": "Lebenslauf",
"publications_projects": "Artikel/Projekte",
"consulting": "Consulting",
"about": "Impressum",
"language_buttons": {
"english": "🇬🇧 Englisch",
"german": "🇩🇪 Deutsch"
}
},
"home": {
"card": {
"name": "Tuan-Dat Tran",
"gender": "",
"l1": "Hallihallo! 👋🏻👋🏼👋🏽👋🏾👋🏿",
"l2": "Willkommen auf meiner kleinen Webseite im World Wide Web.",
"l3": "Während du hier bist, schau dir doch meine Projekte auf ",
"l3_1": " an.",
"contact_button": "Get in touch."
}
},
"cv": {
"introduction": "Während meines Bachelorstudiums habe ich viele Erfahrungen in der Industrie und im Studium gesammelt. Meine beruflichen und persönlichen Interessen sind DevOps/IaC, Systems/Software Security und Computer Networking. All diese Interessen vertiefe ich in persönlichen Projekten wie meinem Homelab und CTF-Challenges.",
"workexperience": {
"title": "Berufserfahrung",
"se1_gefeba": {
"title": "Software Entwickler @ gefeba Engineering GmbH",
"time": "2013 - 2015",
"description": "Nach einem Schulpraktikum wurde mir eine Stelle als Software Entwickler angeboten. Ich arbeitete hauptsächlich an internen ERP-Projekten, entwickelte ein Tool, das bei der Verwaltung des projektbezogenen E-Mail-Verkehrs half, und arbeitete an dem internen Stammdatenmanagement-Tool."
},
"student_fse": {
"title": "Fachschaftsratsmitglied @ UDE",
"time": "2016 - 2019",
"description": "Als Fachschaftsratsmitglied wirkte ich in Fakultätsausschüssen mit und organisierte soziale Veranstaltungen. Meine Hauptaufgaben als Mitglied waren die Verwaltung der IT-Infrastruktur und die Unterstützung der Studierenden, sei es organisatorisch oder fachspezifisch."
},
"se2_gefeba": {
"title": "Software Entwickler @ gefeba Engineering GmbH",
"time": "2018 - 2020",
"description": "Als Software Entwickler bei gefeba Engineering arbeitete ich an dem Hauptprodukt des Unternehmens, einem Frame-basierten Datenaustauschsystem zur Überwachung von Industriemaschinen mit C# und Entity Framework. Ein weiteres Projekt, an dem ich gearbeitet habe, war eine Echtzeit-Anwendung zur Visualisierung von Protokollen für dieselben Maschinen."
},
"mentoring_ude": {
"title": "Mentoring @ UDE",
"time": "2021 - 2022",
"description": "Als Mentor für Studienanfänger im Studiengang Informatik der Universität Duisburg-Essen habe ich zu Beginn jedes Semesters Gruppen von ~20 Studienanfängern in ihr neues akademisches Umfeld eingeführt. Ich bot zusätzliche organisatorische und technische Unterstützung für das erste Jahr an der Universität an."
},
"ra_ude": {
"title": "Studentische Hilfskraft @ UDE",
"time": "2021 - jetzt",
"description": "Während meiner Tätigkeit als wissenschaftlicher Mitarbeiter in der Network Communication System Research Group an der Universität Duisburg-Essen habe ich an der Forschung rund um Software Defined Networking, 5G, Staukontrollalgorithmen und föderiertes maschinelles Lernen mitgearbeitet. Ich habe die On-Premise- und Cloud-Infrastruktur, das Inventarsystem und die Online-Präsenz der Forschungsgruppe aufgebaut und verwaltet."
}
},
"education": {
"title": "Bildungsweg",
"bachelor": {
"title": "BSc Angewandte Informatik - Systems Engineering",
"time": "2015 - jetzt",
"description": ""
}
},
"skills": {
"title": "Fähigkeiten",
"devops": {
"title": "DevOps",
"ansible": "Ansible",
"kubernetes": "Kubernetes",
"gitops": "GitOps"
},
"software_engineering": {
"title": "Programmiersprachen",
"rust": "Rust",
"python": "Python",
"csharp": "C#"
}
},
"languages": {
"title": "Sprachkenntnisse",
"german": "Deutsch (Muttersprache)",
"english": "Englisch (C2)",
"vietnamese": "Vietnamesisch (B1)",
"japanese": "Japanisch (A1)"
},
"interests": {
"title": "Interessen",
"coffee": "Kaffee",
"tech_it": "Tech/IT",
"guitar": "Gitarre",
"mechanical_keyboards": "Mechanische Tastaturen"
}
},
"publications_projects": {
"publications": {
"title": "Veröffentlichungen",
"rpm": {
"title": "RPM: Reverse Path Congestion Marking on P4 Programmable Switches",
"authors": "N. Baganal-Krishna, T.-D. Tran, R. Kundel and A. Rizk",
"conference": "IEEE LCN 2023",
"url": "https://doi.org/10.48550/arXiv.2307.09639",
"description": "In diesem Artikel stellen wir Reverse Path Congestion Marking (RPM) vor, um die Reaktion auf Netzwerküberlastungen zu beschleunigen, ohne den End-Host-Stack zu verändern. RPM entkoppelt das Stausignal vom nachgelagerten Pfad nach dem Engpass, während die Stabilität der Staukontrollschleife erhalten bleibt. Wir zeigen, dass RPM die Durchsatzfairness für RTT bei heterogenen TCP-Flüssen sowie die Flussabwicklungszeit verbessert, insbesondere für kleine Data Center TCP (DCTCP)-Flows um P4 programmierbare ASIC-Switches."
},
"iot_fuzzers": {
"title": "Overview of IoT Fuzzing Techniques",
"authors": "Tuan-Dat Tran",
"conference": "Seminar",
"url": "https://git.tudattr.dev/AISE/seminar/src/branch/main/paper.pdf",
"description": "In dieser Arbeit vergleichen wir Methoden, die speziell von IoT Fuzzern genutzt werden um die von IoT Geräten stammenden Herausforderungen und Einschränkungen zu umgehen."
}
},
"projects": {
"title": "Projekte",
"bachelorproject": {
"title": "Unbenannter Ethereum Smart Contract Fuzzer",
"authors": "Tuan-Dat Tran",
"kind": "Bachelorprojekt",
"url": "https://git.ude-syssec.de/uni-due-syssec/students/2022_tuan-dat_tran_libAFLEVMFuzzer/ethfuzz/",
"description": "In diesem aktuell laufendem Projekt entwickle ich einen Ethereum Smart Contract Fuzzer. Mehr Infos folgen..."
},
"dotfiles": {
"title": ".dotfiles",
"authors": "Tuan-Dat Tran",
"kind": "Personal",
"url": "https://git.tudattr.dev/tudattr/dotfiles",
"description": "dotfiles ist ein umgangssprachlicher Begriff, der normalerweise für Konfigurationsdateien in Linux-basierten Systemen verwendet wird. Meine Dotfiles enthalten Konfigurationen für Tools, die ich häufig verwende, sowie eine Dokumentation zur Einrichtung meines täglich genutzten Notebooks. Sie bieten eine Grundlage für jedes persönliche Linux-System, das ich einrichte, und ermöglichen Wiederholbarkeit, was den Prozess der Einrichtung eines ArchLinux-basierten Systems vereinfacht."
},
"homelab": {
"title": "Homelab",
"authors": "Tuan-Dat Tran",
"kind": "Personal",
"url": "https://git.tudattr.dev/tudattr/ansible",
"description": "Ansible ist eine Automatisierungs-Engine, die eine automatische Bereitstellung, Konfigurationsverwaltung und Anwendungsbereitstellung ermöglicht. Ich verwende Ansible, um mein Homelab einzurichten, das mir als Plattform zum Ausprobieren und Lernen neuer Technologien dient."
}
}
},
"impressum": {
"off": "Impressum anzeigen",
"on": "Impressum"
},
"components": {
"under_construction": "Diese Seite befindet sich gerade im Aufbau"
},
"footer": {
"year": "© 2024 ",
"name": "Tuan-Dat Tran",
"rights": ". All Rights Reserved.",
"contact": "Kontakt"
}
}
}

151
src/languages/en-GB.json Normal file
View File

@ -0,0 +1,151 @@
{
"id": "en-GB",
"texts": {
"headers": {
"home": "Home",
"cv": "CV",
"publications_projects": "Publications/Projects",
"consulting": "Consulting",
"about": "About",
"language_buttons": {
"english": "🇬🇧 English",
"german": "🇩🇪 German"
}
},
"home": {
"card": {
"name": "Tuan-Dat Tran",
"gender": "(He/Him)",
"l1": "Hey there! 👋🏻👋🏼👋🏽👋🏾👋🏿",
"l2": "Welcome to my little place on the internet.",
"l3": "While you're here, why don't you check out my projects over on ",
"l3_1": "?",
"contact_button": "Get in touch."
}
},
"cv": {
"introduction": "While studying for my bachelors degree I accumulated a lot of industry and academic experience. My professional and personal intererests are DevOps/IaC, Systems/Software Security and Computer Networking. All of which I deepen in personal projects such as my homelab and CTF challenges.",
"workexperience": {
"title": "Work Experience",
"se1_gefeba": {
"title": "Software Engineer @ gefeba Engineering GmbH",
"time": "2013 - 2015",
"description": "After a school internship I got offered a job as a Software Engineer. I mostly worked on internal ERP projects, designed a tool which aided in managing project related mail traffic and worked on the internal master data management tool."
},
"student_fse": {
"title": "Student Council Member @ UDE",
"time": "2016 - 2019",
"description": "As a student council member I participated in faculty committees and organized social events. My main responsibilities as a member were the management of the IT infrastructure and supporting students, be it organizationally or subject-specific."
},
"se2_gefeba": {
"title": "Software Engineer @ gefeba Engineering GmbH",
"time": "2018 - 2020",
"description": "As a software engineer at gefeba Engineering I worked on the companies main software product, which was a frame-based data exchange system to monitor industry machinery using C# and Entity Framework. Another project I worked on was a real time log visualization application for the same machinery."
},
"mentoring_ude": {
"title": "Mentoring @ UDE",
"time": "2021 - 2022",
"description": "As a mentor for students enrolling into the computer science program of the University Duisburg-Essen I introduced groups of ~20 freshmen to their new academic environment at the beginning of each semester. Offering additional organizational and technical guidance for their first year in university."
},
"ra_ude": {
"title": "Research Assistant @ UDE",
"time": "2021 - now",
"description": "While working for the Network Communication System Research Group at the University Duisburg-Essen as a research assistant I've assisted in research around software defined networking, 5G, congestion control algorithms and federated machine learning. I've established and managed the research groups on-premise and cloud infractructure, inventory system and online presence."
}
},
"education": {
"title": "Education",
"bachelor": {
"title": "BSc Systems Engineering",
"time": "2015 - now",
"description": ""
}
},
"skills": {
"title": "Skills",
"devops": {
"title": "DevOps",
"ansible": "Ansible",
"kubernetes": "Kubernetes",
"gitops": "GitOps"
},
"software_engineering": {
"title": "Software Engineering",
"rust": "Rust",
"python": "Python",
"csharp": "C#"
}
},
"languages": {
"title": "Languages",
"german": "German (Native)",
"english": "English (C2)",
"vietnamese": "Vietnamese (B1)",
"japanese": "Japanese (A1)"
},
"interests": {
"title": "Interests",
"coffee": "Coffee",
"tech_it": "Tech/IT",
"guitar": "Guitar",
"mechanical_keyboards": "Mechanical Keyboards"
}
},
"publications_projects": {
"publications": {
"title": "Publications",
"rpm": {
"title": "RPM: Reverse Path Congestion Marking on P4 Programmable Switches",
"authors": "N. Baganal-Krishna, T.-D. Tran, R. Kundel and A. Rizk",
"conference": "IEEE LCN 2023",
"url": "https://doi.org/10.48550/arXiv.2307.09639",
"description": "In this paper, we present Reverse Path Congestion Marking (RPM) to accelerate the reaction to network congestion events without changing the end-host stack. RPM decouples the congestion signal from the downstream path after the bottleneck while maintaining the stability of the congestion control loop. We show that RPM improves throughput fairness for RTT on heterogeneous TCP flows as well as the flow completion time, especially for small Data Center TCP (DCTCP) flows around P4 programmable ASIC switches."
},
"iot_fuzzers": {
"title": "Overview of IoT Fuzzing Techniques",
"authors": "Tuan-Dat Tran",
"conference": "Seminar",
"url": "https://git.tudattr.dev/AISE/seminar/src/branch/main/paper.pdf",
"description": "In this paper, we are comparing techniques used by IoT fuzzers to circumvent the challenges presented by IoT devices and the constraints of the solutions proposed by the IoT fuzzers."
}
},
"projects": {
"title": "Projects",
"bachelorproject": {
"title": "Undisclosed Ethereum Smart Contract Fuzzer",
"authors": "Tuan-Dat Tran",
"kind": "Bachelorproject",
"url": "https://git.ude-syssec.de/uni-due-syssec/students/2022_tuan-dat_tran_libAFLEVMFuzzer/ethfuzz/",
"description": "In this ongoing project I am building an Ethereum Smart Contract Fuzzer. More info will follow."
},
"dotfiles": {
"title": ".dotfiles",
"authors": "Tuan-Dat Tran",
"kind": "Personal",
"url": "https://git.tudattr.dev/tudattr/dotfiles",
"description": "dotfiles is a slang term usually used for configuration files in Linux based systems. My dotfiles contain configurations for tools I frequently use as well as a documentation on how to set up my daily-use notebook. It provides a baseline for any personal Linux system I set up and allows for repeatability simplifies the process of setting up an ArchLinux based system. "
},
"homelab": {
"title": "Homelab",
"authors": "Tuan-Dat Tran",
"kind": "Personal",
"url": "https://git.tudattr.dev/tudattr/ansible",
"description": "Ansible is a automation engine which allows for automatic provisioning, configuration management and application deployment. I use ansible to set up my homelab, which serves as a platform for me to try out and learn new technologies. "
}
}
},
"impressum": {
"off": "Show Impressum",
"on": "Impressum"
},
"components": {
"under_construction": "This page is currently under construction"
},
"footer": {
"year": "© 2024 ",
"name": "Tuan-Dat Tran",
"rights": ". All Rights Reserved.",
"contact": "Contact"
}
}
}

View File

@ -1,25 +1,28 @@
use dioxus::prelude::*;
use dioxus_sdk::{i18n::use_i18, translate};
use crate::components::H1;
pub fn Footer() -> Element {
let i18 = use_i18();
rsx! {
div {
// ToolsUsed {},
footer {
class:"bg-white rounded-lg shadow dark:bg-gray-800 my-4:wa mb-4",
class:"bg-white rounded-lg shadow dark:bg-gray-800",
div {
class:"w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between",
class:"w-full mx-auto p-4 flex items-center justify-between",
span {
class:"text-sm text-gray-500 sm:text-center dark:text-gray-400",
"© 2024 ",
a { href: "#", class: "hover:underline", "Tuan-Dat Tran"},
". All Rights Reserved."
{ translate!(i18, "footer.year") },
a { href: "#", class: "hover:underline", { translate!(i18, "footer.name") }},
{ translate!(i18, "footer.rights") }
}
ul {
class:"flex flex-wrap items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0",
li {
Link { to:"mailto:tuan-dat.tran@tudattr.dev", class:"hover:underline", "Contact" }
Link { to:"mailto:tuan-dat.tran@tudattr.dev", class:"hover:underline", { translate!(i18, "footer.contact") } }
},
}
}

View File

@ -1,32 +1,50 @@
use dioxus::prelude::*;
use dioxus_sdk::{i18n::*, translate};
use crate::Route;
pub fn Header() -> Element {
let i18 = use_i18();
rsx! {
nav {
div {
class: "flex items-center justify-between p-4 w-96",
class: "flex items-center justify-between p-4 flex-wrap mx-auto max-w-screen-xl",
class: "flex items-center justify-between p-4 space-x-8",
Link {
to: Route::Home {},
class:"flex items-center space-x-3 rtl:space-x-reverse",
img { src:"/pictures/ClackCat_t.webp", class:"rounded-full h-8", alt:"Flowbite Logo" },
span { class:"self-center text-2xl font-semibold whitespace-nowrap dark:text-white", "" }
}
div { class:"", id:"navbar-default",
ul { class:"flex space-x-8",
li { class: "", HeaderLink { url: Route::Home {}, text: "Home" } },
li { class: "", HeaderLink { url: Route::CV {}, text: "CV" } },
li { class: "", HeaderLink { url: Route::ProjectsPublications {}, text: "Publications/Projects" } },
li { class: "", HeaderLink { url: Route::Impressum {}, text: "About" } },
}
}
class: "justify-start",
img { src:"/pictures/ClackCat_t.webp", class:"rounded-full h-8", alt:"TuDatTr Logo" },
},
ul {
class:"flex space-x-8",
li { HeaderLink { url: Route::Home {}, text: translate!(i18, "headers.home")} },
li { HeaderLink { url: Route::CV {}, text: translate!(i18, "headers.cv") } },
li { HeaderLink { url: Route::PublicationsProjects {}, text: translate!(i18, "headers.publications_projects") } },
li { HeaderLink { url: Route::Consulting {}, text: translate!(i18, "headers.consulting") } },
li { HeaderLink { url: Route::Impressum {}, text: translate!(i18, "headers.about") } },
},
LanguageButtonGroup { },
}
}
}
}
#[component]
fn LanguageButtonGroup() -> Element {
let mut i18 = use_i18();
let change_to_english = move |_| i18.set_language("en-GB".parse().unwrap());
let change_to_german = move |_| i18.set_language("de-DE".parse().unwrap());
rsx! {
div {
class: "inline-flex rounded-md shadow-sm",
button { class: "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white", onclick: change_to_english, label { { translate!(i18, "headers.language_buttons.english") } } },
button { class: "px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white", onclick: change_to_german, label { { translate!(i18, "headers.language_buttons.german") } } }
}
}
}
#[component]
fn HeaderLink(url: Route, text: String) -> Element {
rsx! {

View File

@ -10,7 +10,7 @@ use header::Header;
pub fn Layout() -> Element {
rsx! {
div {
class: "flex justify-center",
class: "flex justify-center ",
div {
class: "max-w-screen-xl flex-col" ,
Header {},

View File

@ -1,22 +1,29 @@
#![allow(non_snake_case)]
use dioxus::fullstack::Config;
use std::str::FromStr;
use dioxus::prelude::*;
use dioxus_sdk::i18n::*;
use tracing::Level;
pub mod components;
mod consulting;
mod cv;
mod home;
mod impressum;
mod languages;
mod layout;
mod publications;
use crate::consulting::Consulting;
use crate::cv::CV;
use crate::home::Home;
use crate::impressum::Impressum;
use crate::languages::DE_DE;
use crate::languages::EN_GB;
use crate::layout::Layout;
use crate::publications::ProjectsPublications;
use crate::publications::PublicationsProjects;
#[derive(Clone, Routable, Debug, PartialEq, serde::Serialize, serde::Deserialize)]
pub enum Route {
@ -26,9 +33,11 @@ pub enum Route {
#[route("/impressum")]
Impressum {},
#[route("/publications")]
ProjectsPublications {},
PublicationsProjects {},
#[route("/resume")]
CV {},
#[route("/consulting")]
Consulting {},
#[end_layout]
#[route("/:..route")]
PageNotFound { route: Vec<String> },
@ -36,16 +45,20 @@ pub enum Route {
fn main() {
dioxus_logger::init(Level::DEBUG).expect("failed to init logger");
let config = server_only!(
dioxus::fullstack::Config::new().addr(std::net::SocketAddrV4::new(
std::net::Ipv4Addr::new(0, 0, 0, 0),
8080,
))
);
LaunchBuilder::fullstack().with_cfg(config).launch(App)
LaunchBuilder::fullstack()
.with_cfg(server_only!(dioxus::fullstack::Config::new().addr(
std::net::SocketAddrV4::new(std::net::Ipv4Addr::new(0, 0, 0, 0), 8080,)
)))
.launch(App)
}
fn App() -> Element {
use_init_i18n("en-GB".parse().unwrap(), "en-GB".parse().unwrap(), || {
let en_gb = Language::from_str(EN_GB).unwrap();
let de_de = Language::from_str(DE_DE).unwrap();
vec![en_gb, de_de]
});
rsx! {
meta {
name: "robots",
@ -79,11 +92,8 @@ pub struct BodyProp {
pub fn Body(prop: BodyProp) -> Element {
rsx! {
div {
class: "flex justify-center my-4",
div {
class: "max-w-screen-xl min-w-full",
{prop.children}
}
class: "my-4 flex justify-center",
{prop.children}
}
}
}

View File

@ -1,19 +1,25 @@
use dioxus::prelude::*;
use dioxus_sdk::{i18n::use_i18, translate};
use crate::components::{UnderConstruction, H1, HR};
#[component]
pub fn ProjectsPublications() -> Element {
pub fn PublicationsProjects() -> Element {
let i18 = use_i18();
rsx! {
UnderConstruction { },
div {
H1 { "Publications" }
Publications { },
},
HR {},
div {
H1 { "Projects" }
Projects { },
class: "flex flex-col ",
UnderConstruction { },
div {
H1 { { translate!(i18, "publications_projects.publications.title") } }
Publications { },
},
HR {},
div {
H1 { { translate!(i18, "publications_projects.projects.title") } }
Projects { },
}
}
}
}
@ -30,37 +36,25 @@ struct PublicationProp {
}
fn Publications() -> Element {
let i18 = use_i18();
rsx! {
div {
class: "flex gap-4 items-center flex-wrap",
Publication {
doi: "https://doi.org/10.48550/arXiv.2307.09639",
conference: "IEEE LCN 2023",
title: "RPM: Reverse Path Congestion Marking on P4 Programmable Switches",
authors: "N. Baganal-Krishna, T.-D. Tran, R. Kundel and A. Rizk",
description: "
In this paper, we present Reverse Path Congestion Marking
(RPM) to accelerate the reaction to network congestion
events without changing the end-host stack. RPM decouples
the congestion signal from the downstream path after the
bottleneck while maintaining the stability of the
congestion control loop. We show that RPM improves
throughput fairness for RTT on heterogeneous TCP flows as
well as the flow completion time, especially for small
Data Center TCP (DCTCP) flows around P4 programmable ASIC
switches."
title: translate!(i18, "publications_projects.publications.rpm.title"),
authors: translate!(i18, "publications_projects.publications.rpm.authors"),
conference: translate!(i18, "publications_projects.publications.rpm.conference"),
doi: translate!(i18, "publications_projects.publications.rpm.url"),
description: translate!(i18, "publications_projects.publications.rpm.description")
},
Publication {
doi: "https://git.tudattr.dev/AISE/seminar/src/branch/main/paper.pdf",
conference: "Seminar",
title: "Overview of IoT Fuzzing Techniques",
authors: "Tuan-Dat Tran",
description: "
In this paper, we are comparing techniques used
by IoT fuzzers to circumvent the challenges presented
by IoT devices and the constraints of the
solutions proposed by the IoT fuzzers."
title: translate!(i18, "publications_projects.publications.iot_fuzzers.title"),
authors: translate!(i18, "publications_projects.publications.iot_fuzzers.authors"),
conference: translate!(i18, "publications_projects.publications.iot_fuzzers.conference"),
doi: translate!(i18, "publications_projects.publications.iot_fuzzers.url"),
description: translate!(i18, "publications_projects.publications.iot_fuzzers.description")
},
}
}
@ -89,43 +83,31 @@ fn Publication(prop: PublicationProp) -> Element {
}
fn Projects() -> Element {
let i18 = use_i18();
rsx! {
div {
class: "flex gap-4 items-center flex-wrap",
Project {
url: "https://git.ude-syssec.de/uni-due-syssec/students/2022_tuan-dat_tran_libAFLEVMFuzzer/ethfuzz/",
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."
title: translate!(i18, "publications_projects.projects.bachelorproject.title"),
authors: translate!(i18, "publications_projects.projects.bachelorproject.authors"),
kind: translate!(i18, "publications_projects.projects.bachelorproject.kind"),
url: translate!(i18, "publications_projects.projects.bachelorproject.url"),
description: translate!(i18, "publications_projects.projects.bachelorproject.description")
},
Project {
url: "https://git.tudattr.dev/tudattr/dotfiles",
kind: "Personal Project",
title: ".dotfiles",
authors: "Tuan-Dat Tran",
description: "
dotfiles is a slang term usually used for configuration files in
Linux based systems. My dotfiles contain configurations for tools
I frequently use as well as a documentation on how to set up
my daily-use notebook. It provides a baseline for any personal
Linux system I set up and allows for repeatability simplifies
the process of setting up an ArchLinux based system.
"
title: translate!(i18, "publications_projects.projects.dotfiles.title"),
authors: translate!(i18, "publications_projects.projects.dotfiles.authors"),
kind: translate!(i18, "publications_projects.projects.dotfiles.kind"),
url: translate!(i18, "publications_projects.projects.dotfiles.url"),
description: translate!(i18, "publications_projects.projects.dotfiles.description")
},
Project {
url: "https://git.tudattr.dev/tudattr/ansible",
kind: "Personal Project",
title: "Ansible Homelab",
authors: "Tuan-Dat Tran",
description: "
Ansible is a automation engine which allows for automatic
provisioning, configuration management and application
deployment. I use ansible to set up my homelab, which serves as
a platform for me to try out and learn new technologies.
"
title: translate!(i18, "publications_projects.projects.homelab.title"),
authors: translate!(i18, "publications_projects.projects.homelab.authors"),
kind: translate!(i18, "publications_projects.projects.homelab.kind"),
url: translate!(i18, "publications_projects.projects.homelab.url"),
description: translate!(i18, "publications_projects.projects.homelab.description")
}
}
}