WantedlyGitHub

WORKS

制作実績

ポートフォリオ

転職活動用のポートフォリオサイトを作成しました。Figmaでデザイン作成、フロントエンド部分はNext.js, TypeScript, CSS Modules, Vercelなどで実装しました。制作実績はWordPressのAPIで取得しています。

業種

個人の転職活動用

サイトタイプ

ポートフォリオサイト

担当範囲

デザイン/Next.js,TypeScriptでの実装/WordPress API

制作期間

2週間

URL
https://takuikebe.com

シンプルで人柄が伝わるデザイン

  • メインビジュアル・ABOUTセクションには自身の写真を使用し、少しでも人柄が伝わるようにしました。
  • 制作実績ページでは画像や動画・コードを記載し、意識したことや技術力がわかるよう工夫しました。それでいて長くなりすぎないようにコードはアコーディオンで表示・非表示させる仕様になっています。

コンポーネント化を意識し、実装・管理のしやすさを意識

トップページの各セクションの見出しと下層ページの見出しは同じコンポーネントを使用
  • Heading.tsxでメインテキスト・サブテキスト・テキストの位置・テキストカラーのPropsを用意しています。
  • 下層ページではPageFirstView.tsxでHeading.tsxを読み込んでいます。
  • 見出し以外にも「ボタン」「ABOUTページ内の3つの強み」「制作実績カード」をコンポーネント化しています。

// 見出しのコンポーネント
export type HeadingProps = {
    subText: string,
    mainText: string,
    textAligin?: "isLeft" | "isCenter" | "isRight",
    mainTextColor?: "colorBlue" | "colorWhite",
}

export default function Heading({ 
    subText,
    mainText,
    textAligin = "isCenter",
    mainTextColor = "colorBlue",
 }: HeadingProps) {
    return (
        <div className={`${styles.heading} ${styles[textAligin]}`}>
            <p className={styles.sub}>{subText}</p>
            <h2 className={`${styles.main} ${styles[mainTextColor]}`}>{mainText}</h2>
        </div>
    )
}
// CTAセクション
export default function CtaSection() {
  return (
    <section id="cta" className={styles.cta}>
      <div className={styles.content}>
        // 見出しのコンポーネントを使用
        <Heading
          subText="CONTACT"
          mainText="お問い合わせ"
          mainTextColor="colorWhite"
        />
        <p className={styles.text}>
          ポートフォリオをご覧いただき、ありがとうございます。
          <br />
          お問い合わせは、下記のメールアドレスまたはWantedlyよりお気軽にご連絡ください。
        </p>
        <div className={styles.contact}>
          <Link href="mailto:contact@takuikebe.com" className={styles.mail}>
            <p className={styles.head}>Mail</p>
            <p className={styles.address}>contact@takuikebe.com</p>
          </Link>
          <Link
            href="https://www.wantedly.com/id/takuikebe"
            className={styles.wantedly}
            target="_blank"
          >
            <Image
              className={styles.img}
              src="/cta_wantedly.png"
              alt="Wantedly"
              width="254"
              height="100"
            />
          </Link>
        </div>
      </div>
    </section>
  );
}

制作実績はWordPressのAPIで取得

プラグイン「AFC」を使用しています。
  • トップページの制作実績一覧セクションや制作実績一覧ページにはタイトルやカスタムフィールドやカスタムタクソノミーで登録した情報を表示させいています。
  • 制作実績の各詳細ページの上部にはカスタムフィールドで入力した「制作期間」「URL」などをわかりやすくまとめました。
  • その他の部分はWordPressの制作実績に登録したコンテンツを取得しています。

//　制作実績詳細ページ
type WorkProps = {
  params: Promise<{ id: string }>;
};

export default async function WorksPage({ params }: WorkProps) {
  const { id } = await params;
  const work = await getWork(parseInt(id));

  if (!work) {
    notFound();
  }

  return (
    <>
      <PageFirstView
        subText="WORKS"
        mainText="制作実績"
        textAligin="isLeft"
        mainTextColor="colorWhite"
      />
      <div className={styles.post}>
        <Image
          className={styles.thumbnail}
          src={work._embedded["wp:featuredmedia"][0].source_url}
          alt=""
          width="1000"
          height="563"
        />
        <div className={styles.info}>
          <h2 className={styles.title}>{work.title.rendered}</h2>
          <p className={styles.excerpt}>{work.acf.excerpt}</p>
          <div className={styles.desc}>
            <div className={styles.detail}>
              <div className={styles.head}>業種</div>
              <p className={styles.data}>{work.acf.kind}</p>
            </div>
            <div className={styles.detail}>
              <div className={styles.head}>サイトタイプ</div>
              <p className={styles.data}>{work.acf.type}</p>
            </div>
            <div className={styles.detail}>
              <div className={styles.head}>担当範囲</div>
              <p className={styles.data}>{work.acf.charge}</p>
            </div>
            <div className={styles.detail}>
              <div className={styles.head}>制作期間</div>
              <p className={styles.data}>{work.acf.duration}</p>
            </div>
            <div className={styles.url_row}>
              <div className={styles.head}>URL</div>
              <Link className={styles.url} href={work.acf.url} target="_blank">
                {work.acf.url}
              </Link>
            </div>
          </div>
        </div>

        <div className={`archive ${styles.archive}`}>
          <HighlightCode content={work.content.rendered} />
        </div>
        <Button href="/works" text="制作実績一覧へ" />
      </div>
    </>
  );
}

制作実績一覧へ

CONTACT

お問い合わせ

ポートフォリオをご覧いただき、ありがとうございます。
お問い合わせは、下記のメールアドレスまたはWantedlyよりお気軽にご連絡ください。

Mail

contact@takuikebe.com

Wantedly