Add new files and update styles

walnuts1018 · Jan 18, 2024 · 1463b90 · 1463b90
1 parent ddd1c2a
commit 1463b90
Show file tree

Hide file tree

Showing 11 changed files with 161 additions and 75 deletions.
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "apple-touch-icons": "off"
+  }
+}
diff --git a/src/app/components/Profile.css b/src/app/components/Profile.css
@@ -0,0 +1,4 @@
+.profile-list {
+  box-shadow: -3px -3px 10px 5px rgba(255, 255, 255, 0.185),
+    5px 5px 10px 5px rgba(216, 216, 216, 0.082);
+}
diff --git a/src/app/components/Profile.tsx b/src/app/components/Profile.tsx
@@ -1,21 +1,14 @@
 import Image from 'next/image'
 //import { Heart } from './Heart'
+import ProfileImage from './ProfileImage'
 import QR from './QR'
+import './Profile.css'
 
 export function Profile() {
   return (
     <div className='flex flex-col items-center justify-center space-y-4 font-Nunito w-96'>
-      <div className='rounded-full bg-gradient-to-br from-[#94e5d2] to-[#84E3F6] p-1 h-60 w-60 relative'>
-        <div className='rounded-full h-full w-full bg-white overflow-hidden'>
-          <Image
-            src='/walnuts.jpg'
-            alt='Sample Image'
-            width={500}
-            height={500}
-            style={{ objectFit: 'contain' }}
-            className='rounded-full h-full w-full'
-          />
-        </div>
+      <div className='h-60 w-60 relative'>
+        <ProfileImage />
         <div className='absolute bottom-1 right-0'>
           <QR />
         </div>
@@ -25,45 +18,45 @@ export function Profile() {
         <p className='text-black font-extrabold text-4xl'>Walnuts</p>
         {/* <Heart /> */}
         <div className='space-y-2 mt-6'>
-          {/*<Icon src='/icons/sell_FILL0_wght400_GRAD0_opsz24.svg' alt='Name' text='Ryota Tawara' />*/}
-          <Icon
+          {/*<ProfileList src='/icons/sell_FILL0_wght400_GRAD0_opsz24.svg' alt='Name' text='Ryota Tawara' />*/}
+          <ProfileList
             src='/icons/twitter-x-line.svg'
             alt='X(Twitter)'
             text='@walnuts1018'
             link='https://twitter.com/walnuts1018'
           />
-          <Icon
+          <ProfileList
             src='/icons/github-fill.svg'
             alt='GitHub'
             text='walnuts1018'
             link='https://github.com/walnuts1018'
           />
-          <Icon
+          <ProfileList
             src='/icons/instagram-line.svg'
             alt='Instagram'
             text='@walnuts_1018'
             link='https://www.instagram.com/walnuts_1018/'
           />
-          <Icon
+          <ProfileList
             src='/icons/mail_FILL0_wght400_GRAD0_opsz24.svg'
             alt='Mail'
             text='[email protected]'
             link='mailto:[email protected]'
             fontSize='text-2xl'
           />
-          <Icon
+          <ProfileList
             src='/icons/KMClogo_trans.svg'
             alt='KMC'
             text='KMC 46th Chairman'
             link='https://kmc.gr.jp'
           />
-          <Icon
+          <ProfileList
             src='/icons/school_FILL0_wght400_GRAD0_opsz24.svg'
             alt='School'
             text='Kyoto Univ. / B2'
             link='https://www.s-ee.t.kyoto-u.ac.jp/ja'
           />
-          <Icon
+          <ProfileList
             src='/icons/favorite_FILL0_wght400_GRAD0_opsz24.svg'
             alt='School'
             text='Kubernetes / Proxmox VE / Golang'
@@ -75,7 +68,7 @@ export function Profile() {
   )
 }
 
-function Icon({
+function ProfileList({
   src,
   alt,
   text,
@@ -89,27 +82,25 @@ function Icon({
   fontSize?: string
 }) {
   return (
-    <div
-      className={`flex rounded-full px-3 py-1  transition-all ${
-        link !== undefined ? 'hover:bg-gray-100 hover:shadow-md hover:border-gray-500' : ''
+    <a
+      target='_blank'
+      rel='noopener noreferrer'
+      className={`flex space-x-3 text-[#7f7f7f] font-bold items-center ${fontSize} w-full outline-none flex rounded-full px-6 py-1 profile-list ${
+        link !== undefined
+          ? 'hover:bg-gray-100 hover:shadow-md hover:border-gray-500 focus:bg-gray-100 focus:shadow-md focus:border-gray-500'
+          : ''
       }`}
+      href={link}
     >
-      <a
-        target='_blank'
-        rel='noopener noreferrer'
-        className={`flex space-x-3 text-[#7f7f7f] font-bold items-center ${fontSize}`}
-        href={link}
-      >
-        <Image
-          src={src}
-          alt={alt}
-          width={40}
-          height={40}
-          style={{ objectFit: 'contain' }}
-          className='min-w-[40px] max-w-[40px]'
-        />
-        <p>{text}</p>
-      </a>
-    </div>
+      <Image
+        src={src}
+        alt={alt}
+        width={40}
+        height={40}
+        style={{ objectFit: 'contain' }}
+        className='min-w-[40px] max-w-[40px]'
+      />
+      <p>{text}</p>
+    </a>
   )
 }
diff --git a/src/app/components/ProfileImage.css b/src/app/components/ProfileImage.css
@@ -0,0 +1,8 @@
+.profile-image {
+  box-shadow: 15px 15px 40px 5px rgb(15, 14, 31), -5px -5px 30px 5px rgba(254, 255, 234, 0.349);
+}
+
+.profile-image-inline {
+  box-shadow: inset 5px 5px 10px 1px rgba(117, 117, 117, 0.479),
+    inset -5px -5px 10px 5px rgb(233, 233, 233);
+}
diff --git a/src/app/components/ProfileImage.tsx b/src/app/components/ProfileImage.tsx
@@ -0,0 +1,76 @@
+'use client'
+import CloseIcon from '@mui/icons-material/Close'
+import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
+import Image from 'next/image'
+import { useState, useEffect } from 'react'
+import Modal from 'react-modal'
+import './ProfileImage.css'
+
+export default function ProfileImage() {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  useEffect(() => {
+    if (isExpanded) {
+      disableBodyScroll(document.body)
+    } else {
+      enableBodyScroll(document.body)
+    }
+    return () => {
+      clearAllBodyScrollLocks()
+    }
+  }, [isExpanded])
+
+  return (
+    <>
+      <div className='rounded-full bg-gradient-to-br from-[#94e5d2] to-[#84E3F6] p-1 h-full w-full'>
+        <div className='rounded-full h-full w-full bg-white overflow-hidden'>
+          <Image
+            src='/walnuts.jpg'
+            alt='walnuts icon'
+            width={500}
+            height={500}
+            className='rounded-full h-full w-full cursor-pointer  object-contain'
+            onClick={() => {
+              setIsExpanded(true)
+            }}
+          />
+        </div>
+      </div>
+      {isExpanded ? (
+        <Modal
+          isOpen={isExpanded}
+          onRequestClose={() => {
+            setIsExpanded(false)
+          }}
+          className='fixed h-[100svh] w-screen bg-black bg-opacity-50 flex items-center justify-center overflow-hidden'
+          overlayClassName='fixed inset-0 bg-black bg-opacity-70 z-10'
+        >
+          <div
+            className='fixed h-full w-full -z-10'
+            onClick={() => {
+              setIsExpanded(false)
+            }}
+          ></div>
+          <div className='rounded-full relative profile-image'>
+            <Image
+              src='/walnuts.jpg'
+              alt='walnuts icon'
+              width={500}
+              height={500}
+              className=' h-full w-full object-contain rounded-full '
+            />
+          </div>
+          <button
+            title='close image expand'
+            className='absolute top-4 right-4 text-4xl'
+            onClick={() => setIsExpanded(false)}
+          >
+            <CloseIcon fontSize='inherit' className='text-white' />
+          </button>
+        </Modal>
+      ) : (
+        <></>
+      )}
+    </>
+  )
+}
diff --git a/src/app/components/QR.css b/src/app/components/QR.css
@@ -0,0 +1,3 @@
+.container {
+  box-shadow: 15px 15px 40px 5px rgb(15, 14, 31), -5px -5px 30px 5px rgba(254, 255, 234, 0.349);
+}
diff --git a/src/app/components/QR.tsx b/src/app/components/QR.tsx
@@ -3,8 +3,9 @@ import QrCode2Icon from '@mui/icons-material/QrCode2'
 import ScreenRotationAltIcon from '@mui/icons-material/ScreenRotationAlt'
 import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
 import Image from 'next/image'
-import { useState, useRef, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import Modal from 'react-modal'
+import './QR.css'
 
 export default function QR() {
   const [isShown, setIsShown] = useState(false)
@@ -21,38 +22,35 @@ export default function QR() {
     }
   }, [isShown])
 
-  if (!isShown) {
-    return (
-      <button
-        onClick={() => setIsShown(true)}
-        title='show QR'
-        className='rounded-full p-1 shadow-md bg-gradient-to-br from-red-400 to-red-600 w-12 h-12 flex items-center justify-center hover:from-red-500 hover:to-red-600 hover:shadow-lg transition-all duration-200'
-      >
-        <QrCode2Icon fontSize='large' className='text-white' />
-      </button>
-    )
-  }
-
   return (
     <>
       <button
         onClick={() => setIsShown(true)}
         title='show QR'
-        className='rounded-full p-1 shadow-md bg-gradient-to-br from-red-400 to-red-600 w-12 h-12 flex items-center justify-center hover:from-red-500 hover:to-red-600 hover:shadow-lg transition-all duration-200'
+        className='rounded-full p-1 shadow-md bg-gradient-to-br from-red-400 to-red-600 w-12 h-12 flex items-center justify-center hover:from-red-500 hover:to-red-600 hover:shadow-lg transition-all duration-200 outline-none focus:from-red-500 focus:to-red-600 focus:shadow-lg'
       >
         <QrCode2Icon fontSize='large' className='text-white' />
       </button>
       {isShown ? (
         <Modal
           isOpen={isShown}
-          onRequestClose={() => setIsShown(false)}
-          className='fixed h-[100svh] w-screen bg-black bg-opacity-50 flex items-center justify-center overflow-hidden'
+          onRequestClose={() => {
+            setIsShown(false)
+            setIsRotated(false)
+          }}
+          className='fixed h-[100svh] w-screen bg-black bg-opacity-50 flex flex-col items-center justify-center overflow-hidden'
           overlayClassName='fixed inset-0 bg-black bg-opacity-50 z-10'
         >
-          <div className='fixed h-full w-full -z-10' onClick={() => setIsShown(false)}></div>
-          <div className='flex justify-between items-center w-full h-1/2 flex-col'>
+          <div
+            className='fixed h-full w-full -z-10'
+            onClick={() => {
+              setIsShown(false)
+              setIsRotated(false)
+            }}
+          ></div>
+          <div className='flex justify-between items-center w-2/3 sm:w-3/4 md:w-1/2 xl:w-1/3 flex-col '>
             <div
-              className='rounded-3xl bg-white p-4 shadow-md w-2/3 flex flex-col justify-center items-center transition-all duration-500 sm:w-1/2 md:w-1/3'
+              className='rounded-3xl bg-white p-4 shadow-md flex flex-col justify-center items-center transition-all duration-500 container z-30'
               style={{
                 transform: isRotated ? 'rotate(180deg)' : 'rotate(0deg)',
               }}
@@ -70,14 +68,15 @@ export default function QR() {
                 </p>
               </div>
 
-              <div className='flex justify-center items-center sm:w-1/2'>
+              <div className='flex justify-center items-center sm:w-2/3'>
                 <Image src='/QR-walnuts.dev.svg' alt='walnuts.dev QR' width={500} height={500} />
               </div>
             </div>
-
+          </div>
+          <div className='flex justify-center items-center'>
             <button
               title='rotate QR'
-              className='bg-white rounded-full border-white p-3 border-4 shadow-neumorphism-button active:shadow-neumorphism-button-pressed mt-10 w-[72px] h-[72px]'
+              className='bg-white rounded-full border-white p-3 border-4 shadow-neumorphism-button active:shadow-neumorphism-button-pressed mt-10 w-[72px] h-[72px] outline-none'
               onClick={() => setIsRotated((prev) => !prev)}
             >
               <ScreenRotationAltIcon

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -17,7 +17,5 @@
 }
 
 body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb)))
-    rgb(var(--background-start-rgb));
+  background-image: linear-gradient(170deg, #ffffff, #e9f2f7);
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,5 @@
 import type { Metadata } from 'next'
 import { Inter, Nunito } from 'next/font/google'
-import Head from 'next/head'
 import './globals.css'
 import AppleTouchIcon from '../../public/favicons/apple-touch-icon.png'
 import Favicon16 from '../../public/favicons/favicon-16x16.png'
@@ -50,14 +49,14 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang='ja'>
-      <Head>
+      <head>
         <link rel='manifest' href='/favicons/site.webmanifest' />
         <link rel='mask-icon' href='/favicons/safari-pinned-tab.svg' color='#5bbad5' />
         <meta name='msapplication-TileColor' content='#da532c' />
         <meta name='theme-color' content='#ffffff' />
         <meta name='twitter:image' content='https://walnuts.dev/walnuts.jpg' />
-      </Head>
-      <body className={`${inter.className} ${NunitoFont.variable} bg-white`}>
+      </head>
+      <body className={`${inter.className} ${NunitoFont.variable}`}>
         <Header />
         {children}
       </body>
@@ -68,14 +67,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 function Header() {
   return (
     <header>
-      <div className='flex justify-center w-full bg-white'>
-        <div className='w-10/12 flex items-center justify-left h-16 bg-white text-black font-bold font-Nunito text-2xl px-1'>
+      <div className='flex justify-center w-full '>
+        <div className='w-10/12 flex items-center justify-left h-16  text-black font-bold font-Nunito text-2xl px-1'>
           <a className='logo' href='#'>
             Walnuts.dev
           </a>
         </div>
       </div>
-      <div className='flex justify-center w-full bg-white border-0 '>
+      <div className='flex justify-center w-full  border-0 '>
         <div className='w-10/12 h-[3px] bg-gray-200 px-20'></div>
       </div>
     </header>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,7 +2,7 @@ import { Profile } from './components/Profile'
 
 export default function Home() {
   return (
-    <main className='flex min-h-screen flex-col items-center justify-between p-10 backdrop-grayscale-0 bg-white'>
+    <main className='flex min-h-screen flex-col items-center justify-between p-10'>
       <Profile />
     </main>
   )

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -14,8 +14,8 @@ const config: Config = {
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
       boxShadow: {
-        "neumorphism-button": "15px 10px 15px -7px rgba(70, 70, 70, 0.2) inset, 10px 10px 25px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 1px rgba(255, 255, 255, 0.3)",
-        "neumorphism-button-pressed": "15px 10px 15px -7px rgba(70, 70, 70, 0.3) inset, 10px 10px 25px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 1px rgba(255, 255, 255, 0.3)",
+        "neumorphism-button": "15px 10px 15px -7px rgba(70, 70, 70, 0.1) inset, 10px 10px 25px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 1px rgba(255, 255, 255, 0.3)",
+        "neumorphism-button-pressed": "15px 10px 15px -7px rgba(70, 70, 70, 0.3) inset, 10px 10px 25px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 1px rgba(255, 255, 255, 0.3",
       }
     },
     fontFamily: {