athome/src/publications.rs

use dioxus::prelude::*;

use crate::components::{UnderConstruction, H1, HR};

#[component]
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 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."
            },

            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."
            },
        }
    }
}
fn Publication(prop: PublicationProp) -> 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.doi}",
            new_tab: true,
            h5 {
                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! {
        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."
            },
            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.
                    "
            },
            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.
                    "
            }
        }
    }
}

#[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}",
            }
            p {
                class:"font-normal text-gray-700 dark:text-gray-400",
                "{prop.description}",
            }
        }
    }
}