Merge pull request #103 from Bear29ers/feature/#93_create_404_page

Feature/#93 Create 404 page（404エラーページの作成）

src/app/about/page.tsx

@@ -16,13 +16,13 @@ const About: NextPage = () => {
   const ref = useRef<HTMLDivElement | null>(null);
 
   return (
-    <div ref={ref} className="flex-center w-full flex-col bg-dark text-white">
+    <div ref={ref} className="w-full flex-col bg-dark text-white flex-center">
       <div className="my-24 flex gap-x-5">
         <div>
-          <AnimatedText text="About" />
+          <AnimatedText text="About" classes="text-[48px] xs:text-[60px] xsm:text-[80px]" />
         </div>
         <div>
-          <AnimatedText text="me" />
+          <AnimatedText text="me" classes="text-[48px] xs:text-[60px] xsm:text-[80px]" />
         </div>
       </div>
       <div className="flex w-full max-w-screen-lg flex-col gap-y-20 px-2.5 xs:gap-y-28 xs:px-5 xl:max-w-none xl:px-0">

src/app/experience/page.tsx

@@ -13,14 +13,14 @@ const Experience: NextPage = () => {
   return (
     <div className="flex w-full flex-col items-center bg-dark px-2.5 text-white xs:px-5 lg:px-0">
       <div className="my-24">
-        <AnimatedText text="Experience" />
+        <AnimatedText text="Experience" classes="text-[48px] xs:text-[60px] xsm:text-[80px]" />
       </div>
       <div className="mx-auto flex w-full flex-col gap-y-48 lg:max-w-screen-lg">
         {EXPERIENCE_INFO.map((experience: Experience) => (
           <div
             className="flex flex-col items-center justify-between gap-y-8 xsm:flex-row md:justify-evenly lg:justify-between"
             key={experience.id}>
-            <div className="xsm:writing-mode-vertical text-3xl font-black text-hitGray xsm:rotate-180 md:text-4xl">
+            <div className="text-3xl font-black text-hitGray xsm:rotate-180 xsm:writing-mode-vertical md:text-4xl">
               <Period startAt={experience.startAt} endAt={experience.endAt} />
             </div>
             <div className="flex flex-col gap-y-12 xsm:max-w-md md:max-w-xl lg:max-w-3xl">

src/app/globals.scss

@@ -1,3 +1,17 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+// NOTE: この設定を外すとアニメーションの動きがおかしくなるので残しておく
+@keyframes bounce {
+  0% {
+    bottom: 200px;
+    transform: rotate(20deg);
+    transform: scale(1.5);
+  }
+
+  100% {
+    bottom: 50px;
+    transform: rotate(-20deg);
+  }
+}

src/app/not-found.tsx

@@ -0,0 +1,46 @@
+import Link from 'next/link';
+
+import AnimatedText from '@/components/AnimatedText/AnimatedText';
+
+import type { NextPage } from 'next';
+
+const NotFoundPage: NextPage = () => {
+  return (
+    <div className="h-screen w-screen flex-col bg-dark px-2 text-white flex-center sm:px-0">
+      <div className="gap-x-20 flex-center xs:gap-x-28 sm:gap-x-36">
+        <AnimatedText text="4" classes="text-[100px] xs:text-[120px] sm:text-[150px]" />
+        <AnimatedText text="4" classes="text-[100px] xs:text-[120px] sm:text-[150px]" />
+      </div>
+      <div className="relative mr-24 h-20 w-[350px] scale-[0.6] xs:mr-32 xs:scale-75 sm:mr-44 sm:h-28 sm:scale-100">
+        <svg className="absolute bottom-0 left-0 animate-hit" viewBox="0 0 337.4 42.6">
+          <path
+            d="M95.2 12.7c-36.4 1.4-74.9-.2-85-.7C8.9 7.1 6 7.3 6 7.3s-6 1-6 13.8 4.7 14.8 6.5 14.8c2.5 0 3.4-4.2 3.6-5.2 10.1-.5 48.6-2.1 85-.7 15.5.6 42.9 2 72 3.6V9.1c-29.1 1.6-56.5 3-71.9 3.6zM323 .1s-33.5 1.7-43.1 2.5c-5.3.5-47.8 3-92 5.4v26.6c44.2 2.4 86.7 4.9 92 5.4 9.6.8 43.1 2.5 43.1 2.5s14.4 2.5 14.4-21v-.4c0-23.5-14.4-21-14.4-21z"
+            fill="#d2b48c"
+          />
+          <path d="M167.1 9.1v24.3c6.9.4 13.8.7 20.8 1.1V8c-6.9.4-13.9.7-20.8 1.1z" fill="#005A9C" />
+        </svg>
+        <svg className="absolute bottom-[50px] right-14 size-16 animate-bounce" viewBox="0 0 46.6 46.6">
+          <circle cx={23.3} cy={23.3} r={23.3} fill="#ffffff" />
+          <path
+            d="M22.4 16.4c-5.6 0-11.9-1.2-18.1-4.8-1.2-.7-1.6-2.2-.9-3.4.7-1.2 2.3-1.6 3.5-.9 15.6 9.2 32.8.1 32.9 0 1.2-.7 2.7-.2 3.4 1 .7 1.2.2 2.7-1 3.4-.5.2-8.9 4.7-19.8 4.7zM5.6 39.1c-.9 0-1.7-.5-2.2-1.3-.7-1.2-.2-2.7 1-3.4.8-.4 19.7-10.6 37.9 0 1.2.7 1.6 2.2.9 3.4s-2.2 1.6-3.4.9c-15.8-9.2-32.8 0-33 .1-.4.2-.8.3-1.2.3z"
+            fill="#dc143c"
+          />
+        </svg>
+      </div>
+      <div className="mt-24 flex-col gap-y-8 flex-center">
+        <h2 className="text-3xl font-semibold sm:text-5xl">Page Not Found</h2>
+        <div className="hidden flex-col xxs:flex">
+          <p className="sm:text-xl">I&apos;m sorry, the page you requested could not be found.</p>
+          <p className="sm:text-xl">Please go back to the homepage.</p>
+        </div>
+        <Link
+          href="/"
+          className="w-fit rounded-3xl bg-pink-500 px-8 py-2 font-medium uppercase text-white transition-colors duration-500 ease-in-out hover:bg-pink-400 sm:text-lg">
+          Go Home
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default NotFoundPage;

src/components/AnimatedText/AnimatedText.stories.tsx

@@ -14,8 +14,9 @@ type Story = StoryObj<typeof AnimatedText>;
 export const Default: Story = {
   args: {
     text: 'Sample',
+    classes: 'text-[48px] xs:text-[60px] xsm:text-[80px]',
   },
-  render: ({ text }) => {
-    return <AnimatedText text={text} />;
+  render: ({ text, classes }) => {
+    return <AnimatedText text={text} classes={classes} />;
   },
 };

src/components/AnimatedText/AnimatedText.test.tsx

@@ -10,7 +10,7 @@ describe('src/components/AnimatedText/AnimatedText.test.tsx', () => {
     const text = 'Hello World';
 
     beforeEach(() => {
-      renderResult = render(<AnimatedText text={text} />);
+      renderResult = render(<AnimatedText text={text} classes="" />);
     });
 
     afterEach(() => {
@@ -26,8 +26,10 @@ describe('src/components/AnimatedText/AnimatedText.test.tsx', () => {
     });
 
     it('should apply correct styles on mouse move', async () => {
-      const letters = screen.getAllByRole('heading', { level: 1 });
-      const firstLetter = letters[0];
+      const letters: HTMLElement[] = screen.getAllByRole('heading', { level: 1 });
+      if (!letters[0]) throw new Error('letters[0] is not found');
+
+      const firstLetter: HTMLElement = letters[0];
 
       fireEvent.mouseMove(firstLetter, { clientX: 100, clientY: 100 });
 

src/components/AnimatedText/AnimatedText.tsx

@@ -6,9 +6,10 @@ import { AnimatePresence, motion } from 'framer-motion';
 
 interface Props {
   text: string;
+  classes: string;
 }
 
-const AnimatedText: FC<Props> = ({ text }) => {
+const AnimatedText: FC<Props> = ({ text, classes }) => {
   const lettersRef = useRef<(HTMLHeadingElement | null)[]>([]);
 
   useEffect(() => {
@@ -49,7 +50,7 @@ const AnimatedText: FC<Props> = ({ text }) => {
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0, transition: { duration: 0.8, delay: index * 0.1 } }}
           exit={{ opacity: 0 }}
-          className="inline-block cursor-default whitespace-nowrap text-[48px] transition-all delay-[-30ms] duration-100 xs:text-[60px] xsm:text-[80px]"
+          className={`inline-block cursor-default whitespace-nowrap transition-all delay-[-30ms] duration-100 ${classes}`}
           ref={(el: HTMLHeadingElement) => {
             lettersRef.current[index] = el;
           }}>

tailwind.config.ts

@@ -104,13 +104,19 @@ const config: Config = {
           '60%': { transform: 'rotate(0deg)' },
           '100%': { transform: 'rotate(0deg)' },
         },
+        hit: {
+          '0%': { transform: 'rotate(0deg)' },
+          '100%': { transform: 'rotate(-10deg)' },
+        },
       },
       animation: {
         updown: 'updown 2s infinite alternate',
         blink: 'blink 1s infinite alternate',
         nose: 'nose 3s infinite',
         shadow: 'shadow 2s infinite alternate',
         wave: 'wave 2.5s infinite alternate',
+        hit: 'hit 0.4s cubic-bezier(0.63, 0.09, 0.75, 0.46) infinite alternate',
+        bounce: 'bounce 0.4s cubic-bezier(0.63, 0.09, 0.76, 0.45) infinite alternate',
       },
     },
   },