✨ film page upgraded

src/app/and/index.module.scss

@@ -1,23 +1,52 @@
 .content-wrapper {
-  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 10px;
+  scroll-snap-type: y mandatory;
+
+  @include sp {
+    grid-template-columns: repeat(6, 1fr);
+  }
 }
 
-.cards-view {
-  display: flex;
-  width: 100%;
-  overflow: auto;
-  scroll-snap-type: x mandatory;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
+.films-view {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: span 12;
+  gap: 10px;
+  align-content: center;
+  align-items: center;
+  height: 100dvh;
 
-  &::-webkit-scrollbar {
-    display: none;
+  @include sp {
+    grid-column: span 6;
   }
 
-  @include sp {
-    flex-direction: column;
-    scroll-snap-type: y mandatory;
-    height: 100vh;
-    height: 100dvh;
+  > .rank-title {
+    grid-column: 3 / 11;
+    padding: 20px 0;
+    overflow: hidden;
+    border: 1px solid #fff2;
+    border-radius: 20px;
+
+    @include sp {
+      grid-column: 2 / 6;
+    }
+  }
+
+  > .cards {
+    display: flex;
+    scroll-snap-type: x mandatory;
+    grid-column: 3 / 11;
+    max-width: 100%;
+    height: min(500px, 70dvh);
+    overflow-x: scroll;
+    border-radius: 20px;
+
+    @include sp {
+      flex-direction: column;
+      scroll-snap-type: y mandatory;
+      grid-column: 2 / 6;
+    }
   }
 }

src/app/and/page.tsx

@@ -1,5 +1,6 @@
 import { Metadata } from 'next';
 
+import { ScrollingText } from '~/components/common/scrollingText';
 import { FilmCard } from '~/components/pages/and/filmCard';
 import { Film } from '~/types/Films';
 import { getFilms } from '~/utils/films';
@@ -19,13 +20,18 @@ const AndPage = async () => {
   const films = await getFilms();
 
   return (
-    <div className={styles['content-wrapper']}>
-      <div className={styles['cards-view']}>
-        {films.map((film: Film, index: number) => (
-          <FilmCard key={film.id} film={film} rank={index + 1} />
-        ))}
+    <main className={styles['content-wrapper']}>
+      <div className={styles['films-view']}>
+        <div className={styles['rank-title']}>
+          <ScrollingText text="FILM RANKING" size={4} />
+        </div>
+        <div className={styles.cards}>
+          {films.map((film: Film, index: number) => (
+            <FilmCard key={film.id} film={film} rank={index + 1} />
+          ))}
+        </div>
       </div>
-    </div>
+    </main>
   );
 };
 

src/app/portfolio/index.module.scss

@@ -17,8 +17,6 @@
   grid-template-columns: repeat(12, 1fr);
   gap: 10px;
   width: 100%;
-  min-height: 100vh;
-  min-height: 100dvh;
   padding: 80px 10px 10px;
   overflow: auto;
 
@@ -174,12 +172,19 @@
 
 .design-link {
   @include rounded-wrapper(16px);
+  @extend %glass-effect;
 
+  font-size: 2rem;
   color: utils.$color-navy;
 
+  > .numbering {
+    padding-inline-end: 16px;
+    font-family: utils.$font-serif;
+  }
+
   > .title {
     font-family: utils.$font-serif;
-    font-size: 2.5rem;
+    font-weight: 800;
   }
 
   &.aas {

src/app/portfolio/page.tsx

@@ -3,7 +3,7 @@ import type { Metadata, NextPage } from 'next';
 import Link from 'next/link';
 
 import { ImageWithLoading } from '~/components/common/image/imageWithLoading';
-import { PageTitle } from '~/components/pages/portfolio/pageTitle';
+import { ScrollingText } from '~/components/common/scrollingText';
 
 import styles from './index.module.scss';
 
@@ -23,7 +23,7 @@ const PortfolioPage: NextPage = () => (
   <main className={classNames(styles['content-wrapper'], 'portfolio-wrapper')}>
     <div className={styles['title-image']} />
     <div className={styles['title-wrapper']}>
-      <PageTitle />
+      <ScrollingText text="PORTFOLIO" />
     </div>
     <h3 className={classNames(styles['section-title'])}>films</h3>
     <div className={classNames(styles['films-section'], styles.section)}>
@@ -52,20 +52,20 @@ const PortfolioPage: NextPage = () => (
     <h3 className={classNames(styles['section-title'])}>designs</h3>
     <div className={classNames(styles['designs-section'], styles.section)}>
       <Link href="/#" className={classNames(styles['design-link'], styles.aas)}>
-        <span>#1</span>
-        <h4 className={styles.title}>Redesign of Academic Affair System</h4>
+        <span className={styles.numbering}>#1</span>
+        <span className={styles.title}>Redesign of Academic Affair System</span>
       </Link>
       <Link href="/#" className={classNames(styles['design-link'], styles.shp)}>
-        <span>#2</span>
-        <h4 className={styles.title}>SP App for Small Health Problems</h4>
+        <span className={styles.numbering}>#2</span>
+        <span className={styles.title}>App for Small Health Problems</span>
       </Link>
       <Link href="/#" className={classNames(styles['design-link'], styles.ksk)}>
-        <span>#3</span>
-        <h4 className={styles.title}>Kuseki</h4>
+        <span className={styles.numbering}>#3</span>
+        <span className={styles.title}>Kuseki</span>
       </Link>
       <Link href="/#" className={classNames(styles['design-link'], styles.akb)}>
-        <span>#4</span>
-        <h4 className={styles.title}>Redesign of AKB48 Official Website</h4>
+        <span className={styles.numbering}>#4</span>
+        <span className={styles.title}>Redesign of AKB48 Official Website</span>
       </Link>
     </div>
     {/* films */}

src/components/pages/portfolio/pageTitle/index.module.scss → src/components/common/scrollingText/index.module.scss

@@ -1,20 +1,20 @@
-.page-title {
+.scrolling-text {
   display: flex;
   width: fit-content;
   font-family: utils.$font-serif;
-  font-size: 12rem;
   font-variation-settings: 'wdth' 125;
   font-weight: 800;
   line-height: 1;
   user-select: none;
-  animation: title 10s linear infinite;
+  animation: scrolling 10s linear infinite;
 
   > span {
     padding-inline: 2rem;
+    text-wrap: nowrap;
   }
 }
 
-@keyframes title {
+@keyframes scrolling {
   0% {
     transform: translateX(0);
   }

src/components/common/scrollingText/index.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { useRef } from 'react';
+
+import styles from './index.module.scss';
+
+type Props = {
+  /**
+   * Text to scroll
+   */
+  text: string;
+  /**
+   * Font size in rem
+   * @default 12
+   */
+  size?: number;
+  /**
+   * HTML tag to render
+   * @default 'h2'
+   */
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+};
+
+export const ScrollingText = ({ text, size = 12, as = 'h2' }: Props) => {
+  const As = as;
+  const titleRef = useRef<HTMLHeadingElement>(null);
+
+  const handleScroll = () =>
+    titleRef.current?.appendChild(titleRef.current?.firstElementChild as Node);
+
+  titleRef.current?.addEventListener('animationiteration', handleScroll);
+
+  return (
+    <As
+      className={styles['scrolling-text']}
+      ref={titleRef}
+      style={{ fontSize: `${size}rem` }}
+    >
+      <span>{text}</span>
+      <span>{text}</span>
+    </As>
+  );
+};

src/components/pages/and/filmCard/index.module.scss

@@ -1,7 +1,6 @@
 .card-wrapper {
   position: relative;
-  flex: 1 0 90vw;
-  height: 100vh;
+  flex: 1 0 100%;
   font-size: 1.6rem;
   color: #fff;
   background-repeat: no-repeat;
@@ -10,16 +9,6 @@
   background-size: cover !important;
   scroll-snap-align: start;
 
-  &:last-of-type {
-    flex: 1 0 100vw;
-  }
-
-  @include sp {
-    flex: 1 0 100dvh;
-    height: unset;
-    padding-bottom: 100px;
-  }
-
   > .contents {
     position: relative;
     display: flex;
@@ -44,13 +33,15 @@
   position: absolute;
   top: 0;
   left: -40px;
-  font-size: 25rem;
+  font-family: utils.$font-serif;
+  font-size: 20rem;
   font-weight: 600;
   line-height: 1;
 
   @include sp {
-    top: 250px;
+    top: 200px;
     left: -20px;
+    z-index: 1;
     font-size: 10rem;
   }
 }
@@ -65,13 +56,40 @@
   box-shadow: 0 0 20px rgb(0 0 0 / 50%);
 
   @include sp {
+    width: 160px;
+    height: 240px;
     margin: 0 auto;
   }
 }
 
-.basic-info > .overview {
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
+.basic-info {
+  > .title {
+    font-family: utils.$font-serif;
+    font-size: 2.4rem;
+
+    @include sp {
+      font-size: 1.8rem;
+    }
+  }
+
+  > .original {
+    font-size: 1rem;
+  }
+
+  > .release,
+  > .countries {
+    font-family: utils.$font-serif;
+    font-size: 1.4rem;
+  }
+
+  > .overview {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+
+    @include sp {
+      display: none;
+    }
+  }
 }

src/components/pages/and/filmCard/index.tsx

@@ -26,11 +26,14 @@ export const FilmCard = ({ film, rank }: Props) =>
           </div>
           <div className={styles['basic-info']}>
             <h3 className={styles.title}>{film.title}</h3>
-            {film.originalTitle !== film.title ? (
+            {film.originalTitle === film.title ? null : (
               <p className={styles.original}> / {film.originalTitle}</p>
-            ) : null}
-            <p className={styles.release}>{film.releaseDate}</p>
-            <p className={styles.countries}>{film.productionCountries}</p>
+            )}
+            <span className={styles.release}>{film.releaseDate}</span>
+            <span className={styles.countries}>
+              {' '}
+              / {film.productionCountries}
+            </span>
             <p className={styles.overview}>{film.overview}</p>
           </div>
         </div>