1289 lines
64 KiB
HTML
1289 lines
64 KiB
HTML
<!doctype html>
|
||
<html class="scroll-smooth" lang="en">
|
||
<head>
|
||
<!-- region SEO -->
|
||
<meta charset="UTF-8" />
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||
<title> NEXT LEVEL SHIT · Michael W. Czechowski - Digital Transformation & Computer Science in Stuttgart </title>
|
||
<meta
|
||
content="Michael W. Czechowski: Digital Transformation & Computer Science with 20+ years of experience. University lecturer in web development, expert in software solutions and open source."
|
||
name="description"
|
||
/>
|
||
<meta content="Michael W. Czechowski" name="author" />
|
||
<meta
|
||
content="software architect, academic, web development, university lecturer, Stuttgart, open source, software solutions, 20 years experience, Michael Czechowski"
|
||
name="keywords"
|
||
/>
|
||
<meta content="index, follow" name="robots" />
|
||
<meta content="7 days" name="revisit-after" />
|
||
<meta content="English" name="language" />
|
||
<meta content="global" name="distribution" />
|
||
<meta content="general" name="rating" />
|
||
<!-- endregion -->
|
||
<!-- region Open Graph / Facebook -->
|
||
<meta content="website" property="og:type" />
|
||
<meta content="https://dailysh.it/" property="og:url" />
|
||
<meta content="Michael W. Czechowski - Digital Transformation & Computer Science" property="og:title" />
|
||
<meta
|
||
content="Digital Transformation & Computer Science with 20+ years of experience. University lecturer in web development, expert in software solutions and open source."
|
||
property="og:description"
|
||
/>
|
||
<meta content="./src/assets/og-image.png" property="og:image" />
|
||
<!-- endregion -->
|
||
<!-- region Twitter -->
|
||
<meta content="summary_large_image" property="twitter:card" />
|
||
<meta content="https://dailysh.it/" property="twitter:url" />
|
||
<meta content="Michael W. Czechowski - Digital Transformation & Computer Science" property="twitter:title" />
|
||
<meta
|
||
content="Digital Transformation & Computer Science with 20+ years of experience. University lecturer in web development, expert in software solutions and open source."
|
||
property="twitter:description"
|
||
/>
|
||
<meta content="./src/assets/twitter-image.png" property="twitter:image" />
|
||
<!-- 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"
|
||
]
|
||
}
|
||
</script>
|
||
<!-- endregion -->
|
||
<!-- region tailwindcss -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<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",
|
||
},
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<!-- endregion -->
|
||
<!-- region Custom CSS -->
|
||
<style>
|
||
html {
|
||
background: black;
|
||
color: black;
|
||
}
|
||
section {
|
||
top: 0;
|
||
position: sticky;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: start;
|
||
/*height: 90vh;*/
|
||
/*overflow: hidden;*/
|
||
}
|
||
|
||
footer {
|
||
top: 0;
|
||
position: sticky;
|
||
}
|
||
|
||
svg {
|
||
/*fill: white;*/
|
||
}
|
||
|
||
object {
|
||
max-height: 60vh;
|
||
max-width: 80vw;
|
||
}
|
||
</style>
|
||
<!-- endregion -->
|
||
<script async defer data-website-id="f91846ac-70d3-48d4-8639-c2be8a5e5f8b" src="https://umami.dailysh.it/umami.js"></script>
|
||
</head>
|
||
<body class="font-mono m-0 p-0">
|
||
<main class="flex flex-col">
|
||
<article itemscope itemtype="http://schema.org/Person">
|
||
<!-- region Header -->
|
||
<header class="bg-nls-black text-white">
|
||
<div class="teaser p-8 sm:p-20 flex flex-col items-center justify-center h-full min-h-[90vh]">
|
||
<div class="w-4/5 max-w-3xl mb-8">
|
||
<object class="w-full" data="./src/assets/nls.svg" type="image/svg+xml"></object>
|
||
</div>
|
||
<div class="text-center max-w-3xl center py-8">
|
||
<h1 class="text-xl sm:text-5xl mb-4 opacity-90" itemprop="email"> hello<span class="opacity-20">–</span>at<span class="opacity-20">–</span>dailysh.it </h1>
|
||
<p class="text-lg sm:text-2xl opacity-80" itemprop="name">Michael W. Czechowski</p>
|
||
<p class="text-md sm:text-xl opacity-60" itemprop="jobTitle">
|
||
Digital Transformation
|
||
<wbr />
|
||
& Computer Science
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- endregion -->
|
||
|
||
<!-- region Professional -->
|
||
<section class="bg-nls-black text-white">
|
||
<div class="p-8 sm:p-20 min-h-[120vh]">
|
||
<div class="max-w-screen-md mx-auto">
|
||
<h2 class="text-2xl mb-4">Professional Approach</h2>
|
||
<p class="mb-8 max-w-prose">
|
||
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:
|
||
</p>
|
||
<ul class="list-disc list-inside mb-8">
|
||
<li><a href="https://12factor.net/" class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline transition underline-offset-2 mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer text-white underline"
|
||
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)."
|
||
aria-label="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).">The 12-Factor App</a> Microservices and Software-as-a-Service Methodology</li>
|
||
<li>Testing Pyramid</li>
|
||
<li>Accessability (a11y)</li>
|
||
<li>Rapid Prototyping and Design Thinking</li>
|
||
<li>Scalability and Reliability</li>
|
||
<li>Continuous Integration and Continuous Deployment (CI/CD)</li>
|
||
<li>DevOps and Site Reliability Engineering (SRE)</li>
|
||
<li>Agile and Lean Development</li>
|
||
</ul>
|
||
<p class="mb-8 max-w-prose">
|
||
In my work I follow different principles and people and ideas:
|
||
</p>
|
||
<ul class="list-disc list-inside mb-8">
|
||
<li>Robert C. Martin – Clean Code</li>
|
||
<li>Eric Evans – Domain-Driven Design</li>
|
||
<li>Uncle Bob – SOLID Principles</li>
|
||
<li>Linus Torvalds – Open Source</li>
|
||
<li>Aaron Swartz – Open Access</li>
|
||
<li>Ilya Zhitomirskiy – Decentralization</li>
|
||
<li>Aral Balkan – Ethical Design</li>
|
||
<li>and many more…</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- endregion -->
|
||
|
||
|
||
|
||
|
||
<!-- region Sections -->
|
||
<section class="bg-nls-black text-white">
|
||
<div class="p-8 sm:p-20 min-h-[120vh]">
|
||
<div class="max-w-screen-md mx-auto">
|
||
<!-- region Computer Science -->
|
||
<h2 class="text-2xl mb-4">Computer Science Courses</h2>
|
||
<p class="mb-8 max-w-prose">
|
||
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.
|
||
</p>
|
||
<!-- endregion -->
|
||
<!-- region Courses -->
|
||
<div class="grid grid-cols-1 md:grid-cols-1 gap-6 mb-8">
|
||
<div>
|
||
<details class="mb-4">
|
||
<summary class="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"> Duale Hochschule Baden-Württemberg (DHBW) </summary>
|
||
<ul class="list-disc list-inside">
|
||
<li>2024 „Einführung in die Webentwicklung“ (Introduction to Web Development)</li>
|
||
</ul>
|
||
</details>
|
||
<details class="mb-4">
|
||
<summary class="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"> Leibniz Fachhochschule (LFH) </summary>
|
||
<ul class="list-disc list-inside">
|
||
<li>2023 „Social Engineering“</li>
|
||
<li>2023 „Mobile Medien (Mobile Media)“</li>
|
||
<li>2022 „Social Engineering“</li>
|
||
<li>2022 „Mobile Medien (Mobile Media)“</li>
|
||
<li>2021 „Social Engineering“</li>
|
||
</ul>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
<!-- endregion -->
|
||
<!-- region Skills and Expertise -->
|
||
<h2 class="text-2xl mb-4">Technical Expertise</h2>
|
||
<p class="mb-8 max-w-prose">
|
||
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:
|
||
</p>
|
||
<div class="grid grid-cols-1 md:grid-cols-1 gap-6 mb-8">
|
||
<!-- region Frontend -->
|
||
<div>
|
||
<details open class="mb-4">
|
||
<summary class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black focus:no-underline transition underline-offset-2 mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer text-nls-green"> Frontend Technologies </summary>
|
||
<ul class="list-disc list-inside text-gray-400">
|
||
<li>
|
||
<a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A high-level, interpreted programming language"
|
||
aria-label="A high-level, interpreted programming language"
|
||
>JavaScript (ES6+)</a
|
||
>,
|
||
<a
|
||
href="https://www.typescriptlang.org/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A typed superset of JavaScript that compiles to plain JavaScript"
|
||
aria-label="A typed superset of JavaScript that compiles to plain JavaScript"
|
||
>TypeScript</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://reactjs.org/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A JavaScript library for building user interfaces"
|
||
aria-label="A JavaScript library for building user interfaces"
|
||
>React</a
|
||
>,
|
||
<a
|
||
href="https://vuejs.org/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A progressive framework for building user interfaces"
|
||
aria-label="A progressive framework for building user interfaces"
|
||
>Vue.js</a
|
||
>,
|
||
<a
|
||
href="https://svelte.dev/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A radical new approach to building user interfaces"
|
||
aria-label="A radical new approach to building user interfaces"
|
||
>Svelte</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://angular.io/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A platform for building mobile and desktop web applications"
|
||
aria-label="A platform for building mobile and desktop web applications"
|
||
>Angular</a
|
||
>,
|
||
<a
|
||
href="https://emberjs.com/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A framework for ambitious web developers"
|
||
aria-label="A framework for ambitious web developers"
|
||
>Ember.js</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://jquery.com/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A fast, small, and feature-rich JavaScript library"
|
||
aria-label="A fast, small, and feature-rich JavaScript library"
|
||
>jQuery</a
|
||
>, Plain JS
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
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
|
||
>,
|
||
<a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/CSS"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
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
|
||
>,
|
||
<a
|
||
href="https://sass-lang.com/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
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
|
||
>,
|
||
<a
|
||
href="https://lesscss.org/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A backwards-compatible language extension for CSS"
|
||
aria-label="A backwards-compatible language extension for CSS"
|
||
>Less</a
|
||
>
|
||
</li>
|
||
<li>Responsive Web Design</li>
|
||
<li>
|
||
<a
|
||
href="https://tailwindcss.com/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
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
|
||
>,
|
||
<a
|
||
href="https://ant.design/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A design system for enterprise-level products"
|
||
aria-label="A design system for enterprise-level products"
|
||
>Ant Design</a
|
||
>,
|
||
<a
|
||
href="https://material.io/design"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A design system created by Google"
|
||
aria-label="A design system created by Google"
|
||
>Material Design</a
|
||
>,
|
||
<a
|
||
href="https://getbootstrap.com/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="The world's most popular front-end open source toolkit"
|
||
aria-label="The world's most popular front-end open source toolkit"
|
||
>Bootstrap</a
|
||
>
|
||
</li>
|
||
<li>
|
||
Bundlers:
|
||
<a
|
||
href="https://vitejs.dev/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Next Generation Frontend Tooling"
|
||
aria-label="Next Generation Frontend Tooling"
|
||
>Vite</a
|
||
>,
|
||
<a
|
||
href="https://webpack.js.org/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A static module bundler for modern JavaScript applications"
|
||
aria-label="A static module bundler for modern JavaScript applications"
|
||
>Webpack</a
|
||
>,
|
||
<a
|
||
href="https://parceljs.org/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Blazing fast, zero configuration web application bundler"
|
||
aria-label="Blazing fast, zero configuration web application bundler"
|
||
>Parcel</a
|
||
>
|
||
</li>
|
||
<li>
|
||
Visualization:
|
||
<a
|
||
href="https://observablehq.com/plot/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A javaScript library for exploratory data visualization"
|
||
aria-label="A javaScript library for exploratory data visualization"
|
||
>Observable Plot</a
|
||
>,
|
||
<a
|
||
href="https://d3js.org/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A JavaScript library for manipulating documents based on data"
|
||
aria-label="A JavaScript library for manipulating documents based on data"
|
||
>D3.js</a
|
||
>,
|
||
<a
|
||
href="https://particles.js.org/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A lightweight JavaScript library for creating particles"
|
||
aria-label="A lightweight JavaScript library for creating particles"
|
||
>Particle.js</a
|
||
>,
|
||
<a
|
||
href="https://threejs.org/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
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</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://nextjs.org/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="The React Framework for Production"
|
||
aria-label="The React Framework for Production"
|
||
>NextJS</a
|
||
>
|
||
(React framework)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://nuxtjs.org/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="The Intuitive Vue Framework"
|
||
aria-label="The Intuitive Vue Framework"
|
||
>NuxtJS</a
|
||
>
|
||
(Vue framework)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://kit.svelte.dev/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="The fastest way to build Svelte apps"
|
||
aria-label="The fastest way to build Svelte apps"
|
||
>SvelteKit</a
|
||
>
|
||
(Svelte framework)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.gatsbyjs.com/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
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</a
|
||
>
|
||
(Static site generator)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://storybook.js.org/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A tool for building UI components and pages in isolation"
|
||
aria-label="A tool for building UI components and pages in isolation"
|
||
>Storybook</a
|
||
>
|
||
(UI component explorer)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://jestjs.io/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A delightful JavaScript Testing Framework with a focus on simplicity"
|
||
aria-label="A delightful JavaScript Testing Framework with a focus on simplicity"
|
||
>Jest</a
|
||
>
|
||
(Testing framework)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.cypress.io/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
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</a
|
||
>
|
||
(E2E testing)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://playwright.dev/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Reliable end-to-end testing for modern web apps"
|
||
aria-label="Reliable end-to-end testing for modern web apps"
|
||
>Playwright</a
|
||
>
|
||
(E2E testing)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://redux.js.org/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A Predictable State Container for JS Apps"
|
||
aria-label="A Predictable State Container for JS Apps"
|
||
>Redux</a
|
||
>
|
||
(State management)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://mobx.js.org/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Simple, scalable state management"
|
||
aria-label="Simple, scalable state management"
|
||
>MobX</a
|
||
>
|
||
(State management)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://zustand-demo.pmnd.rs/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A small, fast and scalable bearbones state-management solution"
|
||
aria-label="A small, fast and scalable bearbones state-management solution"
|
||
>Zustand</a
|
||
>
|
||
(State management)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.apollographql.com/docs/react/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A complete state management library for JavaScript apps"
|
||
aria-label="A complete state management library for JavaScript apps"
|
||
>Apollo Client</a
|
||
>
|
||
(GraphQL client)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://axios-http.com/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Promise based HTTP client for the browser and node.js"
|
||
aria-label="Promise based HTTP client for the browser and node.js"
|
||
>Axios</a
|
||
>
|
||
(HTTP client)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://lodash.com/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A modern JavaScript utility library delivering modularity, performance & extras"
|
||
aria-label="A modern JavaScript utility library delivering modularity, performance & extras"
|
||
>Lodash</a
|
||
>
|
||
(Utility library)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://rxjs.dev/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A library for reactive programming using Observables"
|
||
aria-label="A library for reactive programming using Observables"
|
||
>RxJS</a
|
||
>
|
||
(Reactive programming library)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.khronos.org/webgl/"
|
||
class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-green focus:bg-nls-green focus:text-black hover:text-white focus:no-underline text-nls-green hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A JavaScript API for rendering interactive 2D and 3D graphics"
|
||
aria-label="A JavaScript API for rendering interactive 2D and 3D graphics"
|
||
>WebGL</a
|
||
>
|
||
(3D graphics)
|
||
</li>
|
||
</ul>
|
||
</details>
|
||
</div>
|
||
<!-- endregion -->
|
||
<!-- region DevOps -->
|
||
<div>
|
||
<details class="mb-4">
|
||
<summary class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-blue focus:bg-nls-blue focus:text-black focus:no-underline transition underline-offset-2 mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer text-nls-blue"> DevOps & Cloud</summary>
|
||
<ul class="list-disc list-inside text-gray-400">
|
||
<li>
|
||
<a
|
||
href="https://www.docker.com/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A platform for developing, shipping, and running applications"
|
||
aria-label="A platform for developing, shipping, and running applications"
|
||
>Docker</a
|
||
>,
|
||
<a
|
||
href="https://kubernetes.io/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
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</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://azure.microsoft.com/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Microsoft's cloud computing platform"
|
||
aria-label="Microsoft's cloud computing platform"
|
||
>Azure</a
|
||
>,
|
||
<a
|
||
href="https://cloud.google.com/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Google's suite of cloud computing services"
|
||
aria-label="Google's suite of cloud computing services"
|
||
>Google Cloud</a
|
||
>
|
||
</li>
|
||
<li>
|
||
CI/CD (<a
|
||
href="https://www.jenkins.io/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
title="An open source automation server"
|
||
aria-label="An open source automation server"
|
||
>Jenkins</a
|
||
>,
|
||
<a
|
||
href="https://about.gitlab.com/stages-devops-lifecycle/continuous-integration/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
title="GitLab's built-in Continuous Integration"
|
||
aria-label="GitLab's built-in Continuous Integration"
|
||
>GitLab CI</a
|
||
>,
|
||
<a
|
||
href="https://github.com/features/actions"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Automate your workflow from idea to production"
|
||
aria-label="Automate your workflow from idea to production"
|
||
>GitHub Actions</a
|
||
>)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.terraform.io/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
title="An open-source infrastructure as code software tool"
|
||
aria-label="An open-source infrastructure as code software tool"
|
||
>Terraform</a
|
||
>
|
||
</li>
|
||
<li>
|
||
Monitoring (<a
|
||
href="https://prometheus.io/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
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
|
||
>,
|
||
<a
|
||
href="https://grafana.com/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
title="An open-source platform for monitoring and observability"
|
||
aria-label="An open-source platform for monitoring and observability"
|
||
>Grafana</a
|
||
>)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://httpd.apache.org/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
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
|
||
>,
|
||
<a
|
||
href="https://www.nginx.com/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
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</a
|
||
>
|
||
</li>
|
||
<li>
|
||
Message Queuing:
|
||
<a
|
||
href="https://kafka.apache.org/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A distributed streaming platform"
|
||
aria-label="A distributed streaming platform"
|
||
>Kafka</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.sonarqube.org/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
title="An open-source platform for continuous inspection of code quality"
|
||
aria-label="An open-source platform for continuous inspection of code quality"
|
||
>Sonarqube</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://sentry.io/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Application monitoring and error tracking software"
|
||
aria-label="Application monitoring and error tracking software"
|
||
>Sentry</a
|
||
>
|
||
(Error tracking)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://developers.google.com/web/tools/lighthouse"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
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</a
|
||
>
|
||
(Performance, accessibility, and SEO auditing)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.webpagetest.org/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Website performance and optimization test"
|
||
aria-label="Website performance and optimization test"
|
||
>WebPageTest</a
|
||
>
|
||
(Performance testing)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://pptr.dev/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
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</a
|
||
>
|
||
(Headless browser automation)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.selenium.dev/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A portable framework for testing web applications"
|
||
aria-label="A portable framework for testing web applications"
|
||
>Selenium</a
|
||
>
|
||
(Browser automation)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://nx.dev/"
|
||
class="hover:text-white text-nls-blue hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Smart, Fast and Extensible Build System"
|
||
aria-label="Smart, Fast and Extensible Build System"
|
||
>Nx</a
|
||
>
|
||
(Monorepo tooling)
|
||
</li>
|
||
</ul>
|
||
</details>
|
||
</div>
|
||
<!-- endregion -->
|
||
<!-- region Backend -->
|
||
<div>
|
||
<details class="mb-4">
|
||
<summary class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-violet focus:bg-nls-violet focus:text-black focus:no-underline transition underline-offset-2 mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer text-nls-violet"> Backend Technologies </summary>
|
||
<ul class="list-disc list-inside text-gray-400">
|
||
<li>
|
||
<a
|
||
href="https://nodejs.org/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
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
|
||
>,
|
||
<a
|
||
href="https://expressjs.com/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Fast, unopinionated, minimalist web framework for Node.js"
|
||
aria-label="Fast, unopinionated, minimalist web framework for Node.js"
|
||
>Express.js</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.php.net/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A popular general-purpose scripting language"
|
||
aria-label="A popular general-purpose scripting language"
|
||
>PHP</a
|
||
>,
|
||
<a
|
||
href="https://laravel.com/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A web application framework with expressive, elegant syntax"
|
||
aria-label="A web application framework with expressive, elegant syntax"
|
||
>Laravel</a
|
||
>,
|
||
<a
|
||
href="https://symfony.com/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A set of reusable PHP components"
|
||
aria-label="A set of reusable PHP components"
|
||
>Symfony</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.java.com/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A general-purpose programming language"
|
||
aria-label="A general-purpose programming language"
|
||
>Java</a
|
||
>,
|
||
<a
|
||
href="https://spring.io/projects/spring-boot"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="An extension of the Spring framework"
|
||
aria-label="An extension of the Spring framework"
|
||
>Spring Boot</a
|
||
>,
|
||
<a
|
||
href="https://quarkus.io/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A Kubernetes Native Java stack"
|
||
aria-label="A Kubernetes Native Java stack"
|
||
>Quarkus</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.python.org/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
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
|
||
>,
|
||
<a
|
||
href="https://www.djangoproject.com/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A high-level Python Web framework"
|
||
aria-label="A high-level Python Web framework"
|
||
>Django</a
|
||
>,
|
||
<a
|
||
href="https://flask.palletsprojects.com/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A lightweight WSGI web application framework"
|
||
aria-label="A lightweight WSGI web application framework"
|
||
>Flask</a
|
||
>,
|
||
<a
|
||
href="https://fastapi.tiangolo.com/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
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</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://golang.org/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
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
|
||
>,
|
||
<a
|
||
href="https://www.rust-lang.org/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A language empowering everyone to build reliable and efficient software"
|
||
aria-label="A language empowering everyone to build reliable and efficient software"
|
||
>Rust</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://restfulapi.net/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Representational State Transfer"
|
||
aria-label="Representational State Transfer"
|
||
>RESTful APIs</a
|
||
>,
|
||
<a
|
||
href="https://graphql.org/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A query language for your API"
|
||
aria-label="A query language for your API"
|
||
>GraphQL</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://hono.dev/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Ultrafast web framework for the Edges"
|
||
aria-label="Ultrafast web framework for the Edges"
|
||
>Hono</a
|
||
>
|
||
</li>
|
||
<li>
|
||
Runtimes:
|
||
<a
|
||
href="https://bun.sh/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A fast all-in-one JavaScript runtime"
|
||
aria-label="A fast all-in-one JavaScript runtime"
|
||
>Bun</a
|
||
>,
|
||
<a
|
||
href="https://deno.land/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A secure runtime for JavaScript and TypeScript"
|
||
aria-label="A secure runtime for JavaScript and TypeScript"
|
||
>Deno</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://nestjs.com/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
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</a
|
||
>
|
||
(Node.js framework)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.fastify.io/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Fast and low overhead web framework, for Node.js"
|
||
aria-label="Fast and low overhead web framework, for Node.js"
|
||
>Fastify</a
|
||
>
|
||
(Node.js framework)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://typeorm.io/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="ORM for TypeScript and JavaScript"
|
||
aria-label="ORM for TypeScript and JavaScript"
|
||
>TypeORM</a
|
||
>
|
||
(ORM for TypeScript)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.prisma.io/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Next-generation Node.js and TypeScript ORM"
|
||
aria-label="Next-generation Node.js and TypeScript ORM"
|
||
>Prisma</a
|
||
>
|
||
(Database toolkit)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://knexjs.org/"
|
||
class="hover:text-white text-nls-violet hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A SQL query builder for JavaScript"
|
||
aria-label="A SQL query builder for JavaScript"
|
||
>Knex.js</a
|
||
>
|
||
(SQL query builder)
|
||
</li>
|
||
</ul>
|
||
</details>
|
||
</div>
|
||
<!-- endregion -->
|
||
<!-- region Data -->
|
||
<div>
|
||
<details class="mb-4">
|
||
<summary class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-purple focus:bg-nls-purple focus:text-black focus:no-underline transition underline-offset-2 mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer text-nls-purple"> Database & Data</summary>
|
||
<ul class="list-disc list-inside text-gray-400">
|
||
<li>
|
||
SQL (<a
|
||
href="https://www.mysql.com/"
|
||
class="hover:text-white text-nls-purple hover:decoration-2 transition underline-offset-2 underline"
|
||
title="The world's most popular open source database"
|
||
aria-label="The world's most popular open source database"
|
||
>MySQL</a
|
||
>,
|
||
<a
|
||
href="https://www.postgresql.org/"
|
||
class="hover:text-white text-nls-purple hover:decoration-2 transition underline-offset-2 underline"
|
||
title="The world's most advanced open source database"
|
||
aria-label="The world's most advanced open source database"
|
||
>PostgreSQL</a
|
||
>)
|
||
</li>
|
||
<li>
|
||
NoSQL (<a
|
||
href="https://www.mongodb.com/"
|
||
class="hover:text-white text-nls-purple hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A general purpose, document-based, distributed database"
|
||
aria-label="A general purpose, document-based, distributed database"
|
||
>MongoDB</a
|
||
>,
|
||
<a
|
||
href="https://cassandra.apache.org/"
|
||
class="hover:text-white text-nls-purple hover:decoration-2 transition underline-offset-2 underline"
|
||
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
|
||
>,
|
||
<a
|
||
href="https://redis.io/"
|
||
class="hover:text-white text-nls-purple hover:decoration-2 transition underline-offset-2 underline"
|
||
title="An open source, in-memory data structure store"
|
||
aria-label="An open source, in-memory data structure store"
|
||
>Redis</a
|
||
>)
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.elastic.co/elasticsearch/"
|
||
class="hover:text-white text-nls-purple hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A distributed, RESTful search and analytics engine"
|
||
aria-label="A distributed, RESTful search and analytics engine"
|
||
>Elasticsearch</a
|
||
>
|
||
</li>
|
||
<li>Data Analysis & Visualization</li>
|
||
</ul>
|
||
</details>
|
||
</div>
|
||
<!-- endregion -->
|
||
<!-- region Cross-Platform -->
|
||
<div>
|
||
<details class="mb-4">
|
||
<summary class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-pink focus:bg-nls-pink focus:text-black focus:no-underline transition underline-offset-2 mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer text-nls-pink"> Cross-Platform Development </summary>
|
||
<ul class="list-disc list-inside text-gray-400">
|
||
<li>
|
||
Desktop Apps:
|
||
<a
|
||
href="https://www.electronjs.org/"
|
||
class="hover:text-white text-nls-pink hover:decoration-2 transition underline-offset-2 underline"
|
||
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
|
||
>,
|
||
<a
|
||
href="https://tauri.app/"
|
||
class="hover:text-white text-nls-pink hover:decoration-2 transition underline-offset-2 underline"
|
||
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</a
|
||
>
|
||
</li>
|
||
<li>
|
||
Mobile Apps:
|
||
<a
|
||
href="https://reactnative.dev/"
|
||
class="hover:text-white text-nls-pink hover:decoration-2 transition underline-offset-2 underline"
|
||
title="A framework for building native apps using React"
|
||
aria-label="A framework for building native apps using React"
|
||
>React Native</a
|
||
>,
|
||
<a
|
||
href="https://flutter.dev/"
|
||
class="hover:text-white text-nls-pink hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Google's UI toolkit for building natively compiled applications"
|
||
aria-label="Google's UI toolkit for building natively compiled applications"
|
||
>Flutter</a
|
||
>,
|
||
<a
|
||
href="https://cordova.apache.org/"
|
||
class="hover:text-white text-nls-pink hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Mobile apps with HTML, CSS & JS"
|
||
aria-label="Mobile apps with HTML, CSS & JS"
|
||
>Cordova</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://web.dev/progressive-web-apps/"
|
||
class="hover:text-white text-nls-pink hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Websites that took all the right vitamins"
|
||
aria-label="Websites that took all the right vitamins"
|
||
>Progressive Web Apps (PWAs)</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</details>
|
||
</div>
|
||
<!-- endregion -->
|
||
<!-- region Best Practices -->
|
||
<div>
|
||
<details class="mb-4">
|
||
<summary class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-red focus:bg-nls-red focus:text-black focus:no-underline transition underline-offset-2 mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer text-nls-red"> Development Best Practices </summary>
|
||
<ul class="list-disc list-inside text-gray-400">
|
||
<li>
|
||
<a
|
||
href="https://www.w3.org/WAI/standards-guidelines/wcag/"
|
||
class="hover:text-white text-nls-red hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Web Content Accessibility Guidelines"
|
||
aria-label="Web Content Accessibility Guidelines"
|
||
>Accessibility (a11y): WCAG</a
|
||
>,
|
||
<a
|
||
href="https://www.w3.org/WAI/standards-guidelines/aria/"
|
||
class="hover:text-white text-nls-red hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Accessible Rich Internet Applications"
|
||
aria-label="Accessible Rich Internet Applications"
|
||
>ARIA</a
|
||
>
|
||
</li>
|
||
<li>
|
||
Internationalization (i18n):
|
||
<a
|
||
href="https://www.i18next.com/"
|
||
class="hover:text-white text-nls-red hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Internationalization framework"
|
||
aria-label="Internationalization framework"
|
||
>i18next</a
|
||
>,
|
||
<a
|
||
href="https://weblate.org/"
|
||
class="hover:text-white text-nls-red hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Web-based continuous localization system"
|
||
aria-label="Web-based continuous localization system"
|
||
>Weblate</a
|
||
>,
|
||
<a
|
||
href="https://localize.co/"
|
||
class="hover:text-white text-nls-red hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Translation management platform"
|
||
aria-label="Translation management platform"
|
||
>Localize</a
|
||
>
|
||
</li>
|
||
<li>Performance Optimization</li>
|
||
<li>SEO Best Practices</li>
|
||
<li>
|
||
<a
|
||
href="https://owasp.org/"
|
||
class="hover:text-white text-nls-red hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Open Web Application Security Project"
|
||
aria-label="Open Web Application Security Project"
|
||
>Web Security (OWASP)</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</details>
|
||
</div>
|
||
<!-- endregion -->
|
||
<!-- region Tracking -->
|
||
<div>
|
||
<details class="mb-4">
|
||
<summary class="focus:outline-none rounded-sm focus:z-10 focus:ring-4 focus:ring-nls-orange focus:bg-nls-orange focus:text-black focus:no-underline transition underline-offset-2 mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer text-nls-orange"> Analytics & Tracking </summary>
|
||
<ul class="list-disc list-inside text-gray-400">
|
||
<li>
|
||
<a
|
||
href="https://umami.is/"
|
||
class="hover:text-white text-nls-orange hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Simple, fast, privacy-focused alternative to Google Analytics"
|
||
aria-label="Simple, fast, privacy-focused alternative to Google Analytics"
|
||
>Umami</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://analytics.google.com/"
|
||
class="hover:text-white text-nls-orange hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Web analytics service offered by Google"
|
||
aria-label="Web analytics service offered by Google"
|
||
>Google Analytics</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://amplitude.com/"
|
||
class="hover:text-white text-nls-orange hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Product analytics platform"
|
||
aria-label="Product analytics platform"
|
||
>Amplitude</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href="https://www.hotjar.com/"
|
||
class="hover:text-white text-nls-orange hover:decoration-2 transition underline-offset-2 underline"
|
||
title="Behavior analytics and user feedback platform"
|
||
aria-label="Behavior analytics and user feedback platform"
|
||
>Hotjar</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</details>
|
||
</div>
|
||
<!-- endregion -->
|
||
</div>
|
||
<!-- endregion -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- endregion -->
|
||
|
||
<!-- region Project #1 -->
|
||
<section class="bg-nls-black text-white">
|
||
<div class="p-8 sm:p-20">
|
||
<div class="max-w-screen-md mx-auto">
|
||
<h2 class="text-2xl mb-4">Portfolio</h2>
|
||
</div>
|
||
</div>
|
||
<div class=" min-w-full min-h-[80vh]">
|
||
<img class="min-h-[80vh] object-cover opacity-30 hover:opacity-80 transition" alt="" src="./public/bosch.png">
|
||
</div>
|
||
</section>
|
||
<!-- endregion -->
|
||
|
||
<!-- region Project #2 -->
|
||
<section class="bg-nls-black min-w-full min-h-[80vh]">
|
||
<img class="min-h-[80vh] object-cover opacity-30 hover:opacity-80 transition" alt="" src="./public/pons.png">
|
||
</section>
|
||
<!-- endregion -->
|
||
|
||
<!-- region Project #3 -->
|
||
<section class="bg-nls-black min-w-full min-h-[80vh]">
|
||
<img class="min-h-[80vh] object-cover opacity-30 hover:opacity-80 transition" alt="" src="./public/sarah-weisman.png">
|
||
</section>
|
||
<!-- endregion -->
|
||
|
||
<!-- region Footer -->
|
||
<footer class="bg-nls-black text-white">
|
||
<div class="p-8 sm:p-20 min-h-[120vh]">
|
||
<div class="max-w-screen-md mx-auto">
|
||
|
||
<!-- region Contact -->
|
||
<h2 class="text-2xl mb-4">Let's Connect</h2>
|
||
<p class="mb-4 max-w-prose">
|
||
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.
|
||
</p>
|
||
<div class="max-w-prose">
|
||
<div class="flex items-center space-x-6 mb-8">
|
||
<a
|
||
class="text-white hover:text-amber-300 transition-colors"
|
||
href="https://github.com/nextlevelshit"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>
|
||
<svg aria-hidden="true" class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
|
||
<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"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
<a
|
||
class="text-white transition-colors hover:text-amber-300"
|
||
href="https://www.linkedin.com/in/michael-werner-czechowski/"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>
|
||
<svg aria-hidden="true" class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
|
||
<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"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
<a
|
||
class="text-white hover:text-amber-300 transition-colors"
|
||
href="https://www.xing.com/profile/Michael_Czechowski"
|
||
rel="noopener noreferrer"
|
||
target="_blank"
|
||
>
|
||
<svg aria-hidden="true" class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
|
||
<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"
|
||
/>
|
||
</svg>
|
||
</a>
|
||
<a class="text-white uppercase font-semibold text-sm hover:text-amber-300 transition-colors" href="mailto:hello@dailysh.it">
|
||
Electronic Mail
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<!-- endregion -->
|
||
</div>
|
||
</div>
|
||
<a href="https://nextlevelshit.github.io/xstate-vue/" aria-label="Risk" title="At your own risk">
|
||
<img src="./src/assets/nxlsht.png" alt="" class="w-12 mt-[1000vh] ml-auto" />
|
||
</a>
|
||
</footer>
|
||
<!-- endregion -->
|
||
</article>
|
||
</main>
|
||
</body>
|
||
</html>
|