nav is in center, projects layout, home fixed

This commit is contained in:
Filip Rojek 2023-03-06 23:51:51 +01:00
parent e9e6d573dc
commit 8f1dc7e9a8
7 changed files with 164 additions and 74 deletions

View File

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

View File

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

34
v4/css/projects.css Normal file
View File

@ -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;
}

View File

@ -14,11 +14,30 @@ body {
border: 1px solid purple; 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 { .nav {
position: relative;
display: flex; display: flex;
border: 1px solid red; border: 1px solid red;
padding: 1rem; padding: 1rem;
justify-content: space-between; justify-content: space-between;
isolation: isolate;
} }
.nav .logo img { .nav .logo img {
@ -29,13 +48,22 @@ body {
.nav .links { .nav .links {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
gap: 1rem; gap: 1rem;
border: 1px solid orange; border: 1px solid orange;
z-index: -1;
}
@media (min-width: 400px) {
.nav .links {
position: absolute;
inset: 0;
}
} }
.content { .content {
border: 1px solid green; border: 1px solid green;
padding: 2rem 5rem; padding: 2rem 1rem;
} }
footer { footer {

View File

@ -68,17 +68,17 @@ if($prod) { ?>
?> ?>
<section class="content"> <section class="content">
<?php <?php
$R = new Router(); $R = new Router();
$R->route('/', 'home'); $R->route('/', 'home');
$R->route('/home', 'home'); $R->route('/home', 'home');
$R->route('/domu', 'home'); $R->route('/domu', 'home');
$R = null; $R = null;
?> ?>
</section> </section>
<footer> <footer>
<?php <?php
require_once("./components/footer.php"); require_once("./components/footer.php");
?> ?>
</footer> </footer>
</body> </body>

View File

@ -3,11 +3,11 @@
<section> <section>
<p>Filip Rojek &ltfilip(at)filiprojek.cz&gt</p> <p>Filip Rojek &ltfilip(at)filiprojek.cz&gt</p>
<br> <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> <br>
<p id="pgp" title="copy pgp to clipboard">PGP: fc37b989787acf8cbce7c0c2a56a345efe321161</p> <p id="pgp" title="copy pgp to clipboard">PGP: fc37b989787acf8cbce7c0c2a56a345efe321161</p>
<br> <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> </section>
<script> <script>

View File

@ -1,77 +1,107 @@
<link rel="stylesheet" href="/css/projects.css">
<h3>Projekty</h3> <h3>Projekty</h3>
<section> <section class="projects">
<div> <div class="card">
<p>pkmples.cz</p> <div class="card_left card_text">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p> <p>pkmples.cz</p>
<div class="technologies"> <p>Komerční webová stránka pro PKM PARTY PLES.</p>
<span>PHP</span> <div class="technologies">
<span>Linux</span> <span>PHP</span>
<span>Nginx</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>
<p>01/2023</p>
<img src="https://www.fofrweb.com/images/pkm_two.png" alt="project screenshot">
</div> </div>
<div>
<p>rapiddglass.cz</p> <div class="card">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p> <div class="card_left">
<p>10/2022</p> <img src="https://www.fofrweb.com/images/rapidd.png" alt="project screenshot">
<div class="technologies"> </div>
<span>PHP</span> <div class="card_right card_text">
<span>Linux</span> <p>rapiddglass.cz</p>
<span>Nginx</span> <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>
</div> </div>
<img src="https://www.fofrweb.com/images/rapidd.png" alt="project screenshot">
</div> </div>
<div>
<p>danielryslavy.cz</p> <div class="card">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p> <div class="card_left card_text">
<p>06/2022</p> <p>danielryslavy.cz</p>
<div class="technologies"> <p>Komerční webová stránka osobního trenéra Daniela Ryšlavého.</p>
<span>PHP</span> <p>06/2022</p>
<span>Linux</span> <div class="technologies">
<span>Nginx</span> <span>PHP</span>
</div> <span>Linux</span>
<img src="https://www.fofrweb.com/images/fitness.png" alt="project screenshot"> <span>Nginx</span>
</div>
</div> </div>
<div> <div class="card_right">
<p>Fofrmess</p> <img src="https://www.fofrweb.com/images/fitness.png" alt="project screenshot">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
<p>02/2022</p>
<div class="technologies">
<span>Node.js</span>
<span>Express.js</span>
<span>PostgreSQL</span>
<span>Linux</span>
<span>Nginx</span>
</div> </div>
<img src="#" alt="project screenshot">
</div> </div>
<div>
<p>Fofrtasks</p> <div class="card">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p> <div class="card_left">
<p>10/2021</p> <img src="#" alt="project screenshot">
<div class="technologies"> </div>
<span>Node.js</span> <div class="card_right card_text">
<span>Express.js</span> <p>Fofrmess</p>
<span>MongoDB</span> <p>Chatovací realtime PWA aplikace.</p>
<span>Linux</span> <p>02/2022</p>
<span>Nginx</span> <div class="technologies">
<span>Node.js</span>
<span>Express.js</span>
<span>PostgreSQL</span>
<span>Linux</span>
<span>Nginx</span>
</div>
</div> </div>
<img src="#" alt="project screenshot">
</div> </div>
<div>
<p>Fofrbazar</p> <div class="card">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p> <div class="card_left card_text">
<p>04/2021</p> <p>Fofrtasks</p>
<div class="technologies"> <p>Aplikace pro vytváření a správu poznámek a úkolů.</p>
<span>PHP</span> <p>10/2021</p>
<span>Laravel</span> <div class="technologies">
<span>MySQL</span> <span>Node.js</span>
<span>Linux</span> <span>Express.js</span>
<span>Apache</span> <span>MongoDB</span>
<span>Linux</span>
<span>Nginx</span>
</div>
</div>
<div class="card_right">
<img src="#" alt="project screenshot">
</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>Internetová bazarová platforma.</p>
<p>04/2021</p>
<div class="technologies">
<span>PHP</span>
<span>Laravel</span>
<span>MySQL</span>
<span>Linux</span>
<span>Apache</span>
</div>
</div> </div>
<img src="#" alt="project screenshot">
</div> </div>
</section> </section>