V2

.github/workflows/main.yml

@@ -21,7 +21,7 @@ jobs:
 
     - name: Build website
       run: |
-       bundle install
+       sudo bundle install
        bundle exec jekyll --version
        bundle exec jekyll build
 

README.md

@@ -1,14 +1,74 @@
-# Creative Theme for Jekyll
+# TechAachen Webseite
 
-A Jekyll implementation of the [Creative Theme](http://startbootstrap.com/template-overviews/creative/) template by [Start Bootstrap](http://startbootstrap.com).
+It is ~~going to be~~ the second Version of TechAachen's Webpage.
 
-Creative is a one page Bootstrap theme for creatives, small businesses, and other multipurpose uses.
-The theme includes a number of rich features and plugins that you can use as a great boilerplate for your next Jekyll project! 
+"l'preview" for every branch pushed to this Github repository is automatiocally build using *Github Actions* and published on https://preview.techaachen.de/.
+Note: This feature does not work for forks of this repository.
 
-See it live in action at <https://volny.github.io/creative-theme-jekyll/>
+Website structure:
+- [X] Mainpage
+  - [ ] About us, Our Mission:
+    - [ ] Ziele ergänzen.
+    - [ ] Fenstergröße anpassen
+  - [x] Projects
+    - [x] Add Texts, Files and better images
+    - [x] Add Kompetenztreffenpage
+    - [x] finalize Kompetenztreffen
+- [x] Contact
+  - [x] Logo-position
+  - [x] Hallo-size in smartphone view
+  - [x] legal: vertical alignment
+  - [x] Impressum
+  - [x] Datenschutz
+  - [x] Satzung
 
-## To use the Creative Theme template in your project
+All those bulled-points represent a `*.md`-file in root with a corresponding layout, stored in `_layouts`, as so:
 
-- Start by adding your info in `_config.yml`
-- In `_layouts/front.html` reorder or remove section as you prefer.
+| Page            | Layouts-Name     | Info                           |
+| :------------- | :-------------   | :-------------                 |
+| index.html     | front.html       | Front-Page                     |
+| about.md       | page.html        | About us and Mission           |
+| *{project}*.html | page.html      | individual Projectpage         |
+| contact.md     | contactpage.html | contactpage inherits page.html |
+| impressum.md   | paperwork.html   | impressum                      |
+| datenschutz.md | paperwork.html   | Datenschutzerklärung           |
+| satzung.md     | paperwork.html   | Satzung TechAachen             |
 
+Unimportant Layout-ToDos:
+- [ ] Paperwork add Download as PDF-Button
+- [ ] Paperwork make goback-button floating
+- [ ] Struktur die von default.html erben soll erstellen.
+- [x] Add pictures
+
+The front-page contains mostly subpages, created from card in `_includes`.
+Other includes are:
+- [x] card
+- [x] navbar
+- [x] socialmedia
+  - [x] smaller version suitable for Footer
+  - [x] removed from includes
+- [x] members (images and links to all members)
+  - [x] ugly workaround
+- [x] mitgliederversammlung
+  - [x] on contact
+- [x] deleted paperwork.html
+- [x] persons (board members etc.)
+  - [x] needs to become cards and replaced on aboutus
+  - [ ] sizing
+- [x] Header
+  - [x] general design
+  - [ ] responsive design not working really good
+  - [ ] scroll down button or smaller background image
+- [x] persons um Mittmachen Feld ergänzen
+- [x] Footer
+  - [x] responsivnes
+  - [x] Logo
+  - [x] remove bulled-points
+  - [x] alignment
+  - [x] border-top
+  - [x] socialmedia buttons
+
+
+Variables accessible all over the website are stored in `config.yml`
+
+Data like members, project on front etc. are stored in `_data`.

_config.yml

@@ -3,10 +3,14 @@ title: TechAachen
 title_meta: "TechAachen — Technische studentische Vereine Aachen"
 author: TechAachen e.V.
 email: [email protected]
+telefon: +49 176 66889668
+
 description: |
   TechAachen: Zusammenschluss technischer Vereine in Aachen.
   Wir erarbeiten & lehren Wissen, entwickeln Ideen, bestreiten Wettkämpfe und fördern Nachhaltigkeit.
 
+slogan: Gemeinsam Träume verwirklichen.
+
 keywords: |
   TechAachen, Aachen, Student, Eigeninitiative, Verein,
   Technik, Wissen, Bildung, Forschung, Wissenschaft,
@@ -20,7 +24,7 @@ url: "" # the base hostname & protocol for your site
 contact_twitter_username: techaachen
 contact_facebook_username: techaachen
 contact_instagram_username: techaachen
-contact_address: "TechAachen e.V.<br /> Templergraben 55 <br /> 52056 Aachen"
+contact_address: "TechAachen e.V.<br /> c.o. FVA <br /> Templergraben 55 <br /> 52056 Aachen"
 
 # Build settings
 markdown: kramdown
@@ -29,8 +33,9 @@ plugins:
   - jekyll-bootstrap-sass
 #  - jekyll-font-awesome-sass
 
-#bootstrap:
-#  assets: true
+sass:
+  style: compressed
+  sass_dir: _sass
 
 font-awesome:
   assets: true

_data/events.yml

@@ -0,0 +1,45 @@
+- name: Faserverbund-Workshop
+  date: 2019
+  time:
+  image: img/members/addi.jpg
+  link:
+  text: |
+    Viele unserer Projekte sind mit hohem Anspruch an die Materialien verbunden. So haben die Fahr- und Flugzeuge komplexe Formen, um ihre anspruchsvollen aerodynamischen Eigenschaften erreichen zu können. Auch müssen sie äußerst leicht sein und gleichzeitig hohen Kräften standhalten. In der Nähe von Motoren, Batterien und Personen, müssen hohe Temperaturen ausgehalten werden, sichergestellt werden, dass es zu keinen Kurzschlüssen kommen kann, und die Personen, im Falle eines hypotetischen Crash, bestmöglich geschützt werden.
+- name: Batterie-Workshop
+  date:
+  time:
+  image: img/projects/workshops/batterieworkshop.jpg
+  link:
+  text: |
+    Ein Großteil der Vereine plant, konzeptiert oder baut aktuell an Batterieelektrischen oder hybridelektrischen Antriebssträngen für Ihre Fahr- und Flugzeuge.
+    Um das anspruchsvolle Thema in den Griff zu bekommen haben sich die Experten aus den Teams zusammengesetzt und über die unterschiedlichen
+    Herausforderungen gesprochen. Wie immer waren auch neue interessierte Studierenden eingeladen um sich zu informieren und mitzudiskuttieren.
+- name: Schaltplan- & Platinendesign mit Kicad
+  date: 2020-01-22
+  time: 19.00h
+  image: img/projects/workshops/kicad.jpg
+  link: https://www.roboterclub.rwth-aachen.de/
+  text: |
+    Wie man mit dem leistungsfähigen EDA-Tool KiCad Schaltkreise zeichnet und daraus Platinen designed,
+    können Studierende bei diesem Workshop lernen.
+    In einem interaktiven Format bringen wir den Studierenden neben den Grundlagen beim Zeichnen von Schaltplänen und PCB Layouts
+    auch wertvolle Tipps und Tricks im Umgang mit KiCad bei.
+- name: Arbeitsschutz-Workshop
+  date:
+  time:
+  image:
+  link:
+  text: |
+    Allen uns Studierenden liegt die Sicherheit und Gesundheit der anderen Mitglieder in unseren Vereinen und uns selber am Herzen.
+    Um unsere Konzepte jedoch in die Wirklichkeit werden zu lassen, ist der regelmäßige Umgang mit gefährlichen Stoffen und Maschinen notwendig.
+    Das macht einen aktiven Austausch über Schutzmaßnahmen, Prozesse, Kontrollinstanzen und Versicherungen notwendig.
+    In unserem Kompetenztreffen Arbeitschutz befassen wir uns gemeinsam mit dem wichtigen Thema Arbeitsschutz um für den bestmöglichen Schutz
+    für uns Studierende zu sorgen.
+- name: Geschäftsführende Versammlung
+  date: alle zwei Wochen
+  time: 20.00h
+  image: img/projects/workshops/versammlung.jpg
+  link: "../contact.html"
+  text: |
+    Nicht wirklich ein Workshop. Für die viele kleinen Themen und Fragen, die in den Vereinen aufkommen, wäre ein eigener Workshop allerdings überflüssig.
+    Speziell hierfür haben wir mit unserer zweiwöchendlichen Geschäftsführenden Versammlung die Möglichkeit und schnell und effizient in der Gruppe auszutauschen.

_data/members.yml

@@ -7,7 +7,6 @@
   description: |
     Wir teilen eine Begeisterung von allem was fliegt und suchen uns selbst Projekte oder nehmen an Wettbewerben teil.
     Jeder kann an den Projekten mitarbeiten wo er möchte und bei unserem monatlichen Treffen tauschen wir uns aus.
-
 - name: Roboterclub Aachen
   type: Mitglied
   since: 2017
@@ -49,7 +48,7 @@
   link: http://www.fva.rwth-aachen.de/
   order: flugwissenschaftliche-vereinigung-aachen
   description: |
-    Wir sind flugbegeisterte Studierende mit dem Ziel die Luftfahrt nicht nur ein kleines Stück voran zu bringen, sondern zukunftsweisend zu prägen.  
+    Wir sind flugbegeisterte Studierende mit dem Ziel die Luftfahrt nicht nur ein kleines Stück voran zu bringen, sondern zukunftsweisend zu prägen.
     Getreu unserem Motto: Forschen - Bauen - Fliegen setzen wir dabei eigene Projekte von der Idee bis zum fliegenden Prototypen um.
 
 - name: Mx Aix
@@ -72,7 +71,7 @@
   description: |
     Wir sind eine offene Werkstatt, die allen Interessierten den Zugang zu Maschinen  und Werkzeug ermöglichen möchte.
     Bei uns könnt ihr an euren eigenen Projekten arbeiten,
-    aber auch gemeinsam mit anderen Vereinsmitgliedern das Projekt weiter verbessern und die Werkstatt ausbauen. 
+    aber auch gemeinsam mit anderen Vereinsmitgliedern das Projekt weiter verbessern und die Werkstatt ausbauen.
 
 - name: Windfänger
   type: Mitglied

_data/persons.yml

@@ -3,15 +3,25 @@
   active: true
   image: "img/persons/justus-schwarzott.jpg"
   order: 0_vorstand_1
+  boardmember: true
 
 - name: Leo Girbig
   function: "2. Vorsitzender"
   active: true
   image: "img/persons/leo-girbig.jpg"
   order: 0_vorstand_2
+  boardmember: true
 
 - name: Niklas Bloemen
   function: "3. Vorsitzender"
   active: true
   image: "img/persons/niklas-bloemen.jpg"
   order: 0_vorstand_3
+  boardmember: true
+
+- name: Und Du?
+  function: <a href="contact.html" class="btn btn-primary page-scroll">Mitmachen!</a>
+  active: true
+  image: "img/persons/blank.svg"
+  order: 1
+  boardmember: false

_data/projekte.yml

@@ -1,11 +1,32 @@
+- title: "Gemeinschaftswerkstatt"
+  image: "img/projects/gemeinschaftswerkstatt.svg"
+  link: "static/projects/2020_03_26_Gemeinschaftswerkstatt.pdf"
+  text_english: |
+    We are MX Academic Cup, a competition for university student-teams that aims to propagate sustainable mobility technology through Motocross Racing.
+    The driving idea is to compare different kinds of powertrain technologies in order to find out which solution is the most suitable for the purpose of motorsport and sustainability.
+    Our ecosystem also nurtures connections between industrial partners and innovations by the student community through various events and activities.
+  text: |
+    Nahe des Stadtzentrum Aachens soll in naher Zukunft eine Gemeinschaftswerkstatt entstehen. Diese wird hauptsächlich von Team Windfänger und dem neu gegründeten Verein Space-Team Aachen verwendet werden.
+    Der TechAachen e.V. wird die Räumlichkeiten für Veranstaltungen und Präsentationen nutzen.
+
 - title: "MX Academic Cup"
-  image: "img/logos/mx_adademic_cup.jpg"
+  image: "img/projects/mx_adademic_cup.svg"
   link: "https://www.mx-academic-cup.com/"
   text_english: |
     We are MX Academic Cup, a competition for university student-teams that aims to propagate sustainable mobility technology through Motocross Racing.
-    The driving idea is to compare different kinds of powertrain technologies in order to find out which solution is the most suitable for the purpose of motorsport and sustainability. 
+    The driving idea is to compare different kinds of powertrain technologies in order to find out which solution is the most suitable for the purpose of motorsport and sustainability.
     Our ecosystem also nurtures connections between industrial partners and innovations by the student community through various events and activities.
   text: |
-    MX Academic Cup ist ein Wettbewerb für Studententeams, der darauf abzielt, nachhaltige Mobilitätstechnologien durch Motocross Racing zu verbreiten. 
-    Die Antriebsidee ist es, verschiedene Arten von Antriebstechnologien zu vergleichen, um herauszufinden, welche Lösung für den Motorsport und die Nachhaltigkeit am besten geeignet ist. 
+    MX Academic Cup ist ein Wettbewerb für Studententeams, der darauf abzielt, nachhaltige Mobilitätstechnologien durch Motocross Racing zu verbreiten.
+    Die Antriebsidee ist es, verschiedene Arten von Antriebstechnologien zu vergleichen, um herauszufinden, welche Lösung für den Motorsport und die Nachhaltigkeit am besten geeignet ist.
     Unser Ökosystem pflegt auch die Verbindungen zwischen Industriepartnern und Innovationen der Studentengemeinschaft durch verschiedene Veranstaltungen und Aktivitäten.
+
+- title: "Kompetenztreffen"
+  image: "img/projects/technik-verbinden.svg"
+  link: "workshops.html"
+  text_english: |
+    We are MX Academic Cup, a competition for university student-teams that aims to propagate sustainable mobility technology through Motocross Racing.
+    The driving idea is to compare different kinds of powertrain technologies in order to find out which solution is the most suitable for the purpose of motorsport and sustainability.
+    Our ecosystem also nurtures connections between industrial partners and innovations by the student community through various events and activities.
+  text: |
+    Wir organisieren regelmäßige Workshops, in denen sich Studierende aus den unterschiedlichen Vereinen über relevante Themen unterhalten. Beispiele sind hierfür: Batterietechnologie, Faserverbund-Fertigung, Versicherung oder Arbeitsicherheit.

_data/ziele.yml

@@ -14,7 +14,7 @@
   text: In Konkurrenz zu Teams aus der ganzen Welt beweisen wir Stärke.
   fontawesome-icon: flag-checkered
 
-- title: Wissen lehren
+- title: Wissen weitergeben
   text: Das selbst angeeignete Wissen teilen wir untereinander.
   fontawesome-icon: comments
 

_includes/card.html

@@ -0,0 +1,13 @@
+<section>
+  <h2>{{include.title}}</h2>
+  <div class="card rounded shadow" style="height: 400px;">
+    <img srcset="{{include.image375}} 375w,
+                 {{include.image690}} 690w,
+                {{include.image1110}} 1110w" sizes="100vw" class="card-img" style="height: 400px; object-fit:cover;" alt="{{include.imagealt}}">
+    <div class="card-img-overlay d-flex flex-column">
+      <h1 class="text-white pl-3">{{include.overlayheadline}}</h1>
+      <p class="text.white pl-3">{{ include.text }}</p>
+      <a href="{{include.buttonlink}}" class="btn btn-primary btn-xl page-scroll align-self-end mt-auto">{{include.buttontext}}</a>
+    </div>
+  </div>
+</section>

_includes/events.html

@@ -0,0 +1,30 @@
+<section id="events">
+  <hr class="primary">
+  <div class="container-fluid">
+    <div class="row">
+        {% for event in site.data.events %}
+        <div class="col-lg-3 col-12 p-3">
+          <div class="card h-100 shadow" >
+            <img src="{{event.image}}"  class="card-img" alt="{{event.title}}">
+            <div class="card-body d-flex flex-column">
+              <h3>{{event.name}}</h3>
+              <div class="justify-content-center mt-auto">
+                    <a tabindex="0"
+                    class="btn btn-primary btn-sm page-scroll px-5"
+                    role="button"
+                    data-html="true"
+                    data-toggle="popover"
+                    data-trigger="focus"
+                    data-placement="top"
+                    title="<b>{{ event.name }}</b> "
+                    data-content="<div>
+                      {{event.text}}
+                    </div>">Info</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        {% endfor %}
+    </div>
+  </div>
+</section>