Zbuduj własne portfolio z Tailwind CSS: Implementacja sekcji z projektami

0:00Kolejny element, na którym skupimy swoją uwagę to będzie sekcja o projektach.

0:04Ja sobie tutaj sfault'owałem te poprzednie dwie sekcje, żeby nie przeszkadzały nam tutaj w

0:08Development'cie. Kolejna sekcja, sekcja o projektach.

0:11Zobaczmy jak ona wygląda tutaj na widoku mobilnym,

0:13przede wszystkim. Od tego zaczynamy naszą przygodę i tutaj jak zjedziemy sobie na dół.

0:19No to pierwsza rzecz, która się rzuca w oczy to sekcja

0:21ta cała ma inne tło.

0:22Ma ona tło tak samo jak nasz header, czyli zinc-950.

0:27Możemy sobie zacząć już od tego.

0:28Ja sobie przeniosę tutaj Figmę na prawą

0:31stronę, żeby wiedzieć mniej więcej jak to wygląda, żebyśmy sobie scaffold'owali

0:37tutaj, jakby generalną strukturę tej sekcji naszych projektów.

0:40Przesuniemy to sobie jeszcze w prawo, żebyśmy to widzieli i tak.

0:43Zaczniemy od głównego wrapper, który ma klasę i będziemy potrzebowali na

0:49pewno na starcie jakiś padding na x wielkości 4, bo to jest standardowy

0:54padding, który tutaj mamy na wielkości mobilnej u nas.

0:58Dodatkowo background musimy ustawić nasz zinc-950.

1:02To jest ten najciemniejszy background, który potrzebujemy

1:05i myślę, że od razu możemy sobie ustawić padding top i bottom dla takiej sekcji.

1:11Myślę, że jest to ta sama wartość i zaraz sobie to tutaj zmierzymy.

1:15Może sprawdźmy na bottom jak to wygląda.

1:18Jeżeli chodzi o odległość jest ok.

1:2040 myślę pixeli to jest co prawda 36.

1:23Myślę, że możemy

1:25ustalić to na sobie na 40 pixeli, żeby padding na y to jest top i bottom na 10.10 razy 10

1:32jest 40 tak jak widzimy tutaj podpowiedzi

1:33intelisense zapisujemy sobie tą naszą kolejną sekcję.

1:37Na razie jak przejdziemy sobie na naszą stronę

1:39internetową no to pojawia się tylko czarny pasek,

1:41nie mamy jeszcze nic. Pierwsza rzecz, którą będziemy

1:44potrzebowali jak widzimy tutaj na naszym designie,

1:48to potrzebujemy nasz header, czyli tak naprawdę ten sam komponent,

1:53który mamy tutaj z dodatkowym napisem pod spodem, który jest nie słowa tylko czynny

1:57sprawdź moje projekty.

1:59Przejdźmy więc do naszego header'a

2:02w miejsce, no może nie w header'a może w sekcji about me w miejsce w którym mamy ten komponent.

2:08Tutaj z napisem z tymi dwoma pomarańczowymi kulkami.

2:11Możemy sobie kopiować ten komponent i wkleimy sobie tutaj na topie naszej sekcji.

2:16Zmieńmy tylko napis na moje projekty albo wybrane projekty.

2:23I musimy zmienić kolor tekstu z tego

2:26względu, że on tutaj musi być biały, czyli text-zinc-50.

2:31Zapiszemy to sobie, przejdziemy do naszej przeglądarki, no i już widzimy wybrane

2:35projekty odpowiednio w takiej samej formie jak ten komponent tutaj powyżej.

2:40Pod tym komponentem mamy jeszcze dodatkowy element w postaci tego napisu span.

2:45Czyli możemy sobie już tutaj owrapować te elementy.

2:49Jako że mamy tutaj flex to kolejny element gdybyśmy tutaj coś dodali.

2:52Zobacz, że jak dotąd tu jest span:

2:57Hello.

2:58No to przesunie nam to i tutaj ten hello pojawia się dopiero w tym miejscu.

3:01Nie chcemy tego, dlatego musimy sobie zgrupować te elementy tutaj na górze.

3:09Musimy sobie zrobić wrap with abbereviation.

3:11Zrobimy sobie po prostu wrapujemy tu w normalnego div'a i tutaj zrobimy sobie span.

3:16I tutaj potrzebujemy ten tekst z naszego designu.

3:19Mianowicie nie słowa, tylko czyny sprawdź moje projekty.

3:26Zapiszę to sobie.

3:27Przejdźmy do naszej strony i już widzimy, że nam się tutaj coś

3:30zepsuło z tego względu, że przydałoby się tutaj zrobić width na full.

3:39Teraz musimy przenieść pewne style, które mieliśmy tutaj do tego poniżej.

3:45Czyli najpierw zaczniemy flex.

3:49Item center gap 2. Już to ułoży nam te elementy tak jak powinien.

3:55To możemy sobie usunąć.

3:58Już mamy wybrane projekty tak jak powinny być.

4:01Napisu jeszcze nie widzimy z tego względu,

4:03że no mamy inny kolor, czyli class text zinc

4:08ustawmy sobie to na 300

4:11wyśrodkujemy sobie ten tekst, czyli text center w naszym przypadku możemy sobie ustawić.

4:18I jeszcze potrzebujemy nadać tutaj naszemu elementowi text, text center.

4:27I mamy wyśrodkowane nasze elementy w naszym głównym div'ie.

4:31Jeżeli chodzi o ten header myślę, że header mamy z głowy.

4:34Sprawdźmy jeszcze tylko odległość czy nie

4:36mamy jakieś odległości 4 pixele, czyli musimy przesunąć ten span tutaj od góry.

4:42Margin top na 1, z resztą

4:47jeżeli operujemy padding'ami to lepiej zróbmy margin, padding na top na 1 i w tym

4:52momencie odsuneliśmy sobie ten element tutaj od tego głównego tytułu.

4:56Tytuł mamy z głowy.

4:57Kolejna rzecz, na której powinniśmy skupić naszą uwagę to będzie pojedyńczy projekt.