nav is in center, projects layout, home fixed

v4/components/header.php

@@ -7,6 +7,5 @@
 		<a href="/projects">Projekty</a>
 		<a href="/contact">Kontakt</a>
 	</div>
-	<div></div>
 </section>
 

v4/css/home.css

@@ -3,7 +3,6 @@
 }
 .home {
 	font-size: 1.2rem;
-	height: 100;
 }
 .home section {
 	text-align: center;

v4/css/projects.css

@@ -0,0 +1,34 @@
+.projects {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 1rem;
+}
+
+.projects img {
+	max-width: 100%;
+	display: block;
+}
+
+.card {
+	display: flex;
+	border: 1px solid red;
+	width: min(40rem, calc(100% - 1rem));
+}
+
+.card .card_text > * {
+	margin: 1rem;
+}
+
+.card > * {
+	flex-basis: 100%;
+}
+
+.card .card_left {
+	border: 1px solid green;
+}
+
+.card .card_right {
+	border: 1px solid yellow;
+}
+

v4/css/style.css

@@ -14,11 +14,30 @@ body {
 	border: 1px solid purple;
 }
 
+html {
+	overflow-y: scroll !important;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	scroll-behavior: smooth;
+}
+*::-webkit-scrollbar {
+    width: 5px;
+}
+*::-webkit-scrollbar-thumb {
+    background-color: #ffffff;
+    border-radius: 20px;
+}
+*::-webkit-scrollbar-track {
+    background: #000000;
+}
+
 .nav {
+	position: relative;
 	display: flex;
 	border: 1px solid red;
 	padding: 1rem;
 	justify-content: space-between;
+	isolation: isolate;
 }
 
 .nav .logo img {
@@ -29,13 +48,22 @@ body {
 .nav .links {
 	display: flex;
 	align-items: center;
+	justify-content: center;
 	gap: 1rem;
 	border: 1px solid orange;
+	z-index: -1;
+}
+
+@media (min-width: 400px) {
+	.nav .links {
+		position: absolute;
+		inset: 0;
+	}
 }
 
 .content {
 	border: 1px solid green;
-	padding: 2rem 5rem;
+	padding: 2rem 1rem;
 }
 
 footer {

v4/pages/home/home.php

@@ -3,11 +3,11 @@
 	<section>
 		<p>Filip Rojek &ltfilip(at)filiprojek.cz&gt</p>
 		<br>
-		<p>Backend nodejs & php developer <a href="https://www.fofrweb.com/">@fofrweb</a>,<br> Linux Gentoo user, student and coffee enthusiast<span class="underscore">_</span><p>
+		<p>Backend node.js & php developer <a href="https://www.fofrweb.com/" target="_blank">@fofrweb</a>,<br> Linux Gentoo user, student and coffee enthusiast<span class="underscore">_</span><p>
 		<br>
 		<p id="pgp" title="copy pgp to clipboard">PGP: fc37b989787acf8cbce7c0c2a56a345efe321161</p>
 		<br>
-		<p><a href="https://github.com/filiprojek">Github</a> <a href="https://t.me/filiprojek">Telegram</a> <a href="#" id="pgpmobile" title="copy pgp to clipboard">PGP</a></p>
+		<p><a href="https://git.filiprojek.cz/fr" target="_blank">Git</a> <a href="https://t.me/filiprojek" target="_blank">Telegram</a> <a href="#" id="pgpmobile" title="copy pgp to clipboard">PGP</a></p>
 	</section>
 
 	<script>

v4/pages/projects/projects.php

@@ -1,42 +1,62 @@
+<link rel="stylesheet" href="/css/projects.css">
 <h3>Projekty</h3>
 
-<section>
+<section class="projects">
-	<div>
+	<div class="card">
+		<div class="card_left card_text">
 			<p>pkmples.cz</p>
-		<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
+			<p>Komerční webová stránka pro PKM PARTY PLES.</p>
 			<div class="technologies">
 				<span>PHP</span>
 				<span>Linux</span>
 				<span>Nginx</span>
 			</div>
 			<p>01/2023</p>
+		</div>
+		<div class="card_right">
 			<img src="https://www.fofrweb.com/images/pkm_two.png" alt="project screenshot">
 		</div>
-	<div>
+	</div>
+
+	<div class="card">
+		<div class="card_left">
+			<img src="https://www.fofrweb.com/images/rapidd.png" alt="project screenshot">
+		</div>
+		<div class="card_right card_text">
 			<p>rapiddglass.cz</p>
-		<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
+			<p>Komerční webová stránka pro přípravek na ochranu a čištění krbového skla Rapidd Glass.</p>
 			<p>10/2022</p>
 			<div class="technologies">
 				<span>PHP</span>
 				<span>Linux</span>
 				<span>Nginx</span>
 			</div>
-		<img src="https://www.fofrweb.com/images/rapidd.png" alt="project screenshot">
 		</div>
-	<div>
+	</div>
+
+	<div class="card">
+		<div class="card_left card_text">
 			<p>danielryslavy.cz</p>
-		<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
+			<p>Komerční webová stránka osobního trenéra Daniela Ryšlavého.</p>
 			<p>06/2022</p>
 			<div class="technologies">
 				<span>PHP</span>
 				<span>Linux</span>
 				<span>Nginx</span>
 			</div>
+	</div>
+		<div class="card_right">
 			<img src="https://www.fofrweb.com/images/fitness.png" alt="project screenshot">
 		</div>
-	<div>
+	</div>
+
+	<div class="card">
+		<div class="card_left">
+			<img src="#" alt="project screenshot">
+		</div>
+		<div class="card_right card_text">
 			<p>Fofrmess</p>
-		<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
+			<p>Chatovací realtime PWA aplikace.</p>
 			<p>02/2022</p>
 			<div class="technologies">
 				<span>Node.js</span>
@@ -45,11 +65,13 @@
 				<span>Linux</span>
 				<span>Nginx</span>
 			</div>
-		<img src="#" alt="project screenshot">
 		</div>
-	<div>
+	</div>
+
+	<div class="card">
+		<div class="card_left card_text">
 			<p>Fofrtasks</p>
-		<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
+			<p>Aplikace pro vytváření a správu poznámek a úkolů.</p>
 			<p>10/2021</p>
 			<div class="technologies">
 				<span>Node.js</span>
@@ -58,11 +80,19 @@
 				<span>Linux</span>
 				<span>Nginx</span>
 			</div>
+		</div>
+		<div class="card_right">
 			<img src="#" alt="project screenshot">
 		</div>
-	<div>
+	</div>
+
+	<div class="card">
+		<div class="card_left">
+			<img src="#" alt="project screenshot">
+		</div>
+		<div class="card_right card_text">
 			<p>Fofrbazar</p>
-		<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
+			<p>Internetová bazarová platforma.</p>
 			<p>04/2021</p>
 			<div class="technologies">
 				<span>PHP</span>
@@ -71,7 +101,7 @@
 				<span>Linux</span>
 				<span>Apache</span>
 			</div>
-		<img src="#" alt="project screenshot">
+		</div>
 	</div>
 </section>