upper body finished

.idea/prettier.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="MANUAL" />
+    <option name="myRunOnReformat" value="true" />
+  </component>
+</project>

app/globals.css

@@ -1,7 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-.cover {
-  background-image: url("../public/assets/placeholder.webp");
-}

app/page.tsx

@@ -3,29 +3,45 @@ import Image from "next/image";
 export default function Home() {
   return (
     <div className="flex flex-col bg-white">
-        <div className="ml-20 py-10">
+      <div className="ml-20 py-8">
-          <p>SUYONO</p>
+        <p className="font-sans text-2xl font-extralight">SUYONO</p>
       </div>
       <div className="bg-gray-100">
         <div className="flex flex-row ml-20">
-            <div>one</div>
+          <a href="#" className="m-2 font-extralight text-sm">
-            <div>two</div>
+            Home
+          </a>
+          <a href="#" className="m-2 font-extralight text-sm">
+            About
+          </a>
+          <a href="#" className="m-2 font-extralight text-sm">
+            Blog
+          </a>
         </div>
       </div>
-        <div className="bg-cover bg-center h-screen flex flex-col-reverse cover">
+      <div className="bg-cover bg-center flex flex-col-reverse bg-blog-cover">
-          <div className="bg-neutral-100 bg-opacity-40 flex flex-col py-10">
+        <div className="bg-neutral-100 bg-opacity-30 flex flex-col py-10">
-            <p className="text-white text-center">SUYONO</p>
+          <p className="text-white text-center text-7xl font-extralight font-sans mb-6">
-            <p className="text-white text-center">A Tech Archive</p>
+            SUYONO
+          </p>
+          <p className="text-white text-center font-sans font-extralight text-xl mb-10">
+            A Tech Archive
+          </p>
         </div>
+        <div className="h-64"></div> {/* spacer */}
+        <div className="h-64"></div> {/* spacer */}
       </div>
       <div className="flex flex-row justify-center">
         <div className="border">
-              <Image src="/assets/pthumb.webp" alt="post thumbnail" width={454} height={341} />
+          <Image
-            <div className="flex flex-col">
+            src="/assets/pthumb.webp"
-
+            alt="post thumbnail"
+            width={454}
+            height={341}
+          />
+          <div className="flex flex-col"></div>
         </div>
       </div>
     </div>
-      </div>
+  );
-  )
 }

package.json

@@ -21,5 +21,8 @@
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
+  },
+  "devDependencies": {
+    "prettier": "3.0.3"
   }
 }

pnpm-lock.yaml

@@ -42,6 +42,11 @@ dependencies:
     specifier: 5.2.2
     version: 5.2.2
 
+devDependencies:
+  prettier:
+    specifier: 3.0.3
+    version: 3.0.3
+
 packages:
 
   /@aashutoshrathi/word-wrap@1.2.6:
@@ -2060,6 +2065,12 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: false
 
+  /prettier@3.0.3:
+    resolution: {integrity: sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
   /prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
     dependencies:

tailwind.config.ts

@@ -12,6 +12,7 @@ const config: Config = {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        'blog-cover': "url('/assets/placeholder.webp')"
       },
     },
   },