libretech/M6C9.de
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Activity

add technology section template and fix some formatting

Browse Source
This commit is contained in:
Michael Czechowski
2024-10-11 17:03:28 +02:00
parent 839b89c9d3
commit 777a805acd
2 changed files with 104 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
src/components/Academia.pug
View File

@@ -1,3 +1,5 @@
include TechnologySection
section.bg-nls-black.text-white section.bg-nls-black.text-white
.p-8(class="sm:p-20 min-h-[120vh]") .p-8(class="sm:p-20 min-h-[120vh]")
.max-w-screen-md.mx-auto .max-w-screen-md.mx-auto
@@ -47,7 +49,8 @@ section.bg-nls-black.text-white
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
title="A high-level, interpreted programming language", title="A high-level, interpreted programming language",
aria-label="A high-level, interpreted programming language" aria-label="A high-level, interpreted programming language"
) JavaScript (ES6+), ) JavaScript (ES6+)
| ,
a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( a.rounded-sm.text-nls-green.transition.underline-offset-2.underline(
href="https://www.typescriptlang.org/", href="https://www.typescriptlang.org/",
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
@@ -60,13 +63,15 @@ section.bg-nls-black.text-white
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
title="A JavaScript library for building user interfaces", title="A JavaScript library for building user interfaces",
aria-label="A JavaScript library for building user interfaces" aria-label="A JavaScript library for building user interfaces"
) React, ) React
| ,
a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( a.rounded-sm.text-nls-green.transition.underline-offset-2.underline(
href="https://vuejs.org/", href="https://vuejs.org/",
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
title="A progressive framework for building user interfaces", title="A progressive framework for building user interfaces",
aria-label="A progressive framework for building user interfaces" aria-label="A progressive framework for building user interfaces"
) Vue.js, ) Vue.js
| ,
a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( a.rounded-sm.text-nls-green.transition.underline-offset-2.underline(
href="https://svelte.dev/", href="https://svelte.dev/",
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
@@ -79,7 +84,8 @@ section.bg-nls-black.text-white
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
title="A platform for building mobile and desktop web applications", title="A platform for building mobile and desktop web applications",
aria-label="A platform for building mobile and desktop web applications" aria-label="A platform for building mobile and desktop web applications"
) Angular, ) Angular
| ,
a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( a.rounded-sm.text-nls-green.transition.underline-offset-2.underline(
href="https://emberjs.com/", href="https://emberjs.com/",
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
@@ -92,26 +98,30 @@ section.bg-nls-black.text-white
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
title="A fast, small, and feature-rich JavaScript library", title="A fast, small, and feature-rich JavaScript library",
aria-label="A fast, small, and feature-rich JavaScript library" aria-label="A fast, small, and feature-rich JavaScript library"
) jQuery, Plain JS ) jQuery
li Plain JS
li li
a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( a.rounded-sm.text-nls-green.transition.underline-offset-2.underline(
href="https://developer.mozilla.org/en-US/docs/Web/HTML", href="https://developer.mozilla.org/en-US/docs/Web/HTML",
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
title="The standard markup language for documents designed to be displayed in a web browser", title="The standard markup language for documents designed to be displayed in a web browser",
aria-label="The standard markup language for documents designed to be displayed in a web browser" aria-label="The standard markup language for documents designed to be displayed in a web browser"
) HTML5, ) HTML5
| ,
a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( a.rounded-sm.text-nls-green.transition.underline-offset-2.underline(
href="https://developer.mozilla.org/en-US/docs/Web/CSS", href="https://developer.mozilla.org/en-US/docs/Web/CSS",
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
title="A stylesheet language used to describe the presentation of a document written in HTML or XML", title="A stylesheet language used to describe the presentation of a document written in HTML or XML",
aria-label="A stylesheet language used to describe the presentation of a document written in HTML or XML" aria-label="A stylesheet language used to describe the presentation of a document written in HTML or XML"
) CSS3, ) CSS3
| ,
a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( a.rounded-sm.text-nls-green.transition.underline-offset-2.underline(
href="https://sass-lang.com/", href="https://sass-lang.com/",
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
title="A preprocessor scripting language that is interpreted or compiled into CSS", title="A preprocessor scripting language that is interpreted or compiled into CSS",
aria-label="A preprocessor scripting language that is interpreted or compiled into CSS" aria-label="A preprocessor scripting language that is interpreted or compiled into CSS"
) Sass, ) Sass
| ,
a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( a.rounded-sm.text-nls-green.transition.underline-offset-2.underline(
href="https://lesscss.org/", href="https://lesscss.org/",
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
@@ -125,19 +135,22 @@ section.bg-nls-black.text-white
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
title="A utility-first CSS framework for rapidly building custom designs", title="A utility-first CSS framework for rapidly building custom designs",
aria-label="A utility-first CSS framework for rapidly building custom designs" aria-label="A utility-first CSS framework for rapidly building custom designs"
) Tailwindcss, ) Tailwindcss
| ,
a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( a.rounded-sm.text-nls-green.transition.underline-offset-2.underline(
href="https://ant.design/", href="https://ant.design/",
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
title="A design system for enterprise-level products", title="A design system for enterprise-level products",
aria-label="A design system for enterprise-level products" aria-label="A design system for enterprise-level products"
) Ant Design, ) Ant Design
| ,
a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( a.rounded-sm.text-nls-green.transition.underline-offset-2.underline(
href="https://material.io/design", href="https://material.io/design",
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
title="A design system created by Google", title="A design system created by Google",
aria-label="A design system created by Google" aria-label="A design system created by Google"
) Material Design, ) Material Design
| ,
a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( a.rounded-sm.text-nls-green.transition.underline-offset-2.underline(
href="https://getbootstrap.com/", href="https://getbootstrap.com/",
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
@@ -151,13 +164,15 @@ section.bg-nls-black.text-white
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
title="Next Generation Frontend Tooling", title="Next Generation Frontend Tooling",
aria-label="Next Generation Frontend Tooling" aria-label="Next Generation Frontend Tooling"
) Vite, ) Vite
| ,
a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( a.rounded-sm.text-nls-green.transition.underline-offset-2.underline(
href="https://webpack.js.org/", href="https://webpack.js.org/",
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
title="A static module bundler for modern JavaScript applications", title="A static module bundler for modern JavaScript applications",
aria-label="A static module bundler for modern JavaScript applications" aria-label="A static module bundler for modern JavaScript applications"
) Webpack, ) Webpack
| ,
a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( a.rounded-sm.text-nls-green.transition.underline-offset-2.underline(
href="https://parceljs.org/", href="https://parceljs.org/",
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
@@ -171,19 +186,22 @@ section.bg-nls-black.text-white
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
title="A javaScript library for exploratory data visualization", title="A javaScript library for exploratory data visualization",
aria-label="A javaScript library for exploratory data visualization" aria-label="A javaScript library for exploratory data visualization"
) Observable Plot, ) Observable Plot
| ,
a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( a.rounded-sm.text-nls-green.transition.underline-offset-2.underline(
href="https://d3js.org/", href="https://d3js.org/",
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
title="A JavaScript library for manipulating documents based on data", title="A JavaScript library for manipulating documents based on data",
aria-label="A JavaScript library for manipulating documents based on data" aria-label="A JavaScript library for manipulating documents based on data"
) D3.js, ) D3.js
| ,
a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( a.rounded-sm.text-nls-green.transition.underline-offset-2.underline(
href="https://particles.js.org/", href="https://particles.js.org/",
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
title="A lightweight JavaScript library for creating particles", title="A lightweight JavaScript library for creating particles",
aria-label="A lightweight JavaScript library for creating particles" aria-label="A lightweight JavaScript library for creating particles"
) Particle.js, ) Particle.js
| ,
a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( a.rounded-sm.text-nls-green.transition.underline-offset-2.underline(
href="https://threejs.org/", href="https://threejs.org/",
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2", class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline hover:decoration-2",
@@ -316,7 +334,8 @@ section.bg-nls-black.text-white
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="A platform for developing, shipping, and running applications", title="A platform for developing, shipping, and running applications",
aria-label="A platform for developing, shipping, and running applications" aria-label="A platform for developing, shipping, and running applications"
) Docker, ) Docker
| ,
a.text-nls-blue.transition.underline-offset-2.underline( a.text-nls-blue.transition.underline-offset-2.underline(
href="https://kubernetes.io/", href="https://kubernetes.io/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
@@ -329,7 +348,8 @@ section.bg-nls-black.text-white
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="Microsoft's cloud computing platform", title="Microsoft's cloud computing platform",
aria-label="Microsoft's cloud computing platform" aria-label="Microsoft's cloud computing platform"
) Azure, ) Azure
| ,
a.text-nls-blue.transition.underline-offset-2.underline( a.text-nls-blue.transition.underline-offset-2.underline(
href="https://cloud.google.com/", href="https://cloud.google.com/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
@@ -343,13 +363,15 @@ section.bg-nls-black.text-white
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="An open source automation server", title="An open source automation server",
aria-label="An open source automation server" aria-label="An open source automation server"
) Jenkins, ) Jenkins
| ,
a.text-nls-blue.transition.underline-offset-2.underline( a.text-nls-blue.transition.underline-offset-2.underline(
href="https://about.gitlab.com/stages-devops-lifecycle/continuous-integration/", href="https://about.gitlab.com/stages-devops-lifecycle/continuous-integration/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="GitLab's built-in Continuous Integration", title="GitLab's built-in Continuous Integration",
aria-label="GitLab's built-in Continuous Integration" aria-label="GitLab's built-in Continuous Integration"
) GitLab CI, ) GitLab CI
| ,
a.text-nls-blue.transition.underline-offset-2.underline( a.text-nls-blue.transition.underline-offset-2.underline(
href="https://github.com/features/actions", href="https://github.com/features/actions",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
@@ -371,7 +393,8 @@ section.bg-nls-black.text-white
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="An open-source monitoring system with a dimensional data model", title="An open-source monitoring system with a dimensional data model",
aria-label="An open-source monitoring system with a dimensional data model" aria-label="An open-source monitoring system with a dimensional data model"
) Prometheus, ) Prometheus
| ,
a.text-nls-blue.transition.underline-offset-2.underline( a.text-nls-blue.transition.underline-offset-2.underline(
href="https://grafana.com/", href="https://grafana.com/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
@@ -385,7 +408,8 @@ section.bg-nls-black.text-white
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="A robust, commercial-grade, featureful, and freely-available source code implementation of an HTTP (Web) server", title="A robust, commercial-grade, featureful, and freely-available source code implementation of an HTTP (Web) server",
aria-label="A robust, commercial-grade, featureful, and freely-available source code implementation of an HTTP (Web) server" aria-label="A robust, commercial-grade, featureful, and freely-available source code implementation of an HTTP (Web) server"
) Apache, ) Apache
| ,
a.text-nls-blue.transition.underline-offset-2.underline( a.text-nls-blue.transition.underline-offset-2.underline(
href="https://www.nginx.com/", href="https://www.nginx.com/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
@@ -463,7 +487,8 @@ section.bg-nls-black.text-white
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="A JavaScript runtime built on Chrome's V8 JavaScript engine", title="A JavaScript runtime built on Chrome's V8 JavaScript engine",
aria-label="A JavaScript runtime built on Chrome's V8 JavaScript engine" aria-label="A JavaScript runtime built on Chrome's V8 JavaScript engine"
) Node.js, ) Node.js
| ,
a.text-nls-violet.transition.underline-offset-2.underline( a.text-nls-violet.transition.underline-offset-2.underline(
href="https://expressjs.com/", href="https://expressjs.com/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
@@ -476,13 +501,15 @@ section.bg-nls-black.text-white
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="A popular general-purpose scripting language", title="A popular general-purpose scripting language",
aria-label="A popular general-purpose scripting language" aria-label="A popular general-purpose scripting language"
) PHP, ) PHP
| ,
a.text-nls-violet.transition.underline-offset-2.underline( a.text-nls-violet.transition.underline-offset-2.underline(
href="https://laravel.com/", href="https://laravel.com/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="A web application framework with expressive, elegant syntax", title="A web application framework with expressive, elegant syntax",
aria-label="A web application framework with expressive, elegant syntax" aria-label="A web application framework with expressive, elegant syntax"
) Laravel, ) Laravel
| ,
a.text-nls-violet.transition.underline-offset-2.underline( a.text-nls-violet.transition.underline-offset-2.underline(
href="https://symfony.com/", href="https://symfony.com/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
@@ -495,13 +522,15 @@ section.bg-nls-black.text-white
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="A general-purpose programming language", title="A general-purpose programming language",
aria-label="A general-purpose programming language" aria-label="A general-purpose programming language"
) Java, ) Java
| ,
a.text-nls-violet.transition.underline-offset-2.underline( a.text-nls-violet.transition.underline-offset-2.underline(
href="https://spring.io/projects/spring-boot", href="https://spring.io/projects/spring-boot",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="An extension of the Spring framework", title="An extension of the Spring framework",
aria-label="An extension of the Spring framework" aria-label="An extension of the Spring framework"
) Spring Boot, ) Spring Boot
| ,
a.text-nls-violet.transition.underline-offset-2.underline( a.text-nls-violet.transition.underline-offset-2.underline(
href="https://quarkus.io/", href="https://quarkus.io/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
@@ -514,19 +543,22 @@ section.bg-nls-black.text-white
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="A programming language that lets you work quickly and integrate systems more effectively", title="A programming language that lets you work quickly and integrate systems more effectively",
aria-label="A programming language that lets you work quickly and integrate systems more effectively" aria-label="A programming language that lets you work quickly and integrate systems more effectively"
) Python, ) Python
| ,
a.text-nls-violet.transition.underline-offset-2.underline( a.text-nls-violet.transition.underline-offset-2.underline(
href="https://www.djangoproject.com/", href="https://www.djangoproject.com/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="A high-level Python Web framework", title="A high-level Python Web framework",
aria-label="A high-level Python Web framework" aria-label="A high-level Python Web framework"
) Django, ) Django
| ,
a.text-nls-violet.transition.underline-offset-2.underline( a.text-nls-violet.transition.underline-offset-2.underline(
href="https://flask.palletsprojects.com/", href="https://flask.palletsprojects.com/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="A lightweight WSGI web application framework", title="A lightweight WSGI web application framework",
aria-label="A lightweight WSGI web application framework" aria-label="A lightweight WSGI web application framework"
) Flask, ) Flask
| ,
a.text-nls-violet.transition.underline-offset-2.underline( a.text-nls-violet.transition.underline-offset-2.underline(
href="https://fastapi.tiangolo.com/", href="https://fastapi.tiangolo.com/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
@@ -539,7 +571,8 @@ section.bg-nls-black.text-white
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="An open source programming language that makes it easy to build simple, reliable, and efficient software", title="An open source programming language that makes it easy to build simple, reliable, and efficient software",
aria-label="An open source programming language that makes it easy to build simple, reliable, and efficient software" aria-label="An open source programming language that makes it easy to build simple, reliable, and efficient software"
) Go, ) Go
| ,
a.text-nls-violet.transition.underline-offset-2.underline( a.text-nls-violet.transition.underline-offset-2.underline(
href="https://www.rust-lang.org/", href="https://www.rust-lang.org/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
@@ -552,7 +585,8 @@ section.bg-nls-black.text-white
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="Representational State Transfer", title="Representational State Transfer",
aria-label="Representational State Transfer" aria-label="Representational State Transfer"
) RESTful APIs, ) RESTful APIs
| ,
a.text-nls-violet.transition.underline-offset-2.underline( a.text-nls-violet.transition.underline-offset-2.underline(
href="https://graphql.org/", href="https://graphql.org/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
@@ -573,7 +607,8 @@ section.bg-nls-black.text-white
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="A fast all-in-one JavaScript runtime", title="A fast all-in-one JavaScript runtime",
aria-label="A fast all-in-one JavaScript runtime" aria-label="A fast all-in-one JavaScript runtime"
) Bun, ) Bun
| ,
a.text-nls-violet.transition.underline-offset-2.underline( a.text-nls-violet.transition.underline-offset-2.underline(
href="https://deno.land/", href="https://deno.land/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
@@ -645,13 +680,15 @@ section.bg-nls-black.text-white
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="A general purpose, document-based, distributed database", title="A general purpose, document-based, distributed database",
aria-label="A general purpose, document-based, distributed database" aria-label="A general purpose, document-based, distributed database"
) MongoDB, ) MongoDB
| ,
a.text-nls-purple.transition.underline-offset-2.underline( a.text-nls-purple.transition.underline-offset-2.underline(
href="https://cassandra.apache.org/", href="https://cassandra.apache.org/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="A free and open-source, distributed, wide column store, NoSQL database management system", title="A free and open-source, distributed, wide column store, NoSQL database management system",
aria-label="A free and open-source, distributed, wide column store, NoSQL database management system" aria-label="A free and open-source, distributed, wide column store, NoSQL database management system"
) Cassandra, ) Cassandra
| ,
a.text-nls-purple.transition.underline-offset-2.underline( a.text-nls-purple.transition.underline-offset-2.underline(
href="https://redis.io/", href="https://redis.io/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
@@ -682,7 +719,8 @@ section.bg-nls-black.text-white
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="Build cross-platform desktop apps with JavaScript, HTML, and CSS", title="Build cross-platform desktop apps with JavaScript, HTML, and CSS",
aria-label="Build cross-platform desktop apps with JavaScript, HTML, and CSS" aria-label="Build cross-platform desktop apps with JavaScript, HTML, and CSS"
) Electron, ) Electron
| ,
a.text-nls-pink.transition.underline-offset-2.underline( a.text-nls-pink.transition.underline-offset-2.underline(
href="https://tauri.app/", href="https://tauri.app/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
@@ -696,13 +734,15 @@ section.bg-nls-black.text-white
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="A framework for building native apps using React", title="A framework for building native apps using React",
aria-label="A framework for building native apps using React" aria-label="A framework for building native apps using React"
) React Native, ) React Native
| ,
a.text-nls-pink.transition.underline-offset-2.underline( a.text-nls-pink.transition.underline-offset-2.underline(
href="https://flutter.dev/", href="https://flutter.dev/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="Google's UI toolkit for building natively compiled applications", title="Google's UI toolkit for building natively compiled applications",
aria-label="Google's UI toolkit for building natively compiled applications" aria-label="Google's UI toolkit for building natively compiled applications"
) Flutter, ) Flutter
| ,
a.text-nls-pink.transition.underline-offset-2.underline( a.text-nls-pink.transition.underline-offset-2.underline(
href="https://cordova.apache.org/", href="https://cordova.apache.org/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
@@ -730,7 +770,8 @@ section.bg-nls-black.text-white
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="Web Content Accessibility Guidelines", title="Web Content Accessibility Guidelines",
aria-label="Web Content Accessibility Guidelines" aria-label="Web Content Accessibility Guidelines"
) Accessibility (a11y): WCAG, ) Accessibility (a11y): WCAG
| ,
a.text-nls-red.transition.underline-offset-2.underline( a.text-nls-red.transition.underline-offset-2.underline(
href="https://www.w3.org/WAI/standards-guidelines/aria/", href="https://www.w3.org/WAI/standards-guidelines/aria/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
@@ -744,13 +785,15 @@ section.bg-nls-black.text-white
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="Internationalization framework", title="Internationalization framework",
aria-label="Internationalization framework" aria-label="Internationalization framework"
) i18next, ) i18next
| ,
a.text-nls-red.transition.underline-offset-2.underline( a.text-nls-red.transition.underline-offset-2.underline(
href="https://weblate.org/", href="https://weblate.org/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
title="Web-based continuous localization system", title="Web-based continuous localization system",
aria-label="Web-based continuous localization system" aria-label="Web-based continuous localization system"
) Weblate, ) Weblate
| ,
a.text-nls-red.transition.underline-offset-2.underline( a.text-nls-red.transition.underline-offset-2.underline(
href="https://localize.co/", href="https://localize.co/",
class="hover:text-white hover:decoration-2", class="hover:text-white hover:decoration-2",
@@ -804,31 +847,3 @@ section.bg-nls-black.text-white
) Hotjar ) Hotjar
// endregion // endregion
// endregion // endregion
//section.bg-nls-black.text-white
// .p-8(class="sm:p-20")
// .max-w-screen-md.mx-auto
// h2.text-2xl.mb-4= computerScience.heading
// p.mb-8.max-w-prose= computerScience.description
// .grid.grid-cols-1.md\:grid-cols-1.gap-6.mb-8
// .mb-4
// details
// summary.focus\:outline-none.rounded-sm.focus\:z-10.focus\:ring-4.focus\:ring-white.focus\:bg-white.focus\:text-black.focus\:no-underline.text-white.transition.underline-offset-2.mb-2.cursor-pointer= courses.dhbw.name
// ul.list-disc.list-inside
// each course in courses.dhbw.courses
// li= course
// .mb-4
// details
// summary.focus\:outline-none.rounded-sm.focus\:z-10.focus\:ring-4.focus\:ring-white.focus\:bg-white.focus\:text-black.focus\:no-underline.text-white.transition.underline-offset-2.mb-2.cursor-pointer= courses.lfh.name
// ul.list-disc.list-inside
// each course in courses.lfh.courses
// li= course
// h2.text-2xl.mb-4= technicalExpertise.heading
// p.mb-8.max-w-prose= technicalExpertise.description
// .grid.grid-cols-1.md\:grid-cols-1.gap-6.mb-8
// each category in categories
// .mb-4
// details
// summary(class=`focus\:outline-none rounded-sm focus\:z-10 focus\:ring-4 focus\:ring-${category.color} focus\:bg-${category.color} focus\:text-black focus\:no-underline transition underline-offset-2 mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer text-${category.color}`)= category.name
// ul.list-disc.list-inside.text-gray-400
// // Content for each category would go here

20
src/components/TechnologySection.pug Normal file
View File

@@ -0,0 +1,20 @@
mixin TechnologySection(title, technologies, color, open)
div
details.mb-4(open=open)
summary.rounded-sm.transition.underline-offset-2.mb-2.cursor-pointer.text-md.font-semibold.mb-2(
class=`cursor-pointer text-${color} focus:outline-none focus:z-10 focus:ring-4 focus:ring-${color} focus:bg-${color} focus:text-black focus:no-underline`
)= title
ul.list-disc.list-inside.text-gray-400
each tech, index in technologies
li
if tech.url && tech.description
a.rounded-sm.transition.underline-offset-2.underline(
href=tech.url,
class=`text-${color} focus:outline-none focus:z-10 focus:ring-4 focus:ring-${color} focus:bg-${color} focus:text-black hover:text-white focus:no-underline hover:decoration-2`,
title=tech.description,
aria-label=tech.description
)= index + " " + tech.name
else
span= tech.name || tech
if index !== technologies.length - 1
| ,