feature: aboutページの進捗。ネームプレートとアバターを追加

Add new about page layout and update configurations

Refactored the about page for improved structure and design, including better image handling and responsiveness. Updated `next.config.ts` to allow external image domains. Modified devcontainer plugins and added new assets for enhanced functionality and visuals.

Author: Y-RyuZU

.devcontainer/devcontainer.json

@@ -17,7 +17,6 @@
       "backend": "WebStorm",
       "plugins": [
         "Jetbrains TeamCity Plugin",
-//        "Key Promoter X",
         "com.intellij.kubernetes",
         "cn.yiiguxing.plugin.translate",
         "com.dsoftware.ghtoolbar",
@@ -38,6 +37,9 @@
         "zielu.gittoolbox",
         "com.github.warningimhack3r.intellijshadcnplugin",
         "org.jetbrains.plugins.go-template",
+        "com.wix.sasslint",
+        "software.xdev.saveactions",
+        "com.apidog.fastrequest"
       ]
     }
   }

next.config.ts

@@ -3,6 +3,9 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
     reactStrictMode: true,
+    images: {
+        domains: ['github.com'],
+    },
 };
 
 export default withKumaUI(nextConfig, {

public/images/avatar.png

@@ -4,20 +4,58 @@ import Image from "next/image";
 
 export default function Page() {
     return (
-        <div className="w-full flex flex-col items-center py-4 px-8 gap-16">
+        <div className="w-full h-[70vh] flex flex-col items-center py-4 px-4 gap-16">
             <div className="flex w-full max-w-6xl">
-                <h1 className="text-6xl  font-black italic text-gray-700 text-6rem tracking-[1rem]">
+                <h1 className="text-6xl font-black italic text-gray-700 text-6rem tracking-[1rem]">
                     About
                 </h1>
             </div>
 
-            <div className="w-full flex justify-center max-w-2xl">
-                <div className="flex relative">
-                    <Image src="/images/ryuzu.png" alt="avatar" width={16} height={128} className="absolute left-0"/>
-                    <Avatar className="absolute right-0 w-128 h-128">
-                        <AvatarImage src="https://github.com/Y-RyuZU.png" alt="@shadcn" />
-                        <AvatarFallback>CN</AvatarFallback>
-                    </Avatar>
+            <div className="relative w-full h-full flex justify-center items-center gap-16 py-8 sm:py-16">
+                <div className="relative w-[60vw] h-[50vw] max-w-[38rem] max-h-[32rem]">
+                    <div className="
+                        absolute
+                        right-0
+                        h-full
+                        z-0
+                        flex items-center justify-center
+                    ">
+                        <Avatar className="w-full h-full">
+                            <AvatarImage
+                                src="https://github.com/Y-RyuZU.png"
+                                alt="@shadcn"
+                                className="object-contain"
+                                loading="eager"
+                            />
+                            <AvatarFallback>RZ</AvatarFallback>
+                        </Avatar>
+                    </div>
+
+                    <div className="absolute bottom-0 h-[80%] aspect-[173/359] z-10">
+                        <Image
+                            src="/images/ryuzu.png"
+                            alt="Self Image"
+                            className="object-contain w-full h-full"
+                            fill
+                            sizes="(max-width: 640px) 60vw, (max-width: 1024px) 60vw, 48rem"
+                            priority
+                        />
+                    </div>
+                </div>
+
+                <div className="flex flex-col gap-4 h-full w-[40vw] justify-start">
+                    <div className="h-[2rem] w-full">
+
+                    </div>
+                    <div className="relative w-full h-[70%]">
+                        <Image
+                            src="/images/nameplate.svg"
+                            alt="Name Plate"
+                            fill
+                            className="object-contain w-full h-[70%]"
+                            priority
+                        />
+                    </div>
                 </div>
             </div>
         </div>