WW Probeaufgabe

Anleitung

1. MySQL starten
2. Mit mySQL verbinden (z.B. mit Beekeeper Studio)
   1. localhost:3306
   2. User: root
3. Datenbank einrichten:

create table `teammembers` (
	`id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
	`first_name` varchar(100) NOT NULL,
	`last_name` varchar(100) NOT NULL,
	`image_url` varchar(100) NOT NULL,
	`email` varchar(100) NOT NULL
)

insert into teammembers (first_name,last_name,image_url,email)
values ('Monika', 'Petersen', 'petersen-monika.png', '[email protected]')

insert into teammembers (first_name,last_name,image_url,email)
values ('Leon', 'Knirsch', 'knirsch-leon.png', '[email protected]')

4. eventuell php artisan migrate
5. npm install
6. npm run dev
7. php .\artisan serve

Hinweise

E-Mail-Versand

Zum Testen des E-Mail-Versands habe ich mailtrap benutzt und die Zugangsdaten der .env-Datei hinzugefügt.

Animationen

Animationen sind mit CSS umgesetzt. Die Startanimationen mithilfe von tailwindcss-animated, die "scroll"-Animationen mithilfe der relativ neuen view-timeline-API. Firefox deaktiviert die view-timeline/animation-timeline/scroll-timeline zurzeit standardmäßig. Safari hat noch keine Umsetzung. Wenn ein konsistenter Auftritt mitsamt Animationen über alle Browser hinweg zwingend erforderlich/erwünscht ist, kann natürlich auf JavaScript (z.B. gsap) zurückgegriffen werden.

Navigation

Das Navigations-Menü ist in der mobilen Ansicht als Hamburger-Menü und mithilfe der neuen CSS popover-API umgesetzt die eine gute Browser-Unterstützung mitbringt. Für den Fall, dass die API noch nicht unterstützt wird, wird die Navigation mithilfe der CSS @supports not-Regel dauerhaft angezeigt.