feat: Migrate to App Router

app/_components/Avatar.module.css

@@ -0,0 +1,3 @@
+.image {
+  border-radius: 100%;
+}

components/atoms/avatar.tsx → app/_components/Avatar.tsx

@@ -1,14 +1,13 @@
 import type { FC } from 'react';
 
-import styles from './avatar.module.scss';
+import styles from './Avatar.module.css';
 
 type Props = {
   url: string;
   alt: string;
 };
 
 const Avatar: FC<Props> = (props) => {
-  // noinspection CheckImageSize
   return <img className={styles.image} src={props.url} alt={props.alt} width="128" height="128" />;
 };
 

app/_components/Card.module.css

@@ -0,0 +1,23 @@
+.wrapper {
+  align-items: center;
+  display: flex;
+}
+
+.caption {
+  margin-left: 22px;
+
+  & > * {
+    display: block;
+  }
+}
+
+.name {
+  color: var(--color-text-primary);
+  font-size: 24px;
+  font-weight: bolder;
+}
+
+.summary {
+  color: var(--color-text-secondary);
+  font-weight: bolder;
+}

components/molecules/card.tsx → app/_components/Card.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
-import Avatar from '../atoms/avatar';
+import Avatar from './Avatar';
 
-import styles from './card.module.scss';
+import styles from './Card.module.css';
 
 type Props = {
   name: string;

app/_components/Divider.module.css

@@ -0,0 +1,23 @@
+.hr {
+  display: flex;
+  align-items: center;
+  margin: 1em 0 1em;
+  border: none;
+
+  &::after {
+    content: "";
+    display: block;
+    border-top: 3px dotted #ddd;
+    background: transparent;
+    width: 100%;
+  }
+}
+
+.label {
+  color: #ccc;
+  font-size: .8em;
+  font-weight: bolder;
+  text-transform: uppercase;
+  margin-right: .5em;
+  flex: 0 0 content;
+}

components/atoms/divider.tsx → app/_components/Divider.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 
-import styles from './divider.module.scss';
+import styles from './Divider.module.css';
 
 type Props = {
   label?: string;

app/_components/Experience.module.css

@@ -0,0 +1,32 @@
+.title {
+  margin-bottom: .2em;
+
+  & > span {
+    display: block;
+  }
+
+  .duration {
+    color: #888;
+    font-size: .8em;
+    text-transform: uppercase;
+  }
+
+  .position {
+    margin-bottom: -0.1em;
+  }
+
+  .at,
+  .as {
+    margin: 0 .5em;
+    font-size: .8em;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+
+  .name,
+  .type {
+    font-size: .9em;
+  }
+}

components/atoms/experience.tsx → app/_components/Experience.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import type { Duration, EmploymentType, YearMonth } from 'wantedly-profile';
 
-import styles from './experience.module.scss';
+import styles from './Experience.module.css';
 
 type Props = {
   name: string;

app/_components/History.module.css

@@ -0,0 +1,3 @@
+.experience {
+  margin: .5em 0 1em;
+}

components/molecules/history.tsx → app/_components/History.tsx

@@ -7,10 +7,10 @@ import type {
   WorkExperience,
 } from 'wantedly-profile';
 
-import Divider from '../atoms/divider';
-import Experience from '../atoms/experience';
+import Divider from './Divider';
+import Experience from './Experience';
 
-import styles from './history.module.scss';
+import styles from './History.module.css';
 
 const Section: FC<{ section: LifeStoryChapterSection<ExperienceType> }> = ({ section }) => {
   if (section.experienceType === 'EDUCATION') {

components/atoms/logo.tsx → app/_components/Logo.tsx

@@ -1,6 +1,6 @@
-import type React from 'react';
+import type { FC } from 'react';
 
-const Logo: React.FC = () => {
+const Logo: FC = () => {
   return <img src="/images/logo.svg" alt="s6n.jp" width="165" height="58" />;
 };
 

app/_components/Menu.module.css

@@ -0,0 +1,14 @@
+.link {
+  color: var(--color-text-primary);
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 29px;
+  text-decoration: none;
+}
+
+.isColored {
+  color: #fe3a7c;
+  background: linear-gradient(45deg, #fe3a7c, #ffa900);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

components/atoms/menu.tsx → app/_components/Menu.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { Outfit } from 'next/font/google';
 import type React from 'react';
 
-import styles from './menu.module.scss';
+import styles from './Menu.module.css';
 
 const outfit = Outfit({
   subsets: ['latin'],

app/_components/Menus.module.css

@@ -0,0 +1,7 @@
+.navi {
+  margin-bottom: 26px;
+}
+
+.item {
+  margin-right: 24px;
+}

components/molecules/menus.tsx → app/_components/Menus.tsx

@@ -1,8 +1,8 @@
 import type React from 'react';
 
-import Menu from '../atoms/menu';
+import Menu from './Menu';
 
-import styles from './menus.module.scss';
+import styles from './Menus.module.css';
 
 export type MenuItem = {
   text: string;

app/_components/Sidebar.module.css

@@ -0,0 +1,7 @@
+.sidebar {
+  padding: 100px 62px;
+}
+
+.taglines {
+  margin-top: 32px;
+}

app/_components/Sidebar.tsx

@@ -0,0 +1,22 @@
+import clsx from 'clsx';
+import type React from 'react';
+
+import Logo from './Logo';
+import Taglines from './Taglines';
+
+import styles from './Sidebar.module.css';
+
+type Props = {
+  className?: string;
+};
+
+const Sidebar: React.FC<Props> = (props) => {
+  return (
+    <header className={clsx(styles.sidebar, props.className)}>
+      <Logo />
+      <Taglines className={styles.taglines} texts={['engineering', 'behind', 'our', 'web.']} />
+    </header>
+  );
+};
+
+export default Sidebar;

app/_components/Tagline.module.css

@@ -0,0 +1,14 @@
+.tagline {
+  display: block;
+  color: var(--color-text-primary);
+  font-weight: bold;
+  font-size: 36px;
+  line-height: 44px;
+}
+
+.isColored {
+  color: #fe3a7c;
+  background: linear-gradient(45deg, #fe3a7c, #ffa900);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

components/atoms/tagline.tsx → app/_components/Tagline.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import { Outfit } from 'next/font/google';
-import type React from 'react';
+import type { FC } from 'react';
 
-import styles from './tagline.module.scss';
+import styles from './Tagline.module.css';
 
 const outfit = Outfit({
   subsets: ['latin'],
@@ -13,7 +13,7 @@ type Props = {
   colored: boolean;
 };
 
-const Tagline: React.FC<Props> = (props) => {
+const Tagline: FC<Props> = (props) => {
   return (
     <span className={clsx(outfit.className, styles.tagline, props.colored && styles.isColored)}>{props.text}</span>
   );

components/molecules/taglines.tsx → app/_components/Taglines.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import Tagline from '../atoms/tagline';
+import Tagline from './Tagline';
 
 type Props = {
   texts: string[];

app/layout.module.css

@@ -0,0 +1,35 @@
+.wrapper {
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 1;
+  margin: 0 auto;
+  max-width: 1200px;
+  max-height: 100vh;
+  padding: 0 44px;
+}
+
+.contents {
+  flex-grow: 1;
+  padding: 100px 62px 0;
+  overflow-y: clip;
+}
+
+.main {
+  height: 100%;
+  padding-bottom: 100px;
+  overflow-y: scroll;
+}
+
+@media (max-width: 1024px) {
+  .wrapper {
+    flex-wrap: wrap;
+  }
+
+  .side {
+    padding: 72px 0 32px;
+  }
+
+  .contents {
+    padding: 50px 0;
+  }
+}