Website looking better

szunami · Jul 26, 2024 · 4803975 · 4803975
1 parent 6ccd917
commit 4803975
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 41 deletions.
diff --git a/github.png b/github.png
diff --git a/index.html b/index.html
@@ -1,4 +1,7 @@
 <head profile="http://www.w3.org/2005/10/profile">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
     <title>Sam Szuflita</title>
     <link rel="icon" type="image/png" href="stairs_small.ico">
 </head>
@@ -8,21 +11,20 @@
 <div class="page">
     <div class="main-wrapper">
         <div class="main">
-            <div class="gif-wrapper">
-                <img class="logo" src="dock_bg.gif" />
-            </div>
             <div class="name-column">
                 <div class="name-container">
-                    <p class="name"> Sam <br> Szuflita </p>
+                    <p class="name"> Sam <code class="name">szunami</code> Szuflita </p>
                 </div>
             </div>
         </div>
-
     </div>
-
     <div>
         <div class="main-wrapper">
-            <p> An engineer working to build a more equitable world </p>
+            <p> working to build a more
+                <select name="adjectives" id="cars">
+                    <option value="equitable">equitable</option>
+                    <option value="fun">fun</option>
+                </select> world </p>
         </div>
     </div>
 
@@ -31,25 +33,16 @@
 
             <div class="main">
                 <a href="https://szunami.github.io/blog/resume" class="swap">
-                    <img src="cv.png" class="external-logo">
+                    📄
                 </a>
 
                 <a href="mailto:[email protected]" class="swap">
-                    <img src="gmail.png" class="external-logo">
-                </a>
-
-                <a href="https://szunami.github.io/blog/" class="swap">
-                    <img src="blog.png" class="external-logo">
+                    📭
                 </a>
 
                 <a href="https://github.com/szunami" class="swap">
                     <img src="github.png" class="external-logo">
                 </a>
-
-                <a href="https://www.linkedin.com/in/samuel-szuflita-a6767041/" class="swap">
-                    <img src="linkedin.png" class="external-logo">
-                </a>
-
             </div>
         </div>
 

diff --git a/styles.css b/styles.css
@@ -1,12 +1,5 @@
-@font-face {
-    font-family: 'asepritefontmedium';
-    src: url('asepritefont-webfont.woff2') format('woff2'), url('asepritefont-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
 body {
-    background-color: ebede9;
+    background-color:  #cdbfb3;
 }
 
 .page {
@@ -31,6 +24,8 @@ body {
     display: flex;
     flex-direction: row;
     justify-content: center;
+    font-family: system-ui;
+    font-size: 32px;
 }
 
 .main {
@@ -43,23 +38,36 @@ body {
     align-items: center;
 }
 
-.name-column {
-    padding-left: 20px;
-    flex: 1
+.name {
+    font-family: system-ui;
+    font-weight: 800;
+    color: #665d5b ;
+    font-size: 64px;
+    margin: 0px;
 }
 
-.name-container {
-    display: flex;
-    height: 100%
+.name code {
+    font-family: monospace;
+    color: #e45761;
+    background:   #eae6da   ;
+    font-weight: normal;
+    border-radius: 20px;
+    padding: 0 10px;
 }
 
-.name {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    text-align: center;
-    font-family: 'helvetica';
-    color: #cf573c;
-    font-size: 64px;
+.swap {
+    font-family: "Noto Color Emoji", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    color: red;
+    text-decoration: none;
+    padding: 0px 10px;
+    margin: 0px 20px;
+    align-content: center;
+    background-color: #eae6da;
+    border-radius: 20px;
+}
+
+select {
+    vertical-align: middle;
 }