Replace quotes by tags

src/components/mod.rs

@@ -7,4 +7,5 @@ pub mod header;
 pub mod icon_badges;
 pub mod project;
 pub mod quotes;
+pub mod tags;
 pub mod typewriter;

src/components/tags.rs

@@ -0,0 +1,25 @@
+use yew::prelude::*;
+
+use stylist::yew::styled_component;
+
+use crate::components::typewriter::Typewriter;
+use rand::seq::SliceRandom;
+
+#[derive(Debug, PartialEq, Properties)]
+pub struct TagsProps {
+	pub file_content: String,
+}
+
+#[styled_component]
+pub fn Tags(tags: &TagsProps) -> Html {
+	let mut document = serde_yaml::from_str::<Vec<String>>(&tags.file_content)
+		.unwrap()
+		.iter()
+		.map(|tag| tag.to_string())
+		.collect::<Vec<String>>();
+	document.shuffle(&mut rand::thread_rng());
+
+	html! {
+		<Typewriter texts={Vec::from(document)} class="text-wrap text-clip overflow-hidden max-w-full text-3xl font-black italic text-center" />
+	}
+}

src/content/de/tags.yaml

@@ -0,0 +1,5 @@
+- Datengetriebene Optimierung mittels Machine Learning
+- Problemorientierte Optimierung mittels Operations Research und mathematischer Optimierung
+- Webseitenentwicklung
+- Softwarelösungen
+- Datenanalyse und prädiktive Modellierung

src/content/en/tags.yaml

@@ -0,0 +1,5 @@
+- Data-Driven Optimization using Machine Learning
+- Problem-Oriented Optimization using Operations Research & Mathematical Optimization
+- Website Development
+- Software Solutions
+- Data Analysis & Predictive Modeling

src/pages/home.rs

@@ -6,7 +6,7 @@ use yew::prelude::*;
 
 use include_dir::{include_dir, Dir};
 
-use crate::components::quotes::Quotes;
+use crate::components::tags::Tags;
 use crate::localization::{use_localization, Localization};
 
 use crate::components::content_education::ContentEducation;
@@ -61,8 +61,8 @@ pub fn Home() -> Html {
 		Localization::DE => &DE_TRANSLATIONS,
 	};
 
-	let quotes_en = include_str!("../content/en/quotes.yaml");
-	let quotes_de = include_str!("../content/de/quotes.yaml");
+	let tags_en = include_str!("../content/en/tags.yaml");
+	let tags_de = include_str!("../content/de/tags.yaml");
 
 	let projects_md_dir = match localization.get() {
 		Localization::EN => &CONTENT_EN_PROJECTS_DIR,
@@ -153,8 +153,8 @@ pub fn Home() -> Html {
 					<div class={String::from("grow py-8 mx-2 ") + quotes_css.get_class_name()}>
 						{ match localization.get() {
 							// If I dont wrap one of the Quotes in a div, it seems that simply the prop is switched, which is not supported!
-							Localization::EN => html! { <Quotes file_content={quotes_en}/> },
-							Localization::DE => html! { <div><Quotes file_content={quotes_de}/></div> },
+							Localization::EN => html! { <Tags file_content={tags_en}/> },
+							Localization::DE => html! { <div><Tags file_content={tags_de}/></div> },
 						} }
 					</div>
 					<div class="border-foreground-tertiary">