diff --git a/index.html b/index.html index cbf3ec3..20db69d 100644 --- a/index.html +++ b/index.html @@ -1,320 +1,1230 @@ - - - - - - Michael W. Czechowski - Software Architect & Academic - - - - - - - - - - - + + + + - - - -
-
-
-
-
- -
-
-

hello·at·dailysh.it

- -
-
-
- -
-
-
-
- Complex software architecture diagram -
-
-

Software Solutions

-

Bosch (2015 – 2016)

-
    -
  • Led the architecture and development of bosch-diy.de frontend
    • -
  • Implemented robust CI/CD pipelines
    • -
  • Mentored development teams on best practices in software architecture
    • -
- - - -
-
-
-
- -
-
-
-
- University lecture hall -
-
-

Academic Contributions

-

University of Stuttgart & Leibniz Fachhochschule

-
    -
  • Lecturer, Social Engineering - Leibniz FH (2019 - Present)
    • -
  • Lecturer, Mobile Media - Leibniz FH (2018 - Present)
    • -
  • Guest Lecturer, Advanced Software Architecture - Uni Stuttgart (2017 - 2019)
    • -
- - - -
-
-
-
- -
-
-
-
- Open source contribution graph -
-
-

Open Source Contributions

-

NextLevelShit on GitHub

-
    -
  • Risk Tabletop Clone using XState - 500+ stars
    • -
  • Comprehensive HTML, CSS, JS courses - 1000+ forks
    • -
  • Various utility libraries for React and Vue.js ecosystems
    • -
  • Regular contributor to core TypeScript libraries
    • -
- - - -
-
-
-
- -
-
-
-
- Team collaborating on a project -
-
-

Professional Experience

-

Industry Leaders & Innovators

-
    -
  • Lead Architect, Becklyn Studios (2016 - 2018)
    • -
  • Senior Backend Developer, nextmarkets (2014 - 2016)
    • -
  • Software Engineer, SAP (2012 - 2014)
    • -
- - - -
-
-
-
- -
-
-
-
- Innovative tech concept -
-
-

Technical Expertise

-

Cutting-edge Technologies & Methodologies

-
    -
  • Architecture: Microservices, Event-Driven, Domain-Driven Design
    • -
  • Languages: TypeScript, Rust, Go, Python, Haskell
    • -
  • Frameworks: React, Vue.js, NestJS, Phoenix
    • -
  • Cloud & DevOps: AWS, Azure, Kubernetes, Terraform
    • -
  • Data: PostgreSQL, Cassandra, Kafka, Elasticsearch
    • -
- - - -
-
-
-
- -
-
-
-

Philosophy

-

- I believe in the transformative power of technology when applied with wisdom and foresight. My approach to software architecture is rooted in first principles thinking, always questioning assumptions and striving for elegant solutions that stand the test of time. I see each project as an opportunity to push the boundaries of what's possible, while never losing sight of the end user's needs and the business objectives. -

- -

Future Directions

-

- As we stand at the cusp of a new era in computing, with quantum computing and advanced AI on the horizon, I'm deeply engaged in research on how these technologies will reshape software architecture. I'm particularly interested in the intersection of distributed systems, privacy-preserving technologies, and sustainable computing - areas I believe will be crucial in the coming decades. -

- -

Connect

-

- I'm always open to discussing new ideas, potential collaborations, or opportunities to contribute to meaningful projects. Whether you're a fellow technologist, a potential client, or simply someone passionate about the future of technology, I welcome thoughtful dialogue. -

-
-
- - - - - - - - - - - - - - + img { + mix-blend-mode: color-burn; + } + + + + +
+
+ +
+
+
+ +
+
+

hello–at–dailysh.it

+

Michael W. Czechowski

+

+ Digital Transformation + + & Computer Science +

-
-
-
-
+ + -
-
- - \ No newline at end of file + +
+
+
+

Professional Approach

+

+ My approach to software architecture is rooted in first principles thinking and agile methodologies. I specialize in designing + scalable, maintainable systems that adapt to evolving business needs. With a track record of successfully leading teams and + delivering complex projects, I bring a wealth of experience in: +

+
    +
  • Microservices Architecture
    • +
  • Event-Driven Systems
    • +
  • Domain-Driven Design
    • +
  • Security-First Development
    • +
  • Agile & Scrum Methodologies
    • +
+
+
+
+ + + + + + + + + diff --git a/package.json b/package.json index d5cec83..80e624c 100644 --- a/package.json +++ b/package.json @@ -1,18 +1,37 @@ { - "name": "nls-parcel-dailyshit", - "version": "1.0.0-0", - "description": "", - "main": "index.html", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1", - "start": "parcel index.html --open", - "build": "parcel build index.html" - }, - "author": "Michael Werner Czechowski ", - "license": "Apache-2.0", - "devDependencies": { - "parcel-bundler": "^1.10.3", - "sass": "^1.16.0", - "typescript": "^3.2.1" - } + "name": "nls-parcel-dailyshit", + "version": "1.0.0-0", + "description": "", + "main": "index.html", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start": "parcel index.html --open", + "build": "parcel build index.html", + "format": "npx prettier --write src/**/*.ts index.html 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": { + "parcel-bundler": "^1.10.3", + "sass": "^1.16.0", + "typescript": "^3.2.1" + }, + "prettier": { + "singleQuote": false, + "tabWidth": 4, + "semi": true, + "arrowParens": "always", + "useTabs": true, + "jsxSingleQuote": false, + "bracketSpacing": false, + "printWidth": 160, + "trailingComma": "all", + "bracketSameLine": false, + "htmlWhitespaceSensitivity": "strict", + "proseWrap": "never", + "singleAttributePerLine": false, + "editorconfig": true + } } diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..386cf3f --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: /*.pdf$ \ No newline at end of file diff --git a/src/assets/og-image.png b/src/assets/og-image.png new file mode 100644 index 0000000..3ba6655 Binary files /dev/null and b/src/assets/og-image.png differ diff --git a/src/assets/twitter-image.png b/src/assets/twitter-image.png new file mode 100644 index 0000000..3ba6655 Binary files /dev/null and b/src/assets/twitter-image.png differ diff --git a/src/events.ts b/src/events.ts index 1523805..9a18fd3 100644 --- a/src/events.ts +++ b/src/events.ts @@ -1,12 +1,19 @@ export default () => { - const sectionList: NodeListOf = document.querySelectorAll('section'); + const sectionList: NodeListOf = document.querySelectorAll("section"); - sectionList.forEach(section => { - section.addEventListener('click', (e) => { - console.log('click', e.target); - }); - section.addEventListener('touchstart', (e) => { - console.log('touchstart', e.target); - }); - }); -}; \ No newline at end of file + sectionList.forEach((section) => { + section.addEventListener("click", (e) => { + console.log("click", e.target); + }); + section.addEventListener("touchstart", (e) => { + console.log("touchstart", e.target); + }); + }); + + // Add event listener to the document that changes the background color successively to another color + document.addEventListener("scroll", (e) => { + const randomColor = Math.floor(Math.random() * 16777215).toString(16); + console.log("scroll", e.target, randomColor); + document.body.style.backgroundColor = `#${randomColor}`; + }); +}; diff --git a/src/index.ts b/src/index.ts index e435338..4213ef4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,3 @@ -import events from './events'; -import './styles/index.scss'; +import events from "./events"; -events(); \ No newline at end of file +events(); diff --git a/src/styles/_base.scss b/src/styles/_base.scss deleted file mode 100644 index ddfd522..0000000 --- a/src/styles/_base.scss +++ /dev/null @@ -1,103 +0,0 @@ -@import "variables"; - -html, body { - margin: 0; - padding: 0; - // font-size: 1.42vh; - font-size: 1.68vh; - font-family: 'Courier New', Courier, monospace; - - @media (max-height: $breakpoint-height) { - font-size: 2.78vh; - // font-size: 3vh; - } - - // @media (max-width: $breakpoint-width - 1px) { - // font-size: 3vh; - // } -} - -main { - display: flex; - flex-direction: column; -} - -svg { - display: block; - max-width: 80vw; - margin: 0 auto; - fill: $nls-color-white; -} - -h1 { - font-size: 200%; - - @media (min-width: $breakpoint) { - font-size: 300%; - } -} - -h2 {} - -h3 { - font-weight: normal; -} - -p { - line-height: 125%; -} - -a { - color: $nls-color-white; -} - -img { - @media (max-width: $breakpoint) { - margin: 0 auto 2rem; - display: block; - } - - mix-blend-mode: color-burn; - max-width: 100%; height: auto; width: 100%; -} - -article { - - header { - position: sticky; - bottom: 100vh; - height: 100vh; - overflow: hidden; - } - - footer { - top: 0; - position: sticky; - position: -webkit-sticky; - position: -moz-sticky; - position: -ms-sticky; - position: -o-sticky; - - section { - min-height: 200vh; - // padding: 5rem 3rem; - padding-top: 6rem; - - p { - margin: 1rem 3rem 6rem; - } - - object { - position: absolute; - bottom: 0; - display: block; - margin: 5rem auto 0; - width: 100vw; - - @media (min-width: $breakpoint-width) { - width: 80vw; - } - } - } - } -} \ No newline at end of file diff --git a/src/styles/_cards.scss b/src/styles/_cards.scss deleted file mode 100644 index f6159fa..0000000 --- a/src/styles/_cards.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import "variables"; - -.cards { - $this-horizontal-margin: 2rem; - - display: flex; flex-wrap: wrap; - margin: 0 ($this-horizontal-margin * .5); padding: 0; - - &__item { - flex: 1 1 30%; - list-style-type: none; - border: 1px solid $nls-color-white; border-radius: 0.2rem; - padding: 2rem 3rem; margin: 1rem $this-horizontal-margin * .5; - } -} \ No newline at end of file diff --git a/src/styles/_columns.scss b/src/styles/_columns.scss deleted file mode 100644 index 0eba64c..0000000 --- a/src/styles/_columns.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import "./variables"; - -.columns { - display: flex; flex-flow: column; flex-wrap: nowrap; - - @media (min-width: $breakpoint) { - flex-flow: row; - } - - &__item { - flex-grow: 1; - flex-basis: 0; - } -} \ No newline at end of file diff --git a/src/styles/_helpers.scss b/src/styles/_helpers.scss deleted file mode 100644 index e5075bd..0000000 --- a/src/styles/_helpers.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import "variables"; - -.--large { - font-size: 150%; -} - -.--center { - text-align: center; -} - -.--secondary { - opacity: 0.6; -} - -.--paragraph { - $this-padding: 20vw; - - @media (min-width: $breakpoint) { - padding-right: $this-padding ; - } - - &.--center { - @media (min-width: $breakpoint) { - padding-right: $this-padding * 0.5; - padding-left: $this-padding * 0.5; - } - } -} \ No newline at end of file diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss deleted file mode 100644 index d085eba..0000000 --- a/src/styles/_variables.scss +++ /dev/null @@ -1,22 +0,0 @@ -// COLORS -// -// $nls-color-green: #6CBC82; -// $nls-color-blue: #1D73AD; -// $nls-color-violet: #4E59B7; -// $nls-color-purple: #AA66A5; -// $nls-color-pink: #E54975; -$nls-color-green: #79C28D; -$nls-color-blue: #5A99C3; -$nls-color-violet: #7E86CA; -$nls-color-purple: #C18FBD; -$nls-color-pink: #EC7A9A; -$nls-color-white: #fff; -$nls-color-black: #0f0f11; - -// -// RESPONSIVE -// -$breakpoint: 640px; -// $breakpoint-height: 360px; -$breakpoint-height: 568px; -$breakpoint-width: 640px; \ No newline at end of file diff --git a/src/styles/index.css b/src/styles/index.css deleted file mode 100644 index 6f56139..0000000 --- a/src/styles/index.css +++ /dev/null @@ -1,246 +0,0 @@ -html, body { - margin: 0; - padding: 0; - font-size: 1.42; - font-family: "Courier New", Courier, monospace; -} - -main { - display: flex; - flex-direction: column; -} - -svg { - display: block; - max-width: 80vw; - margin: 0 auto; - fill: #fff; -} - -h1 { - font-size: 200%; -} -@media (min-width: 980px) { - h1 { - font-size: 300%; - } -} - -h3 { - font-weight: normal; -} - -p { - line-height: 125%; -} - -a { - color: #fff; -} - -img { - mix-blend-mode: color-burn; - max-width: 100%; - height: auto; - width: 100%; -} -@media (max-width: 980px) { - img { - margin: 0 auto 2rem; - display: block; - } -} - -article header { - height: 100vh; -} -article footer { - height: 200vh; -} - -.--large { - font-size: 150%; -} - -.--center { - text-align: center; -} - -.--secondary { - opacity: 0.6; -} - -@media (min-width: 980px) { - .--paragraph { - padding-right: 20vw; - } -} -@media (min-width: 980px) { - .--paragraph.--center { - padding-right: 10vw; - padding-left: 10vw; - } -} - -article > section, -article > header, -article > footer { - top: 0; - position: sticky; - position: -webkit-sticky; - position: -moz-sticky; - position: -ms-sticky; - position: -o-sticky; - display: flex; - flex-direction: column; - justify-content: start; - height: 90vh; - overflow: hidden; -} -@media (min-width: 980px) { - article > section, -article > header, -article > footer { - height: 80vh; - } -} -article > section.--selected, article > section.--full-height, -article > header.--selected, -article > header.--full-height, -article > footer.--selected, -article > footer.--full-height { - height: 100vh; -} -article > section.--black, -article > header.--black, -article > footer.--black { - background: #0f0f11; - color: #fff; -} -article > section.--black .teaser:after, -article > header.--black .teaser:after, -article > footer.--black .teaser:after { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background: linear-gradient(to top, #0f0f11 0%, rgba(15, 15, 17, 0) 50%); -} -article > section.--green, -article > header.--green, -article > footer.--green { - background: #79C28D; -} -article > section.--green .teaser:after, -article > header.--green .teaser:after, -article > footer.--green .teaser:after { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background: linear-gradient(to top, #79C28D 0%, rgba(121, 194, 141, 0) 50%); -} -article > section.--blue, -article > header.--blue, -article > footer.--blue { - background: #5A99C3; -} -article > section.--blue .teaser:after, -article > header.--blue .teaser:after, -article > footer.--blue .teaser:after { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background: linear-gradient(to top, #5A99C3 0%, rgba(90, 153, 195, 0) 50%); -} -article > section.--violet, -article > header.--violet, -article > footer.--violet { - background: #7E86CA; -} -article > section.--violet .teaser:after, -article > header.--violet .teaser:after, -article > footer.--violet .teaser:after { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background: linear-gradient(to top, #7E86CA 0%, rgba(126, 134, 202, 0) 50%); -} -article > section.--purple, -article > header.--purple, -article > footer.--purple { - background: #C18FBD; -} -article > section.--purple .teaser:after, -article > header.--purple .teaser:after, -article > footer.--purple .teaser:after { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background: linear-gradient(to top, #C18FBD 0%, rgba(193, 143, 189, 0) 50%); -} -article > section.--pink, -article > header.--pink, -article > footer.--pink { - background: #EC7A9A; -} -article > section.--pink .teaser:after, -article > header.--pink .teaser:after, -article > footer.--pink .teaser:after { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background: linear-gradient(to top, #EC7A9A 0%, rgba(236, 122, 154, 0) 50%); -} -article > section .teaser, -article > header .teaser, -article > footer .teaser { - overflow: hidden; - padding: 5rem 3rem; -} - -.cards { - display: flex; - flex-wrap: wrap; - margin: 0 1rem; - padding: 0; -} -.cards__item { - flex: 1 1 30%; - list-style-type: none; - border: 1px solid #fff; - border-radius: 0.2rem; - padding: 2rem 3rem; - margin: 1rem 1rem; -} - -.columns { - display: flex; - flex-flow: column; - flex-wrap: nowrap; -} -@media (min-width: 980px) { - .columns { - flex-flow: row; - } -} -.columns__item { - flex-grow: 1; - flex-basis: 0; -} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss deleted file mode 100644 index 0410ffd..0000000 --- a/src/styles/index.scss +++ /dev/null @@ -1,127 +0,0 @@ -@import "variables"; -@import "base"; -@import "helpers"; - -section { - top: 0; - position: sticky; - position: -webkit-sticky; - position: -moz-sticky; - position: -ms-sticky; - position: -o-sticky; - display: flex; flex-direction: column; justify-content: start; - height: 90vh; - overflow: hidden; - - @media (min-width: $breakpoint) { - height: 80vh; - } -} - -section, -article > header, -article > footer { - // color: $nls-color-white; - - &.--selected { - - } - - &.--selected, - &.--full-height { - height: 100vh; - } - - &.--black { - background: $nls-color-black; - color: $nls-color-white; - - .teaser { - - &:after { - content: ''; - position: absolute; top: 0; left: 0; - height: 100%; width: 100%; - background: linear-gradient(to top, $nls-color-black 0%, rgba($nls-color-black, 0) 50%); - } - } - } - - &.--green { - background: $nls-color-green; - - .teaser { - - &:after { - content: ''; - position: absolute; top: 0; left: 0; - height: 100%; width: 100%; - background: linear-gradient(to top, $nls-color-green 0%, rgba($nls-color-green, 0) 50%); - } - } - } - - &.--blue { - background: $nls-color-blue; - - .teaser { - - &:after { - content: ''; - position: absolute; top: 0; left: 0; - height: 100%; width: 100%; - background: linear-gradient(to top, $nls-color-blue 0%, rgba( $nls-color-blue, 0) 50%); - } - } - } - - &.--violet { - background: $nls-color-violet; - - .teaser { - - &:after { - content: ''; - position: absolute; top: 0; left: 0; - height: 100%; width: 100%; - background: linear-gradient(to top, $nls-color-violet 0%, rgba($nls-color-violet, 0) 50%); - } - } - } - - &.--purple { - background: $nls-color-purple; - - .teaser { - - &:after { - content: ''; - position: absolute; top: 0; left: 0; - height: 100%; width: 100%; - background: linear-gradient(to top, $nls-color-purple 0%, rgba($nls-color-purple, 0) 50%); - } - } - } - - &.--pink { - background: $nls-color-pink; - - .teaser { - - &:after { - content: ''; - position: absolute; top: 0; left: 0; - height: 100%; width: 100%; - background: linear-gradient(to top, $nls-color-pink 0%, rgba( $nls-color-pink, 0) 50%); - } - } - } - - .teaser { - overflow: hidden; - padding: 5rem 3rem; - } -} - -@import "cards"; -@import "columns"; \ No newline at end of file