diff --git a/.pugrc b/.pugrc new file mode 100644 index 0000000..a91024d --- /dev/null +++ b/.pugrc @@ -0,0 +1,157 @@ +{ + "locals": { + "head": { + "lang": "en", + "charset": "UTF-8", + "viewport": "width=device-width, initial-scale=1.0", + "title": "NEXT LEVEL SHIT · Michael W. Czechowski - Digital Transformation & Computer Science in Stuttgart", + "description": "Michael W. Czechowski: Digital Transformation & Computer Science with 20+ years of experience. University lecturer in web development, expert in software solutions and open source.", + "author": "Michael W. Czechowski", + "keywords": "software architect, academic, web development, university lecturer, Stuttgart, open source, software solutions, 20 years experience, Michael Czechowski", + "robots": "index, follow", + "revisitAfter": "7 days", + "language": "English", + "distribution": "global", + "rating": "general", + "ogType": "website", + "ogUrl": "https://dailysh.it/", + "ogTitle": "Michael W. Czechowski - Digital Transformation & Computer Science", + "ogDescription": "Digital Transformation & Computer Science with 20+ years of experience. University lecturer in web development, expert in software solutions and open source.", + "ogImage": "./src/assets/og-image.png", + "twitterCard": "summary_large_image", + "twitterUrl": "https://dailysh.it/", + "twitterTitle": "Michael W. Czechowski - Digital Transformation & Computer Science", + "twitterDescription": "Digital Transformation & Computer Science with 20+ years of experience. University lecturer in web development, expert in software solutions and open source.", + "twitterImage": "./src/assets/twitter-image.png", + "umamiSrc": "https://umami.dailysh.it/umami.js", + "umamiId": "f91846ac-70d3-48d4-8639-c2be8a5e5f8b" + }, + "footer": { + "title": "Let's Connect", + "content": "I'm always eager to take on new challenges and collaborate on innovative projects. Whether you're looking to modernize your tech stack, scale your infrastructure, or develop cutting-edge applications, I bring the expertise and passion to drive your project to success. Let's discuss how we can work together to achieve your technology goals.", + "githubUrl": "https://github.com/nextlevelshit", + "linkedinUrl": "https://www.linkedin.com/in/michael-werner-czechowski/", + "xingUrl": "https://www.xing.com/profile/Michael_Czechowski", + "emailLink": "mailto:hello@dailysh.it?subject=Hi", + "emailText": "Electronic Mail", + "riskUrl": "https://nextlevelshit.github.io/xstate-vue/", + "riskImgSrc": "./src/assets/nxlsht.png", + "riskImgAlt": "", + "riskAriaLabel": "Risk", + "riskTitle": "At your own risk" + }, + "title": { + "email": [ + "hello", + "at", + "dailysh.it" + ], + "name": "Michael W. Czechowski", + "logoSvg": "./src/assets/nls.svg", + "jobTitle": [ + "Digital Transformation", + "Computer Science" + ] + }, + "professional": { + "title": "Professional Approach", + "description": "Good software stands on strong pillars and needs a solid foundation. I have a deep understanding of the principles and practices that make software reliable, scalable, and maintainable. My approach is based on the following key concepts:", + "keyConcepts": [ + { + "link": { + "href": "https://12factor.net/", + "title": "The twelve-factor methodology can be applied to apps written in any programming language, and which use any combination of backing services (database, queue, memory cache, etc).", + "ariaLabel": "The twelve-factor methodology can be applied to apps written in any programming language, and which use any combination of backing services (database, queue, memory cache, etc).", + "text": "The 12-Factor App" + }, + "text": " Microservices and Software-as-a-Service Methodology" + }, + { + "text": "Testing Pyramid" + }, + { + "text": "Accessibility (a11y)" + }, + { + "text": "Rapid Prototyping and Design Thinking" + }, + { + "text": "Scalability and Reliability" + }, + { + "text": "Continuous Integration and Continuous Deployment (CI/CD)" + }, + { + "text": "DevOps and Site Reliability Engineering (SRE)" + }, + { + "text": "Agile and Lean Development" + } + ], + "principlesIntro": "In my work I follow different principles and people and ideas:", + "principlesPeople": [ + { + "name": "Robert C. Martin", + "concept": "Clean Code" + }, + { + "name": "Eric Evans", + "concept": "Domain-Driven Design" + }, + { + "name": "Uncle Bob", + "concept": "SOLID Principles" + }, + { + "name": "Linus Torvalds", + "concept": "Open Source" + }, + { + "name": "Aaron Swartz", + "concept": "Open Access" + }, + { + "name": "Ilya Zhitomirskiy", + "concept": "Decentralization" + }, + { + "name": "Aral Balkan", + "concept": "Ethical Design" + }, + { + "name": "and many more", + "concept": "..." + } + ] + }, + "academia": { + "intro": [ + "Since 2021 at Leibniz Fachhochschule (LFH) in Hannover, Germany. I am a passionate advocate for open source software and have", + "been a university lecturer for over a decade, teaching web development, software engineering, and computer science. Also at DHBW Stuttgart, I am a lecturer for the course \"Web Development\" in the field of computer science." + ], + "sectionTitles": { + "computerScience": "Computer Science", + "expertise": "Expertise" + }, + "courseInstitutions": { + "dhbw": "Duale Hochschule Baden-Württemberg (DHBW)", + "lfh": "Leibniz Fachhochschule (LFH)" + }, + "courses": { + "dhbw": [ + "2024 „Einführung in die Webentwicklung“ (Introduction to Web Development)" + ], + "lfh": [ + "2023 „Social Engineering“", + "2023 „Mobile Medien (Mobile Media)“", + "2022 „Social Engineering“", + "2022 „Mobile Medien (Mobile Media)“", + "2021 „Social Engineering“" + ] + }, + "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." + } + } + } +} \ No newline at end of file diff --git a/index.html b/index.html index 66c6bf5..b3f6174 100644 --- a/index.html +++ b/index.html @@ -172,10 +172,7 @@ - - - - +
diff --git a/index.pug b/index.pug new file mode 100644 index 0000000..572fae1 --- /dev/null +++ b/index.pug @@ -0,0 +1,12 @@ +doctype html +html.scroll-smooth(lang=lang) + include src/components/Head + + body.font-mono.m-0.p-0 + main.flex.flex-col + article(itemscope, itemtype="http://schema.org/Person") + include src/components/Title + include src/components/Professional + include src/components/Academia + + include src/components/Footer diff --git a/package-lock.json b/package-lock.json index d499fb8..ef7c7a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,10 @@ "version": "1.0.0-0", "license": "Apache-2.0", "devDependencies": { + "@prettier/plugin-pug": "^3.1.0", "parcel-bundler": "^1.10.3", + "prettier": "^3.3.3", + "pug": "^3.0.3", "sass": "^1.16.0", "typescript": "^3.2.1" } @@ -232,19 +235,6 @@ "lodash": "^4.17.10" } }, - "node_modules/@babel/helper-module-transforms/node_modules/@babel/parser": { - "version": "7.2.3", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.2.3.tgz", - "integrity": "sha512-0LyEcVlfCoFmci8mXx8A5oIkpkOgyo8dRHtxBnK9RRBwxO2+JZPNsqtVEZQ7mJFPxnXF9lfmU24mHOPI0qnlkA==", - "dev": true, - "license": "MIT", - "bin": { - "parser": "bin/babel-parser.js" - }, - "engines": { - "node": ">=6.0.0" - } - }, "node_modules/@babel/helper-module-transforms/node_modules/@babel/template": { "version": "7.2.2", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.2.2.tgz", @@ -257,18 +247,6 @@ "@babel/types": "^7.2.2" } }, - "node_modules/@babel/helper-module-transforms/node_modules/@babel/types": { - "version": "7.2.2", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.2.2.tgz", - "integrity": "sha512-fKCuD6UFUMkR541eDWL+2ih/xFZBXPOg/7EQFeTluMDebfqR4jrpaCjLhkWlQS4hT6nRa2PMEgXKbRB5/H2fpg==", - "dev": true, - "license": "MIT", - "dependencies": { - "esutils": "^2.0.2", - "lodash": "^4.17.10", - "to-fast-properties": "^2.0.0" - } - }, "node_modules/@babel/helper-optimise-call-expression": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0.tgz", @@ -344,6 +322,24 @@ "@babel/types": "^7.0.0" } }, + "node_modules/@babel/helper-string-parser": { + "version": "7.24.8", + "resolved": "https://nexus.devpons.io/repository/node-public/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz", + "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.24.7", + "resolved": "https://nexus.devpons.io/repository/node-public/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz", + "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==", + "dev": true, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/helper-wrap-function": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz", @@ -357,18 +353,6 @@ "@babel/types": "^7.2.0" } }, - "node_modules/@babel/helper-wrap-function/node_modules/@babel/types": { - "version": "7.2.2", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.2.2.tgz", - "integrity": "sha512-fKCuD6UFUMkR541eDWL+2ih/xFZBXPOg/7EQFeTluMDebfqR4jrpaCjLhkWlQS4hT6nRa2PMEgXKbRB5/H2fpg==", - "dev": true, - "license": "MIT", - "dependencies": { - "esutils": "^2.0.2", - "lodash": "^4.17.10", - "to-fast-properties": "^2.0.0" - } - }, "node_modules/@babel/helpers": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.2.0.tgz", @@ -381,18 +365,6 @@ "@babel/types": "^7.2.0" } }, - "node_modules/@babel/helpers/node_modules/@babel/types": { - "version": "7.2.2", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.2.2.tgz", - "integrity": "sha512-fKCuD6UFUMkR541eDWL+2ih/xFZBXPOg/7EQFeTluMDebfqR4jrpaCjLhkWlQS4hT6nRa2PMEgXKbRB5/H2fpg==", - "dev": true, - "license": "MIT", - "dependencies": { - "esutils": "^2.0.2", - "lodash": "^4.17.10", - "to-fast-properties": "^2.0.0" - } - }, "node_modules/@babel/highlight": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.0.0.tgz", @@ -406,11 +378,13 @@ } }, "node_modules/@babel/parser": { - "version": "7.1.6", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.1.6.tgz", - "integrity": "sha512-dWP6LJm9nKT6ALaa+bnL247GHHMWir3vSlZ2+IHgHgktZQx0L3Uvq2uAWcuzIe+fujRsYWBW2q622C5UvGK9iQ==", + "version": "7.25.6", + "resolved": "https://nexus.devpons.io/repository/node-public/@babel/parser/-/parser-7.25.6.tgz", + "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==", "dev": true, - "license": "MIT", + "dependencies": { + "@babel/types": "^7.25.6" + }, "bin": { "parser": "bin/babel-parser.js" }, @@ -1092,31 +1066,6 @@ "trim-right": "^1.0.1" } }, - "node_modules/@babel/traverse/node_modules/@babel/parser": { - "version": "7.2.3", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.2.3.tgz", - "integrity": "sha512-0LyEcVlfCoFmci8mXx8A5oIkpkOgyo8dRHtxBnK9RRBwxO2+JZPNsqtVEZQ7mJFPxnXF9lfmU24mHOPI0qnlkA==", - "dev": true, - "license": "MIT", - "bin": { - "parser": "bin/babel-parser.js" - }, - "engines": { - "node": ">=6.0.0" - } - }, - "node_modules/@babel/traverse/node_modules/@babel/types": { - "version": "7.2.2", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.2.2.tgz", - "integrity": "sha512-fKCuD6UFUMkR541eDWL+2ih/xFZBXPOg/7EQFeTluMDebfqR4jrpaCjLhkWlQS4hT6nRa2PMEgXKbRB5/H2fpg==", - "dev": true, - "license": "MIT", - "dependencies": { - "esutils": "^2.0.2", - "lodash": "^4.17.10", - "to-fast-properties": "^2.0.0" - } - }, "node_modules/@babel/traverse/node_modules/debug": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", @@ -1136,15 +1085,17 @@ "license": "MIT" }, "node_modules/@babel/types": { - "version": "7.1.6", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.1.6.tgz", - "integrity": "sha512-DMiUzlY9DSjVsOylJssxLHSgj6tWM9PRFJOGW/RaOglVOK9nzTxoOMfTfRQXGUCUQ/HmlG2efwC+XqUEJ5ay4w==", + "version": "7.25.6", + "resolved": "https://nexus.devpons.io/repository/node-public/@babel/types/-/types-7.25.6.tgz", + "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==", "dev": true, - "license": "MIT", "dependencies": { - "esutils": "^2.0.2", - "lodash": "^4.17.10", + "@babel/helper-string-parser": "^7.24.8", + "@babel/helper-validator-identifier": "^7.24.7", "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" } }, "node_modules/@mrmlnc/readdir-enhanced": { @@ -1171,6 +1122,32 @@ "node": ">= 6" } }, + "node_modules/@prettier/plugin-pug": { + "version": "3.1.0", + "resolved": "https://nexus.devpons.io/repository/node-public/@prettier/plugin-pug/-/plugin-pug-3.1.0.tgz", + "integrity": "sha512-Zwm1JnMRMejF5aOGTNux8ZmBvdYeouyyq2tgEw+18hkWZzUjXMv9OLT/bEKS2LEj98Pr1uWtN04sIJKzF8J1tQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/Shinigami92" + }, + { + "type": "paypal", + "url": "https://www.paypal.com/donate/?hosted_button_id=L7GY729FBKTZY" + } + ], + "dependencies": { + "pug-lexer": "^5.0.1" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=9.0.0" + }, + "peerDependencies": { + "prettier": "^3.0.0" + } + }, "node_modules/@types/node": { "version": "10.12.18", "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.18.tgz", @@ -1319,6 +1296,12 @@ "node": ">=0.10.0" } }, + "node_modules/asap": { + "version": "2.0.6", + "resolved": "https://nexus.devpons.io/repository/node-public/asap/-/asap-2.0.6.tgz", + "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==", + "dev": true + }, "node_modules/asn1.js": { "version": "4.10.1", "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz", @@ -1341,6 +1324,12 @@ "util": "0.10.3" } }, + "node_modules/assert-never": { + "version": "1.3.0", + "resolved": "https://nexus.devpons.io/repository/node-public/assert-never/-/assert-never-1.3.0.tgz", + "integrity": "sha512-9Z3vxQ+berkL/JJo0dK+EY3Lp0s3NtSnP3VCLsh5HDcZPrh0M+KQRK5sWhUeyPPH+/RCxZqOxLMR+YC6vlviEQ==", + "dev": true + }, "node_modules/assert/node_modules/inherits": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz", @@ -1555,6 +1544,18 @@ "node": ">=0.10.0" } }, + "node_modules/babel-walk": { + "version": "3.0.0-canary-5", + "resolved": "https://nexus.devpons.io/repository/node-public/babel-walk/-/babel-walk-3.0.0-canary-5.tgz", + "integrity": "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==", + "dev": true, + "dependencies": { + "@babel/types": "^7.9.6" + }, + "engines": { + "node": ">= 10.0.0" + } + }, "node_modules/babylon-walk": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/babylon-walk/-/babylon-walk-1.0.2.tgz", @@ -2025,6 +2026,15 @@ "node": ">=4" } }, + "node_modules/character-parser": { + "version": "2.2.0", + "resolved": "https://nexus.devpons.io/repository/node-public/character-parser/-/character-parser-2.2.0.tgz", + "integrity": "sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==", + "dev": true, + "dependencies": { + "is-regex": "^1.0.3" + } + }, "node_modules/chokidar": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz", @@ -2388,6 +2398,16 @@ "date-now": "^0.1.4" } }, + "node_modules/constantinople": { + "version": "4.0.1", + "resolved": "https://nexus.devpons.io/repository/node-public/constantinople/-/constantinople-4.0.1.tgz", + "integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.6.0", + "@babel/types": "^7.6.1" + } + }, "node_modules/constants-browserify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz", @@ -3096,6 +3116,12 @@ "randombytes": "^2.0.0" } }, + "node_modules/doctypes": { + "version": "1.1.0", + "resolved": "https://nexus.devpons.io/repository/node-public/doctypes/-/doctypes-1.1.0.tgz", + "integrity": "sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==", + "dev": true + }, "node_modules/dom-serializer": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz", @@ -4574,11 +4600,13 @@ } }, "node_modules/function-bind": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==", + "version": "1.1.2", + "resolved": "https://nexus.devpons.io/repository/node-public/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", "dev": true, - "license": "MIT" + "funding": { + "url": "https://github.com/sponsors/ljharb" + } }, "node_modules/get-port": { "version": "3.2.0", @@ -4791,6 +4819,18 @@ "minimalistic-assert": "^1.0.1" } }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://nexus.devpons.io/repository/node-public/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dev": true, + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/hex-color-regex": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", @@ -5570,6 +5610,21 @@ "rgba-regex": "^1.0.0" } }, + "node_modules/is-core-module": { + "version": "2.15.1", + "resolved": "https://nexus.devpons.io/repository/node-public/is-core-module/-/is-core-module-2.15.1.tgz", + "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==", + "dev": true, + "dependencies": { + "hasown": "^2.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/is-data-descriptor": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", @@ -5642,6 +5697,28 @@ "node": ">=0.10.0" } }, + "node_modules/is-expression": { + "version": "4.0.0", + "resolved": "https://nexus.devpons.io/repository/node-public/is-expression/-/is-expression-4.0.0.tgz", + "integrity": "sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==", + "dev": true, + "dependencies": { + "acorn": "^7.1.1", + "object-assign": "^4.1.1" + } + }, + "node_modules/is-expression/node_modules/acorn": { + "version": "7.4.1", + "resolved": "https://nexus.devpons.io/repository/node-public/acorn/-/acorn-7.4.1.tgz", + "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", + "dev": true, + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/is-extendable": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", @@ -5734,6 +5811,12 @@ "node": ">=0.10.0" } }, + "node_modules/is-promise": { + "version": "2.2.2", + "resolved": "https://nexus.devpons.io/repository/node-public/is-promise/-/is-promise-2.2.2.tgz", + "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==", + "dev": true + }, "node_modules/is-regex": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz", @@ -5867,6 +5950,12 @@ "node": ">=0.10.0" } }, + "node_modules/js-stringify": { + "version": "1.0.2", + "resolved": "https://nexus.devpons.io/repository/node-public/js-stringify/-/js-stringify-1.0.2.tgz", + "integrity": "sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==", + "dev": true + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -5921,6 +6010,16 @@ "json5": "lib/cli.js" } }, + "node_modules/jstransformer": { + "version": "1.0.0", + "resolved": "https://nexus.devpons.io/repository/node-public/jstransformer/-/jstransformer-1.0.0.tgz", + "integrity": "sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==", + "dev": true, + "dependencies": { + "is-promise": "^2.0.0", + "promise": "^7.0.1" + } + }, "node_modules/kind-of": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", @@ -6828,11 +6927,10 @@ } }, "node_modules/path-parse": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", - "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", - "dev": true, - "license": "MIT" + "version": "1.0.7", + "resolved": "https://nexus.devpons.io/repository/node-public/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true }, "node_modules/pbkdf2": { "version": "3.0.17", @@ -8963,6 +9061,21 @@ "node": ">=0.10.0" } }, + "node_modules/prettier": { + "version": "3.3.3", + "resolved": "https://nexus.devpons.io/repository/node-public/prettier/-/prettier-3.3.3.tgz", + "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/private": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz", @@ -8990,6 +9103,15 @@ "dev": true, "license": "MIT" }, + "node_modules/promise": { + "version": "7.3.1", + "resolved": "https://nexus.devpons.io/repository/node-public/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "dev": true, + "dependencies": { + "asap": "~2.0.3" + } + }, "node_modules/proto-list": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", @@ -9019,6 +9141,130 @@ "safe-buffer": "^5.1.2" } }, + "node_modules/pug": { + "version": "3.0.3", + "resolved": "https://nexus.devpons.io/repository/node-public/pug/-/pug-3.0.3.tgz", + "integrity": "sha512-uBi6kmc9f3SZ3PXxqcHiUZLmIXgfgWooKWXcwSGwQd2Zi5Rb0bT14+8CJjJgI8AB+nndLaNgHGrcc6bPIB665g==", + "dev": true, + "dependencies": { + "pug-code-gen": "^3.0.3", + "pug-filters": "^4.0.0", + "pug-lexer": "^5.0.1", + "pug-linker": "^4.0.0", + "pug-load": "^3.0.0", + "pug-parser": "^6.0.0", + "pug-runtime": "^3.0.1", + "pug-strip-comments": "^2.0.0" + } + }, + "node_modules/pug-attrs": { + "version": "3.0.0", + "resolved": "https://nexus.devpons.io/repository/node-public/pug-attrs/-/pug-attrs-3.0.0.tgz", + "integrity": "sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==", + "dev": true, + "dependencies": { + "constantinople": "^4.0.1", + "js-stringify": "^1.0.2", + "pug-runtime": "^3.0.0" + } + }, + "node_modules/pug-code-gen": { + "version": "3.0.3", + "resolved": "https://nexus.devpons.io/repository/node-public/pug-code-gen/-/pug-code-gen-3.0.3.tgz", + "integrity": "sha512-cYQg0JW0w32Ux+XTeZnBEeuWrAY7/HNE6TWnhiHGnnRYlCgyAUPoyh9KzCMa9WhcJlJ1AtQqpEYHc+vbCzA+Aw==", + "dev": true, + "dependencies": { + "constantinople": "^4.0.1", + "doctypes": "^1.1.0", + "js-stringify": "^1.0.2", + "pug-attrs": "^3.0.0", + "pug-error": "^2.1.0", + "pug-runtime": "^3.0.1", + "void-elements": "^3.1.0", + "with": "^7.0.0" + } + }, + "node_modules/pug-error": { + "version": "2.1.0", + "resolved": "https://nexus.devpons.io/repository/node-public/pug-error/-/pug-error-2.1.0.tgz", + "integrity": "sha512-lv7sU9e5Jk8IeUheHata6/UThZ7RK2jnaaNztxfPYUY+VxZyk/ePVaNZ/vwmH8WqGvDz3LrNYt/+gA55NDg6Pg==", + "dev": true + }, + "node_modules/pug-filters": { + "version": "4.0.0", + "resolved": "https://nexus.devpons.io/repository/node-public/pug-filters/-/pug-filters-4.0.0.tgz", + "integrity": "sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==", + "dev": true, + "dependencies": { + "constantinople": "^4.0.1", + "jstransformer": "1.0.0", + "pug-error": "^2.0.0", + "pug-walk": "^2.0.0", + "resolve": "^1.15.1" + } + }, + "node_modules/pug-lexer": { + "version": "5.0.1", + "resolved": "https://nexus.devpons.io/repository/node-public/pug-lexer/-/pug-lexer-5.0.1.tgz", + "integrity": "sha512-0I6C62+keXlZPZkOJeVam9aBLVP2EnbeDw3An+k0/QlqdwH6rv8284nko14Na7c0TtqtogfWXcRoFE4O4Ff20w==", + "dev": true, + "dependencies": { + "character-parser": "^2.2.0", + "is-expression": "^4.0.0", + "pug-error": "^2.0.0" + } + }, + "node_modules/pug-linker": { + "version": "4.0.0", + "resolved": "https://nexus.devpons.io/repository/node-public/pug-linker/-/pug-linker-4.0.0.tgz", + "integrity": "sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==", + "dev": true, + "dependencies": { + "pug-error": "^2.0.0", + "pug-walk": "^2.0.0" + } + }, + "node_modules/pug-load": { + "version": "3.0.0", + "resolved": "https://nexus.devpons.io/repository/node-public/pug-load/-/pug-load-3.0.0.tgz", + "integrity": "sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==", + "dev": true, + "dependencies": { + "object-assign": "^4.1.1", + "pug-walk": "^2.0.0" + } + }, + "node_modules/pug-parser": { + "version": "6.0.0", + "resolved": "https://nexus.devpons.io/repository/node-public/pug-parser/-/pug-parser-6.0.0.tgz", + "integrity": "sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==", + "dev": true, + "dependencies": { + "pug-error": "^2.0.0", + "token-stream": "1.0.0" + } + }, + "node_modules/pug-runtime": { + "version": "3.0.1", + "resolved": "https://nexus.devpons.io/repository/node-public/pug-runtime/-/pug-runtime-3.0.1.tgz", + "integrity": "sha512-L50zbvrQ35TkpHwv0G6aLSuueDRwc/97XdY8kL3tOT0FmhgG7UypU3VztfV/LATAvmUfYi4wNxSajhSAeNN+Kg==", + "dev": true + }, + "node_modules/pug-strip-comments": { + "version": "2.0.0", + "resolved": "https://nexus.devpons.io/repository/node-public/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz", + "integrity": "sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==", + "dev": true, + "dependencies": { + "pug-error": "^2.0.0" + } + }, + "node_modules/pug-walk": { + "version": "2.0.0", + "resolved": "https://nexus.devpons.io/repository/node-public/pug-walk/-/pug-walk-2.0.0.tgz", + "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ==", + "dev": true + }, "node_modules/punycode": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", @@ -9306,13 +9552,20 @@ } }, "node_modules/resolve": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.9.0.tgz", - "integrity": "sha512-TZNye00tI67lwYvzxCxHGjwTNlUV70io54/Ed4j6PscB8xVfuBJpRenI/o6dVk0cY0PYTY27AgCoGGxRnYuItQ==", + "version": "1.22.8", + "resolved": "https://nexus.devpons.io/repository/node-public/resolve/-/resolve-1.22.8.tgz", + "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", "dev": true, - "license": "MIT", "dependencies": { - "path-parse": "^1.0.6" + "is-core-module": "^2.13.0", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" } }, "node_modules/resolve-from": { @@ -10076,6 +10329,18 @@ "node": ">=4" } }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://nexus.devpons.io/repository/node-public/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/svgo": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.1.1.tgz", @@ -10251,6 +10516,12 @@ "node": ">=0.10.0" } }, + "node_modules/token-stream": { + "version": "1.0.0", + "resolved": "https://nexus.devpons.io/repository/node-public/token-stream/-/token-stream-1.0.0.tgz", + "integrity": "sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==", + "dev": true + }, "node_modules/toml": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/toml/-/toml-2.3.3.tgz", @@ -10595,6 +10866,15 @@ "indexof": "0.0.1" } }, + "node_modules/void-elements": { + "version": "3.1.0", + "resolved": "https://nexus.devpons.io/repository/node-public/void-elements/-/void-elements-3.1.0.tgz", + "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", @@ -10628,6 +10908,21 @@ "which": "bin/which" } }, + "node_modules/with": { + "version": "7.0.2", + "resolved": "https://nexus.devpons.io/repository/node-public/with/-/with-7.0.2.tgz", + "integrity": "sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.9.6", + "@babel/types": "^7.9.6", + "assert-never": "^1.2.1", + "babel-walk": "3.0.0-canary-5" + }, + "engines": { + "node": ">= 10.0.0" + } + }, "node_modules/wordwrap": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", diff --git a/package.json b/package.json index 4a1458a..754f7d9 100644 --- a/package.json +++ b/package.json @@ -2,19 +2,22 @@ "name": "nls-parcel-dailyshit", "version": "1.0.0-0", "description": "", - "main": "index.html", + "main": "index.pug", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "start": "parcel --public-url=/public index.html --open", - "build": "parcel build index.html", - "format": "npx prettier --write src/**/*.ts index.html package.json", + "start": "parcel --public-url / index.pug --open", + "build": "parcel build index.pug", + "format": "npx prettier --write src/**/*.{ts,pug} index.pug package.json", "scp": "scp -r ./dist/* tengo@tuttle.uberspace.de:/home/tengo/html", "deploy": "rm -rf ./dist && npm run build && npm run scp" }, "author": "Michael Werner Czechowski ", "license": "Apache-2.0", "devDependencies": { + "@prettier/plugin-pug": "^3.1.0", "parcel-bundler": "^1.10.3", + "prettier": "^3.3.3", + "pug": "^3.0.3", "sass": "^1.16.0", "typescript": "^3.2.1" }, @@ -32,6 +35,8 @@ "htmlWhitespaceSensitivity": "strict", "proseWrap": "never", "singleAttributePerLine": false, - "editorconfig": true + "plugins": [ + "@prettier/plugin-pug" + ] } } diff --git a/src/components/Academia.pug b/src/components/Academia.pug new file mode 100644 index 0000000..ac432bd --- /dev/null +++ b/src/components/Academia.pug @@ -0,0 +1,834 @@ +section.bg-nls-black.text-white + .p-8(class="sm:p-20 min-h-[120vh]") + .max-w-screen-md.mx-auto + // region Computer Science + h2.text-2xl.mb-4= academia.sectionTitles.computerScience + p.mb-8.max-w-prose + | #{academia.intro[0]} + | #{academia.intro[1]} + // endregion + + // region Courses + .grid.grid-cols-1.gap-6.mb-8(class="md:grid-cols-1") + 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" + )= 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" + )= academia.courseInstitutions.lfh + ul.list-disc.list-inside + each course in academia.courses.lfh + li= course + // endregion + + // region Skills and Expertise + h2.text-2xl.mb-4= academia.sectionTitles.expertise + p.mb-8.max-w-prose + | #{academia.expertise.intro} + // endregion + + .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" + ) 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" + ) 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" + ) 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" + ) 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, + 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" + ) 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" + ) 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" + ) 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" + ) jQuery, 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, + 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, + 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, + 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" + ) 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" + ) 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, + 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, + 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" + ) 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" + ) 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, + 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" + ) 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" + ) 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, + 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, + 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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, + 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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, + 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" + ) 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" + ) 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, + 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" + ) 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" + ) 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, + 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, + 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+" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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, + 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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, + 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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, + 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) 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" + ) Hotjar + // endregion + // endregion + +//section.bg-nls-black.text-white +// .p-8(class="sm:p-20") +// .max-w-screen-md.mx-auto +// h2.text-2xl.mb-4= computerScience.heading +// p.mb-8.max-w-prose= computerScience.description +// .grid.grid-cols-1.md\:grid-cols-1.gap-6.mb-8 +// .mb-4 +// details +// summary.focus\:outline-none.rounded-sm.focus\:z-10.focus\:ring-4.focus\:ring-white.focus\:bg-white.focus\:text-black.focus\:no-underline.text-white.transition.underline-offset-2.mb-2.cursor-pointer= courses.dhbw.name +// ul.list-disc.list-inside +// each course in courses.dhbw.courses +// li= course +// .mb-4 +// details +// summary.focus\:outline-none.rounded-sm.focus\:z-10.focus\:ring-4.focus\:ring-white.focus\:bg-white.focus\:text-black.focus\:no-underline.text-white.transition.underline-offset-2.mb-2.cursor-pointer= courses.lfh.name +// ul.list-disc.list-inside +// each course in courses.lfh.courses +// li= course +// h2.text-2xl.mb-4= technicalExpertise.heading +// p.mb-8.max-w-prose= technicalExpertise.description +// .grid.grid-cols-1.md\:grid-cols-1.gap-6.mb-8 +// each category in categories +// .mb-4 +// details +// summary(class=`focus\:outline-none rounded-sm focus\:z-10 focus\:ring-4 focus\:ring-${category.color} focus\:bg-${category.color} focus\:text-black focus\:no-underline transition underline-offset-2 mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer text-${category.color}`)= category.name +// ul.list-disc.list-inside.text-gray-400 +// // Content for each category would go here diff --git a/src/components/Footer.pug b/src/components/Footer.pug new file mode 100644 index 0000000..cd18f9b --- /dev/null +++ b/src/components/Footer.pug @@ -0,0 +1,51 @@ +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 })" + ) + block + +mixin Svg + svg.w-8.h-8(aria-hidden="true", fill="currentColor", viewbox="0 0 24 24") + block + +footer.bg-nls-black.text-white + .p-8(class="sm:p-20 min-h-[120vh]") + .max-w-screen-md.mx-auto + // region Contact + h2.text-2xl.mb-4 #{footer.title} + 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') + +Svg + path( + clip-rule="evenodd", + d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z", + fill-rule="evenodd", + style="fill: currentColor" + ) + +Link(footer.linkedinUrl, 'linkedin', 'noopener noreferrer', '_blank') + +Svg + path( + clip-rule="evenodd", + d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z", + fill-rule="evenodd", + style="fill: currentColor" + ) + +Link(footer.xingUrl, 'xing', 'noopener noreferrer', '_blank') + +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} + // 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/Head.pug b/src/components/Head.pug new file mode 100644 index 0000000..e3a115b --- /dev/null +++ b/src/components/Head.pug @@ -0,0 +1,89 @@ +head + // region SEO + meta(charset=head.charset) + meta(name="viewport", content=head.viewport) + title= head.title + meta(name="description", content=head.description) + meta(name="author", content=head.author) + meta(name="keywords", content=head.keywords) + meta(name="robots", content=head.robots) + meta(name="revisit-after", content=head.revisitAfter) + meta(name="language", content=head.language) + meta(name="distribution", content=head.distribution) + meta(name="rating", content=head.rating) + // endregion + + // region Open Graph / Facebook + meta(property="og:type", content=head.ogType) + meta(property="og:url", content=head.ogUrl) + meta(property="og:title", content=head.ogTitle) + meta(property="og:description", content=head.ogDescription) + meta(property="og:image", content=head.ogImage) + // endregion + + // region Twitter + meta(property="twitter:card", content=head.twitterCard) + meta(property="twitter:url", content=head.twitterUrl) + meta(property="twitter:title", content=head.twitterTitle) + meta(property="twitter:description", content=head.twitterDescription) + meta(property="twitter:image", content=head.twitterImage) + // endregion + + // region Schema.org for Google + script(type="application/ld+json"). + { + "@context": "https://schema.org", + "@type": "Person", + "name": "Michael W. Czechowski", + "jobTitle": "Digital Transformation & Computer Science", + "url": "https://dailysh.it", + "sameAs": ["https://github.com/nextlevelshit", "https://www.linkedin.com/in/michael-werner-czechowski/", "https://www.xing.com/profile/Michael_Czechowski"] + } + // endregion + + // region tailwindcss + script(src="https://cdn.tailwindcss.com") + script. + tailwind.config = { + theme: { + extend: { + colors: { + "nls-green": "#79C28D", + "nls-blue": "#5A99C3", + "nls-violet": "#7E86CA", + "nls-purple": "#C18FBD", + "nls-pink": "#EC7A9A", + "nls-red": "#E76F51", + "nls-orange": "#F9A03F", + "nls-yellow": "#F9C74F", + "nls-black": "#0f0f11", + }, + }, + }, + }; + // endregion + + // region Custom CSS + style. + html { + background: black; + color: black; + } + section { + top: 0; + /*position: sticky;*/ + display: flex; + flex-direction: column; + justify-content: start; + } + footer { + top: 0; + position: sticky; + } + object { + max-height: 60vh; + max-width: 80vw; + } + // endregion + + script(async, defer, data-website-id=head.umamiId, src=head.umamiSrc) diff --git a/src/components/Professional.pug b/src/components/Professional.pug new file mode 100644 index 0000000..6b6385a --- /dev/null +++ b/src/components/Professional.pug @@ -0,0 +1,22 @@ +section.bg-nls-black.text-white + .p-8(class="sm:p-20 min-h-[120vh]") + .max-w-screen-md.mx-auto + h2.text-2xl.mb-4 #{professional.title} + p.mb-8.max-w-prose + | #{professional.description} + ul.list-disc.list-inside.mb-8 + each item, i in professional.keyConcepts + li + if item.link + a.rounded-sm.transition.underline-offset-2.mb-2.cursor-pointer.text-md.font-semibold.mb-2.cursor-pointer.text-white.underline( + 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, + aria-label=item.link.ariaLabel + ) #{item.link.text} + | #{item.text} + p.mb-8.max-w-prose + | #{professional.principlesIntro} + ul.list-disc.list-inside.mb-8 + each person, i in professional.principlesPeople + li #{person.name} – #{person.concept} diff --git a/src/components/Title.pug b/src/components/Title.pug new file mode 100644 index 0000000..9d4fb74 --- /dev/null +++ b/src/components/Title.pug @@ -0,0 +1,16 @@ +header.bg-nls-black.text-white + .teaser.p-8.flex.flex-col.items-center.justify-center.h-full(class="sm:p-20 min-h-[90vh]") + .max-w-3xl.mb-8(class="w-4/5") + 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") + | #{title.email[0]} + span.opacity-20 – + | #{title.email[1]} + span.opacity-20 – + | #{title.email[2]} + p.text-lg.opacity-80(class="sm:text-2xl", itemprop="name") #{title.name} + p.text-md.opacity-60(class="sm:text-xl", itemprop="jobTitle") + | #{title.jobTitle[0]} + wbr + | & #{title.jobTitle[0]}