diff --git a/pages/refill.tsx b/pages/refill.tsx new file mode 100644 index 000000000..d0bddb0f8 --- /dev/null +++ b/pages/refill.tsx @@ -0,0 +1,192 @@ +import RefillLayout from 'src/refill/layout'; +import Image from 'next/image'; +import style from 'src/refill/refill.module.css'; + +const dev: ProgramItemProps[] = [ + { + speaker: { name: 'Jacob Berglund', src: '/refill/kari.png' }, + title: 'Det var en gång en request, en response och ett par headers', + }, + { + speaker: { name: 'Jakob Endrestad Kielland', src: '/refill/kari.png' }, + title: 'Hvordan bygge latterlig kule nettsider med View Transitions API', + }, + { + speaker: { + name: 'Truls Henrik Jakobsen', + src: '/refill/kari.png', + }, + title: 'Skjema-endringer med lave skuldre: Bakover­kompatible APIer', + }, + { + speaker: { name: 'Christian Brevik', src: '/refill/kari.png' }, + title: 'TestContainers er kulere enn ChatGPT', + }, + { + speaker: { name: 'Thomas Hansen', src: '/refill/kari.png' }, + title: 'Erfaringer med prosessarbeid', + }, + { + speaker: { name: 'Anders Njøs Slinde', src: '/refill/kari.png' }, + title: 'Plattform sa du? Ja det må vi selvfølgelig ha. Eller?', + }, + { + speaker: { name: 'Mikael Brevik', src: '/refill/kari.png' }, + title: 'RAG-arkitektur avmystifisert', + }, +]; +const design: ProgramItemProps[] = [ + { + speaker: { + name: 'Jonas Lillevold', + src: '/refill/kari.png', + }, + title: 'UX Metrics - Hva, hvorfor og hvordan?', + }, + { + speaker: { name: 'Andreas Sætersdal Hartveit', src: '/refill/kari.png' }, + title: 'En skikkelig nerdete preik om typografi', + }, + { + speaker: { name: 'Simen Strøm Braaten', src: '/refill/kari.png' }, + title: 'Fra å være en god designer til å bli en dårlig utvikler', + }, + { + speaker: { name: 'Andreas Sætersdal Hartveit', src: '/refill/kari.png' }, + title: 'Mitt voksende produkt / MVP arket', + }, +]; + +export default function Refill() { + return ( + +
+ En mann og en kvinne som sitter i en sofa og ser på en laptop + +
+

Refill 2024

+

+ Variant inviterer til første iterasjon av Refill-konferansen. En + tverrfaglig konferanse fylt til randen med læreglede. +

+

+ Konferansen streames og har denne gang 2 tracks: utvikling og + design. Følg med på denne siden fredag 7. juni klokken 14:00, for + streams. +

+ +
+ + + Marker i kalender + +
+
+
+ +
+

Track: Utvikling

+ + +
+ +
+

Track: Design

+ + +
+ + ); +} + +type ProgramItemProps = { + speaker: { + name: string; + src: string; + }; + title: string; +}; +function ProgramItem({ speaker, title }: ProgramItemProps) { + return ( +
  • +

    {title}

    + +
    • + ); +} + +function Speaker({ name }: { name: string; src: string }) { + return ( + + ); +} + +function CalendarIcon() { + return ( + + + + + + + + + + + + + + + + + ); +} diff --git a/public/refill/bg.jpg b/public/refill/bg.jpg new file mode 100644 index 000000000..ac85dfb9c Binary files /dev/null and b/public/refill/bg.jpg differ diff --git a/public/refill/calendar-and-clock-time-administration-and-organization-tools-symbol-svgrepo-com.svg b/public/refill/calendar-and-clock-time-administration-and-organization-tools-symbol-svgrepo-com.svg new file mode 100644 index 000000000..ebf89673d --- /dev/null +++ b/public/refill/calendar-and-clock-time-administration-and-organization-tools-symbol-svgrepo-com.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/refill/event.ics b/public/refill/event.ics new file mode 100644 index 000000000..9e50351bc --- /dev/null +++ b/public/refill/event.ics @@ -0,0 +1,15 @@ +BEGIN:VCALENDAR +VERSION:2.0 +BEGIN:VEVENT +SUMMARY:Refill 2024 +DTSTART:20240607T120000Z +DTEND:20240607T150000Z +DTSTAMP:20240523T204446Z +UID:1716497086511-Refill2024 +DESCRIPTION:Placeholder for Refill 2024. Se https://variant.no/refill for streams for både design og utvikling. +LOCATION:Stream +ORGANIZER:Variant +STATUS:CONFIRMED +PRIORITY:0 +END:VEVENT +END:VCALENDAR diff --git a/public/refill/favicon.png b/public/refill/favicon.png new file mode 100644 index 000000000..1850ebba1 Binary files /dev/null and b/public/refill/favicon.png differ diff --git a/public/refill/header.png b/public/refill/header.png new file mode 100644 index 000000000..baf829a21 Binary files /dev/null and b/public/refill/header.png differ diff --git a/public/refill/og.jpg b/public/refill/og.jpg new file mode 100644 index 000000000..fd704f120 Binary files /dev/null and b/public/refill/og.jpg differ diff --git a/src/refill/layout.tsx b/src/refill/layout.tsx new file mode 100644 index 000000000..6b3395b8f --- /dev/null +++ b/src/refill/layout.tsx @@ -0,0 +1,38 @@ +import Head from 'next/head'; +import { and } from 'src/utils/css'; +import style from './refill.module.css'; + +import { PropsWithChildren } from 'react'; +import Link from 'next/link'; + +export default function RefillLayout({ children }: PropsWithChildren<{}>) { + return ( +
    + + Refill - Variant + + + + + + + + + + +
    {children}
    + + + ← variant.no + +
    + ); +} diff --git a/src/refill/refill.module.css b/src/refill/refill.module.css new file mode 100644 index 000000000..e1c600e03 --- /dev/null +++ b/src/refill/refill.module.css @@ -0,0 +1,169 @@ +:global(html) { + background: #fff; +} + +.backLink { + order: -1; +} + +.header { + display: flex; + + gap: 1rem; + align-items: center; + flex-wrap: wrap; +} + +.header img { + max-width: 100%; +} + +.header__inner { + display: flex; + flex: 1; + flex-direction: column; + min-width: 360px; +} + +.header__inner p { + padding: 0; + margin: 0; +} + +.header__inner p + p { + padding: 0; + margin-top: 0.5rem; +} + +.header h1 { + font-size: 2.5rem; + font-weight: bold; + font-family: Graphik, sans-serif; + margin-bottom: 1rem; +} + +.layout { + width: 95%; + max-width: 1024px; + min-width: 320px; + margin: 0 auto; + display: flex; + + flex-direction: column; +} + +.layout main { + flex: 1; + padding: 2rem 0; +} + +.programSection { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.programSection h2 { + font-size: 2.5rem; + font-weight: bold; + font-family: Graphik, sans-serif; + + margin-top: 5rem; +} + +.programSectionGrid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 1rem; + list-style-type: none; + margin: 0; + padding: 0; +} + +.programSectionGrid h3 { + font-size: 1.75rem; + font-weight: 500; + overflow-wrap: break-word; + hyphens: manual; +} + +.programItem { + margin: 0; + padding: 0; + color: #fff; + + display: flex; + flex-direction: column; + + justify-content: space-between; + padding: 2rem; + gap: 2rem; + background: url('/refill/bg.jpg') 0 0 no-repeat; + background-size: 650%; + + filter: grayscale(95%) brightness(1.1); + transition: filter 0.15s ease-in-out; +} + +.programItem:nth-child(1) { + background-position: 0 0; +} +.programItem:nth-child(2) { + background-position: 20% 0; +} +.programItem:nth-child(3) { + background-position: 25% 10%; +} +.programItem:nth-child(4) { + background-position: 50% 0; +} +.programItem:nth-child(5) { + background-position: 75% 0; +} +.programItem:nth-child(6) { + background-position: 40% 20%; +} + +.programItem:hover { + filter: grayscale(0%) brightness(1); +} + +.speaker { + display: flex; + gap: 0.25rem; + align-items: center; +} +.speaker h4 { + font-family: Graphik, sans-serif; + flex: 1; + padding: 0; + margin: 0; + font-size: 1rem; +} + +.avatarContainer { + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + border-radius: 50%; + + width: 3.75rem; + height: 3.75rem; +} +.avatarContainer img { + width: 100%; +} + +.calendarContainer { + padding: 2rem 0; +} +.calendarContainer a { + display: inline-flex; + border: 1px solid black; + border-radius: 0.5rem; + padding: 0.5rem; + text-decoration: none; + align-items: center; + gap: 0.5rem; +} diff --git a/yarn.lock b/yarn.lock index 141d756fe..d8fd6af16 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1214,9 +1214,9 @@ callsites@^3.0.0: integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541: - version "1.0.30001617" - resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001617.tgz" - integrity sha512-mLyjzNI9I+Pix8zwcrpxEbGlfqOkF9kM3ptzmKNw5tizSyYwMe+nGLTqMK9cO+0E+Bh6TsBxNAaHWEM8xwSsmA== + version "1.0.30001621" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001621.tgz" + integrity sha512-+NLXZiviFFKX0fk8Piwv3PfLPGtRqJeq2TiNoUff/qB5KJgwecJTvCXDpmlyP/eCI/GUEmp/h/y5j0yckiiZrA== chai@^4.3.10: version "4.3.10"