diff --git a/.pugrc b/.pugrc index ee13736..2cfaaef 100644 --- a/.pugrc +++ b/.pugrc @@ -41,15 +41,15 @@ "riskTitle": "At your own risk", "gitea": "Gitea" }, - "title": { + "landingpage": { "email": ["hello", "at", "dailysh.it"], "name": "Michael W. Czechowski", "logoSvg": "./src/assets/nls.svg", - "jobTitle": ["Web Technologies ", "Software Architecture"] + "emojiSvg": "./src/assets/waving-hand.svg", + "jobTitle": ["Enterprise Software Architecture", "Digital Transformation Expert"] }, "professional": { "title": "Professional Approach", - "description": "In today's rapidly evolving digital landscape, robust software architecture is the cornerstone of business success. Drawing from my extensive experience working with industry leaders and innovative startups alike, I've developed a comprehensive approach to software design that prioritizes scalability, security, and adaptability. My expertise spans from crafting high-performance microservices architectures to implementing enterprise-wide digital transformation strategies. I specialize in creating solutions that not only meet current needs but are also flexible enough to evolve with your business, ensuring long-term value and competitive edge. With a deep understanding of both cutting-edge technologies and time-tested principles, I deliver architectures that stand the test of time while driving innovation.", "keyConcepts": [ { "link": { @@ -151,7 +151,8 @@ }, "academia": { "intro": [ - "As a passionate advocate for open source software and a university lecturer since the beginning of this decade, I bring a unique perspective to the intersection of academia and industry. My courses in web development, software engineering, and computer science for economics are designed to bridge the gap between theoretical knowledge and real-world application. By integrating cutting-edge industry practices into the curriculum, I prepare the next generation of software engineers to tackle the complex challenges of tomorrow's digital landscape.", + "As a passionate advocate for open source software and a university lecturer since the beginning of this decade, I bring a unique perspective to the intersection of academia and industry.", + "My courses in web development, software engineering, and computer science for economics are designed to bridge the gap between theoretical knowledge and real-world application. By integrating cutting-edge industry practices into the curriculum, I prepare the next generation of software engineers to tackle the complex challenges of tomorrow's digital landscape.", "At Leibniz Fachhochschule (LFH) in Hannover, Germany, I've pioneered a course on Social Engineering, addressing a critical yet often overlooked aspect of cybersecurity. This innovative program equips students with the knowledge and ethical framework to protect themselves and their future employers from sophisticated social manipulation tactics. By focusing on real-world scenarios and practical defense strategies, I ensure that graduates are well-prepared to navigate the human element of cybersecurity in their professional careers.", "In my role as a lecturer for Web Development at DHBW Stuttgart, I lead students through an immersive exploration of modern web technologies, frameworks, and software architecture concepts. My teaching philosophy centers on fostering a deep understanding of foundational principles while keeping pace with the rapidly evolving tech ecosystem. Through hands-on projects and real-world case studies, I challenge students to think critically about scalability, performance, and user experience – skills that are invaluable in today's competitive tech industry." ], @@ -177,7 +178,10 @@ ] }, "expertise": { - "intro": "With over two decades at the forefront of software development and architecture, I've navigated the ever-evolving landscape of technology, consistently delivering innovative solutions across diverse sectors. My expertise spans a comprehensive range of technologies and methodologies, enabling me to provide both strategic guidance and hands-on leadership to organizations seeking to innovate and maintain a competitive edge. From developing robust, scalable software architectures to implementing agile practices and leveraging the latest in cloud and DevOps technologies, I bring a wealth of knowledge and practical experience to every project. My approach is rooted in a deep understanding of both current trends and time-tested principles, ensuring solutions that are not only cutting-edge but also sustainable and aligned with long-term business objectives.", + "intro": [ + "With over two decades at the forefront of software development and architecture, I've navigated the ever-evolving landscape of technology, consistently delivering innovative solutions across diverse sectors.", + "My expertise spans a comprehensive range of technologies and methodologies, enabling me to provide both strategic guidance and hands-on leadership to organizations seeking to innovate and maintain a competitive edge. From developing robust, scalable software architectures to implementing agile practices and leveraging the latest in cloud and DevOps technologies, I bring a wealth of knowledge and practical experience to every project. My approach is rooted in a deep understanding of both current trends and time-tested principles, ensuring solutions that are not only cutting-edge but also sustainable and aligned with long-term business objectives." + ], "frontendTechnologies": { "color": "green", "category": "frontend technologies", @@ -186,64 +190,40 @@ { "links": [ { - "text": "JavaScript (ES6+)", - "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript", - "description": "A high-level, interpreted programming language", - "label": "JavaScript (ES6+)" + "text": "JavaScript (ES6+)" }, { - "text": "TypeScript", - "url": "https://www.typescriptlang.org/", - "description": "A typed superset of JavaScript that compiles to plain JavaScript", - "label": "TypeScript" + "text": "TypeScript" } ] }, { "links": [ { - "text": "React", - "url": "https://reactjs.org/", - "description": "A JavaScript library for building user interfaces", - "label": "React" + "text": "React" }, { - "text": "Vue.js", - "url": "https://vuejs.org/", - "description": "A progressive framework for building user interfaces", - "label": "Vue" + "text": "Vue.js" }, { - "text": "Svelte", - "url": "https://svelte.dev/", - "description": "A radical new approach to building user interfaces", - "label": "Svelte" + "text": "Svelte" } ] }, { "links": [ { - "text": "Angular", - "url": "https://angular.io/", - "description": "A platform for building mobile and desktop web applications", - "label": "Angular" + "text": "Angular" }, { - "text": "Ember.js", - "url": "https://emberjs.com/", - "description": "A framework for ambitious web developers", - "label": "Ember" + "text": "Ember.js" } ] }, { "links": [ { - "text": "jQuery", - "url": "https://jquery.com/", - "description": "A fast, small, and feature-rich JavaScript library", - "label": "jQuery" + "text": "jQuery" } ] }, @@ -253,28 +233,16 @@ { "links": [ { - "text": "HTML5", - "url": "https://developer.mozilla.org/en-US/docs/Web/HTML", - "description": "The standard markup language for documents designed to be displayed in a web browser", - "label": "HTML5" + "text": "HTML5" }, { - "text": "CSS3", - "url": "https://developer.mozilla.org/en-US/docs/Web/CSS", - "description": "A stylesheet language used to describe the presentation of a document written in HTML or XML", - "label": "CSS3" + "text": "CSS3" }, { - "text": "Sass", - "url": "https://sass-lang.com/", - "description": "A preprocessor scripting language that is interpreted or compiled into CSS", - "label": "Sass" + "text": "Sass" }, { - "text": "Less", - "url": "https://lesscss.org/", - "description": "A backwards-compatible language extension for CSS", - "label": "Less" + "text": "Less" } ] }, @@ -284,28 +252,16 @@ { "links": [ { - "text": "Tailwindcss", - "url": "https://tailwindcss.com/", - "description": "A utility-first CSS framework for rapidly building custom designs", - "label": "Tailwindcss" + "text": "Tailwindcss" }, { - "text": "Ant Design", - "url": "https://ant.design/", - "description": "A design system for enterprise-level products", - "label": "Ant" + "text": "Ant Design" }, { - "text": "Material Design", - "url": "https://material.io/design", - "description": "A design system created by Google", - "label": "Material" + "text": "Material Design" }, { - "text": "Bootstrap", - "url": "https://getbootstrap.com/", - "description": "The world's most popular front-end open source toolkit", - "label": "Bootstrap" + "text": "Bootstrap" } ] }, @@ -313,22 +269,13 @@ "text": "Bundlers:", "links": [ { - "text": "Vite", - "url": "https://vitejs.dev/", - "description": "Next Generation Frontend Tooling", - "label": "Vite" + "text": "Vite" }, { - "text": "Webpack", - "url": "https://webpack.js.org/", - "description": "A static module bundler for modern JavaScript applications", - "label": "Webpack" + "text": "Webpack" }, { - "text": "Parcel", - "url": "https://parceljs.org/", - "description": "Blazing fast, zero configuration web application bundler", - "label": "Parcel" + "text": "Parcel" } ] }, @@ -336,38 +283,23 @@ "text": "Visualization:", "links": [ { - "text": "Observable Plot", - "url": "https://observablehq.com/plot/", - "description": "A javaScript library for exploratory data visualization", - "label": "Observable" + "text": "Observable Plot" }, { - "text": "D3.js", - "url": "https://d3js.org/", - "description": "A JavaScript library for manipulating documents based on data", - "label": "D3" + "text": "D3.js" }, { - "text": "Particle.js", - "url": "https://particles.js.org/", - "description": "A lightweight JavaScript library for creating particles", - "label": "Particle" + "text": "Particle.js" }, { - "text": "Three.js", - "url": "https://threejs.org/", - "description": "A cross-browser JavaScript library and API used to create and display animated 3D computer graphics", - "label": "Three" + "text": "Three.js" } ] }, { "links": [ { - "text": "NextJS", - "url": "https://nextjs.org/", - "description": "The React Framework for Production", - "label": "NextJS" + "text": "NextJS" } ], "suffix": "(React framework)" @@ -375,10 +307,7 @@ { "links": [ { - "text": "NuxtJS", - "url": "https://nuxtjs.org/", - "description": "The Intuitive Vue Framework", - "label": "NuxtJS" + "text": "NuxtJS" } ], "suffix": "(Vue framework)" @@ -386,10 +315,7 @@ { "links": [ { - "text": "SvelteKit", - "url": "https://kit.svelte.dev/", - "description": "The fastest way to build Svelte apps", - "label": "SvelteKit" + "text": "SvelteKit" } ], "suffix": "(Svelte framework)" @@ -397,10 +323,7 @@ { "links": [ { - "text": "Gatsby", - "url": "https://www.gatsbyjs.com/", - "description": "A React-based open source framework for creating websites and apps", - "label": "Gatsby" + "text": "Gatsby" } ], "suffix": "(Static site generator)" @@ -408,10 +331,7 @@ { "links": [ { - "text": "Storybook", - "url": "https://storybook.js.org/", - "description": "A tool for building UI components and pages in isolation", - "label": "Storybook" + "text": "Storybook" } ], "suffix": "(UI component explorer)" @@ -419,10 +339,7 @@ { "links": [ { - "text": "Jest", - "url": "https://jestjs.io/", - "description": "A delightful JavaScript Testing Framework with a focus on simplicity", - "label": "Jest" + "text": "Jest" } ], "suffix": "(Testing framework)" @@ -430,10 +347,7 @@ { "links": [ { - "text": "Cypress", - "url": "https://www.cypress.io/", - "description": "Fast, easy and reliable testing for anything that runs in a browser", - "label": "Cypress" + "text": "Cypress" } ], "suffix": "(E2E testing)" @@ -441,10 +355,7 @@ { "links": [ { - "text": "Playwright", - "url": "https://playwright.dev/", - "description": "Reliable end-to-end testing for modern web apps", - "label": "Playwright" + "text": "Playwright" } ], "suffix": "(E2E testing)" @@ -452,10 +363,7 @@ { "links": [ { - "text": "Redux", - "url": "https://redux.js.org/", - "description": "A Predictable State Container for JS Apps", - "label": "Redux" + "text": "Redux" } ], "suffix": "(State management)" @@ -463,10 +371,7 @@ { "links": [ { - "text": "MobX", - "url": "https://mobx.js.org/", - "description": "Simple, scalable state management", - "label": "MobX" + "text": "MobX" } ], "suffix": "(State management)" @@ -474,10 +379,7 @@ { "links": [ { - "text": "Zustand", - "url": "https://zustand-demo.pmnd.rs/", - "description": "A small, fast and scalable bearbones state-management solution", - "label": "Zustand" + "text": "Zustand" } ], "suffix": "(State management)" @@ -485,10 +387,7 @@ { "links": [ { - "text": "Apollo Client", - "url": "https://www.apollographql.com/docs/react/", - "description": "A complete state management library for JavaScript apps", - "label": "Apollo" + "text": "Apollo Client" } ], "suffix": "(GraphQL client)" @@ -496,10 +395,7 @@ { "links": [ { - "text": "Axios", - "url": "https://axios-http.com/", - "description": "Promise based HTTP client for the browser and node.js", - "label": "Axios" + "text": "Axios" } ], "suffix": "(HTTP client)" @@ -507,10 +403,7 @@ { "links": [ { - "text": "Lodash", - "url": "https://lodash.com/", - "description": "A modern JavaScript utility library delivering modularity, performance & extras", - "label": "Lodash" + "text": "Lodash" } ], "suffix": "(Utility library)" @@ -518,10 +411,7 @@ { "links": [ { - "text": "RxJS", - "url": "https://rxjs.dev/", - "description": "A library for reactive programming using Observables", - "label": "RxJS" + "text": "RxJS" } ], "suffix": "(Reactive programming library)" @@ -529,10 +419,7 @@ { "links": [ { - "text": "WebGL", - "url": "https://www.khronos.org/webgl/", - "description": "A JavaScript API for rendering interactive 2D and 3D graphics", - "label": "WebGL" + "text": "WebGL" } ], "suffix": "(3D graphics)" @@ -547,32 +434,20 @@ { "links": [ { - "text": "Docker", - "url": "https://www.docker.com/", - "description": "A platform for developing, shipping, and running applications", - "label": "Docker" + "text": "Docker" }, { - "text": "Kubernetes", - "url": "https://kubernetes.io/", - "description": "An open-source system for automating deployment, scaling, and management of containerized applications", - "label": "Kubernetes" + "text": "Kubernetes" } ] }, { "links": [ { - "text": "Azure", - "url": "https://azure.microsoft.com/", - "description": "Microsoft's cloud computing platform", - "label": "Azure" + "text": "Azure" }, { - "text": "Google Cloud", - "url": "https://cloud.google.com/", - "description": "Google's suite of cloud computing services", - "label": "Google" + "text": "Google Cloud" } ] }, @@ -580,22 +455,13 @@ "text": "CI/CD (", "links": [ { - "text": "Jenkins", - "url": "https://www.jenkins.io/", - "description": "An open source automation server", - "label": "Jenkins" + "text": "Jenkins" }, { - "text": "GitLab CI", - "url": "https://about.gitlab.com/stages-devops-lifecycle/continuous-integration/", - "description": "GitLab's built-in Continuous Integration", - "label": "GitLab" + "text": "GitLab CI" }, { - "text": "GitHub Actions", - "url": "https://github.com/features/actions", - "description": "Automate your workflow from idea to production", - "label": "GitHub" + "text": "GitHub Actions" } ], "suffix": ")" @@ -603,10 +469,7 @@ { "links": [ { - "text": "Terraform", - "url": "https://www.terraform.io/", - "description": "An open-source infrastructure as code software tool", - "label": "Terraform" + "text": "Terraform" } ] }, @@ -614,16 +477,10 @@ "text": "Monitoring (", "links": [ { - "text": "Prometheus", - "url": "https://prometheus.io/", - "description": "An open-source monitoring system with a dimensional data model", - "label": "Prometheus" + "text": "Prometheus" }, { - "text": "Grafana", - "url": "https://grafana.com/", - "description": "An open-source platform for monitoring and observability", - "label": "Grafana" + "text": "Grafana" } ], "suffix": ")" @@ -631,16 +488,10 @@ { "links": [ { - "text": "Apache", - "url": "https://httpd.apache.org/", - "description": "A robust, commercial-grade, featureful, and freely-available source code implementation of an HTTP (Web) server", - "label": "Apache" + "text": "Apache" }, { - "text": "Nginx", - "url": "https://www.nginx.com/", - "description": "A web server that can also be used as a reverse proxy, load balancer, mail proxy and HTTP cache", - "label": "Nginx" + "text": "Nginx" } ] }, @@ -648,30 +499,21 @@ "text": "Message Queuing:", "links": [ { - "text": "Kafka", - "url": "https://kafka.apache.org/", - "description": "A distributed streaming platform", - "label": "Kafka" + "text": "Kafka" } ] }, { "links": [ { - "text": "Sonarqube", - "url": "https://www.sonarqube.org/", - "description": "An open-source platform for continuous inspection of code quality", - "label": "Sonarqube" + "text": "Sonarqube" } ] }, { "links": [ { - "text": "Sentry", - "url": "https://sentry.io/", - "description": "Application monitoring and error tracking software", - "label": "Sentry" + "text": "Sentry" } ], "suffix": "(Error tracking)" @@ -679,10 +521,7 @@ { "links": [ { - "text": "Lighthouse", - "url": "https://developers.google.com/web/tools/lighthouse", - "description": "An open-source, automated tool for improving the quality of web pages", - "label": "Lighthouse" + "text": "Lighthouse" } ], "suffix": "(Performance, accessibility, and SEO auditing)" @@ -690,10 +529,7 @@ { "links": [ { - "text": "WebPageTest", - "url": "https://www.webpagetest.org/", - "description": "Website performance and optimization test", - "label": "WebPageTest" + "text": "WebPageTest" } ], "suffix": "(Performance testing)" @@ -701,10 +537,7 @@ { "links": [ { - "text": "Puppeteer", - "url": "https://pptr.dev/", - "description": "A Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol", - "label": "Puppeteer" + "text": "Puppeteer" } ], "suffix": "(Headless browser automation)" @@ -712,10 +545,7 @@ { "links": [ { - "text": "Selenium", - "url": "https://www.selenium.dev/", - "description": "A portable framework for testing web applications", - "label": "Selenium" + "text": "Selenium" } ], "suffix": "(Browser automation)" @@ -723,10 +553,7 @@ { "links": [ { - "text": "Nx", - "url": "https://nx.dev/", - "description": "Smart, Fast and Extensible Build System", - "label": "Nx" + "text": "Nx" } ], "suffix": "(Monorepo tooling)" @@ -741,130 +568,79 @@ { "links": [ { - "text": "Node.js", - "url": "https://nodejs.org/", - "description": "A JavaScript runtime built on Chrome's V8 JavaScript engine", - "label": "Node" + "text": "Node.js" }, { - "text": "Express.js", - "url": "https://expressjs.com/", - "description": "Fast, unopinionated, minimalist web framework for Node.js", - "label": "Express" + "text": "Express.js" } ] }, { "links": [ { - "text": "PHP", - "url": "https://www.php.net/", - "description": "A popular general-purpose scripting language", - "label": "PHP" + "text": "PHP" }, { - "text": "Laravel", - "url": "https://laravel.com/", - "description": "A web application framework with expressive, elegant syntax", - "label": "Laravel" + "text": "Laravel" }, { - "text": "Symfony", - "url": "https://symfony.com/", - "description": "A set of reusable PHP components", - "label": "Symfony" + "text": "Symfony" } ] }, { "links": [ { - "text": "Java", - "url": "https://www.java.com/", - "description": "A general-purpose programming language", - "label": "Java" + "text": "Java" }, { - "text": "Spring Boot", - "url": "https://spring.io/projects/spring-boot", - "description": "An extension of the Spring framework", - "label": "Spring" + "text": "Spring Boot" }, { - "text": "Quarkus", - "url": "https://quarkus.io/", - "description": "A Kubernetes Native Java stack", - "label": "Quarkus" + "text": "Quarkus" } ] }, { "links": [ { - "text": "Python", - "url": "https://www.python.org/", - "description": "A programming language that lets you work quickly and integrate systems more effectively", - "label": "Python" + "text": "Python" }, { - "text": "Django", - "url": "https://www.djangoproject.com/", - "description": "A high-level Python Web framework", - "label": "Django" + "text": "Django" }, { - "text": "Flask", - "url": "https://flask.palletsprojects.com/", - "description": "A lightweight WSGI web application framework", - "label": "Flask" + "text": "Flask" }, { - "text": "FastAPI", - "url": "https://fastapi.tiangolo.com/", - "description": "A modern, fast (high-performance), web framework for building APIs with Python 3.6+", - "label": "FastAPI" + "text": "FastAPI" } ] }, { "links": [ { - "text": "Go", - "url": "https://golang.org/", - "description": "An open source programming language that makes it easy to build simple, reliable, and efficient software", - "label": "Go" + "text": "Go" }, { - "text": "Rust", - "url": "https://www.rust-lang.org/", - "description": "A language empowering everyone to build reliable and efficient software", - "label": "Rust" + "text": "Rust" } ] }, { "links": [ { - "text": "RESTful APIs", - "url": "https://restfulapi.net/", - "description": "Representational State Transfer", - "label": "RESTful" + "text": "RESTful APIs" }, { - "text": "GraphQL", - "url": "https://graphql.org/", - "description": "A query language for your API", - "label": "GraphQL" + "text": "GraphQL" } ] }, { "links": [ { - "text": "Hono", - "url": "https://hono.dev/", - "description": "Ultrafast web framework for the Edges", - "label": "Hono" + "text": "Hono" } ] }, @@ -872,66 +648,45 @@ "text": "Runtimes:", "links": [ { - "text": "Bun", - "url": "https://bun.sh/", - "description": "A fast all-in-one JavaScript runtime", - "label": "Bun" + "text": "Bun" }, { - "text": "Deno", - "url": "https://deno.land/", - "description": "A secure runtime for JavaScript and TypeScript", - "label": "Deno" + "text": "Deno" } ] }, { "links": [ { - "text": "NestJS (Node.js framework)", - "url": "https://nestjs.com/", - "description": "A progressive Node.js framework for building efficient and scalable server-side applications", - "label": "NestJS" + "text": "NestJS (Node.js framework)" } ] }, { "links": [ { - "text": "Fastify (Node.js framework)", - "url": "https://www.fastify.io/", - "description": "Fast and low overhead web framework, for Node.js", - "label": "Fastify" + "text": "Fastify (Node.js framework)" } ] }, { "links": [ { - "text": "TypeORM (ORM for TypeScript)", - "url": "https://typeorm.io/", - "description": "ORM for TypeScript and JavaScript", - "label": "TypeORM" + "text": "TypeORM (ORM for TypeScript)" } ] }, { "links": [ { - "text": "Prisma (Database toolkit)", - "url": "https://www.prisma.io/", - "description": "Next-generation Node.js and TypeScript ORM", - "label": "Prisma" + "text": "Prisma (Database toolkit)" } ] }, { "links": [ { - "text": "Knex.js (SQL query builder)", - "url": "https://knexjs.org/", - "description": "A SQL query builder for JavaScript", - "label": "Knex" + "text": "Knex.js (SQL query builder)" } ] } @@ -946,16 +701,10 @@ "text": "SQL (", "links": [ { - "text": "MySQL", - "url": "https://www.mysql.com/", - "description": "The world's most popular open source database", - "label": "MySQL" + "text": "MySQL" }, { - "text": "PostgreSQL", - "url": "https://www.postgresql.org/", - "description": "The world's most advanced open source database", - "label": "PostgreSQL" + "text": "PostgreSQL" } ], "suffix": ")" @@ -964,22 +713,13 @@ "text": "NoSQL (", "links": [ { - "text": "MongoDB", - "url": "https://www.mongodb.com/", - "description": "A general purpose, document-based, distributed database", - "label": "MongoDB" + "text": "MongoDB" }, { - "text": "Cassandra", - "url": "https://cassandra.apache.org/", - "description": "A free and open-source, distributed, wide column store, NoSQL database management system", - "label": "Cassandra" + "text": "Cassandra" }, { - "text": "Redis", - "url": "https://redis.io/", - "description": "An open source, in-memory data structure store", - "label": "Redis" + "text": "Redis" } ], "suffix": ")" @@ -987,10 +727,7 @@ { "links": [ { - "text": "Elasticsearch", - "url": "https://www.elastic.co/elasticsearch/", - "description": "A distributed, RESTful search and analytics engine", - "label": "Elasticsearch" + "text": "Elasticsearch" } ] }, @@ -1008,16 +745,10 @@ "text": "Desktop Apps:", "links": [ { - "text": "Electron", - "url": "https://www.electronjs.org/", - "description": "Build cross-platform desktop apps with JavaScript, HTML, and CSS", - "label": "Electron" + "text": "Electron" }, { - "text": "Tauri", - "url": "https://tauri.app/", - "description": "Build smaller, faster, and more secure desktop applications with a web frontend", - "label": "Tauri" + "text": "Tauri" } ] }, @@ -1025,32 +756,20 @@ "text": "Mobile Apps:", "links": [ { - "text": "React Native", - "url": "https://reactnative.dev/", - "description": "A framework for building native apps using React", - "label": "React" + "text": "React Native" }, { - "text": "Flutter", - "url": "https://flutter.dev/", - "description": "Google's UI toolkit for building natively compiled applications", - "label": "Flutter" + "text": "Flutter" }, { - "text": "Cordova", - "url": "https://cordova.apache.org/", - "description": "Mobile apps with HTML, CSS & JS", - "label": "Cordova" + "text": "Cordova" } ] }, { "links": [ { - "text": "Progressive Web Apps (PWAs)", - "url": "https://web.dev/progressive-web-apps/", - "description": "Websites that took all the right vitamins", - "label": "Progressive" + "text": "Progressive Web Apps (PWAs)" } ] } @@ -1064,16 +783,10 @@ { "links": [ { - "text": "Accessibility (a11y): WCAG", - "url": "https://www.w3.org/WAI/standards-guidelines/wcag/", - "description": "Web Content Accessibility Guidelines", - "label": "Accessibility" + "text": "Accessibility (a11y): WCAG" }, { - "text": "ARIA", - "url": "https://www.w3.org/WAI/standards-guidelines/aria/", - "description": "Accessible Rich Internet Applications", - "label": "ARIA" + "text": "ARIA" } ] }, @@ -1081,22 +794,13 @@ "text": "Internationalization (i18n):", "links": [ { - "text": "i18next", - "url": "https://www.i18next.com/", - "description": "Internationalization framework", - "label": "i18next" + "text": "i18next" }, { - "text": "Weblate", - "url": "https://weblate.org/", - "description": "Web-based continuous localization system", - "label": "Weblate" + "text": "Weblate" }, { - "text": "Localize", - "url": "https://localize.co/", - "description": "Translation management platform", - "label": "Localize" + "text": "Localize" } ] }, @@ -1109,10 +813,7 @@ { "links": [ { - "text": "Web Security (OWASP)", - "url": "https://owasp.org/", - "description": "Open Web Application Security Project", - "label": "Web" + "text": "Web Security (OWASP)" } ] } @@ -1126,40 +827,28 @@ { "links": [ { - "text": "Umami", - "url": "https://umami.is/", - "description": "Simple, fast, privacy-focused alternative to Google Analytics", - "label": "Umami" + "text": "Umami" } ] }, { "links": [ { - "text": "Google Analytics", - "url": "https://developers.google.com/analytics/", - "description": "Web analytics service offered by Google", - "label": "Google" + "text": "Google Analytics" } ] }, { "links": [ { - "text": "Amplitude", - "url": "https://amplitude.com/", - "description": "Product analytics platform", - "label": "Amplitude" + "text": "Amplitude" } ] }, { "links": [ { - "text": "Hotjar", - "url": "https://www.hotjar.com/", - "description": "Behavior analytics and user feedback platform", - "label": "Hotjar" + "text": "Hotjar" } ] } diff --git a/src/assets/waving-hand.svg b/src/assets/waving-hand.svg new file mode 100644 index 0000000..b8596a1 --- /dev/null +++ b/src/assets/waving-hand.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Academia.pug b/src/components/Academia.pug index 48d96f2..4240a5b 100644 --- a/src/components/Academia.pug +++ b/src/components/Academia.pug @@ -10,7 +10,7 @@ section#academia.bg-nls-black.text-white .mb-12 .mb-8.max-w-prose.prose(class="lg:prose-xl") each paragraph, i in academia.intro - - const additionalClasses = i !== 0 ? "indent-3" : ""; + - const additionalClasses = i !== 0 ? "indent-3" : "mb-2 font-serif leading-tight sm:text-xl text-lg"; p(class=additionalClasses)= paragraph // endregion @@ -37,8 +37,10 @@ section#academia.bg-nls-black.text-white // region Skills +Title("h2")= academia.sectionTitles.expertise - p.mb-8.max-w-prose.prose(class="lg:prose-xl") - | #{academia.expertise.intro} + .mb-8.max-w-prose.prose(class="lg:prose-xl") + each paragraph, i in academia.expertise.intro + - const additionalClasses = i !== 0 ? "indent-3" : "mb-2 font-serif leading-tight sm:text-xl text-md"; + p(class=additionalClasses)= paragraph // endregion // region Expertise diff --git a/src/components/Landingpage.pug b/src/components/Landingpage.pug index ab418bb..49a6e01 100644 --- a/src/components/Landingpage.pug +++ b/src/components/Landingpage.pug @@ -1,27 +1,31 @@ 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 - h2.text-xl.opacity-80(class="sm:text-2xl", itemprop="name")= title.name - h1.text-md.opacity-60(class="sm:text-lg", itemprop="jobTitle") - | #{title.jobTitle[0]} - | - wbr - | - | & #{title.jobTitle[1]} - h2.text-2xl.mt-8.opacity-90.group(class="sm:text-5xl sm:mt-16", itemprop="email") - a( - onclick="umami.track('email clicked', { position: 'title', visitDuration: getVisitDuration() })", - onmouseover="umami.track('email hovered', { position: 'title', visitDuration: getVisitDuration() })", - href=footer.emailLink, - rel="noopener noreferrer", - itemprop="email" - ) - span.whitespace-nowrap.items-center.opacity-10.transition(class="group-hover:opacity-100") - span 👋  - span(class="group-hover:underline-2") #{title.email[0]} - span.opacity-20 – - span(class="group-hover:opacity-20") #{title.email[1]} - span.opacity-20 – - span(class="group-hover:opacity-20") #{title.email[2]} + .teaser.p-8.flex.flex-col.items-center.justify-center(class="sm:p-20") + div.max-w-3xl.group.mb-8.relative(class="w-4/5 min-h-[90vh]") + a.absolute.inset-0.z-20.block( + onclick="umami.track('email clicked', { position: 'title', visitDuration: getVisitDuration() })", + onmouseover="umami.track('email hovered', { position: 'title', visitDuration: getVisitDuration() })", + href=footer.emailLink, + rel="noopener noreferrer", + itemprop="email" + ) + + img.z-0.left-0.top-0.right-0.bottom-20.absolute.w-full.opacity-0.transition(class="group-hover:opacity-80", src=landingpage.emojiSvg, type="image/svg+xml") + + object.w-full.absolute.z-10(class="group-hover:opacity-90", data=landingpage.logoSvg, type="image/svg+xml") + + .absolute.bottom-0.left-0.right-0 + .bottom-0.text-center.max-w-3xl.center.py-8 + h2.text-xl.font-semibold.opacity-80(class="sm:text-2xl", itemprop="name")= landingpage.name + h1.text-md.opacity-80(class="sm:text-lg", itemprop="jobTitle") + | #{landingpage.jobTitle[0]} + | + wbr + | + | & #{landingpage.jobTitle[1]} + h2.text-2xl.mt-8(class="sm:text-5xl sm:mt-16", itemprop="email") + .whitespace-nowrap.items-center.transition(class="group-hover:opacity-100") + span(class="group-hover:opacity-100") #{landingpage.email[0]} + span.opacity-20 – + span.opacity-90(class="group-hover:opacity-20") #{landingpage.email[1]} + span.opacity-20 – + span.opacity-90(class="group-hover:opacity-20") #{landingpage.email[2]} diff --git a/src/components/Title.pug b/src/components/Title.pug index 13c2a4c..442677b 100644 --- a/src/components/Title.pug +++ b/src/components/Title.pug @@ -1,7 +1,7 @@ mixin Title(tag) case tag when "h2" - h2.font-bold.font-serif.text-xl.mb-4(class="sm:text-2xl w-5/6") + h2.font-bold.font-serif.text-xl.mb-2(class="sm:text-2xl w-5/6") block when "h3" h3.font-bold.font-serif.text-xl.mb-4(class="sm:text-2xl w-5/6")