diff --git a/src/components/Academia.pug b/src/components/Academia.pug index ac432bd..279d5c5 100644 --- a/src/components/Academia.pug +++ b/src/components/Academia.pug @@ -1,3 +1,5 @@ +include TechnologySection + section.bg-nls-black.text-white .p-8(class="sm:p-20 min-h-[120vh]") .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", title="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( 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", @@ -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", title="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( 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", title="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( 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", @@ -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", title="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( 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", @@ -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", title="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 a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( 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", 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" - ) HTML5, + ) HTML5 + | , a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( 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", 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" - ) CSS3, + ) CSS3 + | , a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( 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", 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" - ) Sass, + ) Sass + | , a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( 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", @@ -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", title="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( 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", title="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( 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", title="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( 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", @@ -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", title="Next Generation Frontend Tooling", aria-label="Next Generation Frontend Tooling" - ) Vite, + ) Vite + | , a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( 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", title="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( 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", @@ -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", title="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( 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", title="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( 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", title="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( 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", @@ -316,7 +334,8 @@ section.bg-nls-black.text-white class="hover:text-white hover:decoration-2", title="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( href="https://kubernetes.io/", class="hover:text-white hover:decoration-2", @@ -329,7 +348,8 @@ section.bg-nls-black.text-white class="hover:text-white hover:decoration-2", title="Microsoft's cloud computing platform", aria-label="Microsoft's cloud computing platform" - ) Azure, + ) Azure + | , a.text-nls-blue.transition.underline-offset-2.underline( href="https://cloud.google.com/", class="hover:text-white hover:decoration-2", @@ -343,13 +363,15 @@ section.bg-nls-black.text-white class="hover:text-white hover:decoration-2", title="An open source automation server", aria-label="An open source automation server" - ) Jenkins, + ) Jenkins + | , a.text-nls-blue.transition.underline-offset-2.underline( href="https://about.gitlab.com/stages-devops-lifecycle/continuous-integration/", class="hover:text-white hover:decoration-2", title="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( href="https://github.com/features/actions", class="hover:text-white hover:decoration-2", @@ -371,7 +393,8 @@ section.bg-nls-black.text-white class="hover:text-white hover:decoration-2", title="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( href="https://grafana.com/", class="hover:text-white hover:decoration-2", @@ -385,7 +408,8 @@ section.bg-nls-black.text-white class="hover:text-white hover:decoration-2", 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" - ) Apache, + ) Apache + | , a.text-nls-blue.transition.underline-offset-2.underline( href="https://www.nginx.com/", class="hover:text-white hover:decoration-2", @@ -463,7 +487,8 @@ section.bg-nls-black.text-white class="hover:text-white hover:decoration-2", title="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( href="https://expressjs.com/", class="hover:text-white hover:decoration-2", @@ -476,13 +501,15 @@ section.bg-nls-black.text-white class="hover:text-white hover:decoration-2", title="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( href="https://laravel.com/", class="hover:text-white hover:decoration-2", title="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( href="https://symfony.com/", class="hover:text-white hover:decoration-2", @@ -495,13 +522,15 @@ section.bg-nls-black.text-white class="hover:text-white hover:decoration-2", title="A general-purpose programming language", aria-label="A general-purpose programming language" - ) Java, + ) Java + | , a.text-nls-violet.transition.underline-offset-2.underline( href="https://spring.io/projects/spring-boot", class="hover:text-white hover:decoration-2", title="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( href="https://quarkus.io/", class="hover:text-white hover:decoration-2", @@ -514,19 +543,22 @@ section.bg-nls-black.text-white class="hover:text-white hover:decoration-2", 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" - ) Python, + ) Python + | , a.text-nls-violet.transition.underline-offset-2.underline( href="https://www.djangoproject.com/", class="hover:text-white hover:decoration-2", title="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( href="https://flask.palletsprojects.com/", class="hover:text-white hover:decoration-2", title="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( href="https://fastapi.tiangolo.com/", class="hover:text-white hover:decoration-2", @@ -539,7 +571,8 @@ section.bg-nls-black.text-white class="hover:text-white hover:decoration-2", 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" - ) Go, + ) Go + | , a.text-nls-violet.transition.underline-offset-2.underline( href="https://www.rust-lang.org/", class="hover:text-white hover:decoration-2", @@ -552,7 +585,8 @@ section.bg-nls-black.text-white class="hover:text-white hover:decoration-2", title="Representational State Transfer", aria-label="Representational State Transfer" - ) RESTful APIs, + ) RESTful APIs + | , a.text-nls-violet.transition.underline-offset-2.underline( href="https://graphql.org/", class="hover:text-white hover:decoration-2", @@ -573,7 +607,8 @@ section.bg-nls-black.text-white class="hover:text-white hover:decoration-2", title="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( href="https://deno.land/", class="hover:text-white hover:decoration-2", @@ -645,13 +680,15 @@ section.bg-nls-black.text-white class="hover:text-white hover:decoration-2", title="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( href="https://cassandra.apache.org/", class="hover:text-white hover:decoration-2", 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" - ) Cassandra, + ) Cassandra + | , a.text-nls-purple.transition.underline-offset-2.underline( href="https://redis.io/", class="hover:text-white hover:decoration-2", @@ -682,7 +719,8 @@ section.bg-nls-black.text-white class="hover:text-white hover:decoration-2", title="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( href="https://tauri.app/", class="hover:text-white hover:decoration-2", @@ -696,13 +734,15 @@ section.bg-nls-black.text-white class="hover:text-white hover:decoration-2", title="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( href="https://flutter.dev/", class="hover:text-white hover:decoration-2", title="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( href="https://cordova.apache.org/", class="hover:text-white hover:decoration-2", @@ -730,7 +770,8 @@ section.bg-nls-black.text-white class="hover:text-white hover:decoration-2", title="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( href="https://www.w3.org/WAI/standards-guidelines/aria/", class="hover:text-white hover:decoration-2", @@ -744,13 +785,15 @@ section.bg-nls-black.text-white class="hover:text-white hover:decoration-2", title="Internationalization framework", aria-label="Internationalization framework" - ) i18next, + ) i18next + | , a.text-nls-red.transition.underline-offset-2.underline( href="https://weblate.org/", class="hover:text-white hover:decoration-2", title="Web-based continuous localization system", aria-label="Web-based continuous localization system" - ) Weblate, + ) Weblate + | , a.text-nls-red.transition.underline-offset-2.underline( href="https://localize.co/", class="hover:text-white hover:decoration-2", @@ -804,31 +847,3 @@ section.bg-nls-black.text-white ) Hotjar // 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 diff --git a/src/components/TechnologySection.pug b/src/components/TechnologySection.pug new file mode 100644 index 0000000..a7749fe --- /dev/null +++ b/src/components/TechnologySection.pug @@ -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 + | ,