From 70725294cba98accc258aeb72221ae984ce98ada Mon Sep 17 00:00:00 2001
From: muli <muli@mrmuli.de>
Date: Tue, 16 May 2023 16:36:18 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20Kompetenzen=20zu=20Services-Seite=20hin?=
 =?UTF-8?q?zugef=C3=BCgt.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/style.css      | 55 +++++++++++++++++++++++--
 templates/about_page.html | 84 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 135 insertions(+), 4 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index defc66fe..57235f60 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -557,6 +557,10 @@ h1 {
     line-height: 1.3em;
 }
 
+h1.big_heading {
+    font-size: 7.5rem;
+}
+
 h2 {
     font-family: 'Noto Serif';
     font-size: 2rem;
@@ -930,10 +934,8 @@ hr.-even {
     grid-template-columns: 3fr 1fr;
     grid-template-rows: 1fr;
     grid-template-areas: "cards heading";
-    /*
-    row-gap: 1.5rem;
-    column-gap: 1.5rem;
-    */
+
+    margin-bottom: 3rem;
 }
 
 .services_box h1 {
@@ -972,6 +974,11 @@ hr.-even {
     height: 8rem;
 }
 
+.services_card__text_box {
+    font-size: 1.25rem;
+    line-height: 1.5em;
+}
+
 .services_card__text_box h2 {
     font-family: "Lato";
     font-size: 1.5rem;
@@ -980,6 +987,46 @@ hr.-even {
 }
 /* services_cards - end */
 
+/* bubble_gird - start */
+.bubble_grid {
+    margin: 0 1.5rem 0 1.5rem;
+
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(4, 10rem);
+
+}
+
+.bubble_grid__bubble {
+    align-self: center;
+    background-color: var(--wtf-nearly-white);
+    width: 8rem;
+    height: 8rem;
+    border-radius: 50%;
+    justify-self: center;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.bubble_grid__bubble img {
+    max-width: 5rem;
+    max-height: 5rem;
+}
+
+.bubble_grid__card {
+    grid-column: 1 / span 3;
+    grid-row: 2 / span 3;
+
+    font-size: 1.25rem;
+    line-height: 1.5em;
+    background-color: var(--wtf-nearly-white);
+    padding: 3rem;
+    margin: 1.5rem
+}
+/* bubble_gird - end */
+
 .content__box p, .content__box li {
     hyphens: auto;
 }
diff --git a/templates/about_page.html b/templates/about_page.html
index eee81c13..59e7e060 100644
--- a/templates/about_page.html
+++ b/templates/about_page.html
@@ -55,5 +55,89 @@
 
         </div>
       </div>
+      <div class="content__box">
+          <div class="content__inner_box">
+              <h1 class="big_heading">Kompetenzen</h1>
+          </div>
+      </div>
+      <section class="content">
+      <div class="content__box">
+          <div class="bubble_grid">
+
+            <div class="bubble_grid__bubble">
+              <img src="/images/logos/Python_logo_and_wordmark.svg" alt="Logo of the Python programming language">
+            </div>
+
+            <div class="bubble_grid__bubble">
+              <img src="{{ '/images/logos/ISO_C++_Logo.svg'|asseturl }}" alt="Logo of the C++ programming language">
+            </div>
+
+            <div class="bubble_grid__bubble">
+              <img src="{{ '/images/logos/Tux.svg'|asseturl }}" alt="Tux the penguin mascott of Linux">
+            </div>
+
+            <div class="bubble_grid__bubble">
+              <img src="{{ '/images/logos/Unofficial_JavaScript_logo_2.svg'|asseturl }}" alt="Logo of the JavaScript programming language">
+            </div>
+
+            <div class="bubble_grid__bubble">
+              <img src="{{ '/images/logos/PHP-logo.svg'|asseturl }}" alt="Logo of the PHP programming language">
+            </div>
+
+            <div class="bubble_grid__bubble">
+              <img src="{{ '/images/logos/C_Programming_Language.svg'|asseturl }}" alt="Logo of the C programming language">
+            </div>
+
+            <div class="bubble_grid__bubble">
+              <img src="{{ '/images/logos/Ansible_logo.svg'|asseturl }}" alt="Logo of the Ansible project">
+            </div>
+
+            <div class="bubble_grid__bubble">
+              <img src="{{ '/images/logos/Postgresql_elephant.svg'|asseturl }}" alt="Logo of the Postgres database">
+            </div>
+
+            <div class="bubble_grid__bubble">
+              <img src="{{ '/images/logos/Java-Logo.svg'|asseturl }}" alt="Logo of the Java programming language">
+            </div>
+
+            <div class="bubble_grid__bubble">
+              <img src="{{ '/images/logos/Rust_programming_language_black_logo.svg'|asseturl }}" alt="Logo of the Rust programming language">
+            </div>
+
+            <div class="bubble_grid__bubble">
+              <img src="{{ '/images/logos/CSS3_logo_and_wordmark.svg'|asseturl }}" alt="Logo of CSS3">
+            </div>
+
+            <div class="bubble_grid__bubble">
+              <img src="{{ '/images/logos/Debian-OpenLogo.svg'|asseturl }}" alt="Logo of the Debian operating system">
+            </div>
+
+            <div class="bubble_grid__bubble">
+              <img src="{{ '/images/logos/MySQL_textlogo.svg'|asseturl }}" alt="Logo of the MySQL database">
+            </div>
+
+            <div class="bubble_grid__bubble">
+              <img src="{{ '/images/logos/Vue.js_Logo_2.svg'|asseturl }}" alt="Logo of the Vue.js framework">
+            </div>
+
+            <div class="bubble_grid__bubble">
+              <img src="{{ '/images/logos/LaTeX_logo.svg'|asseturl }}" alt="Logo of the LaTeX typesetting language">
+            </div>
+
+            <div class="bubble_grid__card">
+              <ul>
+                <li>Agiles Projektmanagement</li>
+                <li>Barrierefreiheit</li>
+                <li>Operations</li>
+                <li>Software-Audits</li>
+                <li>Softwareentwicklung</li>
+                <li>Projektmanagement</li>
+                <li>User Experience</li>
+                <li>Übersetzung & Internationalisierung (i18n/l10n)</li>
+              </ul>
+            </div>
+
+        </div>
+      </div>
     </section>
 {% endblock %}
\ No newline at end of file