Przede wszystkim musimy najpierw wyjaśnić sobie, dlaczego powstają takie strony?
Pierwszym powodem jest to, że tacy twórcy najczęściej chcą podzielić się swoją wiedzą, aby inni też mogli się nauczyć. Czy obawiam się o konkurencję? I tak i nie, ale do rzeczy.
Przeznaczenie strony typu O mnie
Taka strona ma zrobić pierwsze wrażenie typu “Wow“. Postawiłem przede wszystkim na minimalizm, jak najmniej, a zarazem wszystko, co musisz wiedzieć, przekazałem.
Wygląd
Otwierając stronę, na środku pojawia Ci się mój nick, moje logo oraz slogan. Poniżej widzisz moje główne języki programowania, a na dole tego pojemnika widzisz 4 linki. Minimum, a wiesz już prawie wszystko.
Przyciski prowadzące do różnych miejsc są opatrzone ikonkami (z FontAwesome), dzięki którym nie musisz czytać, do czego odnoszą, ale podświadomie wiesz dokładnie, co oznaczają.
W tle strony widzisz ruszające się gwiazdki, część z nich jest połączone delikatnymi liniami. Daje to też efekt spokoju, a zarazem chaosu, widzisz, jak one się odbijają w losowe strony, pojawiają się w losowym miejscu. Dzięki temu nasz mózg zaczyna się nad całością skupiać (ponieważ gwiazdki wszędzie się ruszają), a teraz spróbuj kliknąć pustą przestrzeń kilka razy 🙂
A teraz coś, czego nie widać od razu
Czyli kod strony, cały kod strony zawiera się w 250 linijkach kodu oraz 2 bibliotekach zewnętrznych (FontAwesome — do ikonek i particles.js — do efektu tła).
Najpierw trzeba było przygotować miejsce na tło, czyli tradycyjnie 100vh i 100% oraz ukrycie pasków przewijania.
Kolejną kwestią było stworzenie wyśrodkowanego pojemnika, największe przekleństwo nowych programistów, którzy dopiero, co poznali CSS. Ale z pomocą przychodzi stara dobra regułka:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);Kolejną rzeczą, było przygotowanie strony pod SEO, aby mieć “darmową reklamę”, czyli dodanie wszystkich niezbędnych znaczników <meta> oraz, co dla niektórych może być nowością, zamienienie grafik na webp. Samych znaczników meta znajduje się aż 16. Wszystko, przez Twitter`a, który ma własne znaczniki, a chcę, aby tam też dobrze cała strona się wyświetlała.
Jak zmusić osoby do wejścia?
Po prostu zablokować normalną opcję wejścia w kod źródłowy i w powiadomieniu napisać, że znajdziesz go albo na GitHub, albo na blogu. A to wszystko za sprawą jednej linijki
<body oncontextmenu="alert('You can finde source code on Github and blog'); return false;">