Merge pull request #9 from loxygenK/feat/introduction

✨ Add <Introduction /> page

package.json

@@ -24,6 +24,7 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
     "react-transition-group": "^4.4.2",
+    "react-twemoji": "^0.3.0",
     "ress": "^4.0.0",
     "webpack-dev-middleware": "^5.2.1"
   },

src/comps/shared/Emoji.module.scss

@@ -0,0 +1,7 @@
+.emoji-default {
+  height: 1em;
+
+  img {
+    height: 100%;
+  }
+}

src/comps/shared/Emoji.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import Twemoji from "react-twemoji";
+
+import styles from "./Emoji.module.scss";
+
+export type EmojiProps = React.HTMLAttributes<HTMLSpanElement> & {
+  emoji: string;
+};
+export const Emoji = ({ emoji, className, ...props }: EmojiProps) => (
+  <Twemoji noWrapper>
+    <span className={styles.emojiDefault + " " + className} {...props}>
+      {emoji}
+    </span>
+  </Twemoji>
+);

src/comps/shared/Heading.module.scss

@@ -0,0 +1,29 @@
+@use "~/styling/font.module.scss";
+@use "~/styling/color.module.scss";
+
+.heading {
+  display: grid;
+  grid-gap: 0.5rem;
+
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  align-items: end;
+
+  width: 100%;
+  margin-bottom: 1.25em;
+  padding-bottom: 0.25em;
+
+  border-bottom: 2px solid color.get-theme-color(text-color-accent-primary);
+
+  * {
+    line-height: 100%;
+  }
+}
+
+.sub-text {
+  @include font.use-set(monospace);
+  color: color.get-theme-color(text-color-secondary);
+
+  font-size: 0.85rem;
+  font-weight: normal;
+}

src/comps/shared/Heading.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Emoji } from "./Emoji";
+
+import styles from "./Heading.module.scss";
+
+export type HeadingProps = {
+  children: string;
+  emoji: string;
+  sub: string;
+};
+export const Heading = ({ children, emoji, sub }: HeadingProps) => (
+  <h1 className={styles.heading}>
+    <Emoji emoji={emoji} />
+    <span>{children}</span>
+    {/* eslint-disable-next-line react/jsx-no-comment-textnodes */}
+    <span className={styles.subText}>// {sub}</span>
+  </h1>
+);

src/pages/about/About.module.scss

@@ -0,0 +1,11 @@
+@use "~/styling/color.module.scss";
+@use "~/styling/layout.module.scss";
+
+.container {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr 2fr;
+  grid-gap: 1.5em;
+  width: 100%;
+}
+

src/pages/about/About.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { PageWrapper } from "~/comps/layout/PageWrapper";
+import { Heading } from "~/comps/shared/Heading";
+
+import styles from "./About.module.scss";
+import { Avatar } from "./Avatar";
+import { Introduction } from "./Introduction";
+
+export const About = () => (
+  <PageWrapper>
+    <Heading sub="About" emoji="🙌">
+      自己紹介
+    </Heading>
+    <div className={styles.container}>
+      <Avatar />
+      <Introduction />
+    </div>
+  </PageWrapper>
+);

src/pages/about/Avatar.module.scss

@@ -0,0 +1,18 @@
+@use "~/styling/color.module.scss";
+
+.avatar {
+  img {
+    margin-bottom: -15px;
+    width: 100%;
+
+    animation: 5s ease-in-out alternate infinite shake;
+  }
+
+  overflow: hidden;
+  border-bottom: 2px solid color.get-theme-color(text-color-accent-primary);
+}
+
+@keyframes shake {
+  from { transform: rotate(-2deg); }
+  to { transform: rotate(2deg); }
+}

src/pages/about/Avatar.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import styles from "./Avatar.module.scss";
+
+export const Avatar = () => (
+  <div>
+    <div className={styles.avatar}>
+      <img src="/static/loxygen_k.png" />
+    </div>
+    <span>
+      Icon by:
+      <a href="https://twitter.com/unios103i" target="_blank" rel="noreferrer">
+        @unios103i
+      </a>
+    </span>
+  </div>
+);

src/pages/about/Introduction.module.scss

@@ -0,0 +1,34 @@
+@use "~/styling/color.module.scss";
+@use "~/styling/font.module.scss";
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.name, .affiriation {
+  display: flex;
+  flex-direction: column;
+}
+
+.primary {
+  @include font.use-set("heading");
+
+  font-size: 3em;
+  font-weight: 600;
+  line-height: 110%;
+}
+
+.element {
+  display: flex;
+  flex-direction: column;
+}
+
+.aka {
+  color: color.get-theme-color(text-color-secondary)
+}
+
+.location {
+  font-size: 1.25em;
+}

src/pages/about/Introduction.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import styles from "./Introduction.module.scss";
+
+export const Introduction = () => (
+  <div className={styles.wrapper}>
+    <div className={styles.name}>
+      <span className={styles.primary}>フライさん</span>
+      <span className={styles.aka}>Flisan / loxygen.K</span>
+    </div>
+    <div className={styles.affiriation}>
+      <div className={styles.element}>
+        <span className={styles.location}>茨城工業高等専門学校</span>
+        <span>3 年 情報系</span>
+      </div>
+      <div className={styles.element}>
+        <span className={styles.location}>茨城工業高等専門学校</span>
+        <span>3 年 情報系</span>
+      </div>
+    </div>
+    フライさんです．
+  </div>
+);

src/pages/router/routing.ts

@@ -1,8 +1,10 @@
 import { RouteProps } from "react-router-dom";
 import { Splash } from "~/pages/splash/Splash";
 import { Main } from "~/pages/main/Main";
+import { About } from "../about/About";
 
 export const routingTable: RouteProps[] = [
   { path: "/", component: Splash, exact: true },
   { path: "/me", component: Main, exact: true },
+  { path: "/about", component: About, exact: true },
 ];

src/styling/base.module.scss

@@ -1,4 +1,5 @@
 @use "./font.module.scss";
+@use "./color.module.scss";
 
 body {
   @include font.use-set(base);
@@ -11,6 +12,14 @@ body {
 }
 
 a {
-  color: unset;
+  color: color.get-theme-color(text-color-accent-secondary);
   text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  @include font.use-set(heading);
 }

src/styling/font.module.scss

@@ -2,10 +2,16 @@
 
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400&display=swap');
 
+$__set-base: "IBM Plex Sans", "M PLUS Rounded 1c";
+$__set-heading: "IBM Plex Sans", "M PLUS 1p";
+$__set-monospace: IBM Plex Mono;
 $font-set: (
-  "base": "IBM Plex Sans",
-  "monospace": "IBM Plex Mono",
+  "base": $__set-base,
+  "heading": $__set-heading,
+  "monospace": $__set-monospace,
 );
 
 @mixin use-set($name) {

src/typedef.d.ts

@@ -12,3 +12,12 @@ declare module "*.svg" {
   ) => React.ReactElement;
   export default component;
 }
+
+declare module "react-twemoji" {
+  const Twemoji: (props: {
+    children: React.ReactNode;
+    noWrapper?: boolean;
+    tag?: string;
+  }) => React.ReactElement;
+  export default Twemoji;
+}

webpack.config.ts

@@ -74,7 +74,7 @@ const configuration: Configuration = {
     new CopyWebpackPlugin({
       patterns: [
         {
-          from: path.resolve(__dirname, "asset/static"),
+          from: path.resolve(__dirname, "static"),
           to: path.resolve(__dirname, "dist/static/"),
           noErrorOnMissing: true,
         },