Skip to content

Meesterproef WEEK 02

Jump to bottom
Michelle Hendriks edited this page Jun 7, 2024 · 18 revisions

Working 2 days a week at this project

📅 MAANDAG 22/04 T/M VRIJDAG 26/04

Analyseren 🔎

📅 WOENSDAG 24/04

Planning:

Einddoel

  • Een voltooide portfolio-website waar mijn projecten worden opgehaald via de GitHub API en de content wordt opgehaald via Sanity(CMS).

Belangrijkste functies en kenmerken

  • Responsief design voor zowel desktop als mobiele apparaten
  • Overzicht van projecten met details, afbeeldingen en links naar de GitHub repositories
  • Contentbeheer via Sanity
  • Contactformulier voor potentiële werkgevers of klanten om eenvoudig contact op te nemen
  • Een 'Over mij' sectie die mijn vaardigheden en ervaring beschrijft
  • Github API data gebruiken

Deadline

  • 14-06-2024

Taken aanmaken

Screenshot 2024-05-23 at 14 24 24

Categoriseer de stappen(labels aanmaken)

**Werkwijze **

  1. Taken aan pages gelabeld
  2. Taken onderverdeel per DLC-fase
  3. Taken geprioriteerd
  4. Uren gekoppeld per taken
  5. Taken onderverdeel in de weken op basis van uren.
  6. Taken toegewezen aan de werk dag.
Screenshot 2024-05-24 at 12 55 36

Overzicht board

Screenshot 2024-05-24 at 12 55 46

Tijdsduur van de taken Ik werk 2 dagen per week aan het project en totaal 16uur.

Bepaal de volgorde van de taken(MoSCoW-methode)

Waarom kies ik voor Astro?

📅 DONDERDAG 25/04

Voor mijn Meesterproef heb ik besloten mijn portfolio te bouwen met Astro als frontend framework. Voorheen had ik mijn portfolio opgebouwd met Next.js, maar Next.js ligt ver weg van SvelteKit. Momenteel werk ik met SvelteKit en ik zocht een framework dat qua structuur en benadering dicht bij SvelteKit ligt, zodat de overstap niet te groot zou zijn. Astro heeft dezelfde componentgebaseerde benadering en komt overeen met de webstandaarden, wat de overgang gemakkelijker maakt. Bovendien wilde ik mijn vaardigheden in JavaScript verder ontwikkelen, en omdat Astro dicht bij de webstandaarden ligt, was dit een perfecte keuze voor mij. Het mixen van verschillende frameworks vond ik ook erg fijn, omdat ik in de toekomst misschien SPA-websites wil maken en met Astro de vrijheid heb om elk UI-framework te kiezen of zelfs meerdere te combineren.

Eenvoudige HTML is een Component (JSX / webcomponent) Het Astro-framework introduceert de .astro-bestandsextensie als een component. Maak een nieuw bestand, schrijf wat HTML erin - en daar heb je het - een volledig aangepaste HTML-component die overal gebruikt kan worden.

<!-- Link.astro -->
<a href="/">Mijn Link</a>
En dan, importeer dat eenvoudig overal - in een Astro-bestand:

import Link from '.@/components/Link.astro';
  <div>
    <Link />
  </div>

Ik zie dat als een voordeel omdat het zo eenvoudig is - geen functie schrijven, zoals Next.js - minder rommel.

import Link from '.@/components/link.astro';

Contact Me

Dit brengt me bij het volgende duidelijke voordeel - het werkt hetzelde als Sveltekit.

Routing Op Basis Van Directories En Bestanden Astro bevat standaard routing door gebruik te maken van de conventie van de /pages-directory. Elk .astro-bestand in die directory wordt een route. Als het een directory is, kun je eenvoudig index.astro gebruiken.

Er zijn meer opties om dynamische routes te ondersteunen - bijvoorbeeld, als je een /blog/an-id-of-a-post hebt, zou je /blog/[id].astro gebruiken als een bestand om alle dynamische posts af te handelen die daar moeten zijn(hetzelfde als Sveltekit).

Run Javascript Wanneer en Waar Het Nodig Is Standaard rendert Astro statische pagina’s. Hoewel het SSR ondersteunt en server-API-routes, bevat Astro speciale directives (HTML-attributen) die verschillende laad- en activatiestrategieën instrueren. Om client-side Javascript in de browser uit te voeren, zou je de client directive gebruiken:

import Link from '@/compoennts/Link.astro';
<Link client:only>any js runs inside the component in the browser</Link>

Dit zorgt ervoor dat elke JS-code die is opgenomen in Link.astro in de browser wordt uitgevoerd - dit omvat event handlers en praktisch alles

Astro bevat een fantastische documentatie met veel voorbeelden en handleidingen over hoe je bijna alles kunt doen wat je je kunt voorstellen.

🔗 Materiaal

Waarom kies ik voor Astro & Sanity?

  1. Kostenoverwegingen: Toekomstige Prijsstijgingen: Ik heb gelezen dat Contentful mogelijk duurder wordt en waarschijnlijk extra kosten gaat inhouden in de toekomst.

  2. Toekomstige Overstapmogelijkheden: Consistente Ervaring: Omdat ik overweeg om mijn andere website in de toekomst ook naar Sanity te migreren, zorgt het nu kiezen voor Sanity voor mijn portfolio voor een consistente ervaring. Dit maakt

Voor het opzetten van het Project heb ik onderstaande link gebruikt, omdat ik dit qua beschrijving het fijnste vond. Daarnaast heb ik ook een voorbeeld erbij gepakt van de officiële sanity-webpage, de sanity-astro-blog. Link naar how-to-use-sanity-cms-with-astro ->

Materiaal:

Wat wil ik uit de github API halen?

  • Naam project met een korte beschrijving van elk project.
  • De belangrijkste programmeertaal van elke repository.
  • Datum van laatste update: Hoe recent je aan het project hebt gewerkt.
  • Link naar repository: Directe link om de repository te bekijken.

Materiaal:

Link naar getting-started-with-the-rest-api ->

Clone this wiki locally