overhaul

add projects, logo

Author: devansoliman

Inter.ttf Inter-VariableFont_slnt,wght.ttfInter.ttf renamed to Inter-VariableFont_slnt,wght.ttf

@@ -4,37 +4,106 @@
         <style>
             @font-face {
                 font-family: Inter;
-                src: url('Inter.ttf');
+                src: url('Inter-VariableFont_slnt,wght.ttf');
             }
 
-            video.center {
-                display: block;
-                margin-left: auto;
-                margin-right: auto;
+            div {
+                position: relative;
             }
 
-            p {
-                color: gray;
-                text-align: center;      
+            h1 {
+                color: white;
+                font-family: Inter;
+                font-weight: bolder;
+                font-size: clamp(24px, 8vw, 72px);
+                line-height: 0;
+            }
+
+            p {     
+                color: white;
                 font-family: Inter;
-                font-size: 18px;
+                font-size: clamp(12px, 5vw, 18px);
             }
 
             a {
                 color :white;
             }
+
+            img {
+                width:100%;
+            }
+
+            #nav img{
+                width: clamp(250px, 35vw, 35vw);
+                padding-top: 20px;
+                display: block;
+                margin-left: auto;
+                margin-right: auto;
+            }
+
+            .text-block {
+                position: absolute;
+                left: 5vw;
+                top: 3vw;
+            }
+            
+            .notice {
+                background-color: red;
+                position: absolute;
+                top: 5vw;
+                left: clamp(100px, 60vw, 560px);
+                padding-left: 10px;
+                padding-right: 10px;
+                font-weight: bolder;
+                line-height: 0;
+            }
+            .notice p {
+                font-size: clamp(2px, 3vw, 18px);
+            }
         </style>
     </head>
 
     <link rel="icon" type="image/png" href="favicon.png" >
 
-    <video class="center" width="75%" autoplay muted loop>
-        <source src="coming_soon.mp4" type="video/mp4">
-    </video>
-
-    <p>
-        <a href="https://github.com/devansoliman">github</a> &ensp; | &ensp;
-        <a href="https://www.linkedin.com/in/devansoliman/">linkedin</a> &ensp; | &ensp;
-        <a href="https://devansoliman.github.io/resume.pdf">resume</a>
-    </p>
+    <div id="nav">
+        <img src="logo.png">
+        <p style="color: grey; text-align: center;">
+            <a href="https://github.com/devansoliman">github</a> &ensp; | &ensp;
+            <a href="https://www.linkedin.com/in/devansoliman/">linkedin</a> &ensp; | &ensp;
+            <a href="https://devansoliman.github.io/resume.pdf">resume</a>
+        </p>
+    </div>
+
+    <div id="actionpi">
+        <a href="https://github.com/devansoliman/ActionPi">
+            <img src="actionpi.jpg">
+        </a>
+        <div class="text-block">
+            <h1>ActionPi</h1>
+            <p style="width: clamp(100px, 30vw, 600px);">The world's smallest open-source action camera.</p>
+        </div>
+    </div>
+
+    <div id="bruiser">
+        <a href="https://github.com/devansoliman/Bruiser">
+            <img src="bruiser.jpg">
+        </a>
+        <div class="text-block">
+            <h1 style="color: black;">Bruiser</h1>
+            <p style="color: black; width: clamp(100px, 40vw, 600px);"">3D-printable skateboards.</p>
+        </div>
+    </div>
+
+    <div id="openportable">
+        <img src="openportable.jpg">
+        <div class="text-block">
+            <h1>openPortable</h1>
+            <p>A series of open-source mobile computing platforms.</p>
+        </div>
+        <div class="notice">
+            <p>COMING SOON</p>
+        </div>
+    </div>
+
+   
 </html>