frame and nav change

psyaito · Dec 5, 2023 · f6375e8 · f6375e8
1 parent 6ec0b7d
commit f6375e8
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 59 deletions.
diff --git a/blog/and.html b/blog/and.html
@@ -12,9 +12,8 @@
 <body>
     <nav>
         <ul>
-            <li class="box" style="flex:1.8;"><a href="/index.html">Home</a></li>
-            <li class="box"><a href="https://github.com/psyaito">Github</a></li>
-            <li class="box"><a href="/contact.html">Contact</a></li>
+            <li class="box"><a href="/index.html">Home</a></li>
+            <li class="box"><a href="/freelance.html">Freelance</a></li>
             <li class="box"><a href="/resume.html">Resume</a></li>
         </ul>
     </nav>

diff --git a/blog/arts.html b/blog/arts.html
@@ -12,9 +12,8 @@
 <body>
     <nav>
         <ul>
-            <li class="box" style="flex:1.8;"><a href="/index.html">Home</a></li>
-            <li class="box"><a href="https://github.com/psyaito">Github</a></li>
-            <li class="box"><a href="/contact.html">Contact</a></li>
+            <li class="box"><a href="/index.html">Home</a></li>
+            <li class="box"><a href="/freelance.html">Freelance</a></li>
             <li class="box"><a href="/resume.html">Resume</a></li>
         </ul>
     </nav>

diff --git a/blog/tech.html b/blog/tech.html
@@ -12,9 +12,8 @@
 <body>
     <nav>
         <ul>
-            <li class="box" style="flex:1.8;"><a href="/index.html">Home</a></li>
-            <li class="box"><a href="https://github.com/psyaito">Github</a></li>
-            <li class="box"><a href="/contact.html">Contact</a></li>
+            <li class="box"><a href="/index.html">Home</a></li>
+            <li class="box"><a href="/freelance.html">Freelance</a></li>
             <li class="box"><a href="/resume.html">Resume</a></li>
         </ul>
     </nav>
@@ -30,7 +29,6 @@
             <h1 class="textshadow">Tech</h1>
             <p class="textshadow">A buddidng coder, competent with python, css, and html. Done self-hosting as well.</p>
             <p class="textshadow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, esse voluptatum. Tempora quasi nihil cumque eum doloribus explicabo saepe voluptatibus id reprehenderit, dolores reiciendis, unde assumenda, quae perspiciatis porro animi?</p>
-            <p class="textshadow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, esse voluptatum. Tempora quasi nihil cumque eum doloribus explicabo saepe voluptatibus id reprehenderit, dolores reiciendis, unde assumenda, quae perspiciatis porro animi?</p>
         </div>
     </div>
     <div class="gallery">

diff --git a/contact.html → freelance.html b/contact.html → freelance.html
@@ -1,40 +1,39 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>psyaito's contact</title>
-    <link rel="stylesheet" href="style.css">
-    <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=Kalam:wght@300;400;700&display=swap" rel="stylesheet">
-</head>
-<body>
-    <nav>
-        <ul>
-            <li class="box" style="flex:1.8;"><a href="index.html">Home</a></li>
-            <li class="box"><a href="https://github.com/psyaito">Github</a></li>
-            <li class="box"><a href="contact.html">Contact</a></li>
-            <li class="box"><a href="resume.html">Resume</a></li>
-        </ul>
-    </nav>
-    <nav>
-        <ul>
-            <li class="box" style="flex:1.3;"><a href="blog/tech.html">Tech</a></li>
-            <li class="box" style="flex:0.5;"><a href="blog/and.html">&</a></li>
-            <li class="box"><a href="blog/arts.html">Arts</a></li>
-        </ul>
-    </nav>
-    <div class="container">
-        <div class="box" style="flex:0.5;">
-            <h1>Contact</h1>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, esse voluptatum. Tempora quasi nihil cumque eum doloribus explicabo saepe voluptatibus id reprehenderit, dolores reiciendis, unde assumenda, quae perspiciatis porro animi?</p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, esse voluptatum. Tempora quasi nihil cumque eum doloribus explicabo saepe voluptatibus id reprehenderit, dolores reiciendis, unde assumenda, quae perspiciatis porro animi?</p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, esse voluptatum. Tempora quasi nihil cumque eum doloribus explicabo saepe voluptatibus id reprehenderit, dolores reiciendis, unde assumenda, quae perspiciatis porro animi?</p>
-        </div>
-    </div>
-    <footer class="box" id="main-footer">
-        ©️ 2023 Ken.D · All Rights Reserved 
-    </footer>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>psyaito's freelance</title>
+    <link rel="stylesheet" href="style.css">
+    <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=Kalam:wght@300;400;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <nav>
+        <ul>
+            <li class="box"><a href="index.html">Home</a></li>
+            <li class="box"><a href="freelance.html">Freelance</a></li>
+            <li class="box"><a href="resume.html">Resume</a></li>
+        </ul>
+    </nav>
+    <nav>
+        <ul>
+            <li class="box" style="flex:1.3;"><a href="blog/tech.html">Tech</a></li>
+            <li class="box" style="flex:0.5;"><a href="blog/and.html">&</a></li>
+            <li class="box"><a href="blog/arts.html">Arts</a></li>
+        </ul>
+    </nav>
+    <div class="container">
+        <div class="box" style="flex:0.5;">
+            <h1>Freelance</h1>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, esse voluptatum. Tempora quasi nihil cumque eum doloribus explicabo saepe voluptatibus id reprehenderit, dolores reiciendis, unde assumenda, quae perspiciatis porro animi?</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, esse voluptatum. Tempora quasi nihil cumque eum doloribus explicabo saepe voluptatibus id reprehenderit, dolores reiciendis, unde assumenda, quae perspiciatis porro animi?</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, esse voluptatum. Tempora quasi nihil cumque eum doloribus explicabo saepe voluptatibus id reprehenderit, dolores reiciendis, unde assumenda, quae perspiciatis porro animi?</p>
+        </div>
+    </div>
+    <footer class="box" id="main-footer">
+        ©️ 2023 Ken.D · All Rights Reserved 
+    </footer>
+</body>
 </html>
diff --git a/index.html b/index.html
@@ -13,9 +13,8 @@
 <body>
     <nav>
         <ul>
-            <li class="box" style="flex:1.8;"><a href="index.html">Home</a></li>
-            <li class="box"><a href="https://github.com/psyaito">Github</a></li>
-            <li class="box"><a href="contact.html">Contact</a></li>
+            <li class="box"><a href="index.html">Home</a></li>
+            <li class="box"><a href="freelance.html">Freelance</a></li>
             <li class="box"><a href="resume.html">Resume</a></li>
         </ul>
     </nav>
@@ -37,13 +36,11 @@ <h1 class="textshadow">Ken.D</h1>
                 <a href="www.linkedin.com/in/ken-m-dong-95299b233"><i class="linkedin"></i></a>
             </div>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, esse voluptatum. Tempora quasi nihil cumque eum doloribus explicabo saepe voluptatibus id reprehenderit, dolores reiciendis, unde assumenda, quae perspiciatis porro animi?</p>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, esse voluptatum. Tempora quasi nihil cumque eum doloribus explicabo saepe voluptatibus id reprehenderit, dolores reiciendis, unde assumenda, quae perspiciatis porro animi?</p>        
         </div>
         <div class="box" id="image2">
             <h1 class="textshadow">Highlights</h1>
             <p class="textshadow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, esse voluptatum. Tempora quasi nihil cumque eum doloribus explicabo saepe voluptatibus id reprehenderit, dolores reiciendis, unde assumenda, quae perspiciatis porro animi?</p>
             <p class="textshadow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, esse voluptatum. Tempora quasi nihil cumque eum doloribus explicabo saepe voluptatibus id reprehenderit, dolores reiciendis, unde assumenda, quae perspiciatis porro animi?</p>
-            <p class="textshadow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, esse voluptatum. Tempora quasi nihil cumque eum doloribus explicabo saepe voluptatibus id reprehenderit, dolores reiciendis, unde assumenda, quae perspiciatis porro animi?</p>
         </div>
     </div>
     <footer class="box" id="main-footer">

diff --git a/resume.html b/resume.html
@@ -12,9 +12,8 @@
 <body>
     <nav>
         <ul>
-            <li class="box" style="flex:1.8;"><a href="index.html">Home</a></li>
-            <li class="box"><a href="https://github.com/psyaito">Github</a></li>
-            <li class="box"><a href="contact.html">Contact</a></li>
+            <li class="box"><a href="index.html">Home</a></li>
+            <li class="box"><a href="freelance.html">Freelance</a></li>
             <li class="box"><a href="resume.html">Resume</a></li>
         </ul>
     </nav>

diff --git a/style.css b/style.css
@@ -3,7 +3,7 @@ body{
     padding: 4px;
     font-family: 'Kalam', serif;
     background: #ffffff;
-    width: clamp(420px, 100%, 700px);
+    width: clamp(400px, 100%, 800px);
     margin: auto;
 }
 nav{
@@ -43,8 +43,9 @@ ul{
 }
 .icon{
     display: flex;
+    flex-wrap: wrap;
     flex-direction: row;
-    justify-content: space-around;
+    justify-content: space-evenly;
     align-items: center;
     padding: 3px;
 }