Improve project page

3 files changed, 130 insertions, 44 deletions

diff --git a/index.html b/index.html
index 095d141..c9b1843 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,8 @@
                 Welcome to
                 <a href="https://codeberg.org/igorechek06/pages">my page</a>
             </h1>
-
+        </main>
+        <section>
             <h2>About me</h2>
             I'm a second-year student at
             <a href="https://en.itmo.ru">ITMO University</a>, studying
@@ -34,7 +35,8 @@
                 I use Arch, btw</a
             >. I am interested in various fields, from systems programming, robotics, and computer
             vision to web applications and technologies.
-
+        </section>
+        <section>
             <h2>Socials</h2>
             <ul>
                 <li>
@@ -66,6 +68,6 @@
                     <a href="https://github.com/igorechek06"> https://github.com/igorechek06 </a>
                 </li>
             </ul>
-        </main>
+        </section>
     </body>
 </html>
diff --git a/projects/index.html b/projects/index.html
index 2fe7e87..0b212e1 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -18,32 +18,104 @@
             <a href="/projects" class="current">~/projects</a>
         </nav>
 
-        <main>
-            <h1>My projects</h1>
-            <ul>
-                <li>
-                    <a href="https://pypi.org/project/async-crypto-pay-api/"
-                        >async_crypto_pay_api</a
-                    >
-                    - lightweight async wrapper for
-                    <a href="https://t.me/CryptoBot">@CryptoBot</a> api
-                </li>
-                <li>
-                    <a href="https://codeberg.org/igorechek06/minecraft_http_whitelist"
-                        >minecraft_http_whitelist</a
-                    >
-                    - http API server written in pure Python for whitelist management
-                </li>
-                <li>
-                    <a href="https://codeberg.org/igorechek06/video2story">video2story</a> - Python
-                    utility for cutting and uploading large videos in telegram stories
-                </li>
-                <li>
-                    <a href="https://github.com/ThePollify/">Pollify</a> - interactive poll charts
-                    for your presentation (MVP)
-                </li>
-            </ul>
-            <h2>... and other stupid programs I wrote</h2>
-        </main>
+        <section>
+            <h2>async-crypto-pay-api <i class="nf nf-dev-python"></i></h2>
+            <span>
+                Lightweight async wrapper for the
+                <a href="https://t.me/CryptoBot">@CryptoBot</a> api
+            </span>
+            <div class="links">
+                <a href="https://help.send.tg/en/articles/10279948-crypto-pay-api">
+                    <i class="nf nf-dev-git"></i> Source code
+                </a>
+                <a href="https://pypi.org/project/async-crypto-pay-api/">
+                    <i class="nf nf-dev-python"></i> PyPI
+                </a>
+                <a href="https://help.send.tg/en/articles/10279948-crypto-pay-api">
+                    <i class="nf nf-fa-book"></i> Docs
+                </a>
+            </div>
+        </section>
+
+        <section>
+            <h2>Minecraft HTTP whitelist <i class="nf nf-dev-python"></i></h2>
+            <span>
+                An HTTP API server written in pure Python for managing a Minecraft whitelist
+            </span>
+            <div class="links">
+                <a href="https://codeberg.org/igorechek06/minecraft_http_whitelist">
+                    <i class="nf nf-dev-git"></i> Source code
+                </a>
+            </div>
+        </section>
+
+        <section>
+            <h2>FunnyPineappleBot a.k.a KarpovAI <i class="nf nf-dev-python"></i></h2>
+            <span>A simple Telegram bot using a Markov chain-based text generator</span>
+            <div class="links">
+                <a href="https://github.com/funny-pineapples/FunnyPineappleBot">
+                    <i class="nf nf-dev-git"></i> Source code
+                </a>
+                <a href="https://t.me/KarpovAIBot">
+                    <i class="nf nf-fa-telegram"></i> Telegram bot
+                </a>
+            </div>
+        </section>
+
+        <section>
+            <h2>video2story <i class="nf nf-dev-python"></i></h2>
+            <span>A Python utility for cutting and uploading large videos to Telegram Stories</span>
+            <div class="links">
+                <a href="https://codeberg.org/igorechek06/video2story">
+                    <i class="nf nf-dev-git"></i> Source code
+                </a>
+                <a href="https://pypi.org/project/video2story/">
+                    <i class="nf nf-dev-python"></i> PyPI
+                </a>
+            </div>
+        </section>
+
+        <section>
+            <h2>Pollify <i class="nf nf-dev-python"></i></h2>
+            <span>Interactive poll charts for your presentation (MVP)</span>
+            <div class="links">
+                <a href="https://github.com/ThePollify">
+                    <i class="nf nf-dev-git"></i> Project organization
+                </a>
+            </div>
+        </section>
+
+        <section>
+            <h2>Archivator <i class="nf nf-dev-rust"></i></h2>
+            <span>
+                A universal archive library for all popular formats (work in progress, only reading
+                of zip files is currently supported)
+            </span>
+            <div class="links">
+                <a href="https://github.com/ThePollify/">
+                    <i class="nf nf-dev-git"></i> Source code
+                </a>
+            </div>
+        </section>
+
+        <section>
+            <h2>ITMO queue service (server) <i class="nf nf-dev-rust"></i></h2>
+            <span>
+                A queue service for lab work (the website and Telegram bot are under development)
+            </span>
+            <div class="links">
+                <a href="https://codeberg.org/igorechek06/itmo_queue_server">
+                    <i class="nf nf-dev-git"></i> Source code
+                </a>
+                <a href="https://codeberg.org/igorechek06/itmo_queue_server">
+                    <i class="nf nf-md-web"></i> Website
+                </a>
+                <a href="https://codeberg.org/igorechek06/itmo_queue_server">
+                    <i class="nf nf-fa-book"></i> Docs
+                </a>
+            </div>
+        </section>
+
+        <footer><h2>... and more</h2></footer>
     </body>
 </html>
diff --git a/style.css b/style.css
index 5223923..70e92e2 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap");
+@import "https://www.nerdfonts.com/assets/css/webfont.css";
 
 @media (prefers-color-scheme: light) {
     :root {
@@ -65,23 +66,28 @@ nav > * {
 }
 
 nav > .current {
-    background-color: var(--color-primary);
-    color: var(--color-on-primary);
+    outline: 0.1rem solid var(--color-primary);
 }
 
-main {
+main,
+section,
+footer {
     background-color: var(--color-surface-container);
     border-radius: 2rem;
 
-    margin: 1rem 0 5rem 0;
+    margin: 1rem 0;
     padding: 1.5rem;
 }
 
-main > *:first-child {
+main > :first-child,
+section > :first-child,
+footer > :first-child {
     margin-top: 0;
 }
 
-main > *:last-child {
+main > :last-child,
+section > :last-child,
+footer > :last-child {
     margin-bottom: 0;
 }
 
@@ -96,16 +102,22 @@ a,
 }
 
 ul {
-    padding-left: 1.5rem;
+    list-style: none;
+    padding-left: 0;
 }
 
-input {
-    background: none;
-    color: var(--color-primary);
-    border: none;
+.links {
+    display: flex;
+    gap: 1rem;
+}
 
-    width: 10rem;
+.links > a {
+    flex: 1;
+
+    text-align: center;
+    margin-top: 1rem;
+    padding: 0.25rem;
 
-    border-bottom: 0.01rem solid var(--color-primary);
-    font-size: 1rem;
+    border: 0.1rem solid var(--color-primary);
+    border-radius: 1rem;
 }