resume changes

assets/css/app.css

@@ -2,24 +2,6 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@font-face {
-  font-family: 'Inter var';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('/fonts/Inter-roman.var.woff2?v=3.19') format('woff2');
-  font-named-instance: 'Regular';
-}
-
-@font-face {
-  font-family: 'Inter var';
-  font-style: italic;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('/fonts/Inter-italic.var.woff2?v=3.19') format('woff2');
-  font-named-instance: 'Italic';
-}
-
 html { @apply bg-white; }
 
 body {
@@ -27,13 +9,17 @@ body {
   @apply grid grid-rows-[min-content_1fr_min-content];
 }
 
+header .navbar { @apply absolute w-full pr-10 flex justify-end; }
+
 section p { @apply mb-4; }
 strong { @apply font-semibold; }
 
-.dropdown .btn { @apply normal-case text-base; }
+em { @apply font-semibold not-italic; }
-header { @apply flex justify-end; }
 
-header h1 { @apply font-normal text-lg m-2; }
+ul { @apply pl-4; }
+li { list-style-type: '- '; }
+
+.dropdown .btn { @apply normal-case text-base; }
 
 section h2 {
   @apply font-bold text-4xl;

lib/homepage_web/components/layouts/resume.html.heex

@@ -0,0 +1,27 @@
+<article class="resume py-8 mx-auto w-[100ch]">
+  <.flash_group flash={@flash} />
+  <header class="flex flex-row flex-wrap content-start mb-4 pb-2 border-b">
+    <main class="w-full">
+      <h1 class="font-bold text-5xl m-0 mb-1">Rüdiger Diedrich</h1>
+      <h2 class="mr-12 italic">
+        „Inspirieren und sich inspirieren lassen. <br />
+        Gemeinsam neue Horizonte entdecken und Wege in die Zukunft bahnen.“
+      </h2>
+    </main>
+    <aside class="w-full mt-4">
+      <span class="inline-block">Schopenhauerstraße 22,</span>
+      <span class="inline-block">39108 Magdeburg,</span>
+      <span class="inline-block">Tel.: 01578 6904111,</span>
+      <span class="inline-block">
+        E-Mail: <a class="link" href="mailto:post@rdiedri.ch">post@rdiedri.ch</a>,
+      </span>
+      <span class="inline-block">
+        Web: <a href="https://www.rdiedri.ch" class="link">www.rdiedri.ch</a>
+      </span>
+    </aside>
+  </header>
+
+  <%= @inner_content %>
+
+  <footer></footer>
+</article>

lib/homepage_web/components/layouts/root.html.heex

@@ -26,6 +26,14 @@
       href={static_path(@conn, ~p"/favicon-16x16.png")}
     />
     <link rel="manifest" href="/site.webmanifest" />
+    <link rel="preconnect" href="https://rsms.me/" />
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+    <style>
+      :root { font-family: 'Inter', sans-serif; }
+      @supports (font-variation-settings: normal) {
+        :root { font-family: 'Inter var', sans-serif; }
+      		
+    </style>
     <link phx-track-static rel="stylesheet" href={static_url(@conn, ~p"/assets/app.css")} />
     <script
       defer

lib/homepage_web/controllers/page_controller.ex

@@ -7,4 +7,7 @@ defmodule HomepageWeb.PageController do
     # render(conn, :home, layout: false)
     render(conn, :home)
   end
+
+  def resume(conn, _params),
+    do: render(conn, :resume, layout: {HomepageWeb.Layouts, :resume})
 end

lib/homepage_web/controllers/page_html.ex

@@ -8,6 +8,7 @@ defmodule HomepageWeb.PageHTML do
   attr :forge_url, :string, default: nil
   slot :inner_block, required: true
   slot :title, required: true
+
   def project(assigns) do
     ~H"""
     <div class="project">
@@ -19,16 +20,61 @@ defmodule HomepageWeb.PageHTML do
       </div>
       <div class="links mt-1 text-indigo flex gap-4 justify-start">
         <.link target="_blank" href={@url} class="icon-link">
-          <.icon name="hero-arrow-top-right-on-square" />
+          <.icon name="hero-arrow-top-right-on-square" /> Visit website
-          Visit website
         </.link>
 
-        <.link target="_blank" href={@forge_url} :if={@forge_url} class="icon-link">
+        <.link :if={@forge_url} target="_blank" href={@forge_url} class="icon-link">
-          <.icon name="hero-code-bracket-square" />
+          <.icon name="hero-code-bracket-square" /> See the code
-          See the code
         </.link>
       </div>
     </div>
     """
   end
+
+  attr :id, :string, required: true
+  slot :inner_block, required: true
+  slot :title, required: true
+
+  def resume_section(assigns) do
+    ~H"""
+    <section id={@id} class="pt-2 pb-4">
+      <h3 class="text-xl mb-2"><%= render_slot(@title) %></h3>
+      <dl class={@id in ["edu", "proj"] && "max-w-[28ch]"}>
+        <%= render_slot(@inner_block) %>
+      </dl>
+    </section>
+    """
+  end
+
+  slot :inner_block, required: true
+  slot :title
+
+  def point(assigns) do
+    ~H"""
+    <dt :if={@title} class="ml-2">
+      <.point_heading><%= render_slot(@title) %></.point_heading>
+    </dt>
+    <dd class="ml-2"><%= render_slot(@inner_block) %></dd>
+    """
+  end
+
+  slot :inner_block, required: true
+
+  def point_heading(assigns) do
+    ~H"""
+    <h4 class="font-extrabold text-base leading-light inline-block">
+      <%= render_slot(@inner_block) %>
+    </h4>
+    """
+  end
+
+  slot :inner_block, required: true
+
+  def timeline_heading(assigns) do
+    ~H"""
+    <h4 class="font-semibold text-base leading-light block mt-4 mb-2">
+      <%= render_slot(@inner_block) %>
+    </h4>
+    """
+  end
 end

lib/homepage_web/controllers/page_html/resume.html.heex

@@ -0,0 +1,147 @@
+<div class="flex flex-row">
+  <div class="flex flex-col pr-20">
+    <.resume_section id="exp">
+      <:title>Berufserfahrung</:title>
+
+      <.timeline_heading>aktuell</.timeline_heading>
+
+      <.point>
+	<:title>marmalade GmbH, Magdeburg</:title>
+	Senior Backend Developer, e-commerce<br />
+	Betreuung und Weiterentwicklung von ERP- und PIM-Systemen, Design und Umsetzung von verteilten, asynchronen Prozessen sowie deren Datentransformations- und Transferschnittstellen
+      </.point>
+
+      
+      <.timeline_heading>2019&ndash;2023</.timeline_heading>
+
+      <.point>
+        <:title>Spectrum Wirtschaftswerbung, Magdeburg</:title>
+        Haupt-Webentwickler in einer Werbeagentur, Projektleiter und Kundenberater<br />
+        Betreuung von alten und neuen Kundenprojekten mit diversen Anforderungen,
+        von traditioneller Backend-Programmierung bis hin zu modernsten Frontend-Technologien,<br />
+        Einsatz von Elixir livebooks für Dokumentation und experimenteller Entwicklung<br />
+        <em>Produktentwicklung: Online-Magazin</em>
+        Printerzeugnisse digital durch effiziente Nutzung unserer Agenturkompetenzen im Printbereich<br />
+        <em>Produktentwicklung: mosaik</em>
+        Pädagogik digital, Verschmelzung traditioneller Arbeitshefte und interaktiver Apps mittels Augmented Reality
+      </.point>
+
+      <.timeline_heading>2010</.timeline_heading>
+
+      <.point>
+        <:title>Selbstständiger Webprogrammierer, Magdeburg</:title>
+        Webdesign/-programmierung, IT-Beratung/-betreuung für KMU und Selbstständige aus diversen Bereichen
+      </.point>
+
+      <.point>
+        <:title>Galerie Atelier Bischof, Karlsruhe</:title>
+        Praktikant im Bereich Kommunikationsdesign
+      </.point>
+
+      <.timeline_heading>2009</.timeline_heading>
+
+      <.point>
+        <:title>Gründung scriptmesh, Karlsruhe</:title>
+        Startup-Chef-Entwickler, Planung, Entwurf und Entwicklung einer Dokumenten-Archivierung- und Austausch-Plattform
+      </.point>
+
+      <.timeline_heading>2008</.timeline_heading>
+
+      <.point>
+        <:title>brandmaker GmbH, Karlsruhe</:title>
+        Backend-/Frontend-Programmierer (PHP, JS, MySQL), Teilprojektleitung, Kundenbetreuung, Wartung und Weiterentwicklung des hauseigenen CMS
+      </.point>
+
+      <.timeline_heading>2007</.timeline_heading>
+
+      <.point>
+        <:title>Stadtjugendausschuss Karlsruhe</:title>
+        IT-Assistent und Assistent der Medienpädagogik
+      </.point>
+
+      <.timeline_heading>2003</.timeline_heading>
+
+      <.point>
+        <:title>Chrystall-Net, Magdeburg</:title>
+        Backend-/Frontend-Programmierer (PHP, MySQL) eines HTML-basierten Spieleportals
+      </.point>
+    </.resume_section>
+
+  </div>
+
+  <div class="ver-container sidebar flex flex-col pr-10 min-w-fit">
+    <.resume_section id="skls">
+      <:title>Kompetenzen</:title>
+      <.point>
+        <:title>Backend</:title>
+        <ul>
+          <li>Elixir/Phoenix (seit 2019)</li>
+          <li>Clojure (seit 2019)</li>
+          <li>Python/Django (seit 2005)</li>
+          <li>PostgreSQL (seit 2005)</li>
+          <li>PHP (seit 2002)</li>
+          <li>MySQL (seit 2002)</li>
+        </ul>
+      </.point>
+      <.point>
+        <:title>Frontend</:title>
+        <ul>
+          <li>SvelteJS, SolidJS (seit 2019)</li>
+          <li>Responsive Design, UX, <br /> Barrierefreiheit (seit 2009)</li>
+          <li>Javascript (seit 2008)</li>
+          <li>HTML, CSS (seit 1997)</li>
+        </ul>
+      </.point>
+    </.resume_section>
+
+    <.resume_section id="edu">
+      <:title>Bildung</:title>
+
+      <.point>
+        <:title>Karlsruher Institut für Technologie 2005&ndash;2007</:title>
+        4 Semester Informatikstudium, Diplomstudiengang (o. Abschluss)
+      </.point>
+
+      <.point>
+        <:title>Otto-v-Guericke-Universität Magdeburg 2002&ndash;2003</:title>
+        2 Semester Philosophie-/Soziologiestudium, Magisterstudiengang (o. Abschluss)
+      </.point>
+
+      <.point>
+        <:title>Albert-Einstein-Gymnasium Magdeburg 1993&ndash;2000</:title>
+        Abschluss: Abitur
+      </.point>
+    </.resume_section>
+
+    <.resume_section id="lang">
+      <:title>Sprachkenntnisse</:title>
+      <.point>
+        <:title>Englisch</:title>
+        verhandlungssicher
+      </.point>
+      <.point>
+        <:title>Französiisch</:title>
+        Schulkenntnisse
+      </.point>
+      <.point>
+        <:title>Latein</:title>
+        Latinum
+      </.point>
+    </.resume_section>
+    <.resume_section id="proj">
+      <:title>weitere Unternehmungen</:title>
+
+      <.point>
+        <:title>meine Homepage</:title>
+        Auf <a class="link" href="https://www.rdiedri.ch">www.rdiedri.ch</a>
+        finden Sie eine Übersicht einiger veröffentlichter Projekte.
+      </.point>
+
+      <.point>
+        <:title>meine Repositorys</:title>
+        <a class="link" href="https://forge.rdiedri.ch">forge.rdiedri.ch</a>
+        ist eine selbst-gehostete gitea-Instanz für diverse Programmierungen
+      </.point>
+    </.resume_section>
+  </div>
+</div>

lib/homepage_web/router.ex

@@ -18,6 +18,7 @@ defmodule HomepageWeb.Router do
     pipe_through :browser
 
     get "/", PageController, :home
+    get "/resume", PageController, :resume
   end
 
   # Other scopes may use custom stacks.