add technology section template and fix some formatting
This commit is contained in:
Michael Czechowski
@@ -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
|
||||
|
||||
20
src/components/TechnologySection.pug
Normal file
20
src/components/TechnologySection.pug
Normal 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
|
||||
| ,
|
||||
Reference in New Issue
Block a user