do index.html přidány další informace a přidány styly

index.html

@@ -13,9 +13,30 @@
         <img src="profilovka/archos.jpg" alt="Můj obrázek">
         
         <h2>O mně</h2>
-
+        <section>
-        <p>Ahoj, jmenuji se Zdenek Kreml a jsem [vaše povolání nebo zájmy]. Tato stránka je krátkým úvodem do mého světa.</p>
+    <p>Ahoj, jmenuji se Zdeněk Kreml. Jsem členem komunity Arch Linux CZ a nadšeným podporovatelem open source. Moje záliba v technologiích sahá od operačních systémů jako Arch Linux až po bezpečnostně orientované mobilní platformy jako GrapheneOS. Své odborné dovednosti nejvíce uplatňuji při správě serverů, které běží na Ubuntu a Debianu, a při hostování a správě různých komunitních platforem a open source aplikací.</p>
+    <p>Jako <strong>Open Source Nadšenec</strong>, věřím v sílu otevřeného softwaru a jsem aktivním přispěvatelem do jeho komunity. Považuji se za <strong>Uživatele Arch Linuxu a GrapheneOS</strong>, kde mi tyto systémy umožňují spojit moji vášeň pro bezpečnost a stabilitu s praktickým využitím v každodenním životě.</p>
     </section>
+
+<section>
+    <h2>Projekty a Správa</h2>
+    <p>Věnuji se správě a hostování různých aplikací, které přibližují lidem důležitost bezpečnosti a soukromí v digitálním světě. Zde jsou některé z hlavních projektů, které nabízím:</p>
+    <ul>
+        <li>🐘 <strong>Mastodon Instance</strong> - <a href="https://mastodon.arch-linux.cz">mastodon.arch-linux.cz</a><br>Sociální platforma pro uživatele Arch Linuxu.</li>
+        <li>🖼️ <strong>Pixelfed</strong> - <a href="https://pixelfed.cz">pixelfed.cz</a><br>Platforma pro sdílení obrázků, která respektuje soukromí uživatelů.</li>
+        <li>🔒 <strong>Cryptpad</strong> - <a href="https://cryptpad.arch-linux.cz">cryptpad.arch-linux.cz</a><br>Bezpečná a šifrovaná kolaborativní platforma pro sdílení dokumentů.</li>
+        <li>🐘 <strong>Další instance Mastodon</strong> - <a href="https://mamutovo.cz">mamutovo.cz</a><br>Podpora sociální sítě založené na otevřených standardech.</li>
+        <!-- Další projekty -->
+    </ul>
+    <h3>Další Webové Aplikace</h3>
+    <ul>
+        <li>📑 <strong>Linkding</strong>: Jednoduchý správce záložek.</li>
+        <li>📷 <strong>Immich</strong>: Serverová aplikace pro správu fotografií.</li>
+        <li>📖 <strong>Wallabag</strong>: Služba pro ukládání článků k pozdějšímu čtení.</li>
+        <!-- Další aplikace -->
+    </ul>
+</section>
+
     <footer>
         <p>Kontaktujte mě na email@example.com</p>
     </footer>

styly.css

@@ -1,16 +1,69 @@
-h1 {
+/* Základní nastavení písma a pozadí pro celou stránku */
+body {
+    font-family: Arial, sans-serif; /* Nastavení písma */
+    line-height: 1.6; /* řádkování */
+    color: #333; /* Barva textu */
+    background-color: #f9f9f9; /* Barva pozadí */
+    padding: 20px; /* Vnitřní okraj pro celé tělo stránky */
+}
+
+/* Centrování nadpisů h1 a h2 a specifické nastavení */
+h1, h2 {
+    text-align: center; /* Zarovnání textu na střed */
+    color: #555; /* Světle šedá barva textu */
+}
+
+/* Nastavení stylu pro všechny obrázky na stránce */
+img {
+    display: block; /* Zobrazení jako blok pro možnost centrování */
+    margin-left: auto; /* Automatický levý okraj pro centrování */
+    margin-right: auto; /* Automatický pravý okraj pro centrování */
+    width: 200px; /* Pevná šířka obrázku */
+    border-radius: 80px; /* Velké zaoblení rohů */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lehký stín pro lepší vizuální efekt */
+}
+
+/* Dodatečné styly, které můžete potřebovat pro odstavce a další elementy */
+p {
+    margin-top: 20px; /* Horní okraj pro odstavce */
+    margin-bottom: 20px; /* Dolní okraj pro odstavce */
+}
+section {
+    margin: 20px;
+    padding: 20px;
+    background-color: #fff; /* Bílé pozadí pro lepší čitelnost */
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+section h2, section h3 {
+    color: #333;
     text-align: center;
 }
-img {
+
-	width: 200px;
+section p {
-	border-radius: 80px;
+    font-size: 16px;
+    line-height: 1.5;
+    color: #666;
+    text-align: justify;
 }
-img {
+
-    display: block;
+section ul {
-    margin-left: auto;
+    list-style-type: none; /* Odstranění teček u seznamu */
-    margin-right: auto;
+    padding: 0;
-    width: 200px;  /* nebo jiná šířka podle potřeby */
 }
-h2 {
+
-	text-align: center;
+section ul li {
+    margin-bottom: 10px;
+    line-height: 1.4;
+    font-size: 14px;
+}
+
+a {
+    color: #0077cc; /* Modrá barva odkazů */
+    text-decoration: none; /* Žádné podtržení */
+}
+
+a:hover {
+    text-decoration: underline; /* Podtržení při najetí myši */
 }