diff --git a/.pugrc b/.pugrc index 0515d15..358d16c 100644 --- a/.pugrc +++ b/.pugrc @@ -151,36 +151,993 @@ }, "expertise": { "intro": "With over two decades of experience in software development and architecture, I've navigated the evolving landscape of technology, consistently delivering cutting-edge solutions across various domains.", - "frontendTechnologies": [ - { - "name": "JavaScript (ES6+)", - "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript", - "description": "A high-level, interpreted programming language" - }, - { - "name": "TypeScript", - "url": "https://www.typescriptlang.org/", - "description": "A typed superset of JavaScript that compiles to plain JavaScript" - }, - { - "name": "React", - "url": "https://reactjs.org/", - "description": "A JavaScript library for building user interfaces" - } - ], - "backendTechnologies": [ - { - "name": "Node.js", - "url": "https://nodejs.org/" - }, - "Express.js", - "PostgreSQL" - ], - "otherSkills": [ - "Agile Methodologies", - "Test-Driven Development", - "CI/CD" - ] + "frontendTechnologies": { + "color": "green", + "category": "frontend technologies", + "summary": "Frontend Technologies", + "items": [ + { + "links": [ + { + "text": "JavaScript (ES6+)", + "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript", + "description": "A high-level, interpreted programming language", + "label": "JavaScript (ES6+)" + }, + { + "text": "TypeScript", + "url": "https://www.typescriptlang.org/", + "description": "A typed superset of JavaScript that compiles to plain JavaScript", + "label": "TypeScript" + } + ] + }, + { + "links": [ + { + "text": "React", + "url": "https://reactjs.org/", + "description": "A JavaScript library for building user interfaces", + "label": "React" + }, + { + "text": "Vue.js", + "url": "https://vuejs.org/", + "description": "A progressive framework for building user interfaces", + "label": "Vue" + }, + { + "text": "Svelte", + "url": "https://svelte.dev/", + "description": "A radical new approach to building user interfaces", + "label": "Svelte" + } + ] + }, + { + "links": [ + { + "text": "Angular", + "url": "https://angular.io/", + "description": "A platform for building mobile and desktop web applications", + "label": "Angular" + }, + { + "text": "Ember.js", + "url": "https://emberjs.com/", + "description": "A framework for ambitious web developers", + "label": "Ember" + } + ] + }, + { + "links": [ + { + "text": "jQuery", + "url": "https://jquery.com/", + "description": "A fast, small, and feature-rich JavaScript library", + "label": "jQuery" + } + ] + }, + { + "text": "Plain JS" + }, + { + "links": [ + { + "text": "HTML5", + "url": "https://developer.mozilla.org/en-US/docs/Web/HTML", + "description": "The standard markup language for documents designed to be displayed in a web browser", + "label": "HTML5" + }, + { + "text": "CSS3", + "url": "https://developer.mozilla.org/en-US/docs/Web/CSS", + "description": "A stylesheet language used to describe the presentation of a document written in HTML or XML", + "label": "CSS3" + }, + { + "text": "Sass", + "url": "https://sass-lang.com/", + "description": "A preprocessor scripting language that is interpreted or compiled into CSS", + "label": "Sass" + }, + { + "text": "Less", + "url": "https://lesscss.org/", + "description": "A backwards-compatible language extension for CSS", + "label": "Less" + } + ] + }, + { + "text": "Responsive Web Design" + }, + { + "links": [ + { + "text": "Tailwindcss", + "url": "https://tailwindcss.com/", + "description": "A utility-first CSS framework for rapidly building custom designs", + "label": "Tailwindcss" + }, + { + "text": "Ant Design", + "url": "https://ant.design/", + "description": "A design system for enterprise-level products", + "label": "Ant" + }, + { + "text": "Material Design", + "url": "https://material.io/design", + "description": "A design system created by Google", + "label": "Material" + }, + { + "text": "Bootstrap", + "url": "https://getbootstrap.com/", + "description": "The world's most popular front-end open source toolkit", + "label": "Bootstrap" + } + ] + }, + { + "text": "Bundlers:", + "links": [ + { + "text": "Vite", + "url": "https://vitejs.dev/", + "description": "Next Generation Frontend Tooling", + "label": "Vite" + }, + { + "text": "Webpack", + "url": "https://webpack.js.org/", + "description": "A static module bundler for modern JavaScript applications", + "label": "Webpack" + }, + { + "text": "Parcel", + "url": "https://parceljs.org/", + "description": "Blazing fast, zero configuration web application bundler", + "label": "Parcel" + } + ] + }, + { + "text": "Visualization:", + "links": [ + { + "text": "Observable Plot", + "url": "https://observablehq.com/plot/", + "description": "A javaScript library for exploratory data visualization", + "label": "Observable" + }, + { + "text": "D3.js", + "url": "https://d3js.org/", + "description": "A JavaScript library for manipulating documents based on data", + "label": "D3" + }, + { + "text": "Particle.js", + "url": "https://particles.js.org/", + "description": "A lightweight JavaScript library for creating particles", + "label": "Particle" + }, + { + "text": "Three.js", + "url": "https://threejs.org/", + "description": "A cross-browser JavaScript library and API used to create and display animated 3D computer graphics", + "label": "Three" + } + ] + }, + { + "links": [ + { + "text": "NextJS", + "url": "https://nextjs.org/", + "description": "The React Framework for Production", + "label": "NextJS" + } + ], + "suffix": "(React framework)" + }, + { + "links": [ + { + "text": "NuxtJS", + "url": "https://nuxtjs.org/", + "description": "The Intuitive Vue Framework", + "label": "NuxtJS" + } + ], + "suffix": "(Vue framework)" + }, + { + "links": [ + { + "text": "SvelteKit", + "url": "https://kit.svelte.dev/", + "description": "The fastest way to build Svelte apps", + "label": "SvelteKit" + } + ], + "suffix": "(Svelte framework)" + }, + { + "links": [ + { + "text": "Gatsby", + "url": "https://www.gatsbyjs.com/", + "description": "A React-based open source framework for creating websites and apps", + "label": "Gatsby" + } + ], + "suffix": "(Static site generator)" + }, + { + "links": [ + { + "text": "Storybook", + "url": "https://storybook.js.org/", + "description": "A tool for building UI components and pages in isolation", + "label": "Storybook" + } + ], + "suffix": "(UI component explorer)" + }, + { + "links": [ + { + "text": "Jest", + "url": "https://jestjs.io/", + "description": "A delightful JavaScript Testing Framework with a focus on simplicity", + "label": "Jest" + } + ], + "suffix": "(Testing framework)" + }, + { + "links": [ + { + "text": "Cypress", + "url": "https://www.cypress.io/", + "description": "Fast, easy and reliable testing for anything that runs in a browser", + "label": "Cypress" + } + ], + "suffix": "(E2E testing)" + }, + { + "links": [ + { + "text": "Playwright", + "url": "https://playwright.dev/", + "description": "Reliable end-to-end testing for modern web apps", + "label": "Playwright" + } + ], + "suffix": "(E2E testing)" + }, + { + "links": [ + { + "text": "Redux", + "url": "https://redux.js.org/", + "description": "A Predictable State Container for JS Apps", + "label": "Redux" + } + ], + "suffix": "(State management)" + }, + { + "links": [ + { + "text": "MobX", + "url": "https://mobx.js.org/", + "description": "Simple, scalable state management", + "label": "MobX" + } + ], + "suffix": "(State management)" + }, + { + "links": [ + { + "text": "Zustand", + "url": "https://zustand-demo.pmnd.rs/", + "description": "A small, fast and scalable bearbones state-management solution", + "label": "Zustand" + } + ], + "suffix": "(State management)" + }, + { + "links": [ + { + "text": "Apollo Client", + "url": "https://www.apollographql.com/docs/react/", + "description": "A complete state management library for JavaScript apps", + "label": "Apollo" + } + ], + "suffix": "(GraphQL client)" + }, + { + "links": [ + { + "text": "Axios", + "url": "https://axios-http.com/", + "description": "Promise based HTTP client for the browser and node.js", + "label": "Axios" + } + ], + "suffix": "(HTTP client)" + }, + { + "links": [ + { + "text": "Lodash", + "url": "https://lodash.com/", + "description": "A modern JavaScript utility library delivering modularity, performance & extras", + "label": "Lodash" + } + ], + "suffix": "(Utility library)" + }, + { + "links": [ + { + "text": "RxJS", + "url": "https://rxjs.dev/", + "description": "A library for reactive programming using Observables", + "label": "RxJS" + } + ], + "suffix": "(Reactive programming library)" + }, + { + "links": [ + { + "text": "WebGL", + "url": "https://www.khronos.org/webgl/", + "description": "A JavaScript API for rendering interactive 2D and 3D graphics", + "label": "WebGL" + } + ], + "suffix": "(3D graphics)" + } + ] + }, + "devopsAndCloud": { + "color": "blue", + "category": "devops", + "summary": "DevOps & Cloud", + "items": [ + { + "links": [ + { + "text": "Docker", + "url": "https://www.docker.com/", + "description": "A platform for developing, shipping, and running applications", + "label": "Docker" + }, + { + "text": "Kubernetes", + "url": "https://kubernetes.io/", + "description": "An open-source system for automating deployment, scaling, and management of containerized applications", + "label": "Kubernetes" + } + ] + }, + { + "links": [ + { + "text": "Azure", + "url": "https://azure.microsoft.com/", + "description": "Microsoft's cloud computing platform", + "label": "Azure" + }, + { + "text": "Google Cloud", + "url": "https://cloud.google.com/", + "description": "Google's suite of cloud computing services", + "label": "Google" + } + ] + }, + { + "text": "CI/CD (", + "links": [ + { + "text": "Jenkins", + "url": "https://www.jenkins.io/", + "description": "An open source automation server", + "label": "Jenkins" + }, + { + "text": "GitLab CI", + "url": "https://about.gitlab.com/stages-devops-lifecycle/continuous-integration/", + "description": "GitLab's built-in Continuous Integration", + "label": "GitLab" + }, + { + "text": "GitHub Actions", + "url": "https://github.com/features/actions", + "description": "Automate your workflow from idea to production", + "label": "GitHub" + } + ], + "suffix": ")" + }, + { + "links": [ + { + "text": "Terraform", + "url": "https://www.terraform.io/", + "description": "An open-source infrastructure as code software tool", + "label": "Terraform" + } + ] + }, + { + "text": "Monitoring (", + "links": [ + { + "text": "Prometheus", + "url": "https://prometheus.io/", + "description": "An open-source monitoring system with a dimensional data model", + "label": "Prometheus" + }, + { + "text": "Grafana", + "url": "https://grafana.com/", + "description": "An open-source platform for monitoring and observability", + "label": "Grafana" + } + ], + "suffix": ")" + }, + { + "links": [ + { + "text": "Apache", + "url": "https://httpd.apache.org/", + "description": "A robust, commercial-grade, featureful, and freely-available source code implementation of an HTTP (Web) server", + "label": "Apache" + }, + { + "text": "Nginx", + "url": "https://www.nginx.com/", + "description": "A web server that can also be used as a reverse proxy, load balancer, mail proxy and HTTP cache", + "label": "Nginx" + } + ] + }, + { + "text": "Message Queuing:", + "links": [ + { + "text": "Kafka", + "url": "https://kafka.apache.org/", + "description": "A distributed streaming platform", + "label": "Kafka" + } + ] + }, + { + "links": [ + { + "text": "Sonarqube", + "url": "https://www.sonarqube.org/", + "description": "An open-source platform for continuous inspection of code quality", + "label": "Sonarqube" + } + ] + }, + { + "links": [ + { + "text": "Sentry", + "url": "https://sentry.io/", + "description": "Application monitoring and error tracking software", + "label": "Sentry" + } + ], + "suffix": "(Error tracking)" + }, + { + "links": [ + { + "text": "Lighthouse", + "url": "https://developers.google.com/web/tools/lighthouse", + "description": "An open-source, automated tool for improving the quality of web pages", + "label": "Lighthouse" + } + ], + "suffix": "(Performance, accessibility, and SEO auditing)" + }, + { + "links": [ + { + "text": "WebPageTest", + "url": "https://www.webpagetest.org/", + "description": "Website performance and optimization test", + "label": "WebPageTest" + } + ], + "suffix": "(Performance testing)" + }, + { + "links": [ + { + "text": "Puppeteer", + "url": "https://pptr.dev/", + "description": "A Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol", + "label": "Puppeteer" + } + ], + "suffix": "(Headless browser automation)" + }, + { + "links": [ + { + "text": "Selenium", + "url": "https://www.selenium.dev/", + "description": "A portable framework for testing web applications", + "label": "Selenium" + } + ], + "suffix": "(Browser automation)" + }, + { + "links": [ + { + "text": "Nx", + "url": "https://nx.dev/", + "description": "Smart, Fast and Extensible Build System", + "label": "Nx" + } + ], + "suffix": "(Monorepo tooling)" + } + ] + }, + "backendTechnologies": { + "color": "violet", + "category": "backend technologies", + "summary": "Backend Technologies", + "items": [ + { + "links": [ + { + "text": "Node.js", + "url": "https://nodejs.org/", + "description": "A JavaScript runtime built on Chrome's V8 JavaScript engine", + "label": "Node" + }, + { + "text": "Express.js", + "url": "https://expressjs.com/", + "description": "Fast, unopinionated, minimalist web framework for Node.js", + "label": "Express" + } + ] + }, + { + "links": [ + { + "text": "PHP", + "url": "https://www.php.net/", + "description": "A popular general-purpose scripting language", + "label": "PHP" + }, + { + "text": "Laravel", + "url": "https://laravel.com/", + "description": "A web application framework with expressive, elegant syntax", + "label": "Laravel" + }, + { + "text": "Symfony", + "url": "https://symfony.com/", + "description": "A set of reusable PHP components", + "label": "Symfony" + } + ] + }, + { + "links": [ + { + "text": "Java", + "url": "https://www.java.com/", + "description": "A general-purpose programming language", + "label": "Java" + }, + { + "text": "Spring Boot", + "url": "https://spring.io/projects/spring-boot", + "description": "An extension of the Spring framework", + "label": "Spring" + }, + { + "text": "Quarkus", + "url": "https://quarkus.io/", + "description": "A Kubernetes Native Java stack", + "label": "Quarkus" + } + ] + }, + { + "links": [ + { + "text": "Python", + "url": "https://www.python.org/", + "description": "A programming language that lets you work quickly and integrate systems more effectively", + "label": "Python" + }, + { + "text": "Django", + "url": "https://www.djangoproject.com/", + "description": "A high-level Python Web framework", + "label": "Django" + }, + { + "text": "Flask", + "url": "https://flask.palletsprojects.com/", + "description": "A lightweight WSGI web application framework", + "label": "Flask" + }, + { + "text": "FastAPI", + "url": "https://fastapi.tiangolo.com/", + "description": "A modern, fast (high-performance), web framework for building APIs with Python 3.6+", + "label": "FastAPI" + } + ] + }, + { + "links": [ + { + "text": "Go", + "url": "https://golang.org/", + "description": "An open source programming language that makes it easy to build simple, reliable, and efficient software", + "label": "Go" + }, + { + "text": "Rust", + "url": "https://www.rust-lang.org/", + "description": "A language empowering everyone to build reliable and efficient software", + "label": "Rust" + } + ] + }, + { + "links": [ + { + "text": "RESTful APIs", + "url": "https://restfulapi.net/", + "description": "Representational State Transfer", + "label": "RESTful" + }, + { + "text": "GraphQL", + "url": "https://graphql.org/", + "description": "A query language for your API", + "label": "GraphQL" + } + ] + }, + { + "links": [ + { + "text": "Hono", + "url": "https://hono.dev/", + "description": "Ultrafast web framework for the Edges", + "label": "Hono" + } + ] + }, + { + "text": "Runtimes:", + "links": [ + { + "text": "Bun", + "url": "https://bun.sh/", + "description": "A fast all-in-one JavaScript runtime", + "label": "Bun" + }, + { + "text": "Deno", + "url": "https://deno.land/", + "description": "A secure runtime for JavaScript and TypeScript", + "label": "Deno" + } + ] + }, + { + "links": [ + { + "text": "NestJS (Node.js framework)", + "url": "https://nestjs.com/", + "description": "A progressive Node.js framework for building efficient and scalable server-side applications", + "label": "NestJS" + } + ] + }, + { + "links": [ + { + "text": "Fastify (Node.js framework)", + "url": "https://www.fastify.io/", + "description": "Fast and low overhead web framework, for Node.js", + "label": "Fastify" + } + ] + }, + { + "links": [ + { + "text": "TypeORM (ORM for TypeScript)", + "url": "https://typeorm.io/", + "description": "ORM for TypeScript and JavaScript", + "label": "TypeORM" + } + ] + }, + { + "links": [ + { + "text": "Prisma (Database toolkit)", + "url": "https://www.prisma.io/", + "description": "Next-generation Node.js and TypeScript ORM", + "label": "Prisma" + } + ] + }, + { + "links": [ + { + "text": "Knex.js (SQL query builder)", + "url": "https://knexjs.org/", + "description": "A SQL query builder for JavaScript", + "label": "Knex" + } + ] + } + ] + }, + "databaseAndData": { + "color": "purple", + "category": "databases", + "summary": "Database & Data", + "items": [ + { + "text": "SQL (", + "links": [ + { + "text": "MySQL", + "url": "https://www.mysql.com/", + "description": "The world's most popular open source database", + "label": "MySQL" + }, + { + "text": "PostgreSQL", + "url": "https://www.postgresql.org/", + "description": "The world's most advanced open source database", + "label": "PostgreSQL" + } + ], + "suffix": ")" + }, + { + "text": "NoSQL (", + "links": [ + { + "text": "MongoDB", + "url": "https://www.mongodb.com/", + "description": "A general purpose, document-based, distributed database", + "label": "MongoDB" + }, + { + "text": "Cassandra", + "url": "https://cassandra.apache.org/", + "description": "A free and open-source, distributed, wide column store, NoSQL database management system", + "label": "Cassandra" + }, + { + "text": "Redis", + "url": "https://redis.io/", + "description": "An open source, in-memory data structure store", + "label": "Redis" + } + ], + "suffix": ")" + }, + { + "links": [ + { + "text": "Elasticsearch", + "url": "https://www.elastic.co/elasticsearch/", + "description": "A distributed, RESTful search and analytics engine", + "label": "Elasticsearch" + } + ] + }, + { + "text": "Data Analysis & Visualization" + } + ] + }, + "crossPlatform": { + "color": "pink", + "category": "cross-platform", + "summary": "Cross-Platform Development", + "items": [ + { + "text": "Desktop Apps:", + "links": [ + { + "text": "Electron", + "url": "https://www.electronjs.org/", + "description": "Build cross-platform desktop apps with JavaScript, HTML, and CSS", + "label": "Electron" + }, + { + "text": "Tauri", + "url": "https://tauri.app/", + "description": "Build smaller, faster, and more secure desktop applications with a web frontend", + "label": "Tauri" + } + ] + }, + { + "text": "Mobile Apps:", + "links": [ + { + "text": "React Native", + "url": "https://reactnative.dev/", + "description": "A framework for building native apps using React", + "label": "React" + }, + { + "text": "Flutter", + "url": "https://flutter.dev/", + "description": "Google's UI toolkit for building natively compiled applications", + "label": "Flutter" + }, + { + "text": "Cordova", + "url": "https://cordova.apache.org/", + "description": "Mobile apps with HTML, CSS & JS", + "label": "Cordova" + } + ] + }, + { + "links": [ + { + "text": "Progressive Web Apps (PWAs)", + "url": "https://web.dev/progressive-web-apps/", + "description": "Websites that took all the right vitamins", + "label": "Progressive" + } + ] + } + ] + }, + "bestPractices": { + "color": "red", + "category": "best practices", + "summary": "Development Best Practices", + "items": [ + { + "links": [ + { + "text": "Accessibility (a11y): WCAG", + "url": "https://www.w3.org/WAI/standards-guidelines/wcag/", + "description": "Web Content Accessibility Guidelines", + "label": "Accessibility" + }, + { + "text": "ARIA", + "url": "https://www.w3.org/WAI/standards-guidelines/aria/", + "description": "Accessible Rich Internet Applications", + "label": "ARIA" + } + ] + }, + { + "text": "Internationalization (i18n):", + "links": [ + { + "text": "i18next", + "url": "https://www.i18next.com/", + "description": "Internationalization framework", + "label": "i18next" + }, + { + "text": "Weblate", + "url": "https://weblate.org/", + "description": "Web-based continuous localization system", + "label": "Weblate" + }, + { + "text": "Localize", + "url": "https://localize.co/", + "description": "Translation management platform", + "label": "Localize" + } + ] + }, + { + "text": "Performance Optimization" + }, + { + "text": "SEO Best Practices" + }, + { + "links": [ + { + "text": "Web Security (OWASP)", + "url": "https://owasp.org/", + "description": "Open Web Application Security Project", + "label": "Web" + } + ] + } + ] + }, + "tracking": { + "color": "orange", + "category": "tracking", + "summary": "Analytics & Tracking", + "items": [ + { + "links": [ + { + "text": "Umami", + "url": "https://umami.is/", + "description": "Simple, fast, privacy-focused alternative to Google Analytics", + "label": "Umami" + } + ] + }, + { + "links": [ + { + "text": "Google Analytics", + "url": "https://developers.google.com/analytics/", + "description": "Web analytics service offered by Google", + "label": "Google" + } + ] + }, + { + "links": [ + { + "text": "Amplitude", + "url": "https://amplitude.com/", + "description": "Product analytics platform", + "label": "Amplitude" + } + ] + }, + { + "links": [ + { + "text": "Hotjar", + "url": "https://www.hotjar.com/", + "description": "Behavior analytics and user feedback platform", + "label": "Hotjar" + } + ] + } + ] + } } } } diff --git a/index.pug b/index.pug index 572fae1..aa72d42 100644 --- a/index.pug +++ b/index.pug @@ -8,5 +8,4 @@ html.scroll-smooth(lang=lang) include src/components/Title include src/components/Professional include src/components/Academia - include src/components/Footer diff --git a/src/components/Academia.pug b/src/components/Academia.pug index be437fc..86f7992 100644 --- a/src/components/Academia.pug +++ b/src/components/Academia.pug @@ -1,4 +1,4 @@ -include TechnologySection +include Collapsable section.bg-nls-black.text-white .p-8(class="sm:p-20 min-h-[120vh]") @@ -15,1164 +15,35 @@ section.bg-nls-black.text-white div details.mb-4 summary.rounded-sm.text-white.transition.underline-offset-2.mb-2.cursor-pointer( - class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline" + class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline", + onclick="umami.track('collapsable clicked', { category: 'courses dhbw' })" )= academia.courseInstitutions.dhbw ul.list-disc.list-inside li= academia.courses.dhbw[0] div details.mb-4 summary.rounded-sm.text-white.transition.underline-offset-2.mb-2.cursor-pointer( - class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline" + class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline", + onclick="umami.track('collapsable clicked', { category: 'courses leibniz-fh' })" )= academia.courseInstitutions.lfh ul.list-disc.list-inside each course in academia.courses.lfh li= course // endregion - // region Skills and Expertise + // region Skills h2.text-2xl.mb-4= academia.sectionTitles.expertise p.mb-8.max-w-prose | #{academia.expertise.intro} // endregion + // region Expertise .grid.grid-cols-1.gap-6.mb-8(class="md:grid-cols-1") - // region Frontend - div - details.mb-4(open="") - summary.rounded-sm.transition.underline-offset-2.mb-2.cursor-pointer.text-md.font-semibold.mb-2.cursor-pointer.text-nls-green( - class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black focus:no-underline" - data-umami-event="academia collapsed" - data-umami-event-category="frontend technologies" - ) Frontend Technologies - ul.list-disc.list-inside.text-gray-400 - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://developer.mozilla.org/en-US/docs/Web/JavaScript", - 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" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="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", - title="A typed superset of JavaScript that compiles to plain JavaScript", - aria-label="A typed superset of JavaScript that compiles to plain JavaScript" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="TypeScript" - ) TypeScript - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://reactjs.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 building user interfaces", - aria-label="A JavaScript library for building user interfaces" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="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" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Vue" - ) 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", - title="A radical new approach to building user interfaces", - aria-label="A radical new approach to building user interfaces" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Svelte" - ) Svelte - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://angular.io/", - 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" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="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", - title="A framework for ambitious web developers", - aria-label="A framework for ambitious web developers" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Ember" - ) Ember.js - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://jquery.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 fast, small, and feature-rich JavaScript library", - aria-label="A fast, small, and feature-rich JavaScript library" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="jQuery" - ) 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" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="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" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="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" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="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", - title="A backwards-compatible language extension for CSS", - aria-label="A backwards-compatible language extension for CSS" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Less" - ) Less - li Responsive Web Design - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://tailwindcss.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 utility-first CSS framework for rapidly building custom designs", - aria-label="A utility-first CSS framework for rapidly building custom designs" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="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" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Ant" - ) 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" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Material" - ) 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", - title="The world's most popular front-end open source toolkit", - aria-label="The world's most popular front-end open source toolkit" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Bootstrap" - ) Bootstrap - li - | Bundlers: - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://vitejs.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", - title="Next Generation Frontend Tooling", - aria-label="Next Generation Frontend Tooling" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="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" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="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", - title="Blazing fast, zero configuration web application bundler", - aria-label="Blazing fast, zero configuration web application bundler" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Parcel" - ) Parcel - li - | Visualization: - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://observablehq.com/plot/", - 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" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Observable" - ) 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" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="D3" - ) 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" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Particle" - ) 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", - title="A cross-browser JavaScript library and API used to create and display animated 3D computer graphics", - aria-label="A cross-browser JavaScript library and API used to create and display animated 3D computer graphics" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Three" - ) Three.js - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://nextjs.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="The React Framework for Production", - aria-label="The React Framework for Production" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="NextJS" - ) NextJS(React framework) - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://nuxtjs.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="The Intuitive Vue Framework", - aria-label="The Intuitive Vue Framework" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="NuxtJS" - ) NuxtJS(Vue framework) - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://kit.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", - title="The fastest way to build Svelte apps", - aria-label="The fastest way to build Svelte apps" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="SvelteKit" - ) SvelteKit(Svelte framework) - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://www.gatsbyjs.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 React-based open source framework for creating websites and apps", - aria-label="A React-based open source framework for creating websites and apps" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Gatsby" - ) Gatsby(Static site generator) - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://storybook.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 tool for building UI components and pages in isolation", - aria-label="A tool for building UI components and pages in isolation" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Storybook" - ) Storybook(UI component explorer) - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://jestjs.io/", - 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 delightful JavaScript Testing Framework with a focus on simplicity", - aria-label="A delightful JavaScript Testing Framework with a focus on simplicity" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Jest" - ) Jest(Testing framework) - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://www.cypress.io/", - 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="Fast, easy and reliable testing for anything that runs in a browser", - aria-label="Fast, easy and reliable testing for anything that runs in a browser" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Cypress" - ) Cypress(E2E testing) - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://playwright.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", - title="Reliable end-to-end testing for modern web apps", - aria-label="Reliable end-to-end testing for modern web apps" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Playwright" - ) Playwright(E2E testing) - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://redux.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 Predictable State Container for JS Apps", - aria-label="A Predictable State Container for JS Apps" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Redux" - ) Redux(State management) - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://mobx.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="Simple, scalable state management", - aria-label="Simple, scalable state management" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="MobX" - ) MobX(State management) - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://zustand-demo.pmnd.rs/", - 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 small, fast and scalable bearbones state-management solution", - aria-label="A small, fast and scalable bearbones state-management solution" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Zustand" - ) Zustand(State management) - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://www.apollographql.com/docs/react/", - 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 complete state management library for JavaScript apps", - aria-label="A complete state management library for JavaScript apps" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Apollo" - ) Apollo Client(GraphQL client) - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://axios-http.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="Promise based HTTP client for the browser and node.js", - aria-label="Promise based HTTP client for the browser and node.js" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Axios" - ) Axios(HTTP client) - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://lodash.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 modern JavaScript utility library delivering modularity, performance & extras", - aria-label="A modern JavaScript utility library delivering modularity, performance & extras" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="Lodash" - ) Lodash(Utility library) - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://rxjs.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", - title="A library for reactive programming using Observables", - aria-label="A library for reactive programming using Observables" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="RxJS" - ) RxJS(Reactive programming library) - li - a.rounded-sm.text-nls-green.transition.underline-offset-2.underline( - href="https://www.khronos.org/webgl/", - 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 API for rendering interactive 2D and 3D graphics", - aria-label="A JavaScript API for rendering interactive 2D and 3D graphics" - data-umami-event="academia clicked" - data-umami-event-category="frontend technologies" - data-umami-event-label="WebGL" - ) WebGL(3D graphics) - // endregion - // region DevOps - div - details.mb-4 - summary.rounded-sm.transition.underline-offset-2.mb-2.cursor-pointer.text-md.font-semibold.mb-2.cursor-pointer.text-nls-blue( - class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-blue focus:bg-nls-blue focus:text-black focus:no-underline" - data-umami-event="academia collapsed" - data-umami-event-category="devops" - ) DevOps & Cloud - ul.list-disc.list-inside.text-gray-400 - li - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://www.docker.com/", - 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" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="Docker" - ) Docker - | , - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://kubernetes.io/", - class="hover:text-white hover:decoration-2", - title="An open-source system for automating deployment, scaling, and management of containerized applications", - aria-label="An open-source system for automating deployment, scaling, and management of containerized applications" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="Kubernetes" - ) Kubernetes - li - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://azure.microsoft.com/", - class="hover:text-white hover:decoration-2", - title="Microsoft's cloud computing platform", - aria-label="Microsoft's cloud computing platform" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="Azure" - ) Azure - | , - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://cloud.google.com/", - class="hover:text-white hover:decoration-2", - title="Google's suite of cloud computing services", - aria-label="Google's suite of cloud computing services" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="Google" - ) Google Cloud - li - | CI/CD ( - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://www.jenkins.io/", - class="hover:text-white hover:decoration-2", - title="An open source automation server", - aria-label="An open source automation server" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="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" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="GitLab" - ) GitLab CI - | , - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://github.com/features/actions", - class="hover:text-white hover:decoration-2", - title="Automate your workflow from idea to production", - aria-label="Automate your workflow from idea to production" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="GitHub" - ) GitHub Actions - | ) - li - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://www.terraform.io/", - class="hover:text-white hover:decoration-2", - title="An open-source infrastructure as code software tool", - aria-label="An open-source infrastructure as code software tool" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="Terraform" - ) Terraform - li - | Monitoring ( - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://prometheus.io/", - 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" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="Prometheus" - ) Prometheus - | , - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://grafana.com/", - class="hover:text-white hover:decoration-2", - title="An open-source platform for monitoring and observability", - aria-label="An open-source platform for monitoring and observability" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="Grafana" - ) Grafana - | ) - li - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://httpd.apache.org/", - 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" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="Apache" - ) Apache - | , - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://www.nginx.com/", - class="hover:text-white hover:decoration-2", - title="A web server that can also be used as a reverse proxy, load balancer, mail proxy and HTTP cache", - aria-label="A web server that can also be used as a reverse proxy, load balancer, mail proxy and HTTP cache" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="Nginx" - ) Nginx - li - | Message Queuing: - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://kafka.apache.org/", - class="hover:text-white hover:decoration-2", - title="A distributed streaming platform", - aria-label="A distributed streaming platform" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="Kafka" - ) Kafka - li - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://www.sonarqube.org/", - class="hover:text-white hover:decoration-2", - title="An open-source platform for continuous inspection of code quality", - aria-label="An open-source platform for continuous inspection of code quality" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="Sonarqube" - ) Sonarqube - li - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://sentry.io/", - class="hover:text-white hover:decoration-2", - title="Application monitoring and error tracking software", - aria-label="Application monitoring and error tracking software" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="Sentry" - ) Sentry(Error tracking) - li - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://developers.google.com/web/tools/lighthouse", - class="hover:text-white hover:decoration-2", - title="An open-source, automated tool for improving the quality of web pages", - aria-label="An open-source, automated tool for improving the quality of web pages" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="Lighthouse" - ) Lighthouse(Performance, accessibility, and SEO auditing) - li - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://www.webpagetest.org/", - class="hover:text-white hover:decoration-2", - title="Website performance and optimization test", - aria-label="Website performance and optimization test" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="WebPageTest" - ) WebPageTest(Performance testing) - li - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://pptr.dev/", - class="hover:text-white hover:decoration-2", - title="A Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol", - aria-label="A Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="Puppeteer" - ) Puppeteer(Headless browser automation) - li - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://www.selenium.dev/", - class="hover:text-white hover:decoration-2", - title="A portable framework for testing web applications", - aria-label="A portable framework for testing web applications" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="Selenium" - ) Selenium(Browser automation) - li - a.text-nls-blue.transition.underline-offset-2.underline( - href="https://nx.dev/", - class="hover:text-white hover:decoration-2", - title="Smart, Fast and Extensible Build System", - aria-label="Smart, Fast and Extensible Build System" - data-umami-event="academia clicked" - data-umami-event-category="devops" - data-umami-event-label="Nx" - ) Nx(Monorepo tooling) - // endregion - // region Backend - div - details.mb-4 - summary.rounded-sm.transition.underline-offset-2.mb-2.cursor-pointer.text-md.font-semibold.mb-2.cursor-pointer.text-nls-violet( - class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-violet focus:bg-nls-violet focus:text-black focus:no-underline" - data-umami-event="academia collapsed" - data-umami-event-category="backend technologies" - ) Backend Technologies - ul.list-disc.list-inside.text-gray-400 - li - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://nodejs.org/", - 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" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="Node" - ) Node.js - | , - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://expressjs.com/", - class="hover:text-white hover:decoration-2", - title="Fast, unopinionated, minimalist web framework for Node.js", - aria-label="Fast, unopinionated, minimalist web framework for Node.js" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="Express" - ) Express.js - li - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://www.php.net/", - class="hover:text-white hover:decoration-2", - title="A popular general-purpose scripting language", - aria-label="A popular general-purpose scripting language" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="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" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="Laravel" - ) Laravel - | , - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://symfony.com/", - class="hover:text-white hover:decoration-2", - title="A set of reusable PHP components", - aria-label="A set of reusable PHP components" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="Symfony" - ) Symfony - li - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://www.java.com/", - class="hover:text-white hover:decoration-2", - title="A general-purpose programming language", - aria-label="A general-purpose programming language" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="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" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="Spring" - ) Spring Boot - | , - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://quarkus.io/", - class="hover:text-white hover:decoration-2", - title="A Kubernetes Native Java stack", - aria-label="A Kubernetes Native Java stack" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="Quarkus" - ) Quarkus - li - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://www.python.org/", - 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" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="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" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="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" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="Flask" - ) Flask - | , - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://fastapi.tiangolo.com/", - class="hover:text-white hover:decoration-2", - title="A modern, fast (high-performance), web framework for building APIs with Python 3.6+", - aria-label="A modern, fast (high-performance), web framework for building APIs with Python 3.6+" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="FastAPI" - ) FastAPI - li - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://golang.org/", - 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" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="Go" - ) Go - | , - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://www.rust-lang.org/", - class="hover:text-white hover:decoration-2", - title="A language empowering everyone to build reliable and efficient software", - aria-label="A language empowering everyone to build reliable and efficient software" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="Rust" - ) Rust - li - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://restfulapi.net/", - class="hover:text-white hover:decoration-2", - title="Representational State Transfer", - aria-label="Representational State Transfer" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="RESTful" - ) RESTful APIs - | , - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://graphql.org/", - class="hover:text-white hover:decoration-2", - title="A query language for your API", - aria-label="A query language for your API" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="GraphQL" - ) GraphQL - li - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://hono.dev/", - class="hover:text-white hover:decoration-2", - title="Ultrafast web framework for the Edges", - aria-label="Ultrafast web framework for the Edges" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="Hono" - ) Hono - li - | Runtimes: - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://bun.sh/", - class="hover:text-white hover:decoration-2", - title="A fast all-in-one JavaScript runtime", - aria-label="A fast all-in-one JavaScript runtime" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="Bun" - ) Bun - | , - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://deno.land/", - class="hover:text-white hover:decoration-2", - title="A secure runtime for JavaScript and TypeScript", - aria-label="A secure runtime for JavaScript and TypeScript" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="Deno" - ) Deno - li - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://nestjs.com/", - class="hover:text-white hover:decoration-2", - title="A progressive Node.js framework for building efficient and scalable server-side applications", - aria-label="A progressive Node.js framework for building efficient and scalable server-side applications" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="NestJS" - ) NestJS(Node.js framework) - li - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://www.fastify.io/", - class="hover:text-white hover:decoration-2", - title="Fast and low overhead web framework, for Node.js", - aria-label="Fast and low overhead web framework, for Node.js" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="Fastify" - ) Fastify(Node.js framework) - li - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://typeorm.io/", - class="hover:text-white hover:decoration-2", - title="ORM for TypeScript and JavaScript", - aria-label="ORM for TypeScript and JavaScript" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="TypeORM" - ) TypeORM(ORM for TypeScript) - li - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://www.prisma.io/", - class="hover:text-white hover:decoration-2", - title="Next-generation Node.js and TypeScript ORM", - aria-label="Next-generation Node.js and TypeScript ORM" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="Prisma" - ) Prisma(Database toolkit) - li - a.text-nls-violet.transition.underline-offset-2.underline( - href="https://knexjs.org/", - class="hover:text-white hover:decoration-2", - title="A SQL query builder for JavaScript", - aria-label="A SQL query builder for JavaScript" - data-umami-event="academia clicked" - data-umami-event-category="backend technologies" - data-umami-event-label="Knex" - ) Knex.js(SQL query builder) - // endregion - // region Data - div - details.mb-4 - summary.rounded-sm.transition.underline-offset-2.mb-2.cursor-pointer.text-md.font-semibold.mb-2.cursor-pointer.text-nls-purple( - class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-purple focus:bg-nls-purple focus:text-black focus:no-underline" - data-umami-event="academia collapsed" - data-umami-event-category="databases" - ) Database & Data - ul.list-disc.list-inside.text-gray-400 - li - | SQL ( - a.text-nls-purple.transition.underline-offset-2.underline( - href="https://www.mysql.com/", - class="hover:text-white hover:decoration-2", - title="The world's most popular open source database", - aria-label="The world's most popular open source database" - data-umami-event="academia clicked" - data-umami-event-category="databases" - data-umami-event-label="MySQL" - ) MySQL, - a.text-nls-purple.transition.underline-offset-2.underline( - href="https://www.postgresql.org/", - class="hover:text-white hover:decoration-2", - title="The world's most advanced open source database", - aria-label="The world's most advanced open source database" - data-umami-event="academia clicked" - data-umami-event-category="databases" - data-umami-event-label="PostgreSQL" - ) PostgreSQL - | ) - li - | NoSQL ( - a.text-nls-purple.transition.underline-offset-2.underline( - href="https://www.mongodb.com/", - class="hover:text-white hover:decoration-2", - title="A general purpose, document-based, distributed database", - aria-label="A general purpose, document-based, distributed database" - data-umami-event="academia clicked" - data-umami-event-category="databases" - data-umami-event-label="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" - data-umami-event="academia clicked" - data-umami-event-category="databases" - data-umami-event-label="Cassandra" - ) Cassandra - | , - a.text-nls-purple.transition.underline-offset-2.underline( - href="https://redis.io/", - class="hover:text-white hover:decoration-2", - title="An open source, in-memory data structure store", - aria-label="An open source, in-memory data structure store" - data-umami-event="academia clicked" - data-umami-event-category="databases" - data-umami-event-label="Redis" - ) Redis - | ) - li - a.text-nls-purple.transition.underline-offset-2.underline( - href="https://www.elastic.co/elasticsearch/", - class="hover:text-white hover:decoration-2", - title="A distributed, RESTful search and analytics engine", - aria-label="A distributed, RESTful search and analytics engine" - data-umami-event="academia clicked" - data-umami-event-category="databases" - data-umami-event-label="Elasticsearch" - ) Elasticsearch - li Data Analysis & Visualization - // endregion - // region Cross-Platform - div - details.mb-4 - summary.rounded-sm.transition.underline-offset-2.mb-2.cursor-pointer.text-md.font-semibold.mb-2.cursor-pointer.text-nls-pink( - class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-pink focus:bg-nls-pink focus:text-black focus:no-underline" - data-umami-event="academia collapsed" - data-umami-event-category="cross-platform" - ) Cross-Platform Development - ul.list-disc.list-inside.text-gray-400 - li - | Desktop Apps: - a.text-nls-pink.transition.underline-offset-2.underline( - href="https://www.electronjs.org/", - 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" - data-umami-event="academia clicked" - data-umami-event-category="cross-platform" - data-umami-event-label="Electron" - ) Electron - | , - a.text-nls-pink.transition.underline-offset-2.underline( - href="https://tauri.app/", - class="hover:text-white hover:decoration-2", - title="Build smaller, faster, and more secure desktop applications with a web frontend", - aria-label="Build smaller, faster, and more secure desktop applications with a web frontend" - data-umami-event="academia clicked" - data-umami-event-category="cross-platform" - data-umami-event-label="Tauri" - ) Tauri - li - | Mobile Apps: - a.text-nls-pink.transition.underline-offset-2.underline( - href="https://reactnative.dev/", - 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" - data-umami-event="academia clicked" - data-umami-event-category="cross-platform" - data-umami-event-label="React" - ) 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" - data-umami-event="academia clicked" - data-umami-event-category="cross-platform" - data-umami-event-label="Flutter" - ) Flutter - | , - a.text-nls-pink.transition.underline-offset-2.underline( - href="https://cordova.apache.org/", - class="hover:text-white hover:decoration-2", - title="Mobile apps with HTML, CSS & JS", - aria-label="Mobile apps with HTML, CSS & JS" - data-umami-event="academia clicked" - data-umami-event-category="cross-platform" - data-umami-event-label="Cordova" - ) Cordova - li - a.text-nls-pink.transition.underline-offset-2.underline( - href="https://web.dev/progressive-web-apps/", - class="hover:text-white hover:decoration-2", - title="Websites that took all the right vitamins", - aria-label="Websites that took all the right vitamins" - data-umami-event="academia clicked" - data-umami-event-category="cross-platform" - data-umami-event-label="Progressive" - ) Progressive Web Apps (PWAs) - // endregion - // region Best Practices - div - details.mb-4 - summary.rounded-sm.transition.underline-offset-2.mb-2.cursor-pointer.text-md.font-semibold.mb-2.cursor-pointer.text-nls-red( - class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-red focus:bg-nls-red focus:text-black focus:no-underline" - data-umami-event="academia collapsed" - data-umami-event-category="best practices" - ) Development Best Practices - ul.list-disc.list-inside.text-gray-400 - li - a.text-nls-red.transition.underline-offset-2.underline( - href="https://www.w3.org/WAI/standards-guidelines/wcag/", - class="hover:text-white hover:decoration-2", - title="Web Content Accessibility Guidelines", - aria-label="Web Content Accessibility Guidelines" - data-umami-event="academia clicked" - data-umami-event-category="best practices" - data-umami-event-label="Accessibility" - ) 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", - title="Accessible Rich Internet Applications", - aria-label="Accessible Rich Internet Applications" - data-umami-event="academia clicked" - data-umami-event-category="best practices" - data-umami-event-label="ARIA" - ) ARIA - li - | Internationalization (i18n): - a.text-nls-red.transition.underline-offset-2.underline( - href="https://www.i18next.com/", - class="hover:text-white hover:decoration-2", - title="Internationalization framework", - aria-label="Internationalization framework" - data-umami-event="academia clicked" - data-umami-event-category="best practices" - data-umami-event-label="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" - data-umami-event="academia clicked" - data-umami-event-category="best practices" - data-umami-event-label="Weblate" - ) Weblate - | , - a.text-nls-red.transition.underline-offset-2.underline( - href="https://localize.co/", - class="hover:text-white hover:decoration-2", - title="Translation management platform", - aria-label="Translation management platform" - data-umami-event="academia clicked" - data-umami-event-category="best practices" - data-umami-event-label="Localize" - ) Localize - li Performance Optimization - li SEO Best Practices - li - a.text-nls-red.transition.underline-offset-2.underline( - href="https://owasp.org/", - class="hover:text-white hover:decoration-2", - title="Open Web Application Security Project", - aria-label="Open Web Application Security Project" - data-umami-event="academia clicked" - data-umami-event-category="best practices" - data-umami-event-label="Web" - ) Web Security (OWASP) - // endregion - // region Tracking - div - details.mb-4 - summary.rounded-sm.transition.underline-offset-2.mb-2.cursor-pointer.text-md.font-semibold.mb-2.cursor-pointer.text-nls-orange( - class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-orange focus:bg-nls-orange focus:text-black focus:no-underline" - data-umami-event="academia collapsed" - data-umami-event-category="tracking" - ) Analytics & Tracking - ul.list-disc.list-inside.text-gray-400 - li - a.text-nls-orange.transition.underline-offset-2.underline( - href="https://umami.is/", - class="hover:text-white hover:decoration-2", - title="Simple, fast, privacy-focused alternative to Google Analytics", - aria-label="Simple, fast, privacy-focused alternative to Google Analytics" - data-umami-event="academia clicked" - data-umami-event-category="tracking" - data-umami-event-label="Umami" - ) Umami - li - a.text-nls-orange.transition.underline-offset-2.underline( - href="https://analytics.google.com/", - class="hover:text-white hover:decoration-2", - title="Web analytics service offered by Google", - aria-label="Web analytics service offered by Google" - data-umami-event="academia clicked" - data-umami-event-category="tracking" - data-umami-event-label="Google" - ) Google Analytics - li - a.text-nls-orange.transition.underline-offset-2.underline( - href="https://amplitude.com/", - class="hover:text-white hover:decoration-2", - title="Product analytics platform", - aria-label="Product analytics platform" - data-umami-event="academia clicked" - data-umami-event-category="tracking" - data-umami-event-label="Amplitude" - ) Amplitude - li - a.text-nls-orange.transition.underline-offset-2.underline( - href="https://www.hotjar.com/", - class="hover:text-white hover:decoration-2", - title="Behavior analytics and user feedback platform", - aria-label="Behavior analytics and user feedback platform" - data-umami-event="academia clicked" - data-umami-event-category="tracking" - data-umami-event-label="Hotjar" - ) Hotjar - // endregion + +Collapsable(academia.expertise.frontendTechnologies, true) + +Collapsable(academia.expertise.devopsAndCloud) + +Collapsable(academia.expertise.backendTechnologies) + +Collapsable(academia.expertise.databaseAndData) + +Collapsable(academia.expertise.crossPlatform) + +Collapsable(academia.expertise.bestPractices) + +Collapsable(academia.expertise.tracking) // endregion diff --git a/src/components/Collapsable.pug b/src/components/Collapsable.pug new file mode 100644 index 0000000..004ab53 --- /dev/null +++ b/src/components/Collapsable.pug @@ -0,0 +1,40 @@ +//- + Collapsable Component + @param {Object} data - The data object containing the collapsable content + @param {Boolean} isOpen - The initial state of the collapsable content + @param {String} data.color - The color of the collapsable content + @param {String} data.category - The category of the collapsable content + @param {String} data.summary - The summary of the collapsable content + @param {Array} data.items - The items of the collapsable content +mixin Collapsable(data, open) + - const isExpanded = open || false; + - const color = data.color || "orange"; + - const category = data.category || "default"; + - const linkEventName = "external link clicked"; + + div + details.mb-4(open=isExpanded) + summary.rounded-sm.transition.underline-offset-2.mb-2.cursor-pointer.text-md.font-semibold.mb-2.cursor-pointer( + class=`text-nls-${color} focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-${color} focus:bg-nls-${color} focus:text-black focus:no-underline`, + onclick=`umami.track('collapsable clicked', { category: '${category}' })` + )= data.summary + ul.list-disc.list-inside.text-gray-400 + each item in data.items + li + if item.text + = item.text + if item.links + each link, index in item.links + a.transition.underline-offset-2.underline( + class=`text-nls-${color} hover:text-white hover:decoration-2`, + href=link.url, + title=link.description, + target="_blank", + aria-label=link.description, + rel="noopener noreferrer", + onclick=`umami.track('${linkEventName}', { category: '${category}', position: 'collapsable', label: '${link.label}' })` + )= link.text + if index < item.links.length - 1 + | , + if item.suffix + = item.suffix diff --git a/src/components/Footer.pug b/src/components/Footer.pug index cd18f9b..0e685e5 100644 --- a/src/components/Footer.pug +++ b/src/components/Footer.pug @@ -1,13 +1,9 @@ -mixin Link(href, label, target, rel, additionalClasses) - a.transition-colors.text-white( - data-umami-event="footer link clicked", - data-umami-event-label=label, - href=href, - class=`hover:text-amber-300 ${additionalClasses || ''}`, - target=target, - rel=rel, - onclick="umami.track('signup-button', { name: 'newsletter', id: 123 })" - ) +mixin Link(href, label, target, rel) + - const eventName = "external link clicked"; + - const eventCategory = "footer"; + - const onclick = `umami.track('${eventName}', { category: 'icons', position: 'footer', label: '${label}' })`; + + a.transition-colors.text-white(href=href, class="hover:text-amber-300", target=target, rel=rel, onclick=onclick) block mixin Svg @@ -22,7 +18,7 @@ footer.bg-nls-black.text-white p.mb-4.max-w-prose #{footer.content} .max-w-prose .flex.items-center.space-x-6.mb-8 - +Link(footer.githubUrl, 'github', 'noopener noreferrer', '_blank') + +Link(footer.githubUrl, 'github', '_blank', 'noopener noreferrer') +Svg path( clip-rule="evenodd", @@ -30,7 +26,7 @@ footer.bg-nls-black.text-white fill-rule="evenodd", style="fill: currentColor" ) - +Link(footer.linkedinUrl, 'linkedin', 'noopener noreferrer', '_blank') + +Link(footer.linkedinUrl, 'linkedin', '_blank', 'noopener noreferrer') +Svg path( clip-rule="evenodd", @@ -38,14 +34,18 @@ footer.bg-nls-black.text-white fill-rule="evenodd", style="fill: currentColor" ) - +Link(footer.xingUrl, 'xing', 'noopener noreferrer', '_blank') + +Link(footer.xingUrl, 'xing', '_blank', 'noopener noreferrer') +Svg path( d="M18.188 0c-.517 0-.741.325-.927.66 0 0-7.455 13.224-7.702 13.657.015.024 4.919 9.023 4.919 9.023.17.308.436.66.967.66h3.454c.211 0 .375-.078.463-.22.089-.151.089-.346-.009-.536l-4.879-8.916c-.004-.006-.004-.016 0-.022L22.139.756c.095-.191.097-.387.006-.535C22.056.078 21.894 0 21.686 0h-3.498zM3.648 4.74c-.211 0-.385.074-.473.216-.09.149-.078.339.02.531l2.34 4.05c.004.01.004.016 0 .021L1.86 16.051c-.099.188-.093.381 0 .529.085.142.239.234.45.234h3.461c.518 0 .766-.348.945-.667l3.734-6.609-2.378-4.155c-.172-.315-.434-.659-.962-.659H3.648v.016z", style="fill: currentColor" ) - +Link(footer.emailLink, 'email', '', '', 'uppercase font-semibold') - | #{footer.emailText} + a.transition-colors.text-white( + href=footer.emailLink, + class="hover:text-amber-300 uppercase font-semibold", + rel="noopener noreferrer", + onclick="umami.track('email clicked', { position: 'footer' })" + ) #{footer.emailText} // endregion a(href=footer.riskUrl, aria-label=footer.riskAriaLabel, title=footer.riskTitle) img.w-12.ml-auto(src=footer.riskImgSrc, alt=footer.riskImgAlt, class="mt-[1000vh]") diff --git a/src/components/Professional.pug b/src/components/Professional.pug index 9717e0b..54b4089 100644 --- a/src/components/Professional.pug +++ b/src/components/Professional.pug @@ -12,6 +12,9 @@ section.bg-nls-black.text-white href=item.link.href, class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline", title=item.link.title, + target="_blank", + rel="noopener noreferrer", + onclick=`umami.track('external link clicked', { position: 'professional', label: '${item.link.label}' })`, aria-label=item.link.ariaLabel ) #{item.link.text} | #{item.text} diff --git a/src/components/TechnologySection.pug b/src/components/TechnologySection.pug deleted file mode 100644 index a7749fe..0000000 --- a/src/components/TechnologySection.pug +++ /dev/null @@ -1,20 +0,0 @@ -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 - | , diff --git a/src/components/Title.pug b/src/components/Title.pug index a1ef827..5288e8a 100644 --- a/src/components/Title.pug +++ b/src/components/Title.pug @@ -4,7 +4,7 @@ header.bg-nls-black.text-white object.w-full(data=title.logoSvg, type="image/svg+xml") .text-center.max-w-3xl.center.py-8 h1.text-xl.mb-4.opacity-90(class="sm:text-5xl", itemprop="email") - a(data-umami-event="email clicked", data-umami-event-label="email", href=footer.emailLink, itemprop="email") + a(onclick="umami.track('email clicked', { position: 'title' })", href=footer.emailLink, rel="noopener noreferrer", itemprop="email") | #{title.email[0]} span.opacity-20 – | #{title.email[1]}