For responsive: css

porink0424 · Oct 25, 2023 · babc7f1 · babc7f1
1 parent d07887f
commit babc7f1
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 59 deletions.
diff --git a/app/_components/Footer.tsx b/app/_components/Footer.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Box, Group, Space, Stack, Text } from '@mantine/core'
+import { Box, Flex, Space, Stack, Text } from '@mantine/core'
 import { useElementSize } from '@mantine/hooks'
 import SnsIcons from './SnsIcons'
 
@@ -11,15 +11,15 @@ export default function Footer() {
     <>
       <Box ref={ref} w='100%' pos='fixed' bottom={0} className='bg-gray-200'>
         <Stack align='center' py={120}>
-          <Group gap={48} mb={16}>
+          <Flex className='flex-col sm:flex-row items-center gap-2 sm:gap-12 mb-4'>
             {['About', 'Experiences', 'Research', 'Hobby'].map((text, index) => (
               <Text fw={600} component='a' href={`#${text}`} size='lg' key={index}>
                 {text}
               </Text>
             ))}
-          </Group>
+          </Flex>
 
-          <Box mb={32} ml={16}>
+          <Box mb={32}>
             <SnsIcons />
           </Box>
 

diff --git a/app/_components/Header.tsx b/app/_components/Header.tsx
@@ -71,54 +71,63 @@ export default function Header() {
   const activeSection = useAtomValue(activeSectionAtom)
   const [open, setOpen] = useAtom(menuOpenAtom)
   const isMobile = useMediaQuery('(max-width: 768px)')
+  const isSmallMobile = useMediaQuery('(max-width: 480px)')
 
   const toggleOpen = useCallback(() => {
     setOpen((prev) => !prev)
   }, [setOpen])
 
-  if (isMobile === undefined) return null
-
   return (
     <AppShellHeader withBorder={false} className='!bg-transparent flex items-center justify-center'>
       <Box className='w-[97%] h-[60px] bg-gray-50 border border-[black] rounded-full flex items-center justify-between'>
-        {isMobile ? (
-          <Box w='100%' pos='relative'>
-            <Group w='100%' justify='space-between'>
-              <Burger opened={open} onClick={toggleOpen} className='ml-4' />
-              <LanguageButton />
-            </Group>
-            <Box pos='absolute' top='50%' left='50%' className='-translate-x-1/2 -translate-y-1/2'>
-              <Icon />
+        {
+          // eslint-disable-next-line no-nested-ternary
+          isMobile === undefined ? null : isMobile ? (
+            <Box w='100%' pos='relative'>
+              <Group w='100%' justify='space-between'>
+                <Burger opened={open} onClick={toggleOpen} className='ml-4' />
+                <LanguageButton />
+              </Group>
+              {!isSmallMobile && (
+                <Box
+                  pos='absolute'
+                  top='50%'
+                  left='50%'
+                  className='-translate-x-1/2 -translate-y-1/2'
+                >
+                  <Icon />
+                </Box>
+              )}
             </Box>
-          </Box>
-        ) : (
-          <>
-            <Group gap={8} align='center' className='ml-4'>
-              <Icon />
-              <LanguageButton />
-            </Group>
+          ) : (
+            <>
+              <Group gap={8} align='center' className='ml-4'>
+                <Icon />
+                <LanguageButton />
+              </Group>
 
-            <Group gap={0} align='center' className='mr-8 h-[46px]'>
-              {['About', 'Experiences', 'Research', 'Hobby'].map((text, index) => (
-                <Group gap={0} h='100%' key={text}>
-                  {index > 0 && <Divider h='100%' orientation='vertical' />}
-                  <Text
-                    fw={500}
-                    size='sm'
-                    component='a'
-                    c={activeSection !== index ? 'dimmed' : ''}
-                    href={`#${text}`}
-                    className={`h-full !px-2 flex items-center transition-[background-color,color] duration-[0.3s] hover:bg-gray-200 ${
-                      activeSection === index ? 'bg-gray-200' : ''
-                    }`}
-                  >
-                    {text}
-                  </Text>
-                </Group>
-              ))}
-            </Group>
-          </>
-        )}
+              <Group gap={0} align='center' className='mr-8 h-[46px]'>
+                {['About', 'Experiences', 'Research', 'Hobby'].map((text, index) => (
+                  <Group gap={0} h='100%' key={text}>
+                    {index > 0 && <Divider h='100%' orientation='vertical' />}
+                    <Text
+                      fw={500}
+                      size='sm'
+                      component='a'
+                      c={activeSection !== index ? 'dimmed' : ''}
+                      href={`#${text}`}
+                      className={`h-full !px-2 flex items-center transition-[background-color,color] duration-[0.3s] hover:bg-gray-200 ${
+                        activeSection === index ? 'bg-gray-200' : ''
+                      }`}
+                    >
+                      {text}
+                    </Text>
+                  </Group>
+                ))}
+              </Group>
+            </>
+          )
+        }
       </Box>
     </AppShellHeader>
   )

diff --git a/app/_components/sections/SectionAbout.tsx b/app/_components/sections/SectionAbout.tsx
@@ -2,6 +2,8 @@ import { Language } from '@/app/_constants/language'
 import { SECTION_ABOUT } from '@/app/_contents/SectionAbout'
 import { Text, Title, Stack, List, ListItem, Timeline, TimelineItem, Box } from '@mantine/core'
 import React from 'react'
+import { Point } from 'tabler-icons-react'
+import { parseText } from '@/app/_utils/parseText'
 import SnsIcons from '../SnsIcons'
 
 type Props = {
@@ -21,9 +23,11 @@ function SectionAbout({ language, sectionRef }: Props) {
           Profile
         </Title>
 
-        <List withPadding className='list-disc'>
+        <List withPadding>
           {SECTION_ABOUT.profile[language].map((text, index) => (
-            <ListItem key={index}>{text}</ListItem>
+            <ListItem icon={<Point />} key={index} className='flex items-center'>
+              {parseText(text)}
+            </ListItem>
           ))}
         </List>
 

diff --git a/app/_components/sections/SectionTop.tsx b/app/_components/sections/SectionTop.tsx
@@ -1,4 +1,6 @@
-import { Box, Overlay, Image, Group, Avatar, Title, Text, AspectRatio } from '@mantine/core'
+'use client'
+
+import { Box, Overlay, Image, Avatar, Title, Text, AspectRatio } from '@mantine/core'
 import React from 'react'
 
 function SectionTop() {
@@ -13,15 +15,21 @@ function SectionTop() {
       </Box>
 
       <AspectRatio ratio={3 / 2}>
-        <Group gap={28} h='100%' justify='space-between' align='center' m='auto'>
-          <Avatar size={150} src='/top.jpg' alt="Daichi Kato's Icon" />
+        <Box className='h-full flex justify-between items-center m-auto !flex-col sm:!flex-row'>
+          <Avatar
+            src='/top.jpg'
+            alt="Daichi Kato's Icon"
+            className='!w-[100px] !h-[100px] sm:!w-[150px] sm:!h-[150px] mb-2 sm:mb-0 sm:!mr-7'
+          />
           <Box>
-            <Title order={1} className='!text-5xl'>
+            <Title order={1} className='!text-2xl sm:!text-5xl text-center sm:text-left'>
               Daichi Kato
             </Title>
-            <Text size='md'>M1 Student at The University of Tokyo, Japan</Text>
+            <Text className='!text-sm sm:!text-base text-center sm:text-left'>
+              M1 Student at The University of Tokyo, Japan
+            </Text>
           </Box>
-        </Group>
+        </Box>
       </AspectRatio>
     </>
   )

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from 'next'
 import './globals.css'
 import '@mantine/core/styles.css'
-import { AppShell, AppShellMain, Box, ColorSchemeScript, MantineProvider } from '@mantine/core'
+import { AppShell, AppShellMain, ColorSchemeScript, MantineProvider } from '@mantine/core'
 import { Noto_Sans_JP } from 'next/font/google'
 import Header from './_components/Header'
 import Footer from './_components/Footer'
@@ -23,11 +23,7 @@ function PageLayout({ children }: { children: React.ReactNode }) {
   return (
     <AppShell header={{ height: 80 }}>
       <Header />
-      <AppShellMain className='bg-white shadow-xl z-10 relative'>
-        <Box maw={720} mx='auto'>
-          {children}
-        </Box>
-      </AppShellMain>
+      <AppShellMain className='bg-white shadow-xl z-10 relative'>{children}</AppShellMain>
       <Footer />
       <Menu />
     </AppShell>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Space } from '@mantine/core'
+import { Box, Space } from '@mantine/core'
 import useScrollSpy from 'react-use-scrollspy'
 import { useEffect, useRef } from 'react'
 import { useViewportSize } from '@mantine/hooks'
@@ -34,7 +34,7 @@ export default function Home() {
   }, [activeSection, setActiveSection])
 
   return (
-    <>
+    <Box maw={720} className='!mx-[2%] md:!mx-auto'>
       <SectionTop />
       <Space h={60} />
       <SectionAbout sectionRef={sectionRefs[0]} language={language} />
@@ -45,6 +45,6 @@ export default function Home() {
       <Space h={100} />
       <SectionHobby sectionRef={sectionRefs[3]} language={language} />
       <Space h={100} />
-    </>
+    </Box>
   )
 }