Responsive design

Author: LinuxJava7

index.html

@@ -42,59 +42,65 @@
       </nav>
     </header>
     <!-- Main Content -->
-    <main class="content">
-      <div class="intro">
+      <div class="container" id="intro">
         <h1>LinuxJava7</h1>
         <p><strong>Hey, I'm LinuxJava7.</strong> I'm currently studying A-Levels. I'm a hobbyist UX and UI designer, Linux desktop user since 2021, FOSS (Free and Open Source Software) enthusiast, and aspiring full-stack developer.</p>
+        <div class="note">
+          <p><strong>Note:</strong> This site is a <strong>heavy</strong> work in progress. I'm focusing on my studies at the moment and will return to improve this site in the coming months, so stay tuned &lt;3</p>
+        </div>
       </div>
-      <blockquote>
-        <p><em>By the way, this site is a <strong>heavy</strong> work in progress.</em></p>
-        <p><em>I'm focusing on my studies at the moment and will return to improve this site in the coming months, so stay tuned &lt;3</em></p>
-      </blockquote>
-      <div class="card-section">
+      <div class="container">
         <h2>Projects and Contributions</h2>
-        <div class="cards-grid">
+        <div class="tiles">
           <div class="tile">
-            <h3><a href="https://buildtheearth.net" target="_blank" rel="noopener noreferrer">buildtheearth.net</a></h3>
-            <p>A project that aims to recreate the Earth in Minecraft.
-              <br>
-              Also a <a href="https://www.guinnessworldrecords.com/world-records/734997-biggest-minecraft-project" target="_blank" rel="noopener noreferrer">Guinness World Record holder</a> for the largest Minecraft project in the world.
-            </p>
-            <h4>Team Owner & System Administrator</h4>
-            <p>
-              Team owner for the Middle East region, also managing the Minecraft server as its system admin. <a href="https://buildtheearth.net/teams/me" target="_blank" rel="noopener noreferrer">Visit my team</a>
-            </p>
-            <h4>Support Staff Member (From August 2020 to September 2023)</h4>
-            <p>Volunteered as a support staff member, helping users with technical issues.</p>
+            <a href="https://buildtheearth.net" target="_blank" rel="noopener noreferrer">
+              <img alt="BuildTheEarth.net - Recreating Earth in Minecraft" src="https://cdn.buildtheearth.net/uploads/879c4af49ee880f348c95e9fd7bdb11dd526fda08ce6dd9c1bfaee3b91a7368e">
+            </a>
+            <div class="description">
+              <h4>
+                <img src="https://buildtheearth.net/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.65c70928.gif&w=96&q=75" alt="BuildTheEarth Logo" style="vertical-align: middle; width: 1em; height: auto;" />
+                BuildTheEarth.net
+              </h4>
+              <p>A project that aims to recreate the Earth in Minecraft. Also a <a href="https://www.guinnessworldrecords.com/world-records/734997-biggest-minecraft-project" target="_blank" rel="noopener noreferrer">Guinness World Record holder</a> for the largest Minecraft project in the world.</p>
+              <h4>Team Owner & System Administrator</h4>
+              <p>Team owner for the Middle East region, also managing the Minecraft server as its system admin. <a href="https://buildtheearth.net/teams/me" target="_blank" rel="noopener noreferrer">Visit my team</a></p>
+              <h4>Support Staff Member (From August 2020 to September 2023)</h4>
+              <p>Volunteered as a support staff member, helping users with technical issues.</p>
+            </div>
           </div>
           <div class="tile">
-            <h3><a href="https://github.com/Avdan-OS" target="_blank" rel="noopener noreferrer">AvdanOS</a></h3>
-            <p>
-              Linux Desktop environment project based on <a href="https://youtu.be/tXFEiw1aJTw" target="_blank" rel="noopener noreferrer">a concept by Avdan</a>.
-            </p>
-            <h4>UI Designer (From 2022 to 2023)</h4>
-            <p>Created some UI mockups and design systems for the desktop within the design team.</p>
+            <a href="https://github.com/Avdan-OS" target="_blank" rel="noopener noreferrer">
+              <img alt="AvdanOS - Linux Desktop Environment Project" src="https://raw.githubusercontent.com/Avdan-OS/Website/dev/src/public/assets/marketing/header.png">
+            </a>
+            <div class="description">
+              <h4>
+              <h4>
+                <img src="https://avatars.githubusercontent.com/u/103757089" alt="AvdanOS Logo" style="vertical-align: middle; width: 1em; height: auto;" />
+                AvdanOS
+              </h4>
+              <p>Linux Desktop environment project based on <a href="https://youtu.be/tXFEiw1aJTw" target="_blank" rel="noopener noreferrer">a concept by Avdan</a>.</p>
+              <h4>UI Designer (From 2022 to 2023)</h4>
+              <p>Created some UI mockups and design systems for the desktop within the design team.</p>
+            </div>
           </div>
         </div>
       </div>
-      <div class="card-section">
+      <div class="container">
         <h2>Other Interests</h2>
-        <div class="cards-grid">
-          <div class="tile">
-            <h3><a href="https://www.gnome.org/" target="_blank" rel="noopener noreferrer">GNOME</a></h3>
-            <p>
-              Linux Desktop Environment
-            </p>
-            <p>
-              GNOME is one of my main inspirations for UI and UX design, they do some really great stuff :)
-            </p>
+        <div class="tiles">
+          <div class="tile" id="devs">
+            <img alt="GNOME Developer Platform" src="https://upload.wikimedia.org/wikipedia/commons/9/97/GNOME_Shell.png">
+            <div class="description">
+              <h4>GNOME</h4>
+              <p>Linux Desktop Environment</p>
+              <p>GNOME is one of my main inspirations for UI and UX design, they do some really great stuff :)</p>
+              <a class="btn dark" href="https://www.gnome.org/"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10.785 1.082c.559.512 1.223 1.207 2.18 2.168.281.281.39.746.176 1.246a.664.664 0 0 0 .152.719c.262.254.68.254.945 0 .262-.262.793-.086.922.043l.48.48v-.004a.997.997 0 0 1 0 1.418L13.278 9.52c-.39.39-1.027.39-1.418 0l-.46-.524a.667.667 0 0 1 0-.945.667.667 0 0 0 0-.946c-.262-.253-.747-.296-1.012-.043L9.215 8.168 6.773 5.723s.84-.828 1.086-1.067c.618-.625.063-1.152-.21-1.418-.665-.66-2.04-.922-2.977-.883a.676.676 0 0 1-.66-.44.67.67 0 0 1 .234-.763C7-.008 9.7-.008 10.786 1.082zm-2.45 8.035-5.288 5.278c-.371.375-.672.625-1.02.625a2.056 2.056 0 0 1-2-2c0-.532.13-.727.504-1.098l5.297-5.274zm0 0"></path></svg> Visit GNOME</a>
+            </div>
           </div>
         </div>
       </div>
-    </main>
     <!-- Footer -->
     <footer>
-      <p>This website is licensed under the AGPL v3.</p>
       <ul class="social">
         <li class="github">
           <a href="https://github.com/linuxjava7" title="GitHub" target="_blank" rel="noopener noreferrer">
@@ -107,6 +113,7 @@ <h3><a href="https://www.gnome.org/" target="_blank" rel="noopener noreferrer">G
           </a>
         </li>
       </ul>
+      <p>This website is licensed under the AGPL v3.</p>  
     </footer>
   </body>
 </html>