├── .gitignore ├── css-day ├── assets │ ├── .DS_Store │ ├── img │ │ ├── adam.jpg │ │ ├── amit.jpg │ │ ├── ana.jpg │ │ ├── brad.jpg │ │ ├── cyd.jpg │ │ ├── ian.jpg │ │ ├── john.jpg │ │ ├── tim.jpg │ │ ├── .DS_Store │ │ ├── ahmad.jpg │ │ ├── bramus.jpg │ │ ├── brecht.jpg │ │ ├── bruce.jpg │ │ ├── chris.jpg │ │ ├── hidde.jpg │ │ ├── miriam.jpg │ │ ├── rachel.jpg │ │ └── stephen.jpg │ ├── script.js │ ├── hover-animation.js │ ├── view-transitions.js │ └── gesture.js └── speakers │ ├── template.html │ ├── bramus-van-damme.html │ ├── bruce-lawson.html │ ├── rachel-andrew.html │ ├── chris-coyier.html │ ├── tim-nguyen.html │ ├── ian-frost.html │ ├── ahmad-shadeed.html │ ├── brad-frost.html │ ├── ana-rodrigues.html │ ├── amit-sheen.html │ ├── john-allsopp.html │ ├── cyd-stumpel.html │ ├── stephen-hay.html │ ├── miriam-suzanne.html │ ├── hidde-de-vries.html │ ├── brecht-de-ruyte.html │ └── adam-argyle.html ├── wey-wey-web ├── assets │ ├── .DS_Store │ ├── img │ │ ├── .DS_Store │ │ └── logo.png │ ├── fonts │ │ ├── Chillax-Variable.woff │ │ ├── Chillax-Variable.woff2 │ │ ├── Tabular-Variable.woff │ │ └── Tabular-Variable.woff2 │ ├── typography.css │ ├── script.js │ ├── speaker-overview.css │ ├── speaker-detail.css │ ├── view-transitions.css │ └── style.css ├── speakers │ ├── template.html │ ├── raff-di-meo │ │ └── index.html │ ├── orcdev │ │ └── index.html │ ├── xenia-melikhova │ │ └── index.html │ ├── kinga-magyar │ │ └── index.html │ ├── ignacio-chicharro │ │ └── index.html │ ├── alessandra-canella │ │ └── index.html │ ├── andreas-moller │ │ └── index.html │ ├── dima-malyshenko │ │ └── index.html │ ├── steve-upton │ │ └── index.html │ ├── guillaume-vaslin │ │ └── index.html │ ├── candi-williams │ │ └── index.html │ ├── luke-hay │ │ └── index.html │ ├── jenil-gogari │ │ └── index.html │ ├── shelley-vohr │ │ └── index.html │ ├── soumaya-erradi │ │ └── index.html │ ├── salma-alam-naylor │ │ └── index.html │ ├── advait-sarkar │ │ └── index.html │ ├── piccia-neri │ │ └── index.html │ ├── cyd-stumpel │ │ └── index.html │ └── tamas-kokeny │ │ └── index.html └── template.html ├── beyond-tellerrand ├── assets │ ├── .DS_Store │ ├── img │ │ ├── .DS_Store │ │ ├── bieb.jpeg │ │ ├── crowd.jpg │ │ ├── robot.jpg │ │ ├── capitol-theater.jpg │ │ └── wilhelmmarxhaus.jpg │ ├── script.js │ ├── view-transitions.js │ └── view-transition.css ├── speakers │ ├── template.html │ ├── vitaly-friedman.html │ ├── sharon-steed.html │ ├── cyd-stumpel.html │ ├── jason-pamental.html │ ├── brendan-dawes.html │ ├── paula-zuccotti.html │ └── amber-case.html └── locations │ └── index.html ├── .prettierrc ├── .editorconfig ├── .eslintrc.json ├── README.md ├── index.js ├── package.json ├── style.css ├── about └── index.html └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | node_modules 3 | DS_Store -------------------------------------------------------------------------------- /css-day/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/.DS_Store -------------------------------------------------------------------------------- /css-day/assets/img/adam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/adam.jpg -------------------------------------------------------------------------------- /css-day/assets/img/amit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/amit.jpg -------------------------------------------------------------------------------- /css-day/assets/img/ana.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/ana.jpg -------------------------------------------------------------------------------- /css-day/assets/img/brad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/brad.jpg -------------------------------------------------------------------------------- /css-day/assets/img/cyd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/cyd.jpg -------------------------------------------------------------------------------- /css-day/assets/img/ian.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/ian.jpg -------------------------------------------------------------------------------- /css-day/assets/img/john.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/john.jpg -------------------------------------------------------------------------------- /css-day/assets/img/tim.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/tim.jpg -------------------------------------------------------------------------------- /css-day/assets/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/.DS_Store -------------------------------------------------------------------------------- /css-day/assets/img/ahmad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/ahmad.jpg -------------------------------------------------------------------------------- /css-day/assets/img/bramus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/bramus.jpg -------------------------------------------------------------------------------- /css-day/assets/img/brecht.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/brecht.jpg -------------------------------------------------------------------------------- /css-day/assets/img/bruce.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/bruce.jpg -------------------------------------------------------------------------------- /css-day/assets/img/chris.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/chris.jpg -------------------------------------------------------------------------------- /css-day/assets/img/hidde.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/hidde.jpg -------------------------------------------------------------------------------- /css-day/assets/img/miriam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/miriam.jpg -------------------------------------------------------------------------------- /css-day/assets/img/rachel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/rachel.jpg -------------------------------------------------------------------------------- /css-day/assets/img/stephen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/css-day/assets/img/stephen.jpg -------------------------------------------------------------------------------- /wey-wey-web/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/wey-wey-web/assets/.DS_Store -------------------------------------------------------------------------------- /wey-wey-web/assets/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/wey-wey-web/assets/img/.DS_Store -------------------------------------------------------------------------------- /wey-wey-web/assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/wey-wey-web/assets/img/logo.png -------------------------------------------------------------------------------- /beyond-tellerrand/assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/beyond-tellerrand/assets/.DS_Store -------------------------------------------------------------------------------- /beyond-tellerrand/assets/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/beyond-tellerrand/assets/img/.DS_Store -------------------------------------------------------------------------------- /beyond-tellerrand/assets/img/bieb.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/beyond-tellerrand/assets/img/bieb.jpeg -------------------------------------------------------------------------------- /beyond-tellerrand/assets/img/crowd.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/beyond-tellerrand/assets/img/crowd.jpg -------------------------------------------------------------------------------- /beyond-tellerrand/assets/img/robot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/beyond-tellerrand/assets/img/robot.jpg -------------------------------------------------------------------------------- /wey-wey-web/assets/fonts/Chillax-Variable.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/wey-wey-web/assets/fonts/Chillax-Variable.woff -------------------------------------------------------------------------------- /wey-wey-web/assets/fonts/Chillax-Variable.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/wey-wey-web/assets/fonts/Chillax-Variable.woff2 -------------------------------------------------------------------------------- /wey-wey-web/assets/fonts/Tabular-Variable.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/wey-wey-web/assets/fonts/Tabular-Variable.woff -------------------------------------------------------------------------------- /wey-wey-web/assets/fonts/Tabular-Variable.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/wey-wey-web/assets/fonts/Tabular-Variable.woff2 -------------------------------------------------------------------------------- /beyond-tellerrand/assets/img/capitol-theater.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/beyond-tellerrand/assets/img/capitol-theater.jpg -------------------------------------------------------------------------------- /beyond-tellerrand/assets/img/wilhelmmarxhaus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cydstumpel/view-transitions/HEAD/beyond-tellerrand/assets/img/wilhelmmarxhaus.jpg -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": false, 3 | "tabWidth": 2, 4 | "printWidth": 80, 5 | "singleQuote": true, 6 | "trailingComma": "es5", 7 | "semi": true, 8 | "endOfLine": "lf" 9 | } 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | insert_final_newline = true 7 | indent_style = space 8 | indent_size = 2 9 | trim_trailing_whitespace = true 10 | 11 | [*.{js,jsx,ts,tsx}] 12 | indent_size = 2 13 | 14 | [*.{html,css,scss}] 15 | indent_size = 2 -------------------------------------------------------------------------------- /wey-wey-web/assets/typography.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: Chillax; 3 | src: url('./fonts/Chillax-Variable.woff2') format(woff2); 4 | font-weight: 200 900; 5 | font-style: normal; 6 | font-display: swap; 7 | } 8 | 9 | 10 | @font-face { 11 | font-family: Tabular; 12 | src: url('./fonts/Tabular-Variable.woff2') format(woff2); 13 | font-weight: 200 900; 14 | font-style: normal; 15 | font-display: swap; 16 | } 17 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "extends": "eslint:recommended", 7 | "parserOptions": { 8 | "ecmaVersion": "latest", 9 | "sourceType": "module" 10 | }, 11 | "rules": { 12 | "indent": ["error", 2], 13 | "linebreak-style": ["error", "unix"], 14 | "quotes": ["warn", "single"], 15 | "semi": ["warn", "never"], 16 | "no-unused-vars": ["warn"] 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Repo for my view transition live coding at conferences 2 | 3 | ## Beyond Tellerrand 4 | [https://cydstumpel.github.io/view-transitions/beyond-tellerrand/](https://cydstumpel.github.io/view-transitions/beyond-tellerrand/) 5 | ## CSS Day 6 | [https://cydstumpel.github.io/view-transitions/css-day/](https://cydstumpel.github.io/view-transitions/css-day/) 7 | ## Wey Wey Web 8 | [https://cydstumpel.github.io/view-transitions/wey-wey-web/](https://cydstumpel.github.io/view-transitions/wey-wey-web/) 9 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const cooler = document.getElementById('switch'); 2 | const coolerChecked = localStorage.getItem('cooler'); 3 | console.log(coolerChecked); 4 | 5 | if (coolerChecked == 'true') { 6 | console.log('coolerChecked'); 7 | cooler.checked = true; 8 | document.body.classList.add('cooler'); 9 | } 10 | 11 | cooler.addEventListener('change', () => { 12 | localStorage.setItem('cooler', cooler.checked); 13 | console.log(localStorage.getItem('cooler')); 14 | 15 | document.body.classList.toggle('cooler', cooler.checked); 16 | }); 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "view-transitions", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "format": "prettier --write .", 9 | "lint": "eslint .", 10 | "lint:fix": "eslint . --fix", 11 | "generate": "node generate-speaker-pages-www.js" 12 | }, 13 | "devDependencies": { 14 | "eslint": "^8.56.0", 15 | "prettier": "^3.2.5" 16 | }, 17 | "keywords": [], 18 | "author": "", 19 | "license": "ISC", 20 | "dependencies": {} 21 | } 22 | -------------------------------------------------------------------------------- /beyond-tellerrand/assets/script.js: -------------------------------------------------------------------------------- 1 | const speakers = document.querySelectorAll('.speaker-card a') 2 | 3 | speakers.forEach((speaker) => { 4 | speaker.addEventListener('click', () => { 5 | const card = speaker.closest('.speaker-card') 6 | const cardImage = card.querySelector('img') 7 | cardImage.style.viewTransitionClass = 'active-speaker' 8 | }) 9 | }) 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | // Not related to view transitions, just making a navigation trigger: 18 | const navMenu = document.querySelector('.navigation') 19 | const navigationTrigger = document.querySelector('.navigation button') 20 | 21 | if (navigationTrigger) { 22 | navigationTrigger.addEventListener('click', () => { 23 | navMenu.classList.toggle('is-active') 24 | }) 25 | } 26 | -------------------------------------------------------------------------------- /css-day/assets/script.js: -------------------------------------------------------------------------------- 1 | // const speakers = document.querySelectorAll('.speaker-card a') 2 | 3 | // speakers.forEach((speaker) => { 4 | // speaker.addEventListener('click', () => { 5 | // const card = speaker.closest('.speaker-card') 6 | // const cardImage = card.querySelector('img') 7 | // cardImage.style.viewTransitionClass = 'active-speaker' 8 | // }) 9 | // }) 10 | 11 | // Not related to view transitions, just making a navigation trigger: 12 | // const navMenu = document.querySelector('.navigation') 13 | // const navigationTrigger = document.querySelector('.navigation button') 14 | 15 | // if (navigationTrigger) { 16 | // navigationTrigger.addEventListener('click', () => { 17 | // navMenu.classList.toggle('is-active') 18 | // }) 19 | // } 20 | -------------------------------------------------------------------------------- /wey-wey-web/assets/script.js: -------------------------------------------------------------------------------- 1 | // const speakers = document.querySelectorAll('.speaker-card a') 2 | 3 | // speakers.forEach((speaker) => { 4 | // speaker.addEventListener('click', () => { 5 | // const card = speaker.closest('.speaker-card') 6 | // const cardImage = card.querySelector('img') 7 | // cardImage.style.viewTransitionClass = 'active-speaker' 8 | // }) 9 | // }) 10 | 11 | // Not related to view transitions, just making a navigation trigger: 12 | // const navMenu = document.querySelector('.navigation') 13 | // const navigationTrigger = document.querySelector('.navigation button') 14 | 15 | // if (navigationTrigger) { 16 | // navigationTrigger.addEventListener('click', () => { 17 | // navMenu.classList.toggle('is-active') 18 | // }) 19 | // } 20 | -------------------------------------------------------------------------------- /css-day/assets/hover-animation.js: -------------------------------------------------------------------------------- 1 | const speakerCards = document.querySelectorAll('.speaker-card') 2 | 3 | if (speakerCards) { 4 | const title = document.querySelector('.speakers .title') 5 | const talkTitle = document.querySelector('.speakers .talk-title') 6 | 7 | speakerCards.forEach((speaker) => { 8 | speaker.addEventListener('mouseenter', () => { 9 | const name = speaker.dataset.name 10 | const talkTitleText = speaker.dataset.talkTitle 11 | 12 | if (title.textContent.includes(name)) { 13 | return 14 | } 15 | if (document.startViewTransition) { 16 | document.startViewTransition({ 17 | update: () => { 18 | title.textContent = name 19 | talkTitle.textContent = talkTitleText 20 | }, 21 | types: ['title-animation'] 22 | }) 23 | } else { 24 | title.textContent = name 25 | talkTitle.textContent = talkTitleText 26 | } 27 | }) 28 | }) 29 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* view transitions */ 2 | @view-transition { 3 | navigation: auto; 4 | } 5 | 6 | nav, 7 | section { 8 | padding: 1rem; 9 | } 10 | 11 | .home { 12 | background-color: hotpink; 13 | } 14 | 15 | .about { 16 | background-color: lightblue; 17 | } 18 | 19 | .switch-to-view-timeline { 20 | padding: 1rem; 21 | } 22 | 23 | html:has(.cooler) { 24 | /* Apply the custom animation to the old and new page states */ 25 | &::view-transition-old(root) { 26 | animation: 0.4s ease-in both move-out; 27 | } 28 | 29 | &::view-transition-new(root) { 30 | animation: 0.4s ease-in both move-in; 31 | } 32 | } 33 | 34 | /* Create a custom animation */ 35 | @keyframes move-out { 36 | from { 37 | transform: translateY(0%); 38 | } 39 | 40 | to { 41 | transform: translateY(-100%); 42 | } 43 | } 44 | 45 | @keyframes move-in { 46 | from { 47 | transform: translateY(100%); 48 | } 49 | 50 | to { 51 | transform: translateY(0%); 52 | } 53 | } 54 | 55 | -------------------------------------------------------------------------------- /about/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | About | View transitions 8 | 9 | 13 | 14 | 15 |
16 | 17 | 18 |
19 | 23 |
24 |

About View transitions

25 |

26 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. 27 |

28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Home | View transitions 8 | 9 | 13 | 14 | 15 |
16 | 17 | 18 |
19 | 23 |
24 |

View transitions

25 |

26 | Here's a super simple example of view transitions, try clicking the 27 | about link. 28 |

29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /wey-wey-web/assets/speaker-overview.css: -------------------------------------------------------------------------------- 1 | .speaker-overview { 2 | display: grid; 3 | grid-template-columns: repeat(12, 1fr); 4 | gap: var(--padding); 5 | padding: var(--padding); 6 | max-width: 1600px; 7 | margin: 0 auto; 8 | 9 | .text { 10 | grid-column: 1 / -1; 11 | } 12 | 13 | .speaker-overview-grid { 14 | grid-column: 1 / -1; 15 | display: grid; 16 | grid-template-columns: subgrid; 17 | gap: var(--padding); 18 | } 19 | 20 | .speaker-card { 21 | --delay: 0.04s; 22 | @supports (animation-delay: calc(sibling-index() * 0.04s)) { 23 | --delay: calc(sibling-index() * 0.04s); 24 | } 25 | position: relative; 26 | grid-column: span 3; 27 | display: flex; 28 | flex-direction: column; 29 | gap: var(--padding-small); 30 | 31 | @media (prefers-reduced-motion: no-preference) { 32 | animation: stagger-in 0.4s var(--delay) var(--ease) both; 33 | 34 | } 35 | 36 | a { 37 | text-decoration: none; 38 | color: inherit; 39 | 40 | &::before { 41 | content: ''; 42 | position: absolute; 43 | inset: 0; 44 | } 45 | } 46 | 47 | img { 48 | width: 100%; 49 | aspect-ratio: 1; 50 | object-fit: cover; 51 | } 52 | } 53 | } 54 | 55 | @keyframes stagger-in { 56 | from { 57 | transform: translateY(100%); 58 | } 59 | 60 | to { 61 | transform: translateY(0); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /wey-wey-web/assets/speaker-detail.css: -------------------------------------------------------------------------------- 1 | .speaker-header { 2 | display: grid; 3 | align-items: center; 4 | grid-template-columns: repeat(12, 1fr); 5 | gap: var(--padding); 6 | padding: var(--padding); 7 | max-width: 1600px; 8 | margin: 0 auto; 9 | .speaker-header-image { 10 | grid-column: 1 / span 5; 11 | img { 12 | display: block; 13 | aspect-ratio: 1; 14 | width: 100%; 15 | object-fit: cover; 16 | border-radius: 50%; 17 | } 18 | } 19 | .speaker-header-text { 20 | grid-column: span 6; 21 | } 22 | } 23 | 24 | .speaker-events { 25 | display: grid; 26 | grid-template-columns: repeat(12, 1fr); 27 | gap: var(--padding); 28 | padding: var(--padding); 29 | max-width: 1600px; 30 | margin: 0 auto; 31 | .large-heading { 32 | grid-column: 3 / span 8; 33 | } 34 | .speaker-events-list { 35 | grid-column: 3 / span 8; 36 | list-style-type: ''; 37 | padding: 0; 38 | display: flex; 39 | flex-direction: column; 40 | gap: var(--padding); 41 | } 42 | .event { 43 | grid-column: span 4; 44 | border-radius: var(--padding); 45 | padding: var(--padding); 46 | &.event-talk { 47 | background-color: var(--accent-color-main); 48 | } 49 | &.event-workshop { 50 | background-color: var(--accent-color-secondary); 51 | color: var(--background-color); 52 | } 53 | .labels { 54 | display: flex; 55 | flex-wrap: wrap; 56 | gap: 0.25rem; 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | { speaker name } - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | { speaker name } 21 |
22 |
23 |

24 | { speaker name } 25 |

26 |

{ speaker title }

27 |

28 | { speaker bio } 29 |

30 |
31 |
32 |
33 |

Events

34 | 37 |
38 |
39 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /css-day/assets/view-transitions.js: -------------------------------------------------------------------------------- 1 | const determineTransitionType = (from, to) => { 2 | // Only run this if an active view transition exists 3 | const currentUrl = from?.url ? new URL(from.url) : null 4 | const targetUrl = new URL(to.url) 5 | // get paths: 6 | let currentPath = cleanUpURL(currentUrl.pathname) 7 | let targetPath = cleanUpURL(targetUrl.pathname) 8 | 9 | if (isOverview(currentPath) && isSpeaker(targetPath)) { 10 | return 'overview-to-speaker' 11 | } else if (isSpeaker(currentPath) && isOverview(targetPath)) { 12 | currentPath = currentPath.replace('/css-day/speakers/', '') 13 | return 'speaker-to-overview' 14 | } else { 15 | return 'normal' 16 | } 17 | } 18 | 19 | const isOverview = (path) => { 20 | return path === 'css-day' 21 | } 22 | 23 | const isSpeaker = (path) => { 24 | return path.includes('speakers') 25 | } 26 | 27 | window.addEventListener('pagereveal', async (e) => { 28 | if (e.viewTransition) { 29 | let transitionType = 'normal' 30 | // check if navigation activation is defined and use it to get from- and to url: 31 | if (navigation?.activation?.from && navigation?.activation?.entry) { 32 | // from and to url is saved in transitionType 33 | transitionType = determineTransitionType(navigation.activation.from, navigation.activation.entry) 34 | } 35 | // set view transition type, default is 'normal' 36 | e.viewTransition.types.add(transitionType) 37 | console.log(transitionType) 38 | 39 | // Cleanup after transition ran 40 | await e.viewTransition.finished 41 | } 42 | }) 43 | 44 | 45 | 46 | const cleanUpURL = (path) => { 47 | path = path.replaceAll('/', '') 48 | path = path.replaceAll('/index.html', '').replaceAll('.html', '').replace('view-transitions', '') 49 | return path 50 | } -------------------------------------------------------------------------------- /wey-wey-web/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Wey Wey Web 9 | 10 | 11 | 12 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | Wey Wey Web 21 |
22 |
23 |
24 |
25 |

26 | Wey Wey Web 27 |

28 |

29 | 17-18 November 2025 | Málaga - ES 30 |

31 |
32 |
33 | { speakers } 34 |
35 |
36 |
37 |
38 |

39 | 17 November 2025 40 |

41 |
42 |
43 | { schedule-1 } 44 |
45 |
46 |

47 | 18 November 2025 48 |

49 |
50 |
51 | { schedule-2 } 52 |
53 |
54 |
55 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /beyond-tellerrand/assets/view-transitions.js: -------------------------------------------------------------------------------- 1 | const determineTransitionType = (from, to) => { 2 | // Only run this if an active view transition exists 3 | const currentUrl = from?.url ? new URL(from.url) : null 4 | const targetUrl = new URL(to.url) 5 | // get paths: 6 | let currentPath = currentUrl.pathname 7 | let targetPath = targetUrl.pathname 8 | // remove index.html and .html from paths 9 | currentPath = currentPath.replace('/index.html', '').replace('.html', '').replace('/view-transitions', '') 10 | targetPath = targetPath.replace('/index.html', '').replace('.html', '').replace('/view-transitions', '') 11 | 12 | if (isOverview(currentPath) && isSpeaker(targetPath)) { 13 | return {name: 'overview-to-speaker'} 14 | } else if (isSpeaker(currentPath) && isOverview(targetPath)) { 15 | currentPath = currentPath.replace('/beyond-tellerrand/speakers/', '') 16 | return {name: 'speaker-to-overview', currentPath} 17 | } else if (isSpeaker(currentPath) && isSpeaker(targetPath)) { 18 | return {name: 'speaker-to-speaker', currentPath, targetPath} 19 | } else { 20 | return {name: 'normal'} 21 | } 22 | } 23 | 24 | window.addEventListener('pagereveal', async (e) => { 25 | if (e.viewTransition) { 26 | // Determine animation type based on the old/new history entries 27 | let transitionType = 'normal' 28 | let activeSpeaker = null 29 | // eslint-disable-next-line no-undef 30 | if (navigation?.activation?.from && navigation?.activation?.entry) { 31 | // eslint-disable-next-line no-undef 32 | transitionType = determineTransitionType(navigation.activation.from, navigation.activation.entry) 33 | if (transitionType.name === 'speaker-to-overview') { 34 | activeSpeaker = document.querySelector(`.speaker-card a[href*="${transitionType.currentPath}"]`) 35 | if (activeSpeaker) { 36 | activeSpeaker = activeSpeaker.closest('.speaker-card').querySelector('img') 37 | activeSpeaker.style.viewTransitionClass = 'active-speaker' 38 | } 39 | } 40 | } 41 | e.viewTransition.types.add(transitionType.name) 42 | 43 | // Cleanup after transition ran 44 | await e.viewTransition.finished 45 | if (activeSpeaker) { 46 | activeSpeaker.style.viewTransitionClass = '' 47 | } 48 | } 49 | }) 50 | 51 | 52 | const isOverview = (path) => { 53 | return path === '/beyond-tellerrand/' || path === '/beyond-tellerrand' 54 | } 55 | 56 | const isSpeaker = (path) => { 57 | return path.includes('/beyond-tellerrand/speakers/') 58 | } 59 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/raff-di-meo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Raff Di Meo - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Raff Di Meo 21 |
22 |
23 |

24 | Raff Di Meo 25 |

26 |

Senior Principal UX Designer at Blue Yonder

27 |

28 | 29 |

30 |
31 |
32 |
33 |

Events

34 | 55 |
56 |
57 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /wey-wey-web/assets/view-transitions.css: -------------------------------------------------------------------------------- 1 | @view-transition { 2 | navigation: auto; 3 | } 4 | 5 | .speaker-card { 6 | img { 7 | view-transition-class: speaker-image; 8 | @media (prefers-reduced-motion: no-preference) { 9 | view-transition-name: var(--vt); 10 | } 11 | } 12 | } 13 | 14 | .speaker-header { 15 | img { 16 | view-transition-class: speaker-image; 17 | @media (prefers-reduced-motion: no-preference) { 18 | view-transition-name: var(--vt); 19 | } 20 | } 21 | } 22 | 23 | html { 24 | &::view-transition { 25 | animation-duration: 0.1s; 26 | animation-fill-mode: both; 27 | animation-timing-function: ease-in; 28 | } 29 | &::view-transition-old(root) { 30 | animation-duration: 0.1s; 31 | } 32 | &::view-transition-new(root) { 33 | animation-delay: 0.2s; 34 | } 35 | &::view-transition-group(.speaker-image) { 36 | animation-duration: 0.6s; 37 | animation-delay: 0.2s; 38 | } 39 | &.index { 40 | &::view-transition-old(.speaker-image) { 41 | opacity: 0; 42 | animation: none; 43 | } 44 | &::view-transition-new(.speaker-image) { 45 | opacity: 1; 46 | animation-name: clip-out; 47 | animation-duration: 0.6s; 48 | animation-delay: 0s; 49 | overflow: hidden; 50 | } 51 | &::view-transition-group(.speaker-image) { 52 | animation-duration: 0.6s; 53 | animation-delay: 0s; 54 | } 55 | } 56 | &.speaker-detail { 57 | &::view-transition-old(.speaker-image) { 58 | opacity: 1; 59 | animation-name: clip-in; 60 | animation-duration: 0.6s; 61 | animation-delay: 0s; 62 | overflow: hidden; 63 | } 64 | &::view-transition-new(.speaker-image) { 65 | opacity: 0; 66 | animation: none; 67 | } 68 | } 69 | &::view-transition-old(.speaker-image):only-child { 70 | opacity: 1; 71 | animation-name: scale-down; 72 | animation-duration: 0.4s; 73 | animation-delay: 0s; 74 | 75 | } 76 | &::view-transition-new(.speaker-image):only-child { 77 | opacity: 1; 78 | animation-name: scale-up; 79 | animation-duration: 0.4s; 80 | animation-delay: 0.1s; 81 | } 82 | } 83 | 84 | 85 | @keyframes scale-down { 86 | to { 87 | scale: 0; 88 | opacity: 0; 89 | } 90 | } 91 | @keyframes scale-up { 92 | from { 93 | scale: 0; 94 | } 95 | } 96 | 97 | @keyframes clip-in { 98 | from { 99 | border-radius: 0%; 100 | } 101 | to { 102 | border-radius: 50%; 103 | } 104 | } 105 | @keyframes clip-out { 106 | from { 107 | border-radius: 50%; 108 | } 109 | to { 110 | border-radius: 0%; 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/orcdev/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Orcdev - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Orcdev 21 |
22 |
23 |

24 | Orcdev 25 |

26 |

Software Engineer

27 |

28 | 15 years in the code mines. I build, I break, I conquer - all in orcish style. 🛠️🔥 29 |

30 |
31 |
32 |
33 |

Events

34 | 55 |
56 |
57 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/xenia-melikhova/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Xenia Melikhova - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Xenia Melikhova 21 |
22 |
23 |

24 | Xenia Melikhova 25 |

26 |

Frontend developer at TradingView

27 |

28 | Xenia is a frontend developer at TradingView, focused on complex user interfaces: editors, charts, and UI architecture. Interested in performance, scalability, and making complex things feel simple. 29 |

30 |
31 |
32 |
33 |

Events

34 | 55 |
56 |
57 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/kinga-magyar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Kinga Magyar - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Kinga Magyar 21 |
22 |
23 |

24 | Kinga Magyar 25 |

26 |

Product Builder & Coach at Productkind

27 |

28 | Kinga is a curious product leader and founder of the education company productkind. She is currently building LittleParrot.app, a science-based microlearning platform for busy product people. Through her newsletter, she shares practical, hands-on advice to help product people grow their skills and mindset. 29 |

30 |
31 |
32 |
33 |

Events

34 | 55 |
56 |
57 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/ignacio-chicharro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Ignacio Chicharro - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Ignacio Chicharro 21 |
22 |
23 |

24 | Ignacio Chicharro 25 |

26 |

Development Technical Lead at Medida

27 |

28 | Ignacio is a Development Technical Lead with over 8 years of industry experience. He is dedicated to creating full-stack software systems with a special focus on performance and optimization. Outside work he is a passionate Sim Racing and gaming enthusiast. 29 |

30 |
31 |
32 |
33 |

Events

34 | 55 |
56 |
57 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/alessandra-canella/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Alessandra Canella - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Alessandra Canella 21 |
22 |
23 |

24 | Alessandra Canella 25 |

26 |

Design Leader & Mentor

27 |

28 | Alessandra is a design leader with 10+ years shaping product and service design across startups, scale-ups, and the public sector. Formerly Head of Design at Cazoo, MyTutor, and TPXImpact, she's known for translating business goals into clear direction for Tech and Design teams to drive growth, retention, and efficiency. Founder of Mega Mentor and Service Design-in', she brings a collaborative, pragmatic, and user-centred approach to every challenge. 29 |

30 |
31 |
32 |
33 |

Events

34 | 55 |
56 |
57 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /css-day/speakers/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | { speaker name } - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.{ speaker name replace spaces with dash } {
25 |   title: { talk title };
26 |   date: { talk date };
27 |   time: { talk time };
28 | }
29 |             
30 |
31 |
32 |

33 | { talk title } 34 |

35 |

36 | { talk date } - { talk time } 37 |

38 |

39 | { talk description } 40 |

41 |

42 | { speaker name } 43 |

44 |

45 | { speaker bio } 46 |

47 |
48 |
49 |

50 | { speaker name } 51 |

52 |

53 | { talk title } 54 |

55 |
56 |
57 |
58 | { speaker name } 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/andreas-moller/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Andreas Møller - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Andreas Møller 21 |
22 |
23 |

24 | Andreas Møller 25 |

26 |

CEO and Co-Founder of Nordcraft

27 |

28 | Andreas spent 20 years building websites and apps before he finally started Nordcraft and built the design tool he always wanted. 29 |

30 |
31 |
32 |
33 |

Events

34 | 55 |
56 |
57 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/dima-malyshenko/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Dima Malyshenko - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Dima Malyshenko 21 |
22 |
23 |

24 | Dima Malyshenko 25 |

26 |

Tech Entrepreneur, CTO, and Software Engineer

27 |

28 | Ukrainian entrepreneur, product strategist, and software engineer with 20+ years of experience. Now based in Berlin after stints in Kyiv and Moscow. Co-founder and former CTO of countX, a B2B fintech that went from first commit to exit in under four years; led product and engineering and built a high-velocity, autonomous team. Influenced by Marty Cagan and Teresa Torres, they champion outcome-driven, cross-functional teams and continuous deployment to deliver measurable impact. Currently pursuing an Executive MBA at London Business School focused on fintech and venture strategy. 29 |

30 |
31 |
32 |
33 |

Events

34 | 55 |
56 |
57 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/steve-upton/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Steve Upton - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Steve Upton 21 |
22 |
23 |

24 | Steve Upton 25 |

26 |

Principal Consultant at Thoughtworks

27 |

28 | Steve is a Principal Quality Analyst at Thoughtworks who works to build empowered teams, capable of delivering and taking ownership of quality. He has worked on a wide variety of products, from mainframes to microservices and has a particular interest in complex socio-technical systems and how we work with them. He is passionate about complexity theory, building quality into culture and testing as part of continuous delivery in modern, distributed architectures. Outside of work, Steve enjoys travel and mountains. 29 |

30 |
31 |
32 |
33 |

Events

34 | 55 |
56 |
57 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /css-day/speakers/bramus-van-damme.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bramus van Damme - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.bramus-van-damme {
25 |   title: MC;
26 |   date: June 6, 2025;
27 |   time: all day;
28 | }
29 |             
30 |
31 |
32 |

33 | MC 34 |

35 |

36 | June 6, 2025 - all day 37 |

38 |

39 | Bramus will be MC for day 2 of CSS Day 2025. 40 |

41 |

42 | Bramus van Damme 43 |

44 |

45 | Bramus is a web developer from Belgium. He's part of the Chrome Developer Relations team at Google, focusing on CSS, Web UI, and DevTools. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since. 46 |

47 |
48 |
49 |

50 | Bramus van Damme 51 |

52 |

53 | MC 54 |

55 |
56 |
57 |
58 | Bramus van Damme 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /css-day/speakers/bruce-lawson.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bruce Lawson - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.bruce-lawson {
25 |   title: The goose and the common;
26 |   date: June 6, 2025;
27 |   time: 17:10;
28 | }
29 |             
30 |
31 |
32 |

33 | The goose and the common 34 |

35 |

36 | June 6, 2025 - 17:10 37 |

38 |

39 | The web is at an inflection point. Big Tech owns the major platforms, the major browsers, the biggest websites, and carves the Web up between themselves. 40 |

41 |

42 | Bruce Lawson 43 |

44 |

45 | A veteran of the browser wars, many a standards skirmish and an accessibility apocalypse or two, Bruce now leverages synergies for Vivaldi browser. 46 |

47 |
48 |
49 |

50 | Bruce Lawson 51 |

52 |

53 | The goose and the common 54 |

55 |
56 |
57 |
58 | Bruce Lawson 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/guillaume-vaslin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Guillaume Vaslin - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Guillaume Vaslin 21 |
22 |
23 |

24 | Guillaume Vaslin 25 |

26 |

Founder & Head of Design at ENNOstudio

27 |

28 | Guillaume is a French designer based in Berlin. Early in his career, he founded Eelusion, a game studio behind some of Europe's first augmented reality games. He later served as Managing Director at The European Magazine, where he led the creative direction until its acquisition by Weimar Media Group. He also participated in STARTUP Chile, launching two social ventures while working with prêt-à-porter brands across Latin America. Today, as the founder of ENNOstudio, Guillaume sees design as the bridge between technology and human needs. He focuses on making digital products more inclusive and accessible, collaborating with startups, enterprises, and universities across Europe. 29 |

30 |
31 |
32 |
33 |

Events

34 | 55 |
56 |
57 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /css-day/speakers/rachel-andrew.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rachel Andrew - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.rachel-andrew {
25 |   title: Multicol and fragmentation;
26 |   date: June 5, 2025;
27 |   time: 16:15;
28 | }
29 |             
30 |
31 |
32 |

33 | Multicol and fragmentation 34 |

35 |

36 | June 5, 2025 - 16:15 37 |

38 |

39 | Rachel will be discussing multicolumn layout and fragmentation in CSS. 40 |

41 |

42 | Rachel Andrew 43 |

44 |

45 | Rachel works for Google as content lead for Chrome Developer Relations, publishing to web.dev and developer.chrome.com. She is a front and back-end web developer, speaker, and author or co-author of 22 books including The New CSS Layout. 46 |

47 |
48 |
49 |

50 | Rachel Andrew 51 |

52 |

53 | Multicol and fragmentation 54 |

55 |
56 |
57 |
58 | Rachel Andrew 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /css-day/speakers/chris-coyier.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chris Coyier - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.chris-coyier {
25 |   title: Scope in CSS;
26 |   date: June 6, 2025;
27 |   time: 09:30;
28 | }
29 |             
30 |
31 |
32 |

33 | Scope in CSS 34 |

35 |

36 | June 6, 2025 - 09:30 37 |

38 |

39 | I hate to be the one to tell you but writing CSS is half thinking about scope. You don't always need them, but there are plenty of tools out there that help with scoping one way or another. 40 |

41 |

42 | Chris Coyier 43 |

44 |

45 | Chris is a web designer and developer that tries to help other people get better at those things. He's the co-founder of CodePen, a social development environment for web designers and developers. 46 |

47 |
48 |
49 |

50 | Chris Coyier 51 |

52 |

53 | Scope in CSS 54 |

55 |
56 |
57 |
58 | Chris Coyier 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /css-day/speakers/tim-nguyen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tim Nguyen - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.tim-nguyen {
25 |   title: Form control styling;
26 |   date: June 6, 2025;
27 |   time: 11:50;
28 | }
29 |             
30 |
31 |
32 |

33 | Form control styling 34 |

35 |

36 | June 6, 2025 - 11:50 37 |

38 |

39 | Text inputs, checkboxes, radio buttons, sliders… Form controls have been part of the web since the beginning, but styling them can still feel like a battle. 40 |

41 |

42 | Tim Nguyen 43 |

44 |

45 | Tim is a WebKit engineer at Apple. His interest in web technology developed through years of web design and many contributions to Firefox's user interface. Those contributions led him eventually to hack on browser engines. 46 |

47 |
48 |
49 |

50 | Tim Nguyen 51 |

52 |

53 | Form control styling 54 |

55 |
56 |
57 |
58 | Tim Nguyen 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /css-day/speakers/ian-frost.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ian Frost - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.ian-frost {
25 |   title: Design Token Architecture;
26 |   date: June 5, 2025;
27 |   time: 17:10;
28 | }
29 |             
30 |
31 |
32 |

33 | Design Token Architecture 34 |

35 |

36 | June 5, 2025 - 17:10 37 |

38 |

39 | Brad and Ian will give an Advanced Design Tokens workshop on Wednesday 4th of June, the day before the conference. 40 |

41 |

42 | Ian Frost 43 |

44 |

45 | Ian Frost is a front-end architect, technical lead, and consultant passionate about helping developers level up their skills. Over the last decade, Ian has developed many design systems in a variety of technologies, including Web Components, React, Angular, and Vue. 46 |

47 |
48 |
49 |

50 | Ian Frost 51 |

52 |

53 | Design Token Architecture 54 |

55 |
56 |
57 |
58 | Ian Frost 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /css-day/speakers/ahmad-shadeed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ahmad Shadeed - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.ahmad-shadeed {
25 |   title: Smart layouts;
26 |   date: June 6, 2025;
27 |   time: 10:55;
28 | }
29 |             
30 |
31 |
32 |

33 | Smart layouts 34 |

35 |

36 | June 6, 2025 - 10:55 37 |

38 |

39 | Today is the best time to start learning how to use modern CSS features to build truly responsive components. Responsive design doesn't mean designing for the viewport anymore. 40 |

41 |

42 | Ahmad Shadeed 43 |

44 |

45 | Ahmad Shadeed is a UX designer and front-end developer from Tulkarm, Palestine, who enjoys tackling interesting design and development challenges. He has written extensively about CSS, accessibility, and RTL (right-to-left) styling. 46 |

47 |
48 |
49 |

50 | Ahmad Shadeed 51 |

52 |

53 | Smart layouts 54 |

55 |
56 |
57 |
58 | Ahmad Shadeed 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /css-day/speakers/brad-frost.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Brad Frost - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.brad-frost {
25 |   title: Design Token Architecture;
26 |   date: June 5, 2025;
27 |   time: 17:10;
28 | }
29 |             
30 |
31 |
32 |

33 | Design Token Architecture 34 |

35 |

36 | June 5, 2025 - 17:10 37 |

38 |

39 | Brad and Ian will give an Advanced Design Tokens workshop on Wednesday 4th of June, the day before the conference. 40 |

41 |

42 | Brad Frost 43 |

44 |

45 | Brad Frost is a design system consultant, web designer & developer, speaker, writer, teacher, musician, and artist located in beautiful Pittsburgh, PA. He helps people establish & evolve design systems, establish more collaborative workflows, and design & build software together. 46 |

47 |
48 |
49 |

50 | Brad Frost 51 |

52 |

53 | Design Token Architecture 54 |

55 |
56 |
57 |
58 | Brad Frost 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /css-day/speakers/ana-rodrigues.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ana Rodrigues - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.ana-rodrigues {
25 |   title: Refactoring CSS;
26 |   date: June 6, 2025;
27 |   time: 14:50;
28 | }
29 |             
30 |
31 |
32 |

33 | Refactoring CSS 34 |

35 |

36 | June 6, 2025 - 14:50 37 |

38 |

39 | In recent years, updates in CSS have given us many exciting possibilities for creating modern, dynamic web experiences. Yet, for many developers, the day-to-day reality often involves working within the constraints of legacy codebases. 40 |

41 |

42 | Ana Rodrigues 43 |

44 |

45 | Ana works as a front-end developer at tech-for-good agency Hactar. She started coding as a teenager building fan sites, and has been working as a front-end developer for the last 12 years. 46 |

47 |
48 |
49 |

50 | Ana Rodrigues 51 |

52 |

53 | Refactoring CSS 54 |

55 |
56 |
57 |
58 | Ana Rodrigues 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /css-day/speakers/amit-sheen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Amit Sheen - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.amit-sheen {
25 |   title: Building a Computer with CSS;
26 |   date: June 6, 2025;
27 |   time: 13:55;
28 | }
29 |             
30 |
31 |
32 |

33 | Building a Computer with CSS 34 |

35 |

36 | June 6, 2025 - 13:55 37 |

38 |

39 | Ever wondered how a computer actually works? What a CPU is actually built of? And if it's possible to build one using only CSS? If so, this talk is for you. 40 |

41 |

42 | Amit Sheen 43 |

44 |

45 | Amit is an experienced web developer, specializing in CSS, design systems, animations, and creative coding. He has a pathological curiosity and a constant desire to learn new things, and loves sharing his experience and explorations with the community. 46 |

47 |
48 |
49 |

50 | Amit Sheen 51 |

52 |

53 | Building a Computer with CSS 54 |

55 |
56 |
57 |
58 | Amit Sheen 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/candi-williams/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Candi Williams - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Candi Williams 21 |
22 |
23 |

24 | Candi Williams 25 |

26 |

UX Content Design Director

27 |

28 | By day, Candi's a UX content director who loves helping her team thrive, solving complex user experience challenges, and championing inclusive design. With over a decade in experience design - spanning products from banking to dating - she knows a thing or two about IA, AI, and everything in between. By night, she's a published author of four books, a tarot reader, and trained sommelier (who tends not to combine them all at once). A self-confessed "word nerd" with a first-class degree in Linguistics, she's super passionate about the power of language and the impact it has on what people think, feel, and do (on and offline). 29 |

30 |
31 |
32 |
33 |

Events

34 | 55 |
56 |
57 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/luke-hay/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Luke Hay - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Luke Hay 21 |
22 |
23 |

24 | Luke Hay 25 |

26 |

Senior User Researcher at Clearleft

27 |

28 | Luke is the senior user researcher at Clearleft. He has 20+ years of experience working with clients to run user research. From kids to pensioners, dress-makers to body-builders, Luke has run research with participants from very different backgrounds. Over the past ten years, Luke has trained hundreds of people in getting reliable insight from their user research. 29 |

30 |
31 |
32 |
33 |

Events

34 | 55 |
56 |
57 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /css-day/speakers/john-allsopp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | John Allsopp - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.john-allsopp {
25 |   title: A Dao of CSS;
26 |   date: June 5, 2025;
27 |   time: 10:55;
28 | }
29 |             
30 |
31 |
32 |

33 | A Dao of CSS 34 |

35 |

36 | June 5, 2025 - 10:55 37 |

38 |

39 | What if we stopped trying to control the web—and started working with it? In this talk, I return to A Dao of Web Design, an essay I wrote 25 years ago, to look again—this time through the lens of CSS. 40 |

41 |

42 | John Allsopp 43 |

44 |

45 | John Allsopp has been working on the Web for nearly 30 years. He's been responsible for innovative developer tools such as Style Master and X-Ray, and his ideas formed the foundation for Typekit, now Adobe Fonts, and the entire concept of Responsive Web Design. 46 |

47 |
48 |
49 |

50 | John Allsopp 51 |

52 |

53 | A Dao of CSS 54 |

55 |
56 |
57 |
58 | John Allsopp 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /css-day/speakers/cyd-stumpel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cyd Stumpel - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.cyd-stumpel {
25 |   title: CSS tried to come for my job;
26 |   date: June 5, 2025;
27 |   time: 13:55;
28 | }
29 |             
30 |
31 |
32 |

33 | CSS tried to come for my job 34 |

35 |

36 | June 5, 2025 - 13:55 37 |

38 |

39 | CSS has gotten more powerful in terms of layout for the last couple of years, but lately, it's also been creeping into places that have traditionally relied heavily on Javascript. 40 |

41 |

42 | Cyd Stumpel 43 |

44 |

45 | Cyd is a freelance creative developer and part time teacher at the Amsterdam University of Applied Sciences. She creates accessible, award winning websites for everyone; from large organisations like WeTransfer and Amnesty International to creative agencies and freelancers. 46 |

47 |
48 |
49 |

50 | Cyd Stumpel 51 |

52 |

53 | CSS tried to come for my job 54 |

55 |
56 |
57 |
58 | Cyd Stumpel 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /css-day/speakers/stephen-hay.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Stephen Hay - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.stephen-hay {
25 |   title: MC;
26 |   date: June 5, 2025;
27 |   time: all day;
28 | }
29 |             
30 |
31 |
32 |

33 | MC 34 |

35 |

36 | June 5, 2025 - all day 37 |

38 |

39 | Stephen Hay is a creative director, designer, author, and speaker with a passion for code, design processes, and systems thinking. With a background in graphic design and fine art, he became an early advocate for responsive design, design systems, and using CSS as a design tool. 40 |

41 |

42 | Stephen Hay 43 |

44 |

45 | Stephen is the author of Responsive Design Workflow, co-author of Smashing Book #3, writer of countless articles on design topics, and has spoken at industry conferences worldwide. Stephen is always exploring smarter ways to work and create. 46 |

47 |
48 |
49 |

50 | Stephen Hay 51 |

52 |

53 | MC 54 |

55 |
56 |
57 |
58 | Stephen Hay 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /css-day/speakers/miriam-suzanne.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Miriam Suzanne - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.miriam-suzanne {
25 |   title: Is Sass Dead Yet? CSS Mixins & Functions &c.;
26 |   date: June 5, 2025;
27 |   time: 11:50;
28 | }
29 |             
30 |
31 |
32 |

33 | Is Sass Dead Yet? CSS Mixins & Functions &c. 34 |

35 |

36 | June 5, 2025 - 11:50 37 |

38 |

39 | Sass has inspired new developments in CSS for over a decade – from variables to nesting, and now author-defined CSS mixins and functions. As these features make the jump from Sass to CSS, they tend to change in significant ways. 40 |

41 |

42 | Miriam Suzanne 43 |

44 |

45 | Miriam is an author, artist, developer, and open web advocate. She's a co-founder of OddBird, Invited Expert with the W3C CSS Working Group, and member of the Sass core team. 46 |

47 |
48 |
49 |

50 | Miriam Suzanne 51 |

52 |

53 | Is Sass Dead Yet? CSS Mixins & Functions &c. 54 |

55 |
56 |
57 |
58 | Miriam Suzanne 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /css-day/speakers/hidde-de-vries.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hidde de Vries - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.hidde-de-vries {
25 |   title: `display: green`; applying the web sustainability guidelines;
26 |   date: June 6, 2025;
27 |   time: 16:15;
28 | }
29 |             
30 |
31 |
32 |

33 | `display: green`; applying the web sustainability guidelines 34 |

35 |

36 | June 6, 2025 - 16:15 37 |

38 |

39 | The tech sector has an elephant in the room: we use too much energy. In 2024, the World Bank estimated the internet to account for 1-4% of global greenhouse emissions, similar to aviation. 40 |

41 |

42 | Hidde de Vries 43 |

44 |

45 | Hidde is a freelance front-end, design systems and accessibility specialist (CPWA). He is also involved in the W3C's Open UI Community Group and Accessibility Guidelines Working Group. 46 |

47 |
48 |
49 |

50 | Hidde de Vries 51 |

52 |

53 | `display: green`; applying the web sustainability guidelines 54 |

55 |
56 |
57 |
58 | Hidde de Vries 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /css-day/assets/gesture.js: -------------------------------------------------------------------------------- 1 | // Based on demo by Jake Archibald and idea by Jesper Vos: https://glitch.com/edit/#!/simple-set-demos?path=gesture%2Fscript.js%3A242%3A0 2 | 3 | // popup animation 4 | 5 | const trigger = document.querySelector('.info-trigger') 6 | const dialog = document.querySelector('dialog') 7 | const dragDialog = document.querySelector('.info-trigger') 8 | // Track pointer position 9 | let startY = 0 10 | let latestY = 0 11 | let currentProgress = 0 12 | let activeAnimations = null 13 | let dialogHeight = 0 14 | let isOpening = false 15 | 16 | const watchDragging = async (downEvent) => { 17 | startY = downEvent.pageY 18 | latestY = startY 19 | currentProgress = 0 20 | 21 | const controller = new AbortController() 22 | 23 | // Start the view transition and wait for it to be ready 24 | const dialogStatus = isOpening ? 'dialog-closing' : 'dialog-opening' 25 | const openTransition = document.startViewTransition({ 26 | update: () => { 27 | document.documentElement.classList.add('grabbing') 28 | toggleDialog() 29 | dialogHeight = dialog.offsetHeight 30 | }, 31 | types: ['dialog-drag', dialogStatus] 32 | }) 33 | 34 | // Wait for the transition to be ready 35 | await openTransition.ready 36 | 37 | // Get the view transition animations 38 | activeAnimations = document.getAnimations().filter( 39 | anim => anim.effect.target === document.documentElement && 40 | anim.effect.pseudoElement?.startsWith('::view-transition') 41 | ) 42 | 43 | // Pause all view transition animations 44 | activeAnimations.forEach(anim => anim.pause()) 45 | 46 | // Update animation frame on move 47 | document.addEventListener('pointermove', (moveEvent) => { 48 | latestY = moveEvent.pageY 49 | // Calculate progress based on drag distance 50 | // When dialog is open startY - latestY is negative, so we need to change 0 and 1 51 | if (isOpening) { 52 | currentProgress = Math.max(0, Math.min(0.8, (startY - latestY) / dialogHeight)); 53 | } else { 54 | currentProgress = Math.max(-.8, Math.min(0, (startY - latestY) / dialogHeight)); 55 | // turn it into a positive number 56 | currentProgress = Math.abs(currentProgress); 57 | } 58 | 59 | // Set each view transition animation to that frame 60 | activeAnimations.forEach(anim => { 61 | const duration = anim.effect.getComputedTiming().duration 62 | anim.currentTime = currentProgress * duration 63 | }) 64 | }, { signal: controller.signal }) 65 | 66 | // Handle release 67 | document.addEventListener('pointerup', async () => { 68 | controller.abort() 69 | activeAnimations.forEach(anim => anim.play()) 70 | document.documentElement.classList.remove('grabbing') 71 | }, { signal: controller.signal }) 72 | } 73 | 74 | 75 | 76 | 77 | 78 | const toggleDialog = () => { 79 | if (dialog.open) { 80 | dialog.close() 81 | isOpening = false 82 | } else { 83 | dialog.showModal() 84 | isOpening = true 85 | } 86 | } 87 | 88 | const initDialog = () => { 89 | if (!trigger) return 90 | 91 | if (document.startViewTransition) { 92 | dragDialog.addEventListener('pointerdown', watchDragging) 93 | 94 | } else { 95 | trigger.addEventListener('click', () => { 96 | toggleDialog() 97 | }) 98 | } 99 | } 100 | 101 | initDialog() 102 | 103 | -------------------------------------------------------------------------------- /css-day/speakers/brecht-de-ruyte.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Brecht De Ruyte - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.brecht-de-ruyte {
25 |   title: Select it! Styling new HTML UI capabilities;
26 |   date: June 5, 2025;
27 |   time: 14:50;
28 | }
29 |             
30 |
31 |
32 |

33 | Select it! Styling new HTML UI capabilities 34 |

35 |

36 | June 5, 2025 - 14:50 37 |

38 |

39 | We are getting spoiled with increased UI capabilities, partially thanks to the efforts from the W3C community group Open UI. One of those features is the customizable select. 40 |

41 |

42 | Brecht De Ruyte 43 |

44 |

45 | Brecht De Ruyte is a self-taught front-end developer located in Belgium with a passion for UX and Design. During the day you can find him working at iO, a full service agency. Besides that, he is also a Google Developer Expert, Smashing Magazine writer and blog owner of utilitybend.com. 46 |

47 |
48 |
49 |

50 | Brecht De Ruyte 51 |

52 |

53 | Select it! Styling new HTML UI capabilities 54 |

55 |
56 |
57 |
58 | Brecht De Ruyte 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/jenil-gogari/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Jenil Gogari - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Jenil Gogari 21 |
22 |
23 |

24 | Jenil Gogari 25 |

26 |

Senior Product Designer at Datadog

27 |

28 | Jenil Gogari is a Senior Product Designer at Datadog where he leads design tooling and works on the design system DRUIDS by Datadog. Previously, Jenil worked as a UX designer at BookMyShow, India's largest entertainment ticketing platform. In the past, he made free website themes, a CSS framework, an icon delivery service and a Chrome extension. Jenil spends his time building tools and products that empower designers and developers to enhance the user experience. 29 |

30 |
31 |
32 |
33 |

Events

34 | 55 |
56 |
57 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/shelley-vohr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Shelley Vohr - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Shelley Vohr 21 |
22 |
23 |

24 | Shelley Vohr 25 |

26 |

Principal Engineer at Microsoft

27 |

28 | Shelley Vohr (she/her) is a software engineer based in Berlin, Germany. She's Principal Engineer at Microsoft, where she has worked as an Electron maintainer for over 6 years, as well as on Node.js as a TSC member and collaborator. Outside of work, Shelley loves to uncover hidden treasures at the flea market, eat the saltiest licorice humans can handle, and never misses the daily NYT crossword. 29 |

30 |
31 |
32 |
33 |

Events

34 | 55 |
56 |
57 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /css-day/speakers/adam-argyle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Adam Argyle - CSS Day 2025 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 | .css-day.adam-argyle {
25 |   title: Level up your scroll UX;
26 |   date: June 5, 2025;
27 |   time: 09:30;
28 | }
29 |             
30 |
31 |
32 |

33 | Level up your scroll UX 34 |

35 |

36 | June 5, 2025 - 09:30 37 |

38 |

39 | Slide by slide, CSS feature by feature, we'll incrementally enhance and craft a rad scroll experience. Normally a pain in the box; styling and managing scroll across touch, keyboard, mouse and more PLUS juggling each operating system's slightly different affordances, can be daunting. 40 |

41 |

42 | Adam Argyle 43 |

44 |

45 | Adam is a bright, passionate, punk engineer with an adoration for the web who prefers using his skills for best in class UI/UX and empowering those around him. He's worked at small and large companies, and built an app for pretty much every screen (or voice). He is capable of over-engineering, but spends lots of brain power not to. Loves CSS, loves JS, loves great UX. 46 |

47 |
48 |
49 |

50 | Adam Argyle 51 |

52 |

53 | Level up your scroll UX 54 |

55 |
56 |
57 |
58 | Adam Argyle 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/soumaya-erradi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Soumaya Erradi - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Soumaya Erradi 21 |
22 |
23 |

24 | Soumaya Erradi 25 |

26 |

Senior Software Developer @ Atlantis

27 |

28 | 29 |

30 |
31 |
32 |
33 |

Events

34 | 73 |
74 |
75 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/salma-alam-naylor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Salma Alam-Naylor - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Salma Alam-Naylor 21 |
22 |
23 |

24 | Salma Alam-Naylor 25 |

26 |

Head of Developer Education at Nordcraft

27 |

28 | Salma writes code for your entertainment. She helps developers build cool stuff by writing blog posts, making videos, coding live on the internet, and publishing open source projects. After a career as a music teacher and comedian, Salma transitioned to technology in 2014, working as a front end developer and tech lead for startups, agencies and global e-commerce, moving to Developer Experience and Developer Education in 2021. She currently works for Nordcraft as Head of Developer Education. Active in the developer community, Salma is a GitHub Star, a former Microsoft MVP for Developer Technologies (2021-2025), winner of the Jamstack Conf Community Creator Award 2021, and a partnered Twitch streamer. She also makes videos on YouTube about tech and the history of The Internet. 29 |

30 |
31 |
32 |
33 |

Events

34 | 55 |
56 |
57 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/advait-sarkar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Advait Sarkar - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Advait Sarkar 21 |
22 |
23 |

24 | Advait Sarkar 25 |

26 |

Affiliated Lecturer at University of Cambridge

27 |

28 | Advait is an affiliated lecturer at the University of Cambridge, honorary lecturer at University College London, and researcher at Microsoft. He studies how to design human interfaces for artificial intelligence, and how to help people program and interact with data. 29 |

30 |
31 |
32 |
33 |

Events

34 | 55 |
56 |
57 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/piccia-neri/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Piccia Neri - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Piccia Neri 21 |
22 |
23 |

24 | Piccia Neri 25 |

26 |

Accessible Design Trainer & Consultant

27 |

28 | Piccia Neri is on a mission to prove that inclusive design doesn't kill creativity: it fuels it. As a UX and accessible design consultant, she leads global projects for companies of all sizes and trains designers, marketers and developers to put accessibility at the heart of their work. Piccia speaks at conferences worldwide, and her current main focus is on balancing creativity and accessibility, without sacrificing either. 29 |

30 |
31 |
32 |
33 |

Events

34 | 73 |
74 |
75 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/cyd-stumpel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cyd Stumpel - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Cyd Stumpel 21 |
22 |
23 |

24 | Cyd Stumpel 25 |

26 |

Freelance Creative Developer

27 |

28 | Cyd is a freelance creative developer and part time teacher at the Amsterdam University of Applied Sciences. She creates accessible, award winning websites for everyone; from large organisations like WeTransfer and Amnesty International to creative agencies and freelancers. She's got an eye for details and loves to turn flat designs into rich experiences. Cyd has mostly focused on JavaScript animation over the last couple of years but has rediscovered her passion for CSS this year, rebuilding her portfolio with View Transitions and Scroll Driven Animation. 29 |

30 |
31 |
32 |
33 |

Events

34 | 73 |
74 |
75 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /beyond-tellerrand/assets/view-transition.css: -------------------------------------------------------------------------------- 1 | @view-transition { 2 | navigation: auto; 3 | } 4 | 5 | :root { 6 | --ease: cubic-bezier(0.45, 0, 0.55, 1); 7 | } 8 | 9 | [style*='--vt'] { 10 | view-transition-name: var(--vt); 11 | } 12 | 13 | 14 | 15 | html:active-view-transition-type(overview-to-speaker), 16 | html:active-view-transition-type(speaker-to-overview) { 17 | 18 | &::view-transition-new(root), 19 | &::view-transition-old(root) { 20 | animation-duration: 0.1s; 21 | animation-fill-mode: both; 22 | animation-timing-function: ease-in; 23 | } 24 | 25 | .speaker-card img { 26 | view-transition-class: speaker-image; 27 | } 28 | 29 | .speaker-image { 30 | view-transition-class: active-speaker; 31 | } 32 | 33 | &::view-transition-group(.speaker-image), 34 | &::view-transition-group(.active-speaker) { 35 | animation-duration: 0.6s; 36 | animation-fill-mode: both; 37 | animation-timing-function: var(--ease); 38 | } 39 | 40 | 41 | &::view-transition-group(.speaker-image) { 42 | z-index: 0; 43 | animation-duration: 0.6s; 44 | animation-timing-function: var(--ease); 45 | } 46 | 47 | &::view-transition-old(.speaker-image) { 48 | animation: scale-down 0.4s var(--ease) forwards; 49 | } 50 | 51 | &::view-transition-new(.speaker-image) { 52 | animation: scale-up 0.4s var(--ease) forwards; 53 | } 54 | 55 | 56 | &::view-transition-group(.active-speaker) { 57 | z-index: 1; 58 | } 59 | 60 | &::view-transition-new(.active-speaker), 61 | &::view-transition-old(.active-speaker) { 62 | animation: none; 63 | height: 100%; 64 | overflow: clip; 65 | object-fit: cover; 66 | } 67 | 68 | } 69 | 70 | html:active-view-transition-type(overview-to-speaker) { 71 | &::view-transition-new(.active-speaker) { 72 | display: none; 73 | } 74 | } 75 | 76 | 77 | html:active-view-transition-type(speaker-to-overview) { 78 | 79 | &::view-transition-old(.speaker-image), 80 | &::view-transition-old(.active-speaker) { 81 | display: none; 82 | } 83 | 84 | &::view-transition-group(.speaker-image), 85 | &::view-transition-group(.active-speaker) { 86 | animation-duration: 0.4s; 87 | } 88 | 89 | &::view-transition-old(root) { 90 | animation-duration: 0.3s; 91 | animation-fill-mode: both; 92 | animation-timing-function: ease-in-out; 93 | } 94 | 95 | 96 | } 97 | 98 | @keyframes scale-down { 99 | to { 100 | scale: 0; 101 | opacity: 0; 102 | } 103 | } 104 | 105 | @keyframes scale-up { 106 | from { 107 | scale: 0; 108 | } 109 | } 110 | 111 | 112 | 113 | .prev-speaker { 114 | view-transition-class: prev-speaker; 115 | } 116 | 117 | .next-speaker { 118 | view-transition-class: next-speaker; 119 | } 120 | 121 | :active-view-transition-type(speaker-to-speaker) { 122 | .speaker-image { 123 | view-transition-class: speaker-image; 124 | } 125 | 126 | &::view-transition-group(*) { 127 | animation-duration: 0.7s; 128 | animation-timing-function: var(--ease); 129 | 130 | } 131 | &::view-transition-group(.speaker-image) { 132 | animation-fill-mode: both; 133 | animation-timing-function: var(--ease); 134 | } 135 | 136 | &::view-transition-old(.speaker-image), 137 | &::view-transition-new(.speaker-image) { 138 | animation: none; 139 | z-index: 1; 140 | } 141 | 142 | &::view-transition-new(.prev-speaker):only-child, 143 | &::view-transition-new(.next-speaker):only-child { 144 | --x: 30vh; 145 | animation-name: moveIn; 146 | animation-fill-mode: both; 147 | animation-timing-function: var(--ease); 148 | z-index: 0; 149 | } 150 | 151 | &::view-transition-old(.prev-speaker):only-child, 152 | &::view-transition-old(.next-speaker):only-child { 153 | --x: 30vh; 154 | animation-name: moveOut; 155 | animation-fill-mode: both; 156 | animation-timing-function: var(--ease); 157 | z-index: 0; 158 | } 159 | 160 | &::view-transition-new(.prev-speaker):only-child, 161 | &::view-transition-old(.prev-speaker):only-child { 162 | --x: -30vh; 163 | } 164 | } 165 | 166 | @keyframes moveIn { 167 | from { 168 | transform: translateX(var(--x)); 169 | } 170 | } 171 | 172 | @keyframes moveOut { 173 | to { 174 | transform: translateX(var(--x)); 175 | } 176 | } -------------------------------------------------------------------------------- /beyond-tellerrand/speakers/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Speaker Name - Beyond Tellerrand Düsseldorf 2025 8 | 9 | 10 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |
22 |

23 | 29 | 33 | 37 | 41 | 46 | #btconf //
47 | Düsseldorf, Germany //
48 | 05 - 06 May 2025 49 |

50 | 54 | tickets 55 | 56 |
57 | 68 |
69 |
70 |
79 | SPEAKER_NAME 80 |
81 |
82 |
86 |

87 | beyond tellerrand is the affordable single-track event where 88 | creativity and technology meet. Taking place in Düsseldorf and 89 | Berlin these days with 500+ attendees each in a renowned, familiar 90 | and friendly atmosphere. 91 |

92 |
93 |
94 |
95 | 96 |
97 |
98 |
99 |

SPEAKER_NAME

100 |

TALK_TITLE

101 |
102 |

SPEAKER_BIO

103 |
104 | 108 |
109 |
110 |
111 | 112 | 113 | -------------------------------------------------------------------------------- /wey-wey-web/assets/style.css: -------------------------------------------------------------------------------- 1 | @import 'typography.css'; 2 | @import 'schedule.css'; 3 | @import 'speaker-detail.css'; 4 | @import 'speaker-overview.css'; 5 | @import 'view-transitions.css'; 6 | 7 | * { 8 | box-sizing: border-box; 9 | margin: 0; 10 | } 11 | 12 | /* Variables: */ 13 | :root { 14 | --background-color: #14041e; 15 | --accent-color-main: #fc0378; 16 | --accent-color-secondary: #4dd9e5; 17 | --color: #fff; 18 | --background: var(--background-color); 19 | --padding: clamp(0.75rem, 1.6vw, 1.5rem); 20 | --padding-small: 0.5rem; 21 | --design-size: 1440; 22 | --ease: cubic-bezier(0.45, 0, 0.55, 1); 23 | } 24 | 25 | body { 26 | padding: 0; 27 | font-family: 'Chillax', sans-serif; 28 | background-color: var(--background); 29 | color: var(--color); 30 | } 31 | 32 | 33 | /* Typography: */ 34 | .tabular { 35 | font-family: 'Tabular', monospace; 36 | } 37 | 38 | h1, 39 | h2, 40 | h3, 41 | h4, 42 | h5, 43 | h6, 44 | p, 45 | a, 46 | button { 47 | text-wrap: pretty; 48 | letter-spacing: -0.04em; 49 | } 50 | 51 | a, 52 | button { 53 | color: inherit; 54 | font-family: inherit; 55 | font-size: inherit; 56 | } 57 | 58 | 59 | .xlarge-heading { 60 | font-size: clamp(2rem, calc(96 / var(--design-size) * 100vw), 8rem); 61 | font-weight: 600; 62 | font-variation-settings: 63 | 'wght' 600; 64 | line-height: 1.1; 65 | } 66 | 67 | .large-heading { 68 | font-size: clamp(1.1rem, calc(60 / var(--design-size) * 100vw), 5rem); 69 | font-weight: 600; 70 | font-variation-settings: 71 | 'wght' 600; 72 | line-height: 1.1; 73 | } 74 | 75 | .medium-heading { 76 | font-size: clamp(1.5rem, calc(32 / var(--design-size) * 100vw), 2.7rem); 77 | font-weight: 600; 78 | font-variation-settings: 79 | 'wght' 600; 80 | line-height: 1.1; 81 | } 82 | 83 | .small-heading { 84 | font-size: clamp(1.3rem, calc(28 / var(--design-size) * 100vw), 2rem); 85 | font-weight: 600; 86 | font-variation-settings: 87 | 'wght' 600; 88 | line-height: 1.1; 89 | } 90 | 91 | .large-body { 92 | font-size: clamp(1.2rem, calc(24 / var(--design-size) * 100vw), 2rem); 93 | font-weight: 500; 94 | font-variation-settings: 95 | 'wght' 500; 96 | line-height: 1.1; 97 | } 98 | 99 | .medium-body { 100 | font-size: clamp(1.1rem, calc(18 / var(--design-size) * 100vw), 1.5rem); 101 | font-weight: 400; 102 | font-variation-settings: 103 | 'wght' 400; 104 | line-height: 1.5; 105 | } 106 | 107 | .small-body { 108 | font-size: clamp(0.8rem, calc(16 / var(--design-size) * 100vw), 1.33rem); 109 | font-weight: 400; 110 | font-variation-settings: 111 | 'wght' 400; 112 | line-height: 1.5; 113 | } 114 | 115 | .xsmall-body { 116 | font-size: clamp(0.75rem, calc(14 / var(--design-size) * 100vw), 1rem); 117 | font-weight: 400; 118 | font-variation-settings: 119 | 'wght' 400; 120 | line-height: 1.5; 121 | } 122 | 123 | .label { 124 | font-size: 0.75rem; 125 | background-color: var(--color); 126 | color: var(--background-color); 127 | padding: 0.15rem 0.25rem 0.25rem; 128 | border-radius: 0.25rem; 129 | width: max-content; 130 | font-variation-settings: 131 | 'wght' 600; 132 | } 133 | 134 | .caps { 135 | text-transform: uppercase; 136 | } 137 | 138 | .p { 139 | hr { 140 | margin: 1em 0; 141 | border: none; 142 | border-top: 1px solid currentColor; 143 | color: inherit; 144 | } 145 | p+p { 146 | margin-top: 1em; 147 | } 148 | 149 | p { 150 | 151 | +h1, 152 | +h2, 153 | +h3, 154 | +h4, 155 | +h5, 156 | +h6 { 157 | margin-top: 1em; 158 | } 159 | 160 | +p, 161 | +ul, 162 | +ol { 163 | margin-top: 0.5em; 164 | } 165 | } 166 | 167 | h1, 168 | h2, 169 | h3, 170 | h4, 171 | h5, 172 | h6 { 173 | 174 | +p, 175 | +ul, 176 | +ol { 177 | margin-top: 0.5em; 178 | } 179 | 180 | +h1, 181 | +h2, 182 | +h3, 183 | +h4, 184 | +h5, 185 | +h6 { 186 | margin-top: 1em; 187 | } 188 | } 189 | } 190 | 191 | .header { 192 | padding: var(--padding); 193 | max-width: 1600px; 194 | margin: 0 auto; 195 | display: grid; 196 | grid-template-columns: repeat(12, 1fr); 197 | gap: var(--padding); 198 | a { 199 | grid-column: 1 / span 2; 200 | display: block; 201 | width: 100%; 202 | height: 100%; 203 | img { 204 | display: block; 205 | width: 100%; 206 | height: 100%; 207 | } 208 | } 209 | } 210 | 211 | .footer { 212 | padding: var(--padding); 213 | max-width: 1600px; 214 | margin: 0 auto; 215 | display: grid; 216 | grid-template-columns: repeat(12, 1fr); 217 | gap: var(--padding); 218 | align-items: center; 219 | .logo { 220 | grid-column: span 2; 221 | img { 222 | display: block; 223 | width: 100%; 224 | height: 100%; 225 | } 226 | } 227 | p { 228 | grid-column: span 6 / -1; 229 | text-align: right; 230 | 231 | } 232 | } 233 | -------------------------------------------------------------------------------- /wey-wey-web/speakers/tamas-kokeny/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tamas Kokeny - Wey Wey Web 2025 9 | 10 | 11 | 12 | 13 |
14 | Wey Wey Web 15 |
16 |
17 |
18 |
19 | Tamas Kokeny 21 |
22 |
23 |

24 | Tamas Kokeny 25 |

26 |

Educator at Productkind

27 |

28 | Tamas is an enthusiastic software engineer with a background in product development, technical leadership, and education. He is an Educator at productkind, where he's currently building LittleParrot.app, a science-based microlearning platform for busy product people. He also teaches and creates educational content. As a serial entrepreneur, Tamas co-founded multiple ventures, including Bobcats Coding, a digital product studio. His career journey includes technical roles at companies such as Datadog, Cazoo, and Cloudera, where he spearheaded initiatives in software architecture design and led development teams. Beyond his technical contributions, Tamas is deeply committed to fostering talent and sharing knowledge. He served as the Head of Education and Co-Founder at Green Fox Academy, a programming bootcamp in Central Europe, where he managed international mentor teams, created educational content, and designed curricula. 29 |

30 |
31 |
32 |
33 |

Events

34 | 73 |
74 |
75 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /beyond-tellerrand/locations/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Beyond Tellerrand 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 19 | 20 | 21 |
25 |
26 |
27 |
28 |

29 | 35 | 39 | 43 | 47 | 52 | #btconf //
53 | Düsseldorf, Germany //
54 | 05 - 06 May 2025 55 |

56 | 60 | tickets 61 | 62 |
63 | 77 |
78 |
79 |
83 | Capitol Theater 84 |
85 |
89 | Image of maybe the Zentralbibliothek, could be any library to be honest 93 |
94 |
98 | Image of Wilhelm Marx Haus 102 |
103 |
104 |
108 |

109 | What could be a better start to an event than a start at which you 110 | already know a handful of people attending the event? Exactly that 111 | is the reason to join us for the Warm-Up. 112 |

113 |

114 | Mix and mingle with people who will be at beyond tellerrand on the 115 | following two days, but also with people who join, but can not make 116 | it to the show. They are invited to also mix with you, to exchange 117 | and hang out. 118 |

119 |
120 |
121 |
122 |

123 | Capitol Theater (Event: Main Conference) 124 |

125 |

126 | Neue Zentralbibliothek (Event: Workshop) 127 |

128 |

CHECK24 (Event: Warm-Up)

129 |
130 |
131 |
132 |
133 | 134 |
135 | 136 | 137 | -------------------------------------------------------------------------------- /beyond-tellerrand/speakers/vitaly-friedman.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Vitaly Friedman - Beyond Tellerrand Düsseldorf 2025 9 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |

24 | 25 | 28 | 31 | 34 | 37 | 38 | #btconf //
39 | Düsseldorf, Germany //
40 | 05 - 06 May 2025 41 |

42 | 43 | tickets 44 | 45 |
46 | 60 |
61 | 89 |
90 |

91 | Vitaly will share insights from his extensive research on web design and user experience. He'll explore 92 | practical techniques for creating more effective and engaging digital products that stand out in today's 93 | competitive landscape. 94 |

95 |
96 |
97 |

Vitaly Friedman

98 |

Inclusive Design Patterns

99 |
100 |
101 |
102 | 103 |
104 |
105 |
106 |

Vitaly Friedman

107 |

Designing for the Future Web

108 |
109 |

110 | Vitaly Friedman is the co-founder and editor-in-chief of Smashing 111 | Magazine, a leading online magazine for web designers and 112 | developers. He is a passionate advocate for web standards and 113 | accessibility, and he regularly speaks at conferences worldwide 114 | about web design, UX, and front-end development. 115 |

116 |
117 | 121 |
122 |
123 |
124 | 125 | 126 | -------------------------------------------------------------------------------- /beyond-tellerrand/speakers/sharon-steed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sharon Steed - Beyond Tellerrand Düsseldorf 2025 9 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
21 |
22 |
23 |
24 |

25 | 26 | 29 | 32 | 35 | 38 | 39 | #btconf //
40 | Düsseldorf, Germany //
41 | 05 - 06 May 2025 42 |

43 | 44 | tickets 45 | 46 |
47 | 61 |
62 | 90 |
91 |

92 | Sharon will explore how empathy and storytelling can transform our approach to design and communication. 93 | She'll share practical strategies for creating more inclusive and effective user experiences through better 94 | understanding of human emotions. 95 |

96 |
97 |
98 |

Sharon Steed

99 |

Empathy in Automation

100 |
101 |
102 |
103 | 104 |
105 |
106 |
107 |

Sharon Steed

108 |

Empathy in Design

109 |
110 |

111 | Sharon Steed is a communication consultant and founder of 112 | Communilogue, where she helps companies improve their 113 | communication and collaboration. She is a sought-after speaker on 114 | empathy, communication, and emotional intelligence in the 115 | workplace, and she has worked with companies like Google, Amazon, 116 | and Microsoft. 117 |

118 |
119 | 123 |
124 |
125 |
126 | 127 | 128 | -------------------------------------------------------------------------------- /beyond-tellerrand/speakers/cyd-stumpel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cyd Stumpel - Beyond Tellerrand Düsseldorf 2025 9 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |

24 | 25 | 28 | 31 | 34 | 37 | 38 | #btconf //
39 | Düsseldorf, Germany //
40 | 05 - 06 May 2025 41 |

42 | 43 | tickets 44 | 45 |
46 | 60 |
61 | 89 |
90 |

91 | Cyd will showcase the latest CSS features and techniques that are revolutionizing web design. She'll 92 | demonstrate how modern CSS can be used to create stunning visual effects and animations while maintaining 93 | performance and accessibility. 94 |

95 |
96 |
97 |

Cyd Stumpel

98 |

Modern CSS for Creative Developers

99 |
100 |
101 |
102 | 103 |
104 |
105 |
106 |

Cyd Stumpel

107 |

The Art of Motion Design

108 |
109 |

110 | Cyd Stumpel is a motion designer and creative director based in 111 | Amsterdam. She specializes in creating engaging motion graphics 112 | and animations for brands and digital products. Cyd has worked 113 | with clients like Nike, Adidas, and Google, and she is passionate 114 | about using motion to enhance user experiences and tell compelling 115 | stories. 116 |

117 |
118 | 122 |
123 |
124 |
125 | 126 | 127 | -------------------------------------------------------------------------------- /beyond-tellerrand/speakers/jason-pamental.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Jason Pamental - Beyond Tellerrand Düsseldorf 2025 9 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
21 |
22 |
23 |
24 |

25 | 26 | 29 | 32 | 35 | 38 | 39 | #btconf //
40 | Düsseldorf, Germany //
41 | 05 - 06 May 2025 42 |

43 | 44 | tickets 45 | 46 |
47 | 61 |
62 | 90 |
91 |

92 | Jason will explore how typography shapes our digital experiences, from readability to emotional impact. He'll 93 | share practical techniques for creating more effective and engaging typographic systems across different 94 | devices and platforms. 95 |

96 |
97 |
98 |

Jason Pamental

99 |

Curious Findings

100 |
101 |
102 |
103 | 104 |
105 |
106 |
107 |

Jason Pamental

108 |

Variable Fonts in Practice

109 |
110 |

111 | Jason Pamental is a designer, developer, and typography expert 112 | specializing in web typography and variable fonts. He is the 113 | author of "Responsive Typography" and "Web Typography: The 114 | Definitive Guide." Jason has worked with clients like Google, 115 | Adobe, and Microsoft, and he regularly speaks at conferences 116 | about typography and web design. 117 |

118 |
119 | 123 |
124 |
125 |
126 | 127 | 128 | -------------------------------------------------------------------------------- /beyond-tellerrand/speakers/brendan-dawes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Brendan Dawes - Beyond Tellerrand Düsseldorf 2025 9 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |

24 | 25 | 28 | 31 | 34 | 37 | 38 | #btconf //
39 | Düsseldorf, Germany //
40 | 05 - 06 May 2025 41 |

42 | 43 | tickets 44 | 45 |
46 | 60 |
61 | 89 |
90 |

91 | Brendan will take us on a journey through his creative process, exploring how embracing imperfections and 92 | unexpected outcomes can lead to more interesting and meaningful work. He'll share stories from his career that 93 | demonstrate the power of happy accidents. 94 |

95 |
96 |
97 |

Brendan Dawes

98 |

Certain irregularities

99 |
100 |
101 |
102 | 103 |
104 |
105 |
106 |

Brendan Dawes

107 |

Creative Coding

108 |
109 |

110 | Brendan Dawes is a designer, artist, and creative technologist 111 | based in Manchester, UK. He creates interactive installations and 112 | digital experiences that explore the intersection of art and 113 | technology. Brendan has worked with clients like Google, Adobe, 114 | and the BBC, and he is passionate about using code as a creative 115 | medium. 116 |

117 |
118 | 122 |
123 |
124 |
125 | 126 | 127 | -------------------------------------------------------------------------------- /beyond-tellerrand/speakers/paula-zuccotti.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Paula Zuccotti - Beyond Tellerrand Düsseldorf 2025 9 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
21 |
22 |
23 |
24 |

25 | 26 | 29 | 32 | 35 | 38 | 39 | #btconf //
40 | Düsseldorf, Germany //
41 | 05 - 06 May 2025 42 |

43 | 44 | tickets 45 | 46 |
47 | 61 |
62 | 90 |
91 |

92 | Paula will take us on a journey through the objects that shape our daily lives, exploring how design 93 | influences our behavior and emotions. She'll share insights on how to create more meaningful connections 94 | through physical and digital products. 95 |

96 |
97 |
98 |

Paula Zuccotti

99 |

Every Thing we Touch

100 |
101 |
102 |
103 | 104 |
105 |
106 |
107 |

Paula Zuccotti

108 |

The Future of Everything

109 |
110 |

111 | Paula Zuccotti is a trend forecaster and ethnographer who 112 | specializes in understanding how people interact with objects and 113 | technology. She is the author of "The Future of Everything" and 114 | has worked with companies like Google, Samsung, and IKEA. Paula 115 | helps organizations understand emerging trends and design for the 116 | future. 117 |

118 |
119 | 123 |
124 |
125 |
126 | 127 | 128 | -------------------------------------------------------------------------------- /beyond-tellerrand/speakers/amber-case.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Amber Case - Beyond Tellerrand Düsseldorf 2025 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |

24 | 25 | 28 | 31 | 34 | 37 | 38 | #btconf //
39 | Düsseldorf, Germany //
40 | 05 - 06 May 2025 41 |

42 | 43 | tickets 44 | 45 |
46 | 60 |
61 | 89 |
90 |

91 | Amber will explore how we can create technology that doesn't demand our attention but instead works quietly in 92 | the background. She'll share principles and examples of calm technology that enhances our lives without 93 | overwhelming us. 94 |

95 |
96 |
97 |

Amber Case

98 |

Designing Calm Technology

99 |
100 |
101 |
102 | 103 |
104 |
105 |
106 |

Amber Case

107 |

Designing Calm Technology

108 |
109 |

110 | Amber Case studies the interactions between humans and technology, 111 | and how technology affects culture. She is an internationally 112 | recognized design advocate and speaker, and the author of four 113 | books, including Calm Technology and A Kids Book About Technology. 114 | She spent two years as a fellow at MIT's Center for Civic Media 115 | and Harvard's Berkman Klein Center for Internet & Society and was 116 | a 2021 Mozilla Fellow. 117 |

118 |
119 | 123 |
124 |
125 |
126 | 127 | 128 | --------------------------------------------------------------------------------