Merge remote-tracking branch 'origin/develop' into feature/#43/fix-de…

…tail

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "cSpell.words": [
+    "astro",
+    "Sato",
+    "Taiki"
+  ]
+}

README.md

@@ -1,57 +1,92 @@
-# Astro Starter Kit: Basics
+# ST Portfolio
 
-```sh
-npm create astro@latest -- --template basics
+本リポジトリでは`Taiki Sato`のポートフォリオのベースソースを管理しています。
+
+## Setup
+
+### Node.js　バージョン管理ツールをインストールする
+
+下記などのツールをインストールします。
+
+- https://github.com/nvm-sh/nvm?tab=readme-ov-file#install--update-script
+- https://github.com/hokaccha/nodebrew?tab=readme-ov-file#install
+
+### Node.jsのバージョンを変更する
+
+バージョン管理ツールインストール後、Node.jsのバージョンを[.node-version](.node-version)指定の`20.9.0`に変更してください。
+
+### pnpmをinstallする
+
+```bash
+npm install -g pnpm
 ```
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+## 各種コマンド
 
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+### 依存インストール
 
-![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+```bash
+pnpm install --frozen-lockfile
+```
 
-## 🚀 Project Structure
+### 開発サーバー起動
 
-Inside of your Astro project, you'll see the following folders and files:
+```bash
+pnpm dev
+```
 
-```text
-/
-├── public/
-│   └── favicon.svg
-├── src/
-│   ├── components/
-│   │   └── Card.astro
-│   ├── layouts/
-│   │   └── Layout.astro
-│   └── pages/
-│       └── index.astro
-└── package.json
+### コード整形
+
+```bash
+pnpm format
 ```
 
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page
-is exposed as a route based on its file name.
+### ビルド
+
+```bash
+pnpm build
+```
+
+## 更新方法
+
+| 対象箇所 | 更新方法 |
+| ---- | ---- |
+| ヘッダーリンク ![ヘッダーリンク](/docs/header.png) | [/src/data/headerLinks.ts](/src/data/headerLinks.ts)の内容を変更する |
+| メニューリンク ![メニューリンク](/docs/menu.png) | [/src/data/menus.ts](/src/data/menus.ts)の内容を変更する |
+| フッターリンク ![フッターリンク](/docs/footer.png) | [/src/data/footerLinks.ts](/src/data/footerLinks.ts)の内容を変更する |
+| SNSリンク(メニュー・フッター・私について > PROFILE) ![メニュー > SNSリンク](/docs/sns-menu.png)![フッター > SNSリンク](/docs/sns-footer.png)![私について > PROFILE > SNSリンク](/docs/sns-about.png) | [/src/data/snsLinks.ts](/src/data/snsLinks.ts)の内容を変更する |
+| TOP 私について 画像 ![TOP 私について 画像](/docs/top-about.png) | [/src/data/parallaxGalleryItems.ts](/src/data/parallaxGalleryItems.ts)の内容を変更する |
+| 私について スライド画像 ![私について スライド画像](/docs/about-slide.png) | [/src/data/slides.ts](/src/data/slides.ts)の内容を変更する |
+| 私について CAREER ![私について CAREER](/docs/about-career.png) | [/src/data/timelines.ts](/src/data/timelines.ts)の内容を変更する |
+| 制作実績 FILTER ![制作実績 FILTER](/docs/works-filter.png) | [/src/data/filters.ts](/src/data/filters.ts)の内容を変更する |
 
-There's nothing special about `src/components/`, but that's where we like to put
-any Astro/React/Vue/Svelte/Preact components.
+### 実績の更新について
 
-Any static assets, like images, can be placed in the `public/` directory.
+#### 実績の追加
 
-## 🧞 Commands
+[/src/pages/works配下](/src/pages/works/)に拡張子`astro`でファイルを作成することでページが追加されます。
+
+#### 一覧での表示設定
+
+[/src/data/works.ts](/src/data/works.ts)の内容を更新することで設定できます。
+
+```ts
+  {
+    title: '医療従事者サイト 1',
+    href: '/works/detail/',
+    year: '2021',
+    categories: ['Web Development'],
+    tags: ['Fashion Design'],
+    image: 'https://placehold.jp/464x560.png', // 制作実績用画像
+    isTop: true, // `true`の場合TOPページに表示
+    imageTop: 'https://placehold.jp/1200x480.png', // TOPページ表示用画像
+  },
+```
 
-All commands are run from the root of the project, from a terminal:
+##### 制作実績での出力イメージ
 
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
+![制作実績での出力イメージ](/docs/works.png)
 
-## 👀 Want to learn more?
+##### TOPページでの出力イメージ
 
-Feel free to check [our documentation](https://docs.astro.build) or jump into
-our [Discord server](https://astro.build/chat).
+![TOPページでの出力イメージ](/docs/top-works.png)

package.json

@@ -32,7 +32,6 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sass": "^1.77.6",
-    "swiper": "^11.1.5",
     "tailwind-merge": "^2.4.0",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.5.2"

src/components/Footer/index.astro

@@ -1,4 +1,5 @@
 ---
+import updatePath from '@/libs/updatePath';
 import footerLinks from '@/data/footerLinks';
 import FooterDisk from './FooterDisk.astro';
 import snsLinks from '@/data/snsLinks';
@@ -14,19 +15,14 @@ const isHome = path === '/';
     <ul class="flex flex-row-reverse gap-8 justify-center">
       {
         footerLinks.map(link => (
-          <li class="relative">
+          <li class="relative flex flex-col items-center">
             {!isHome && link.href.includes(path) ? (
               <FooterDisk />
             ) : (
-              isHome &&
-              link.href === '/' && (
-                <span class="w-[6px] h-[6px] absolute -top-2 left-1/2 -translate-x-1/2">
-                  <FooterDisk />
-                </span>
-              )
+              isHome && link.href === '/' && <FooterDisk />
             )}
             <a
-              href={link.href}
+              href={updatePath(link.href)}
               target={link.target}
               class={`ts-text-link vertical-rl text-xl leading-none ${isHome && link.href === '/' && 'text-silver-chalice'} ${!isHome && link.href.includes(path) && 'text-silver-chalice'}`}
               data-vertical="rl"

src/components/Header/Menu.astro

@@ -3,13 +3,21 @@ import menus from '@/data/menus';
 import snsLinks from '@/data/snsLinks';
 import Disc from '@/components/Disc.astro';
 import MenuLink from '@/components/Header/MenuLink.astro';
+import updatePath from '@/libs/updatePath';
 ---
 
 <div id="menu" class="menu w-screen h-screen bg-mine-shaft-texture z-30">
   <div class="p-5 md:p-10 w-full h-full flex relative">
-    <picture class="hidden md:flex md:mr-4 h-full max-w-[50%] items-center">
-      <img src="https://placehold.jp/800x1000.png" alt="" class="max-h-full" />
-    </picture>
+    <video
+      class="hidden md:flex md:mr-4 h-full max-w-[50%] items-center"
+      webkit-playsinline
+      playsinline
+      muted
+      autoplay
+      loop
+    >
+      <source src={updatePath('/common/menu.mp4')} type="video/mp4" />
+    </video>
 
     <div class="w-full md:flex-1 flex flex-col">
       <button
@@ -26,19 +34,19 @@ import MenuLink from '@/components/Header/MenuLink.astro';
       <div class="w-full py-10 flex-1 flex flex-col items-center">
         <div class="w-full flex justify-center items-center flex-1">
           <ul
-            class="max-w-[max(70vw,200px)] md:max-w-full w-full md:w-auto flex md:inline-flex flex-row-reverse justify-between md:justify-normal md:gap-12"
+            class="max-w-[85%] md:max-w-full w-full md:w-auto flex md:inline-flex flex-row-reverse justify-between md:justify-normal md:gap-12"
           >
             {
               menus.map(menu => {
                 return (
                   <li class="leading-none flex">
                     <a
-                      href={menu.href}
+                      href={updatePath(menu.href)}
                       class="relative group vertical-rl"
                       data-stalker-color="bright"
                     >
                       {/* original */}
-                      <span class="opacity-0">
+                      <span class="md:opacity-0">
                         <MenuLink menu={menu} />
                       </span>
 
@@ -48,7 +56,7 @@ import MenuLink from '@/components/Header/MenuLink.astro';
                           transitionTimingFunction:
                             'cubic-bezier(0.16, 1, 0.3, 1)',
                         }}
-                        class="transition-all duration-700 absolute top-0 left-0 group-hover:opacity-0 group-hover:-translate-x-1/2"
+                        class="hidden md:block transition-all duration-700 absolute top-0 left-0 group-hover:opacity-0 group-hover:-translate-x-1/2"
                       >
                         <MenuLink menu={menu} />
                       </span>
@@ -59,7 +67,7 @@ import MenuLink from '@/components/Header/MenuLink.astro';
                           transitionTimingFunction:
                             'cubic-bezier(0.16, 1, 0.3, 1)',
                         }}
-                        class="transition-all duration-700 absolute top-0 left-0 opacity-0 translate-x-1/2 group-hover:translate-x-0 group-hover:opacity-100"
+                        class="hidden md:block transition-all duration-700 absolute top-0 left-0 opacity-0 translate-x-1/2 group-hover:translate-x-0 group-hover:opacity-100"
                       >
                         <MenuLink menu={menu} />
                       </span>

src/components/Header/index.astro

@@ -3,6 +3,7 @@ import headerLinks from '@/data/headerLinks';
 import Disc from '@/components/Disc.astro';
 import Menu from '@/components/Header/Menu.astro';
 import type { ThemeColor } from '@/types/ThemeColor';
+import updatePath from '@/libs/updatePath';
 interface Props {
   color?: ThemeColor;
 }
@@ -19,7 +20,7 @@ const path = Astro.url.pathname;
 >
   <div class="container flex items-start py-5 md:py-10 px-5 md:px-20">
     <a
-      href="/"
+      href={updatePath('/')}
       class="ts-text-link ts-logo font-serif-en text-2xl md:text-4xl text-gray
       transision-colors data-[color=dark]:text-silver-chalice"
     >
@@ -40,7 +41,7 @@ const path = Astro.url.pathname;
               </span>
             )}
             <a
-              href={link.href}
+              href={updatePath(link.href)}
               class={`ts-text-link text-2xl md:text-lg vertical-rl ${path !== '/' && link.href.includes(path) && 'text-gray'}`}
               data-vertical="rl"
             >

src/components/Hero/animation.ts

@@ -10,29 +10,20 @@ const animation = () => {
     `${moonMaskAjustSize}px`
   );
   const hero = document.getElementById('hero');
+  const height = hero?.clientHeight;
   const moonMask = document.getElementById('moon-mask');
-  const nextMask = document.getElementById('next-mask');
 
   gsap
     .timeline({
       scrollTrigger: {
         trigger: hero,
         start: 'top top',
-        end: '+=1400',
+        end: () => `+=${height}`,
         scrub: true,
-        pin: true,
       },
     })
-    .to(moonMask, { left: `-${moonMaskAjustSize / 2}px`, ease: 'Power4.out' })
-    .fromTo(
-      nextMask,
-      {
-        autoAlpha: 0,
-      },
-      {
-        autoAlpha: 1,
-      }
-    );
+    .to(moonMask, { right: 150, ease: 'Power4.out' })
+    .to(hero, { autoAlpha: 0, scale: 1.1, ease: 'Power4.out' }, '<');
 };
 
 export default animation;