v1.2

app/about/page.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import Image from "next/image";
+
+
+function About() {
+  return (
+    <div className="bg-white flex align-top border-l pt-8 pr-8 pl-8 pb-8 curv">
+        <h1>About me</h1>
+
+    </div>
+
+
+
+
+
+
+  );
+}
+
+export default About;

app/page.js

@@ -1,8 +1,20 @@
+import Image from "next/image";
+import CLAYZANE from "../images/CLAYZANE.png"
+import React from 'react';
+
 export default function Home() {
   return (
     <main>
-      <div className="box">
-        <button className="cybr-btn">
+      <div>
+      <Image
+        src={CLAYZANE} // Provide the path to your image
+        alt="Description of the image"
+        width={300} // Set the width of the image
+        height={200} 
+      />
+      </div>
+      <div className="margin-x-4">
+        <button suppressHydrationWarning={true} className="cybr-btn">
         こんにちは<span aria-hidden>_</span>
           <span aria-hidden className="cybr-btn__glitch">
           こんにちは
@@ -11,6 +23,23 @@ export default function Home() {
             Nexus-12
           </span>
         </button>
+
+        <button suppressHydrationWarning={true} className="cybr-btn">
+        Info<span aria-hidden>_</span>
+          <span aria-hidden className="cybr-btn__glitch">
+          こんにちは
+          </span>
+          <span aria-hidden className="cybr-btn__tag">
+            Nexus-12
+          </span>
+        </button>
+
+
+
+
+
+
+
       </div>
     </main>
   );