1. Analyseren - fatihg61/Fatihport GitHub Wiki

Doelstellingen

  • Doel van het project: Creëer een persoonlijk portfolio om mijn werk en vaardigheden te presenteren.
  • Belangrijkste functies: Over mij-sectie, projectoverzicht, contactformulier (PE).
  • Minimale JavaScript: Gebruik van SvelteKit voor een snelle, lichte en dynamische webpagina.

Doelgroep

  • Primair: Potentiële werkgevers en klanten.
  • Secundair: Studiegenoten en Docenten.

Eisen en Wensen

  • Content: Over mij, projecten, contactgegevens.
  • Design: Responsief ontwerp(mobile first), minimalistisch, toegankelijk.
  • Functionaliteit: Snelle laadtijden, eenvoudig te navigeren, minimale afhankelijkheid van JavaScript.

Technologieën en Tools

  • Framework: SvelteKit.
  • Hosting: Vercel.

structuur

  • Componenten: Svelte-componenten voor clean coding.
  • Pages: Single-page.
  • Data: API server voor FORM.
  • Conventies: Agnecy conventies aanhouden.

Planning en Tijdlijn

  • Fase 1: Onderzoek en planning (1 week)
  • Fase 2: Ontwerp en prototyping (1 week)
  • Fase 3: Ontwikkeling en testen (4 weken)
  • Fase 4: We are LIVE! (1 week)

User story

  • 1: Ik wil de mogelijkheid hebben om op oude browsers een aanvraag te kunnen doen via de formulier.
  • 2: Ik wil graag weten wanneer ik de formulier invul dat ik het goed doe.

Knelpunten

1: Hoe kan ik werken met mailservers als ik hier nog geen ervaring mee heb? Ik kan dit oplossen met Web3Forms, wat veel eenvoudiger is om in te stellen dan traditionele oplossingen zoals MailSender. Deze video biedt een handige uitleg: https://www.youtube.com/watch?v=luLYIpLojE0

2: Hoe kan ik foutmeldingen tonen zonder JavaScript te gebruiken? Aanvankelijk had ik een JavaScript-oplossing, maar deze werkte niet op alle apparaten. Er was een HTML-fallback, maar die zag er niet fraai uit. Na een tip van Dorien heb ik gezocht naar CSS-oplossingen om dit op te lossen. Deze video heeft me geholpen: https://www.youtube.com/watch?v=P6djqwBKR-k

3: Hoe kan ik werken met Progressive Enhancement (PE) in SvelteKit voor formulieren? De uitleg van Joost en een korte tutorial van Zenit waren hierbij nuttig. Daarnaast heeft deze video me ook geholpen: https://www.youtube.com/watch?v=9pB3lwfeCJI