Update Tailwind & Improved Content & Added Content

.github/workflows/tailwind.yml

@@ -0,0 +1,17 @@
+on: push
+
+name: Tailwind
+
+jobs:
+  install_and_test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Node.js
+        uses: actions/setup-node@v1
+      - name: Install Tailwind
+        run: npm install -D tailwindcss
+      - name: Install Dependencies
+        run: npm install @tailwindcss/typography @tailwindcss/forms @tailwindcss/aspect-ratio
+      - name: Build
+        run: npx tailwind -o dist/main.css

build_release.sh

@@ -21,13 +21,20 @@ cargo binstall trunk -y
 # Get wasm-opt
 cargo binstall wasm-opt -y
 
+# Install tailwindcss and dependencies
+npm install -D tailwindcss
+npm install @tailwindcss/typography @tailwindcss/forms @tailwindcss/aspect-ratio
+
 # Clean the project
 trunk clean
 cargo clean
 
 # Get current directory
 ROOT_DIR=$(pwd)
 
+# Build the tailwind css file
+npx tailwind -o dist/main.css
+
 # First build the submodules
 cd $ROOT_DIR/fractal_rust
 trunk build --release --public-url "/public/project_code/fractal_rust/"

index.html

@@ -10,7 +10,8 @@
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">
 
-        <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp" type="text/javascript"></script>
+        <link data-trunk rel="copy-dir" href="./styles" />
+        <link data-trunk rel="css" href="styles/main.css" />
 
         <link data-trunk rel="copy-dir" href="./src/images" />
         <link data-trunk rel="copy-dir" href="./src/public" />

src/components/content_teaching.rs → src/components/content_experience.rs

@@ -16,13 +16,13 @@ struct Metadata {
 }
 
 #[derive(Debug, PartialEq, Properties)]
-pub struct ContentTeachingProps {
+pub struct ContentExperienceProps {
 	pub markdown: String,
 	pub border_color: String,
 }
 
 #[styled_component]
-pub fn ContentTeaching(props: &ContentTeachingProps) -> Html {
+pub fn ContentExperience(props: &ContentExperienceProps) -> Html {
 	let md_str = props.markdown.clone();
 
 	// Get Front Matter

src/components/content_item.rs

@@ -41,6 +41,7 @@ pub fn ContentItem(props: &ContentEducationProps) -> Html {
 	width: 100%;
 	margin-top: 0.75rem;
 	margin-bottom: 0.75rem;
+	min-height: fit-content;
 	--tw-text-opacity: 1;
 	color: ${fg} !important;
 
@@ -82,7 +83,7 @@ pub fn ContentItem(props: &ContentEducationProps) -> Html {
 	}
 
 	h1 {
-		margin-top: 2rem;
+		margin-top: 0rem;
 		margin-bottom: 0px;
 		border-bottom-width: 1px;
 		--tw-border-opacity: 1;
@@ -91,13 +92,25 @@ pub fn ContentItem(props: &ContentEducationProps) -> Html {
 	}
 
 	h2 {
-		margin-top: 1rem;
+		margin-top: 0rem;
 		margin-bottom: -0.25rem;
 	}
 
+	h3 {
+		margin-top: 0rem;
+		margin-bottom: 0rem;
+	}
+
+	h4 {
+		margin-top: 0rem;
+		margin-bottom: 0rem;
+	}
+
 	hr {
 		--tw-border-opacity: 1;
 		border-color: ${fg};
+		margin-top: 0rem;
+		margin-bottom: 0rem;
 	}
 
 	a.my-a {
@@ -125,14 +138,14 @@ pub fn ContentItem(props: &ContentEducationProps) -> Html {
 	sup {
 		--tw-text-opacity: 1;
 		color:${fg2};
+		text-wrap: nowrap;
 	}
 
 	.cell {
-		float: left;
 		margin-left: 0px;
 		margin-right: 0px;
 		margin-bottom: 1rem;
-		margin-top: -2rem;
+		margin-top: 1rem;
 		min-width: 100%;
 	}
 
@@ -142,17 +155,6 @@ pub fn ContentItem(props: &ContentEducationProps) -> Html {
 			min-width: 0px;
 		}
 	}
-
-	/* used for "last cell" - workaround */
-
-	.cell-non-md {
-		float: left;
-		margin-left: 0px;
-		margin-right: 0px;
-		margin-bottom: 1rem;
-		margin-top: -2rem;
-		min-width: 100%;
-	}
 	"#,
 		fg = theme.foreground_primary.clone(),
 		fg2 = theme.foreground_secondary.clone()

src/components/mod.rs

@@ -1,7 +1,7 @@
 pub mod color_theme_picker;
 pub mod content_education;
+pub mod content_experience;
 pub mod content_item;
-pub mod content_teaching;
 pub mod footer;
 pub mod header;
 pub mod icon_badges;

src/components/project.rs

@@ -169,6 +169,7 @@ pub fn ProjectPost(props: &ProjectCardProps) -> Html {
 	width: 100%;
 	margin-top: 0.75rem;
 	margin-bottom: 0.75rem;
+	min-height: fit-content;
 	--tw-text-opacity: 1;
 	color: ${fg} !important;
 
@@ -235,9 +236,21 @@ pub fn ProjectPost(props: &ProjectCardProps) -> Html {
 		margin-bottom: -0.25rem;
 	}
 
+	h3 {
+		margin-top: 0rem;
+		margin-bottom: 0rem;
+	}
+
+	h4 {
+		margin-top: 0rem;
+		margin-bottom: 0rem;
+	}
+
 	hr {
 		--tw-border-opacity: 1;
 		border-color: ${fg};
+		margin-top: 0rem;
+		margin-bottom: 0rem;
 	}
 
 	a.my-a {
@@ -265,14 +278,14 @@ pub fn ProjectPost(props: &ProjectCardProps) -> Html {
 	sup {
 		--tw-text-opacity: 1;
 		color:${fg2};
+		text-wrap: nowrap;
 	}
 
 	.cell {
-		float: left;
 		margin-left: 0px;
 		margin-right: 0px;
 		margin-bottom: 1rem;
-		margin-top: -2rem;
+		margin-top: 1rem;
 		min-width: 100%;
 	}
 
@@ -282,17 +295,6 @@ pub fn ProjectPost(props: &ProjectCardProps) -> Html {
 			min-width: 0px;
 		}
 	}
-
-	/* used for "last cell" - workaround */
-
-	.cell-non-md {
-		float: left;
-		margin-left: 0px;
-		margin-right: 0px;
-		margin-bottom: 1rem;
-		margin-top: -2rem;
-		min-width: 100%;
-	}
 	"#,
 		fg = theme.foreground_primary.clone(),
 		fg2 = theme.foreground_secondary.clone()

src/content/de/education/2022_09-01_RWTH-Aachen.md

@@ -4,9 +4,11 @@ education: B.Sc. in Informatik
 date_range: Oktober 2019 - September 2022
 location: Aachen, Deutschland
 ---
-<div class="w-full min-w-full">
-	<h3 class="min-w-full">Grundstudium</h3>
-	<hr>
+<div class="w-full min-w-full flex flex-row flex-wrap">
+	<div class="min-w-full">
+		<h3>Grundstudium</h3>
+		<hr>
+	</div>
 	<div class="cell">
 		<h4>Praktische Informatik</h4>
 		<ul>
@@ -63,10 +65,12 @@ location: Aachen, Deutschland
 	</div>
 </div>
 
-<div class="w-full min-w-full">
-	<h3 class="min-w-full">Anwendungsfach: BWL</h3>
-	<hr>
-	<div class="cell-non-md">
+<div class="w-full min-w-full flex flex-row flex-wrap">
+	<div class="min-w-full">
+		<h3>Anwendungsfach: BWL</h3>
+		<hr>
+	</div>
+	<div class="cell">
 		<ul>
 			<li>Einführung in die BWL</li>
 			<li>Quantitative Methoden</li>
@@ -76,11 +80,13 @@ location: Aachen, Deutschland
 	</div>
 </div>
 
-<div class="w-full min-w-full">
-	<h3 class="min-w-full">Other</h3>
-	<hr>
-	<div class="cell-non-md">
-		<ul>
+<div class="w-full min-w-full flex flex-row flex-wrap">
+	<div class="min-w-full">
+		<h3>Sonstiges</h3>
+		<hr>
+	</div>
+	<div class="cell mb-0 pb-0">
+		<ul class="mb-0 pb-0">
 			<li>Klima Wandel - Google Earth Engine</li>
 		</ul>
 	</div>

src/content/de/education/2023_12_01_UIS.md

@@ -0,0 +1,17 @@
+---
+title: University of Stavanger
+education: M.Sc. in Informatik
+date_range: August 2023 - Dezember 2023
+location: Stavanger, Norwegen
+---
+<i>Erasmus+ Auslandssemester</i>
+
+<div class="w-full min-w-full flex flex-row flex-wrap">
+	<div class="cell mb-0 pb-0">
+		<h4>Wahlpflicht</h4>
+		<ul class="mb-0 pb-0">
+			<li><a href="/eiuie" class="no-underline"><span>Image Processing and Computer Vision</span><i class="fa-solid fa-link text-red-400 ml-1"></i></a></li>
+			<li><a href="/py_css" class="no-underline"><span>Information Retrieval and Text Mining</span><i class="fa-solid fa-link text-red-400 ml-1"></i></a></li>
+		</ul>
+	</div>
+</div>

src/content/de/education/2024_09-01_RWTH-Aachen.md

@@ -4,9 +4,11 @@ education: M.Sc. in Informatik
 date_range: Oktober 2022 - September 2024<sup>*</sup>
 location: Aachen, Deutschland
 ---
-<div class="w-full min-w-full">
-	<h3 class="min-w-full">Grundstudium</h3>
-	<hr>
+<div class="w-full min-w-full flex flex-row flex-wrap">
+	<div class="min-w-full">
+		<h3>Grundstudium</h3>
+		<hr>
+	</div>
 	<div class="cell">
 		<h4>Wahlpflicht</h4>
 		<ul>
@@ -17,8 +19,8 @@ location: Aachen, Deutschland
 			<li>Physikalisch-Basierte Animation</li>
 			<li>The Logic of Knowledge Bases</li>
 			<li>Fixpoints and Induction in Logic and Computer Science</li>
-			<li><a href="/eiuie" class="no-underline"><span>Image Processing and Computer Vision</span><i class="fa-solid fa-link text-red-400 ml-1"></i></a></li>
-			<li><a href="/py_css" class="no-underline"><span>Information Retrieval and Text Mining</span><i class="fa-solid fa-link text-red-400 ml-1"></i></a></li>
+			<li><a href="/eiuie" class="no-underline"><span>Image Processing and Computer Vision</span><sup>***</sup><i class="fa-solid fa-link text-red-400 ml-1"></i></a></li>
+			<li><a href="/py_css" class="no-underline"><span>Information Retrieval and Text Mining</span><sup>***</sup><i class="fa-solid fa-link text-red-400 ml-1"></i></a></li>
 		</ul>
 	</div>
 	<div class="cell">
@@ -32,10 +34,12 @@ location: Aachen, Deutschland
 	</div>
 </div>
 
-<div class="w-full min-w-full cell-non-md">
-	<h3 class="min-w-full">Anwendungsfach: BWL</h3>
-	<hr>
-	<div class="cell-non-md">
+<div class="w-full min-w-full cell flex flex-row flex-wrap">
+	<div class="min-w-full">
+		<h3>Anwendungsfach: BWL</h3>
+		<hr>
+	</div>
+	<div class="cell">
 		<ul>
 			<li>Operations Research 1</li>
 			<li>Operations Research 2</li>
@@ -44,11 +48,20 @@ location: Aachen, Deutschland
 	</div>
 </div>
 
-<div class="w-full min-w-full flex justify-start">
-	<sup class="sup mr-2">
-	* Erwartetes Abschlussdatum
-	</sup>
-	<sup class="sup mr-2">
-	** Noch nicht beendet
-	</sup>
+<div class="w-full min-w-full flex flex-col md:flex-wrap md:flex-row md:space-x-2">
+	<div>
+		<sup class="sup">
+		* Erwartetes Abschlussdatum
+		</sup>
+	</div>
+	<div>
+		<sup class="sup">
+		** Noch nicht beendet
+		</sup>
+	</div>
+	<div>
+		<sup class="sup">
+		*** Während des Erasmus+ Auslandssemesters
+		</sup>
+	</div>
 </div>

src/content/de/experience/2024-02-14_itestra.md

@@ -0,0 +1,6 @@
+---
+title: Werkstudent
+employer: itestra GmbH
+date_range: Februar 2024 - Heute
+location: Aachen, Deutschland
+---