Add about page

assets/views/website/about.html

@@ -0,0 +1,117 @@
+{% extends "website/base.html" %} {% block content %}
+<span class="m-8">🌟</span>
+<div
+  class="flex flex-col items-center justify-center gap-2 p-4 bg-white rounded-lg"
+>
+  <img
+    src="/static/images/ja.jpg"
+    alt="me"
+    width="300"
+    height="300"
+    class="object-cover rounded-md"
+  />
+  <h2 class="mt-4 text-2xl font-bold text-black">Hello, I'm Gabriel! 👋</h2>
+</div>
+<h1 class="mt-6 text-3xl font-extrabold">More info about me! 💡</h1>
+<div
+  class="flex flex-col items-center m-4 prose text-justify text-white md:text-left md:m-0 md:w-1/2 md:prose-lg lg:prose-xl"
+>
+  <p>
+    Hi! I am Gabriel and I am {{ age }} years old. I study Bioinformatics at the
+    University of Gdansk 🏫. I'm fluent in Polish and English and currently work
+    as a Python Developer at digimonkeys.com 🐒💻.
+  </p>
+</div>
+<h1 class="mt-6 text-3xl font-extrabold">Hobbies 🎮🎸</h1>
+<div
+  class="flex flex-wrap items-center justify-center gap-4 m-4 md:m-0 md:w-1/2"
+>
+  <p
+    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
+  >
+    Programming 💻
+  </p>
+  <p
+    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
+  >
+    Filmmaking 🎥
+  </p>
+  <p
+    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
+  >
+    Gaming 🕹️
+  </p>
+  <p
+    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
+  >
+    Playing guitar 🎸
+  </p>
+</div>
+<h1 class="mt-6 text-3xl font-bold">Interests 🌌📚</h1>
+<div
+  class="flex flex-wrap items-center justify-center gap-4 m-4 md:m-0 md:w-1/2"
+>
+  <p
+    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
+  >
+    Computer Science 💾
+  </p>
+  <p
+    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
+  >
+    Sci-Fi Books 📚
+  </p>
+  <p
+    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
+  >
+    Astronomy 🔭
+  </p>
+  <p
+    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
+  >
+    Sports 🏅
+  </p>
+  <p
+    class="text-base text-center rounded-2xl font-semibold tracking-tight text-black shadow-lg bg-yellow-400 p-2 min-w-[4rem] max-w-[12rem]"
+  >
+    History 🏰
+  </p>
+</div>
+<h1 class="mt-6 text-3xl font-bold">FAQ ❓</h1>
+<div class="flex flex-col gap-2 m-4">
+  <div>
+    <h6 class="text-xl font-bold">
+      How old were you when you started programming?
+    </h6>
+    <p>I was 11 years old 🧑‍💻.</p>
+  </div>
+  <div>
+    <h6 class="text-xl font-bold">How did you learn programming?</h6>
+    <p>I read books 📖 and practiced a lot.</p>
+  </div>
+  <div>
+    <h6 class="text-xl font-bold">Are you studying Computer Science?</h6>
+    <p>No, I study Bioinformatics, but it's closely related 🧬💻.</p>
+  </div>
+  <div>
+    <h6 class="text-xl font-bold">
+      Which programming language do you recommend for a beginner?
+    </h6>
+    <p>
+      The language doesn't really matter, just choose one you like and dive in
+      🌊.
+    </p>
+  </div>
+  <div>
+    <h6 class="text-xl font-bold">What was your first programming language?</h6>
+    <p>My journey began with C++ 🖥️.</p>
+  </div>
+  <div>
+    <h6 class="text-xl font-bold">
+      What is your favorite programming language?
+    </h6>
+    <p>I enjoy writing in C, Rust, and Python 🐍. But Rust is the best 💖🦀</p>
+  </div>
+</div>
+<span></span>
+{% endblock content %}

assets/views/website/base.html

@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gabriel Kaszewski</title>
+    <link rel="icon" href="/static/images/favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="/static/css/main.css" />
     <link
       rel="stylesheet"

src/controllers/website.rs

@@ -27,9 +27,14 @@ pub async fn render_upload(
     views::data::upload(v).await
 }
 
+pub async fn render_about(ViewEngine(v): ViewEngine<TeraView>) -> Result<impl IntoResponse> {
+    views::website::about(v).await
+}
+
 pub fn routes() -> Routes {
     Routes::new()
         .add("/", get(render_index))
         .add("/upload", get(render_upload))
         .add("/login", get(render_login))
+        .add("/about", get(render_about))
 }

src/services/mod.rs

@@ -1,3 +1,4 @@
 pub mod data;
 pub mod jobs;
 pub mod skills;
+pub mod website;

src/services/website.rs

@@ -0,0 +1,12 @@
+use chrono::Datelike;
+
+pub fn get_current_age() -> u32 {
+    let now = chrono::Utc::now();
+    let birth_date = chrono::NaiveDate::from_ymd_opt(2002, 2, 27);
+    let age = match birth_date {
+        Some(birth_date) => now.year_ce().1 - birth_date.year_ce().1,
+        None => 0,
+    };
+
+    age
+}

src/views/website.rs

@@ -12,3 +12,9 @@ pub async fn index(v: impl ViewRenderer, ctx: &AppContext) -> Result<impl IntoRe
         data!({ "skills": skills, "jobs": jobs }),
     )
 }
+
+pub async fn about(v: impl ViewRenderer) -> Result<impl IntoResponse> {
+    let age = services::website::get_current_age();
+
+    format::render().view(&v, "website/about.html", data!({"age": age}))
+}