Merge branch 'main' of https://github.com/bicstone/portfolio into dev…

…/adopt-material-you

gatsby-config.ts

@@ -40,14 +40,14 @@ const config: GatsbyConfig = {
   jsxImportSource: "@emotion/react",
 
   plugins: [
-    `gatsby-plugin-emotion`,
     {
-      resolve: `gatsby-plugin-fix-fouc`,
+      resolve: `gatsby-plugin-anchor-links`,
       options: {
-        attributeName: "is-loading",
-        timeout: 0,
+        offset: 0,
+        duration: 0,
       },
     },
+    `gatsby-plugin-emotion`,
     {
       resolve: `gatsby-plugin-google-tagmanager`,
       options: {
@@ -188,7 +188,7 @@ const config: GatsbyConfig = {
             path: `/me`,
             lastmod: site.buildTime,
             changefreq: `daily`,
-            priority: 0.9,
+            priority: 1.0,
           };
 
           const posts = allMdx.nodes.map(({ frontmatter }) => {
@@ -204,7 +204,7 @@ const config: GatsbyConfig = {
             path: `/${page}`,
             lastmod: site.buildTime,
             changefreq: `daily`,
-            priority: 0.1,
+            priority: 0.6,
           }));
 
           return [home, me, ...posts, ...pages];

gatsby-node.ts

@@ -37,6 +37,37 @@ export const onCreateWebpackConfig: GatsbyNode["onCreateWebpackConfig"] = ({
   });
 };
 
+/**
+ * Copy assets to public
+ * Create Zenn articles json
+ * Create Speaker Deck Slides json
+ */
+export const onPreBootstrap: GatsbyNode["onPreBootstrap"] = async ({
+  reporter,
+}) => {
+  /**
+   *  Copy assets to public
+   */
+  const sourcePath = path.resolve(process.cwd(), "content", "assets");
+  const destPath = path.resolve(process.cwd(), "public", "assets");
+
+  fs.cpSync(sourcePath, destPath, { recursive: true, force: true });
+
+  reporter.success(
+    `onPreBootstrap: Copied assets from ${sourcePath} to ${destPath}`
+  );
+
+  /**
+   * Create Zenn articles json
+   * Create Speaker Deck Slides json
+   */
+  await fetchLaprasActivity();
+
+  reporter.success(
+    `onPreBootstrap: Created Zenn articles and Speaker Deck Slides json`
+  );
+};
+
 /**
  * Create blog post pages
  */
@@ -94,26 +125,12 @@ export const createPages: GatsbyNode["createPages"] = async ({
 };
 
 /**
- * Copy assets to public
  * Add Search nodes
  * Create OGP images
- * Create Zenn articles json
- * Create Speaker Deck Slides json
  */
 export const createPagesStatefully: GatsbyNode["createPagesStatefully"] =
   async ({ graphql, reporter, actions, createNodeId, createContentDigest }) => {
     const { createNode } = actions;
-    /**
-     *  Copy assets to public
-     */
-    const sourcePath = path.resolve(process.cwd(), "content", "assets");
-    const destPath = path.resolve(process.cwd(), "public", "assets");
-
-    fs.cpSync(sourcePath, destPath, { recursive: true, force: true });
-
-    reporter.success(
-      `onCreatePagesStatefully: Copied assets from ${sourcePath} to ${destPath}`
-    );
 
     /**
      * Add Search nodes
@@ -252,16 +269,6 @@ export const createPagesStatefully: GatsbyNode["createPagesStatefully"] =
     reporter.success(
       `onCreatePagesStatefully: Created ${blogPostList.length} blog ogp images`
     );
-
-    /**
-     * Create Zenn articles json
-     * Create Speaker Deck Slides json
-     */
-    await fetchLaprasActivity();
-
-    reporter.success(
-      `onCreatePagesStatefully: Created Zenn articles and Speaker Deck Slides json`
-    );
   };
 
 /**

package.json

@@ -30,6 +30,7 @@
     "date-fns-tz": "2.0.0",
     "fuse.js": "6.6.2",
     "gatsby": "5.10.0",
+    "gatsby-plugin-anchor-links": "1.2.1",
     "gatsby-plugin-emotion": "8.10.0",
     "gatsby-plugin-feed": "5.10.0",
     "gatsby-plugin-fix-fouc": "1.0.3",
@@ -66,7 +67,7 @@
     "@typescript-eslint/eslint-plugin": "5.59.11",
     "@typescript-eslint/parser": "5.59.11",
     "canvas": "2.11.2",
-    "dotenv": "16.1.4",
+    "dotenv": "16.2.0",
     "eslint": "8.42.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-config-standard-with-typescript": "35.0.0",

src/components/Spacer.tsx

@@ -0,0 +1,34 @@
+import isPropValid from "@emotion/is-prop-valid";
+import styled from "@emotion/styled";
+
+export type SpacerProps =
+  | {
+      x: number;
+      y?: null;
+    }
+  | {
+      x?: null;
+      y: number;
+    };
+
+export const SpacerBase = styled("span", {
+  shouldForwardProp: (prop) =>
+    isPropValid(prop) && prop !== "x" && prop !== "y",
+})<SpacerProps>(({ x, y, theme }) => {
+  const width = x ?? 1;
+  const height = y ?? 1;
+  return {
+    display: "block",
+    visibility: "hidden",
+    width: theme.spacing(width),
+    minWidth: theme.spacing(width),
+    height: theme.spacing(height),
+    minHeight: theme.spacing(height),
+  };
+});
+
+export const Spacer = (
+  props: SpacerProps & React.HTMLAttributes<HTMLSpanElement>
+): JSX.Element => {
+  return <SpacerBase {...props} aria-hidden="true" />;
+};

src/components/logos/CsmIcon.tsx

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+
+import { LogoBase } from "./LogoBase";
+
+import logo from "@/content/logos/CsmIcon.png";
+
+export const CsmIcon = styled(LogoBase)(({ theme }) => ({
+  backgroundImage: `url(${logo})`,
+  width: theme.spacing(12),
+  height: theme.spacing(12),
+}));

src/components/logos/FindyLogo.tsx

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+
+import { LogoBase } from "./LogoBase";
+
+import logo from "@/content/logos/FindyLogo.svg";
+
+export const FindyLogo = styled(LogoBase)({
+  backgroundImage: `url(${logo})`,
+});

src/components/logos/LaprasLogo.tsx

@@ -0,0 +1,9 @@
+import styled from "@emotion/styled";
+
+import { LogoBase } from "./LogoBase";
+
+import logo from "@/content/logos/LaprasLogo.svg";
+
+export const LaprasLogo = styled(LogoBase)({
+  backgroundImage: `url(${logo})`,
+});

src/components/logos/RissIcon.tsx

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+
+import { LogoBase } from "./LogoBase";
+
+import logo from "@/content/logos/RissIcon.png";
+
+export const RissIcon = styled(LogoBase)(({ theme }) => ({
+  backgroundImage: `url(${logo})`,
+  width: theme.spacing(12),
+  height: theme.spacing(12),
+}));

src/constants/SITE_METADATA.ts

@@ -1,9 +1,9 @@
 export const SITE_METADATA = {
-  title: "Oishi Takanori Portfolio",
+  title: "bicstone.me",
   shortTitle: "bicstone",
   siteUrl: process.env.GATSBY_SITE_URL ?? "https://bicstone.me",
   description:
-    "Webディベロッパー/機械エンジニア おおいし (@bicstone) のポートフォリオサイトです。",
+    "Webエンジニア/機械エンジニア おおいし (@bicstone) のポートフォリオサイトです。",
   author: "bicstone",
   image: "/android-chrome-512x512.png",
   image192: "/android-chrome-192x192.png",

src/constants/TRANSLATION.ts

@@ -22,15 +22,6 @@ export const TRANSLATION = {
   footer: {
     copyright: "Oishi Takanori",
   },
-  header: {
-    avatar: "ニコニコした Oishi Takanori の似顔絵",
-    goToPortfolio: "ポートフォリオに移動",
-    changeLanguageTitle: "言語切替",
-    githubTitle: "GitHub",
-    githubUrl: "https://github.com/bicstone/",
-    titleHome: "Oishi Takanori",
-    toggleDarkThemeTitle: "ダークモード切替",
-  },
   hello: {
     description:
       "Webエンジニア / Certified ScrumMaster® / 情報処理安全確保支援士(017758) / 電気工事士 / 機械エンジニアです。様々な分野の知見を活かしジェネラリストとしてプロダクトに幅広く携わり、相互成長し続けられるエンジニアを目指しています。",
@@ -65,12 +56,12 @@ export const TRANSLATION = {
   },
   notFound: {
     backToHome: "ポートフォリオに移動",
-    backToBlog: "ブログ記事一覧に移動",
+    backToTimeline: "タイムラインに移動",
     description: "ページが見つかりませんでした。",
     title: "Not Found",
   },
   privacy: {
-    title: "プライバシーポリシー お問い合わせ",
+    title: "プライバシーポリシー",
   },
   scrollToTop: {
     title: "最上部に移動",

src/features/Bio/BioCardList.tsx

@@ -1,12 +1,16 @@
 import { withPrefix } from "gatsby";
 
+import { BioCsmCard } from "./BioCsmCard";
 import { BioHelloCard } from "./BioHelloCard";
 import { BioIcon } from "./BioIconCard";
+import { BioRissCard } from "./BioRissCard";
 import { BioSocialLinkCard } from "./BioSocialLinkCard";
 
 import { ConnpassLogo } from "@/components/logos/ConnpassLogo";
 import { FeedLogo } from "@/components/logos/FeedLogo";
+import { FindyLogo } from "@/components/logos/FindyLogo";
 import { GitHubLogo } from "@/components/logos/GitHubLogo";
+import { LaprasLogo } from "@/components/logos/LaprasLogo";
 import { LinkedInLogo } from "@/components/logos/LinkedInLogo";
 import { PaycareerLogo } from "@/components/logos/PaycareerLogo";
 import { SpeakerDeckLogo } from "@/components/logos/SpeakerDeckLogo";
@@ -53,14 +57,9 @@ export const BioCardList = (): JSX.Element => {
         actionTitle="つながる"
         url="https://www.linkedin.com/in/bicstone"
       />
-      <BioHelloCard
-        css={(theme) => ({
-          gridColumn: "1 / 3",
-          [theme.breakpoints.down("sm")]: {
-            gridColumn: "1 / 3",
-          },
-        })}
-      />
+      <BioHelloCard css={{ gridColumn: "1 / 3" }} />
+      <BioRissCard />
+      <BioCsmCard />
       <BioSocialLinkCard
         avatar={<GitHubLogo aria-hidden="true" />}
         title="GitHub"
@@ -89,6 +88,20 @@ export const BioCardList = (): JSX.Element => {
         actionTitle="交流する"
         url="https://connpass.com/user/bicstone"
       />
+      <BioSocialLinkCard
+        avatar={<FindyLogo aria-hidden="true" />}
+        title="Findy"
+        subTitle="AKvsozgldUI4i"
+        actionTitle="スキル偏差値を見る"
+        url="https://findy-code.io/share_profiles/AKvsozgldUI4i"
+      />
+      <BioSocialLinkCard
+        avatar={<LaprasLogo aria-hidden="true" />}
+        title="Lapras"
+        subTitle="@bicstone"
+        actionTitle="LAPRAS SCOREを見る"
+        url="https://lapras.com/public/bicstone"
+      />
       <BioSocialLinkCard
         avatar={<PaycareerLogo aria-hidden="true" />}
         title="PayCareer"

src/features/Bio/BioCsmCard.tsx

@@ -0,0 +1,49 @@
+import styled from "@emotion/styled";
+import Card, { type CardProps } from "@mui/material/Card";
+import CardActionArea from "@mui/material/CardActionArea";
+import visuallyHidden from "@mui/utils/visuallyHidden";
+
+import { ExternalLink } from "@/components/ExternalLink";
+import { CsmIcon } from "@/components/logos/CsmIcon";
+
+const StyledCard = styled(Card)({
+  paddingBottom: "100%",
+  position: "relative",
+}) as typeof Card;
+
+const StyledCardActionArea = styled(CardActionArea)(({ theme }) => ({
+  padding: theme.spacing(2),
+
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  right: 0,
+  top: 0,
+
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  justifyContent: "center",
+  alignItems: "center",
+})) as typeof CardActionArea;
+
+export const BioCsmCard = (props: CardProps): JSX.Element => {
+  return (
+    <StyledCard {...props} title="認証情報の表示" component="article">
+      <StyledCardActionArea
+        href="https://certification.scrumalliance.org/accounts/1448098-takanori-oishi/certifications/1691057-csm"
+        rel="external noopener"
+        title="認証情報の表示"
+      >
+        <ExternalLink>
+          <CsmIcon aria-hidden="true" />
+        </ExternalLink>
+        <span css={{ ...visuallyHidden }}>Certified ScrumMaster®</span>
+        <span css={{ ...visuallyHidden }}>
+          Certified ScrumMaster® is a certification mark of Scrum Alliance, Inc.
+          Any unauthorized use is strictly prohibited.
+        </span>
+      </StyledCardActionArea>
+    </StyledCard>
+  );
+};

src/features/Bio/BioHelloCard.tsx

@@ -18,7 +18,7 @@ export const BioHelloCard = (props: CardProps): JSX.Element => {
         <CardHeader
           disableTypography
           title={
-            <Typography component="p" variant="h6" gutterBottom>
+            <Typography component="h2" variant="h6" gutterBottom>
               {TRANSLATION.hello.title}
             </Typography>
           }