Update WS2024

cnoss · Oct 19, 2024 · 747b032 · 747b032
1 parent 5dca23d
commit 747b032
Show file tree

Hide file tree

Showing 34 changed files with 283 additions and 53 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/_config.yml b/_config.yml
@@ -42,6 +42,8 @@ collections:
     output: true
   diary:
     output: false
+  vita:
+    output: false
 
 ## plugins:
 #  - jekyll-paginate

diff --git a/_diary/2024-10-19.md b/_diary/2024-10-19.md
@@ -0,0 +1,6 @@
+---
+title: Oktober 2024
+---
+der Herbst ist da und damit auch das neue Semester. In [Screendesign](https://th-koeln.github.io/mi-bachelor-screendesign/) haben wir ein Doppelsemester, da Studierende aus dem ersten und dritten Semester an Bord sind. Die [Rahmenbedingungen für Abschlussarbeiten](https://cnoss.github.io/thesis/), die bei mir laufen, habe ich ein bisschen angepasst. Das funktioniert bislang recht gut und liefert deutlich mehr [Einblicke in die Arbeiten der Studierenden](https://cnoss.github.io/thesis/works/-explorative-konzeption-und-implementierung-einer-web-basierten-plattform-zur-musikalischen-echtzeit-kollaboration-an-modular-synthesizern-august-5-2024-12-00-am.html).
+
+Bei Klickmeister haben wir eine Kooperation mit [Entendix, der Smartwatch für Gebäude](https://www.entendix.com) gestartet. Alle haben Bock! Das fühlt sich gut an. Neben Weiterentwicklungen bei unseren Stammkunden überarbeiten wir gerade die Website von [Viebahn Systemtechnik](https://www.viebahn.com) und [Basecamp Iceland](https://www.basecampiceland.is). Wie immer: keine allzu große Langeweile.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -11,7 +11,7 @@
     <ul>
       <li><i class="icon">email</i>chr<!-- hehe@moeep -->istian<!-- hehe@moeep -->.noss<!-- hehe@moeep -->(at)t<!-- hehe@moeep -->h-koeln.de</li>
       <li><i class="icon">phone</i>+49 2261-8196-6412</li>
-      <li><a href="https://twitter.com/cnoss">https://twitter.com/cnoss</a></li>
+      <li><a href="https://instagram.com/c.noss">https://instagram.com/c.noss</a></li>
       <li><a href="https://youtube.com/cnoss72">https://youtube.com/cnoss72</a></li>
     </ul>
   </div>

diff --git a/_includes/header.html b/_includes/header.html
@@ -2,7 +2,7 @@
   <a href="/"><img class="avatar" src="/images/cab-sw-normal-1x1.jpg" alt="Christian with a cap on his head."></a>
   <div>
     <h1 class="title">Christian Noss</h1>
-    <h2 class="subtitle">prof <a href="https://twitter.com/th_koeln">@th_koeln</a> // founder <a href="https://www.klickmeister.de/">@klickmeister</a> //   driver <a href="https://twitter.com/micologne">@micologne</a> // supporter <a href="https://twitter.com/codeandcontext">@codeandcontext</a> & <a  href="https://twitter.com/webscicologne">@webscicologne</a></h2>
+    <h2 class="subtitle">prof <a href="https://twitter.com/th_koeln">@th_koeln</a> // founder <a href="https://www.klickmeister.de/">@klickmeister</a> //   driver <a href="https://medieninformatik.th-koeln.de">@micologne</a> // supporter <a href="https://coco.study">@codeandcontext</a></h2>
 
   </div>
 

diff --git a/_includes/veranstaltungen.html b/_includes/veranstaltungen.html
@@ -1,4 +1,4 @@
-## My courses at the TH Köln
+## Meine Veranstaltungen an der TH Köln
 
 {% assign veranstaltungen = site.lehrveranstaltungen | sort: 'title' %}
 
@@ -9,10 +9,8 @@
 
       <h3 class="course-overview__item-headline" id="{{ veranstaltung.id }}"><a href="{{veranstaltung.website}}">{{ veranstaltung.title }}&nbsp;<span class="icon">open_in_new</span></a></h3>
       <p class="grow">{{veranstaltung.studiengang}}, {{veranstaltung.weitere-infos}}, {{veranstaltung.angeboten-im}}</p>
-      <ul class="taglist taglist--linear">
-        {% for tag in veranstaltung.tags | split ", " %}
-        <li class="taglist__item"><a href="https://twitter.com/search?q={{tag | replace: ",", "" }}">{{tag | replace: ",", "" }}</a></li>
-        {% endfor %}
+      <ul class="taglist taglist--linear taglist--small">
+        {% for tag in veranstaltung.tags | split ", " %}<li class="taglist__item"><a href="https://twitter.com/search?q={{tag | replace: ",", "" }}">{{tag | replace: ",", "" }}</a></li>{% endfor %}
       </ul>
 
     </div>

diff --git a/_includes/vita.html b/_includes/vita.html
@@ -0,0 +1,18 @@
+{% assign vitaItems = site.vita | sort: 'year' | reverse %}
+
+<dl class="grid-list">
+  {% for vitaItem in vitaItems %}
+    <dt>
+      {% if vitaItem.since && vitaItem.since != '' %}
+      seit 
+      {% endif %}
+      {% if vitaItem.yearUntil && vitaItem.yearUntil != '' %}
+      {{ vitaItem.year }} — {{ vitaItem.yearUntil }}
+      {% else %}
+      {{vitaItem.year}}
+      {% endif %}
+
+    </dt>
+    <dd>{{ vitaItem.content | markdownify }}</dd>
+  {% endfor %}
+  </dl>
diff --git a/_lehrveranstaltungen/entwicklungsprojekt.md b/_lehrveranstaltungen/entwicklungsprojekt.md
@@ -0,0 +1,9 @@
+---
+title: Entwicklungsprojekt
+studiengang: Modul im Studiengang <a href="https://www.medieninformatik.th-koeln.de/">Medieninformatik Bachelor</a>
+weitere-infos: 5. Fachsemester
+angeboten-im: jedes Wintersemester
+website: https://cnoss.github.io/entwicklungsprojekt/
+published: true
+tags: webtech, webdev, screendesign, agile
+---
diff --git a/_lehrveranstaltungen/generative-gestaltung.md b/_lehrveranstaltungen/generative-gestaltung.md
@@ -1,8 +1,8 @@
 ---
 title: Generative Gestaltung
-studiengang: Course as part of the module <a href="https://coco.study/module/120-designing-futures-1/">Designing Futures 1</a> in study program <a href="https://coco.study/">Code & Context</a>
-weitere-infos: 1. term
-angeboten-im: is held every winter term
+studiengang: Kurs im Rahmen des Moduls <a href="https://coco.study/module/120-designing-futures-1/">Designing Futures 1</a> im Studiengang <a href="https://coco.study/">Code & Context</a>
+weitere-infos: 1. Fachsemester
+angeboten-im: jedes Wintersemester
 website: https://cnoss.github.io/generative-gestaltung/
 published: true
 tags: creativecoding, generativegestaltung, p5.js, generativeart

diff --git a/_lehrveranstaltungen/pen-and-paper.md b/_lehrveranstaltungen/pen-and-paper.md
@@ -1,8 +1,8 @@
 ---
 title: Pen & Paper
-studiengang: Course as part of the module <a href="https://www.medieninformatik.th-koeln.de/study/bachelor/moduls/ba_einfhrungindiemedieninformatik/">Introduction to Media Informatics</a> in study program <a href="https://www.medieninformatik.th-koeln.de/study/bachelor/">Media Informatics (Bachelor's Program)</a>
-weitere-infos: 1. term
-angeboten-im: is held every winter term
+studiengang: Kurs im Rahmen des Moduls <a href="https://www.medieninformatik.th-koeln.de/study/bachelor/moduls/ba_einfhrungindiemedieninformatik/">Einführung in die Medieninformatik</a> im Studiengang <a href="https://www.medieninformatik.th-koeln.de/study/bachelor/">Medieninformatik (Bachelor-Programm)</a>
+weitere-infos: 1. Semester
+angeboten-im: zur Zeit nicht im Angebot
 website: https://cnoss.github.io/pen-and-paper/
 published: true
 tags: Visual Thinking, Sketchnotes, UIsketching, sketching, medieninformatik

diff --git a/_lehrveranstaltungen/screendesign.md b/_lehrveranstaltungen/screendesign.md
@@ -1,8 +1,8 @@
 ---
 title: Screendesign
-studiengang: Module in study program <a href="https://www.medieninformatik.th-koeln.de/">Media Informatics (Bachelor's Program)</a>
-weitere-infos: 3. term
-angeboten-im: is held every winter term
+studiengang: Modul im Studiengang <a href="https://www.medieninformatik.th-koeln.de/">Medieninformatik (Bachelor-Programm)</a>
+weitere-infos: 1. und 3. Fachsemester
+angeboten-im: jedes Wintersemester
 website: https://th-koeln.github.io/mi-bachelor-screendesign/
 tags: screendesign, webdesign, frontend, simplicity
 published: true

diff --git a/_lehrveranstaltungen/web-development.md b/_lehrveranstaltungen/web-development.md
@@ -1,8 +1,8 @@
 ---
 title: Web Development
-studiengang: Advanced module in study program <a href="https://www.medieninformatik.th-koeln.de/study/bachelor/">Media Informatics (Bachelor's Program)</a>
-weitere-infos: 4. term
-angeboten-im: is held every summer term
+studiengang: Vertiefungsmodul im Studiengang <a href="https://www.medieninformatik.th-koeln.de/study/bachelor/">Medieninformatik (Bachelor-Programm)</a>
+weitere-infos: 4. Fachsemester
+angeboten-im: jedes Sommersemester
 website: https://th-koeln.github.io/mi-bachelor-webdevelopment/
 published: true
 tags: webdev, webdevelopment, IoT, websecurity, frontenddevelopment, frameworks, medieninformatik

diff --git a/_lehrveranstaltungen/web-technologien.md b/_lehrveranstaltungen/web-technologien.md
@@ -1,8 +1,8 @@
 ---
 title: Web Technologies
-studiengang: Modul in the study programs <a href="https://www.medieninformatik.th-koeln.de/study/master/">Media Informatics (Master's program)</a> and <a href="https://www.th-koeln.de/en/academics/digital-sciences-masters-program_83005.php">Digital Sciences</a>
-weitere-infos: 2. term
-angeboten-im: is held every summer term
+studiengang: Modul in den Studiengängen <a href="https://www.medieninformatik.th-koeln.de/study/master/">Medieninformatik (Master-Programm)</a> und <a href="https://www.th-koeln.de/en/academics/digital-sciences-masters-program_83005.php">Digital Sciences</a>
+weitere-infos: 2. Fachsemester
+angeboten-im: jedes Sommersemester
 website: https://www.medieninformatik.th-koeln.de/study/master/moduls/ma_wtw_modul_web-technologien/
 published: true
 tags: webtech, webdev, weavingtheweb, sustainableweb, leanweb

diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -93,11 +93,6 @@ img{
   width: 100%;
 }
 
-a{
-  color: $interaction-color;
-  border-bottom: solid 2px $decoration-color;
-}
-
 ul{
 
   margin-bottom: $m;
@@ -163,7 +158,11 @@ strong{
 }
 
 a{
-  text-decoration: none;
+
+  color: $interaction-color;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 2px;
+  text-decoration-color: $decoration-color;
   transition: all 0.3s;
   font-weight: $fw-medium;
 

diff --git a/_sass/_components.scss b/_sass/_components.scss
@@ -178,6 +178,13 @@
   margin-left: -1vw;
 }
 
+.semi-brutal{
+  font-size: clamp(1.2em, calc(2em + 5vw), 5em);
+  font-weight: 600;
+  color: $lighten;
+  margin-left: -1vw;
+}
+
 // Tabelle
 // ------------------------------------------------------------------------- //
 table {
@@ -217,9 +224,26 @@ table {
 // Taglist
 // ------------------------------------------------------------------------- //
 .taglist {
-  &--linear li {
-    display: inline-block;
+  margin-bottom: 0;
+
+  &--linear{
+    margin-top: $m;
+
+    li {
+      display: inline-block;
+      padding-right: $s;
+      margin-bottom: 0;
+    }
+  } 
+
+  &--small{
+    font-size: calc($m * 0.8);
+
+    a{
+      border-bottom: none;
+    }
   }
+
   &__item {
     &::before {
       content: '#';
@@ -367,9 +391,7 @@ table {
 // ------------------------------------------------------------------------- //
 .check-it-out{
 
-  &-overview{
-    margin-top: $xs + $xs /4;
-  }
+
 
   &__item{
     margin-bottom: $l;
@@ -619,4 +641,28 @@ nav#main{
   transform: translateX(-50%) translateY(-100%);
   opacity: 1;
   transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
+}
+
+
+// Grid List
+// ------------------------------------------------------------------------- //
+
+.grid-list{
+  dt{
+    font-weight: $fw-normal;
+    color: $green;
+    &::after{
+      content: "";
+    }
+  }
+
+
+
+  @media screen and (min-width: $vp-small) {
+    display: grid;
+    grid-template-columns:max-content 1fr;
+    column-gap: $m;
+
+
+  }
 }
diff --git a/_thoughts/2024-07-28-state-of-css.md b/_thoughts/2024-07-28-state-of-css.md
@@ -88,9 +88,6 @@ description: |
 
 ## Material
 - [Repo mit Demo und Challenges zum üben](https://github.com/cnoss/state-of-css-2024)
-<<<<<<< HEAD
-- [Slides zu den Inhalten](https://cnoss.github.io/slides/presentations/misc/css-2024/)
-=======
 - [Slides zu den Inhalten](https://cnoss.github.io/slides/presentations/misc/css-2024/)
 
 ## Playgrounds
@@ -146,4 +143,3 @@ Folgende Playgrounds zum Workshop sind auf Codepen verfügbar:
 - [What's new in the Web, Google I/O Talk from Rachel Andrew](https://io.google/2024/explore/6d6b2a35-ae3a-4f73-b40d-9dc4a8cf0df4/)
 - [Multi-page application View Transitions are here, Google I/O Talk from Bramus Van Damme](https://io.google/2024/explore/8ae18b72-028e-4722-9a05-4a480048e629/)
 - [The state of CSS and Web UI, Google I/O Talk from Una Kravets](https://io.google/2024/explore/83764202-1ca2-4491-a731-c4d3701624d4/)
->>>>>>> 844915bff40086548dc80c8dd3e194d5ae49d983
diff --git a/_vita/.DS_Store b/_vita/.DS_Store
diff --git a/_vita/2007--professur-für-kommunikationsdesign.md b/_vita/2007--professur-für-kommunikationsdesign.md
@@ -0,0 +1,8 @@
+---
+filename: "Professur für Kommunikationsdesign "
+title: "Professur für Kommunikationsdesign "
+type: vita
+since: true
+year: 2007
+---
+Professur für Kommunikationsdesign in der Medieninformatik an der TH Köln
diff --git a/...2010--studiengangsbeauftragter-für-den-studiengang-medieninformatik-bachelor.md b/...2010--studiengangsbeauftragter-für-den-studiengang-medieninformatik-bachelor.md
@@ -0,0 +1,9 @@
+---
+filename: Studiengangsbeauftragter für den Studiengang Medieninformatik Bachelor
+title: Studiengangsbeauftragter für den Studiengang Medieninformatik Bachelor
+type: vita
+since: false
+year: 2010
+yearUntil: 2023
+---
+Studiengangsbeauftragter für den Studiengang Medieninformatik Bachelor an der Fachhochschule Köln
diff --git a/_vita/2017--pav.md b/_vita/2017--pav.md
@@ -0,0 +1,8 @@
+---
+filename: PAV
+title: Vorsitzender des Prüfungsausschuss Medieninformatik Bachelor
+type: vita
+since: true
+year: 2017
+---
+Vorsitzender des Prüfungsausschuss Medieninformatik Bachelor
diff --git a/_vita/2024--lehrauftrag-für-user-interface-design.md b/_vita/2024--lehrauftrag-für-user-interface-design.md
@@ -0,0 +1,9 @@
+---
+filename: Lehrauftrag für User Interface Design
+title: Lehrauftrag für User Interface Design
+type: vita
+since: false
+year: 2004
+yearUntil: 2007
+---
+Lehrauftrag für User Interface Design im Studiengang Systems Engineering und Wirtschaftsinformatik der Universität Duisburg- Essen
diff --git a/_vita/2024-10-19-abitur.md b/_vita/2024-10-19-abitur.md
@@ -0,0 +1,7 @@
+---
+filename: Abitur
+title: Abitur am Wüllenweber Gymnasium in Bergneustadt
+type: vita
+year: 1991
+---
+Abitur am Wüllenweber Gymnasium in Bergneustadt
diff --git a/_vita/2024-10-19-bergische-kunstschule-in-bergisch-gladbach.md b/_vita/2024-10-19-bergische-kunstschule-in-bergisch-gladbach.md
@@ -0,0 +1,8 @@
+---
+filename: Bergische Kunstschule in Bergisch Gladbach
+title: Bergische Kunstschule in Bergisch Gladbach
+type: vita
+year: 1992
+yearUntil: 1995
+---
+Bergische Kunstschule in Bergisch Gladbach
diff --git a/_vita/2024-10-19-diplom.md b/_vita/2024-10-19-diplom.md
@@ -0,0 +1,9 @@
+---
+slug: Abschluss zum Diplom Designer
+filename: Abschluss zum Diplom Designer
+title: Abschluss zum Diplom Designer
+type: vita
+since: false
+year: 2001
+---
+Abschluss zum Diplom Designer mit dem Diplomthema: „E-Dötzchen und Klickmeister. Gestaltungsstrategien für unterschiedlich geübte Nutzergruppen.“, betreut von [Prof. Dr. Ralph Bruder](https://de.wikipedia.org/wiki/Ralph_Bruder) und [Prof. Claudius Lazzeroni](https://de.wikipedia.org/wiki/Claudius_Lazzeroni).
diff --git a/_vita/2024-10-19-geboren-in-bergneustadt.md b/_vita/2024-10-19-geboren-in-bergneustadt.md
@@ -0,0 +1,9 @@
+---
+filename: geboren in Bergneustadt
+title: geboren in Bergneustadt
+type: vita
+year: 1972
+month: 5
+day: 4
+---
+geboren in Bergneustadt
diff --git a/_vita/2024-10-19-klickmeister-gmbh-essen.md b/_vita/2024-10-19-klickmeister-gmbh-essen.md
@@ -0,0 +1,9 @@
+---
+slug: Klickmeister
+filename: Klickmeister
+title: Geschäftsführender Gesellschafter der Klickmeister GmbH Essen
+type: vita
+since: true
+year: 2001
+---
+Geschäftsführender Gesellschafter der [Klickmeister GmbH](https://www.klickmeister.de/de)
diff --git a/_vita/2024-10-19-mittlere-reife.md b/_vita/2024-10-19-mittlere-reife.md
@@ -0,0 +1,7 @@
+---
+filename: mittlere Reife
+title: mittlere Reife an der Städtischen Realschule in Bergneustadt
+type: vita
+year: 1988
+---
+Mittlere Reife an der Städtischen Realschule in Bergneustadt
diff --git a/_vita/2024-10-19-studentischer-mitarbeiter.md b/_vita/2024-10-19-studentischer-mitarbeiter.md
@@ -0,0 +1,10 @@
+---
+filename: Studentischer Mitarbeiter
+title: Studentischer Mitarbeiter an der Universität Essen im Bereich Ergonomie
+  im Design, bei Prof. Dr. Ralph Bruder
+type: vita
+since: false
+year: 1996
+yearUntil: 1999
+---
+Studentischer Mitarbeiter an der Universität Essen im Bereich Ergonomie im Design
diff --git a/_vita/2024-10-19-studium-industrial-design.md b/_vita/2024-10-19-studium-industrial-design.md
@@ -0,0 +1,9 @@
+---
+filename: Studium Industrial Design
+title: Studium Industrial Design an der Universität Essen
+type: vita
+since: false
+year: 1993
+yearUntil: 2001
+---
+Studium Industrial Design an der Universität Essen
diff --git a/_vita/2024-10-19-werkstudent-bei-der-erco-leuchten.md b/_vita/2024-10-19-werkstudent-bei-der-erco-leuchten.md
@@ -0,0 +1,9 @@
+---
+filename: Werkstudent bei der ERCO Leuchten
+title: Werkstudent bei der ERCO Leuchten GmbH im Bereich Digitale Kommunikation
+type: vita
+since: false
+year: 1999
+yearUntil: 2000
+---
+Werkstudent bei der ERCO Leuchten GmbH im Bereich Digitale Kommunikation