varianter / variant.no

Variant nettside. Åpen og tilgjengelig for alle.

Variant Homepage

Current homepage of Variant.

Building and running locally

Install dependencies using yarn

yarn

And start up dev server

yarn dev

Navigate to http://localhost:3000. Have fun!

Configuration

Configure locally unsing a .env.local file based on the .env.example file.

REVALIDATE_TOKEN for revalidating isn't needed for developing locally unless you want to test out revalidation. Revalidation is triggering new static site generation on the server side to reload static data. REVALIDATE_TOKEN should match that of data-layer.

# Secret token to use for revalidating/regenerating images
REVALIDATE_TOKEN=<token>

Architecture and design decisions

Organizing is done through module folders where all relevant files are located. This is to easer be able to remove/delete code and complete sets of code. However, there are some assets (e.g. manifest files and some images) which are more practical as public files (inside public/). These will be available as static files hosted on the root path.

Styles are used as CSS Modules with as specific naming as possible. If nested components, use BEM naming convention.

Reusable or generic components should be moved to the Styleguide monorepo.

This site should be static and exportable as clean HTML.

variant.no's Issues

Add rotating project references

Add more project references as documents and create rotating random references for the front page

Migrer Varianttur-side

Ta i bruk ny lønnskalkulator

Add page on initiatives, sponsorships and partnerships

Etterhvert har vi begynt å få ulike initiativer, spons og partnerskap. Dette er forpliktelser vi gjør oss og innsats vi legger inn som vi burde synliggjøre til oss selv. Kunne vært interessant å ha en samleside med det.

[Re-design] "Bli en variant"-blokken på forsiden

Hoved-issue: #204
Figma: https://www.figma.com/file/DALULHNE3G8w9GPDtMxGxi/Prosjektbeskrivelser?node-id=415%3A4001

Re-design "Bli en variant"-blokken fra nåværende forside. Tanken (så vidt jeg har forstått) er å bedre synliggjøre hvor vi har kontorer, og gjøre mer ut av denne blokken på forsiden.

Nytt design:

Nåværende design (som skal byttes ut):

Fix include licensing in css files for fonts

Now licenses are stripped. should be included

Lønnskalkulator-side

Lag header navigation

For store og små skjermer

Filtrer ut blogposter av typen "Variantdag" og "Resultatvurdering"

Det er bra at vi har disse som blog-poster, men de passer kanskje ikke like bra å trekke fram som våre ytringer.

Vurder også antallet poster som trekkes ut.

Student take over

Ifbm. frister for sommerjobb og fastjobb kjører vi samme initiativ som tidligere hvor vi lager en egen landingsside som tar over variant.no.

Filtrering på ansattvisning

Change employee list to be relative units instead of fixed

Fixed width causes problems because of the responsive typography implemented in the styleguide.

It would probably be beneficial to use grid instead of flexbox in this case

#105 Has to be implemented before fixing this issue.

Bedre visning av blogg/artikler/innhold

Per i dag har vi en seksjon som ser slik ut:

Dette ble endret et tidspunkt for Medium blokkerte mitt reverse engineered API-lag.

Men dette er egentlig en kjedlig og lite nyttig måte å vise innhold på. Vi burde løfte frem aktivitet på innhold (faglig, selskap, endringer, osv) i større grad. Som viser at 1) ting skjer og 2) det gode innholdet forskjellige varianter lager.

Det er mulig å f.eks bruke RSS feeds og parsing av metadata for å få til uthenting dynamisk. Men det må også formes noe god UI/UX som kan løse behovene her.

Host job listings ourselves

Move the job listings (not the forms, but just the text) to variant.no in the new style. This to better give a more coherent style/flow.

Bedre håndtering av oppstartsdato

Det er behov for en bedre måte å filtrere ansatte på. Nå hentes alt ut i fra CV-partner med filtreres ut på et implisitt filter rundt rollen "Landansvarlig" (av historiske årsaker osv). Etterhvert når vi får API-er på plass er det bedre å se på oppstartsdato fra Variantdash.

Målet er å ikke vise ansatte som ikke har startet enda.

Tasks:

• Eksponere API rundt oppstartsdato (med auth token eller tilsvarende)
• Utvide kode her til å filtrere basert på oppstart.

Navbar på hovedsiden forsvinner tidlig.

Navbaren forsvinner rett etter siste rekken med bilder av ansattene.
Det er litt upraktisk mtp at siden er i katogerien "One pager".
Det blir fort altfor mye å scrolling opp om man ønsker å gå helt opp igjen.
Navbaren kan godt være synlig hele veien til footeren.

Bildet viser hvor navbaren forsvinner:

Footer med animasjon

Ser for meg at vi kan gjøre noe morsomt med formen av footer. F.eks at det "bølger" når vi har cursor over footer eller noe lignende.

Improve the scaling of blobs

Columns/images of the employee lists are set to a fixed width of 300px which causes scaling issues when responsive typography was introduced to the styleguide. The fixed width is probably due to the non-scaling blob clip-path.

I've come up with a fix using clipPathUnits="objectBoundingBox". Now coordinate system starts at 0 and ends at 1. That way it can "inherit" the size of whatever it is being applied to. Next up is scaling whatever path we are using to operate within the 0 to 1 coordinates. 300x300 => scale(0.003). Put simply, the 300 becomes 0.9.

<clipPath id="clippy" clipPathUnits="objectBoundingBox"> <use xlink:href="#blob" href="#blob" transform="scale(0.003) translate(0, 0)" /> </clipPath>

Søkefelt synces ikke med nytt søk

Hvis man først søker på noe via https://handbook.variant.no/handbook og deretter bruker det lille søkefeltet til høyre igjen så oppdateres ikke det store søkefeltet med det nye søkeordet.

Change filtering logic for visible employees in employee-list

We are using cv-partners role countrymanager to determine if users should be visible in the employee list. But we already see that it's starting to be a difficult thing to enforce. We need a better solution to determine if users should be visible or not.

Logo og lenker i navigasjon er ikke på linje

Solution for menu on smaller screens

We need some way to show the menu on smaller screens. It's easy to think of some sort of togglable menu using the upper right illustration. But there could also be other solutions that are better suited.

Bruk CV Partners API for informasjon om ansatte

Endepunkt: https://variant.cvpartner.com/api/v1/users

Relatert til #80

Endring av adresse

Slik jeg har forstått det så har dere flyttet og derfor antar jeg besøksadressen er feil, det som står nederst på jobs-siden

Utvidet ansattside

Utvidet ansattside som viser litt mer personlig ulike folk i Variant

• Kompetanseområde og interesser
• Oppdrag
• Favoritt-gif fra bloggpost?

Sikre at variant.no ikke automatisk laster ned podcastepisode på fremsiden

Per nå lastes podcast eagerly på variant.no. Det fører til at vi får veldig mange downloads på podcasts. Dette må endres til å kun lastes ned ved trykk på play slik at vi ikke setter kunstig høye lyttertall.

Add Facebook Open Graph Data and statistics

Lag en egen underside med "/huset" som har bilde av huset og generell informasjon som community space.

Promoter Varianthuset og Variantkontorer som community spaces som kan brukes til meetups++.

Tanker:

• Velge mellom Trondheim, Oslo, Bergen
• Ta kontakt med hvis du trenger spons av lokale
• Mikael Brevik som kontakt for Trondheim, endre per by
• For Trondheim kunne en evt. brukt drone-videoen til Mats for "walkthrough" av kontoret

Sørg for at alle ting i 'Bli en Variant' har lenker.

Sertifikatsamsvar

Besøkte PWC i dag. Der ble variant.no sperret pga en eller annen sertifikatfeil. @Krakels vet kanskje mer?

[v2] Generell layout/struktur

Legge opp en generell struktur for informasjon.

Dette er det gjeldende designet:

Navbar forsvinner bak siden under overgangen fra skrå til rett

Litt pirkete kanskje, men ser litt rart ut at det ikke finnes noen synlig navbar i et lite øyeblikk mens man scroller. Først forsvinner navbaren bak <main> som er nedenfor, også dukker den opp igjen ovenifra når overgangen er ferdig.

Add structured data for better search results

See https://developers.google.com/search/docs/guides/intro-structured-data#structured-data

Endring av årstall i lønnskalkulator resettes tilbake til 2017

Når man forsøker å endre årstall i lønnskalkulatoren, og bekrefter inputverdien, så resettes feltet tilbake til default 2017.
F. eks ved bruk av enter på pc, eller "Gå" på iOS.

Header i Firefox

Header oppfører seg ikke normalt i Firefox, legger seg på toppen umiddelbart ved scrolling.

Variant by numbers - TL;DR Variant

Statistikkside som presenterer infographic av Variant med metrikker og statistikk som er relevant for å representere Variant:

• Folk (demografi, fokusområder)
• Kunder, oppdrag og salg.
• Bloggposter, videoer, podcaster.
• Mest aktive Slack-kanal for øyeblikket
• ...

Lag "høyre hjørne" logo animasjon.

Oppe i høyre hjørnet i designet er det en "Si hei"-greie. Denne kan vi animere på en måte.

Litt tung tekst

variant.no/kalas/index.html

Line 169 in 253e343

Vi hadde det så moro forrige gang vi hadde fest at vi så klart må gjøre det igjen.

"Vi hadde det så moro forrige gang vi hadde fest at vi så klart må gjøre det igjen."
forslag:
"Vi hadde det så moro på forrige fest, at vi bare må gjøre det igjen.

Mer interessant visning av kontorer

Vi har behov for å vise mer tydelig frem hvor Variant finnes. For å synliggjøre bedre hvor vi kan være aktuelle for potensielle søkere, men også for å vise frem den komplette historien. Per nå fremgår selskaper i Variant-paraplyen kun fra footer. Det å kunne vise et kart som viser kontorer og potensielt noe info om kontorene i en mer "dynamisk" visning appellerer litt mer enn det som er i dag og løfter frem i større grad hvilke muligheter det er.

Eksempelvisning

@andreashartveit har gjort noen initielle skisser og tankearbeid til håndboken som kan være relevant. Tanken er å vise både lokasjoner men også bruke noen form for animasjoner for å indikere hvordan Variant håper på å ta aktiv del der de er. Type heatmap/paths som brer seg utover i de plassene det er pins.

Målgruppe og behov

• Målgruppe er potensielle ansatte (studenter og erfarne). Sekundært andre i bransjen og potensielle kunder som sjekker hvor vi befinner oss.
• Enkelt synliggjøre hvor vi befinner oss
• Kunne vise metadata som adresser, kontorinformasjon, orgnr.

Uheldig at CV_PARTNER_API_SECRET er required på framsiden

Framsiden henter ansatt (og viser en), om du ikke har satt CV_PARTNER_API_SECRET i .env ved lokal dev så kræsjer framsiden

Horisontal scroll i Chrome Windows

Det er en konteiner som er bredere enn den burde være / en overflow hidden som ikke er satt som gjør at det blir horisontal scroll på variant.no i Chrome for Windows. Ser ikke særlig bra ut.

Bakgrunnsbildet på håndbok siden kan gjerne bare være hvit farge.

Bakgrunnsbildet på håndbok siden kan gjerne bare være hvit farge. ([https://handbook.variant.no/index.html]

Er bare sjukt rart mens leser/scroller nedover på siden med de ikonene...

Ligger her:
.../variant.no/assets/elements/background-pattern.svg

Containeren til logo og navbar på hovedsiden strekker seg ikke helt ut til høyre

Usikker på om dette er med hensikt, men det ser ikke ut til å skje med smalere vindu.
Må vel ha litt bredde på vinduet for å reprodusere denne. Se høyre side på screenshot:

Verifiser at alle undersider er med (kalkulator, varianttur, andre?)

Ansattvisning

Lag en visning som viser alle ansatte

Designet:

Prosjektbeskrivelse: Statens vegvesen

Relatert til #204

• Opprette kundeside for Statens vegvesen

Design

Figma: https://www.figma.com/file/DALULHNE3G8w9GPDtMxGxi/Prosjektbeskrivelser?node-id=467%3A1844

Status innholdsproduksjon

• Ferdigstille kundeside

Random blob component

---

Lag en React-komponent som kan generere en random blob. Kan sende inn bilde for å få det til å være maskert. Dette kan brukes til generelle bilder men også CV bilder på et punkt.

Kan bruke kode som finnes i Styleguide.

Bonus: Animere/morphe paths til blob.

[Re-design] "Noe av det vi gjør"-blokken på forsiden

Hoved-issue: #204
Figma: https://www.figma.com/file/DALULHNE3G8w9GPDtMxGxi/Prosjektbeskrivelser?node-id=416%3A4251

Re-design"Noe av det vi gjør"-blokken fra nåværende forside. Kan gjenbruke nåværende tekst, men gå over til nytt layout / farger. Vent med å lenke til noe til vi har nye undersider.

Nytt design:

Nåværende design (som skal byttes ut):

Legg til Github workflow for Prettier-linting

Vise nye tjenesteområder og tjenesteområde-sider

Initielle redesign av Variant.no.

Design

https://www.figma.com/file/DALULHNE3G8w9GPDtMxGxi/Prosjektbeskrivelser?node-id=285%3A3042

TODOs

• #232
• #234
• #243

Hovedmål

• Løfte frem tjenesteområder
• Oppdrag, folk i oppdrag
• Kompetanse - bredde og dybde.
• I bevegelse / aktivitet

Stikkord:

• Vi burde i større grad vise hva vi faktisk gjør. (Nyttig for potensielle ansatte, eksisterende ansatte og kunder)
• Fokus på impact i samfunn og de i rundt oss. Hvordan tilnærmer vi oss det?
• Samle sammen ulik innhold.
• Vise på ulike steder.
• Lenke prosjekter opp mot spesifikke tjenesteområder.