CV Workshop 👷‍♀️

Note

Du står fritt til å begynne med oppgaven før workshoppen! Ikke vær redd for å stille spørsmål på forhånd. Send en e-post til reinu@stacc.com om du lurer på noe som helst :)

I denne workshoppen skal vi ta i bruk dette templatet for å bygge våre egen hjemmeside. Templatet inneholder det mest basale for å komme i gang. Håpet er når du er ferdig med workshoppen, har du en nettside som er tilgjengelig for andre på nett og som du har eierskap over. Du kommer kanskje ikke til å bygge veldig mye mer funksjonalitet på nettsiden, men du har en grunnlag som du kan bygge videre på i fremtiden.

Templatet er bygget med React og NextJS. Du trenger ikke å bekymre deg hvis du ikke vet hva det betyr, vi kommer til å guide deg gjennom oppgaven. Du spør om så mye hjelp som du trenger!

Hva må jeg ha for å starte? 📝

For å ta i bruk dette templatet trenger du noen grunnleggende ting:

1. En IDE, altså et program hvor du kan skrive kode. Vi anbefaler VSCode som er gratis.

2. En terminal hvor du kan skrive inn kommandoer på PC'en din. (Det er innebygget på alle datamaskiner. Søk etter CMD på Windows og Terminal på Mac)

3. GIT som er et versjonskontroll system. Du bruker det for å snakke med nettsiden du er på nå, Github.

Skriv git --version i terminalen din for å verifisere at Git er lastet ned korrekt.

4. Node som bruker for å kjøre koden lokalt på din maskin. (Trykk på knappen hvor det står Recommended for most users).

Skriv node --version i terminalen din for å verifisere at Git er lastet ned korrekt.

5. En Github konto. Dette er kontoen hvor vi skal lagre koden din. Hvis du har en allerede, bruk den!

6. (VALGFRITT): En Vercel konto. Vi bruker Vercel til å hoste nettsiden din og gjøre den tilgjengelig for andre. Vercel er gratis! Hvis du ikke ønsker å legge ut nettsiden din, kan du skippe dette steget.

Hvor starter jeg? 👩‍💻

Start med å trykke knappen ovenfor, den vil starte en prosess som hjelper med følgende:

1. Lage eventuell Vercel- og Github konto, samt koble dem sammen.
2. Klone koden fra dette repositoriet til din egen konto.
3. Legge siden ut på internett, samt koble sammen hver gang du pusher nye endringer til Github, så vil det endre nettsiden.

Etterpå er du nødt til å klone ned repoet lokalt slik at du kan begynne å endre på koden selv. Vi har en video under som viser dette

Vi har laget en kort video som viser hele denne prosessen. Du finner videoen her

Hva gjør jeg nå alt er satt opp? 🚀

Nå er nettsiden ute på nett og vi har koden lokalt på pc'en vår, da er vi klar til å skrive kode. For å få koden vi skriver lokalt opp og ut på nettet, bruker vi git som dere lastet ned ovenfor. Du kan bruke git direkte i VSCode men også ved å bruke terminalen. For å bruke git i terminalen er det 3 hovedkommandoer vi skal bruke.

Note

Når vi jobber i terminalen er det viktig å huske "hvor du er" i filstrukturen din. Alle kommandoene vi kjører i denne workshoppen skal kjøres fra rot i prosjektet. Hvis du følger instruksene i videoen, vil du være i rot av prosjektet i terminalen

• git add ., denne kommandoen "stager" alle filene i samme mappe som du er i terminalen. Å "stage" betyr at filene låses for videre endringer.
• git commit -m "her skriver du hvilke endringer du gjorde", denne kommandoen lagrer kodeendringene dine sammen med en tekst som beskriver endringene dine.
• git push, denne kommandoen dytter endringene dine til Github og videre ut på nettet. Du vil se endringene din live på nettsiden din.

Men når vi holder på å lage endringene våre, er det for vanskelig og tidskrevende å dytte kode ut på nett for å se endringene våre. Vi kjører da opp nettsiden lokalt. Det gjør vi ved å først skrive npm install og deretter npm run dev i terminalen vår. Da vil du kunne bevege deg til nettleseren din og skrive inn localhost:3000. Her vil alle endringer du gjør lokalt vise seg når du lagrer filene.

Andre kommandoer som det er greit å kunne i terminalen:

• Liste ut alle filer og mapper i den mappen du befinner deg i: ls på Mac/Linux og dir på Windows
• Navigere deg en mappe ut: cd ..
• Navigere deg til en ny mappe fra hvor du står: cd bytt_ut_med_mappe_navn
• Åpne VSCode i den mappen du står i: code .

Hva nå? 🤷‍♀️

Du står nå fritt frem til å style, bygge videre eller gjøre hva du vil med siden. Her er noen forslag til hva du kan gjøre med den:

• Lag en ny side som samler alle prosjektene dine, og legg en link til denne i menyen.
Tips! Her kan du kanskje gjenbruke prosjektmodulen fra landingssiden?
• Legge til en seksjon for “Kurs”, “Frivillig” eller “Annet” på CV-siden
• Lag en footer

  • Tips! Footeren bør inneholde informasjon brukeren vil ha raskt. For eksempel kontaktinformasjon eller linker til sosiale medier.
• Fyll ut informasjon i en artikkel, og legg til et enkelt bilde med bildetekst i teksten. 

  • Tips! Lek deg rundt med former, farger og fonter for å gjøre nettsiden til din egen 🌸

Nyttige kilder 📚

• Git på 100 sekunder
• TailwindCSS - Pakken vi bruker for å stilsette nettsiden.
• React - Pakken som vi bruker til å bygge de ulike sidene og komponentene med
• NextJS - NextJS ligger rundt React og gir den ekstra funksjonalitet.