diff --git a/package.json b/package.json index db97aab..e2a9100 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-scroll-percentage": "^4.3.2", + "recoil": "^0.7.7", "tailwindcss": "^3.4.1" }, "devDependencies": { diff --git a/src/App.tsx b/src/App.tsx index 6b01cc9..041afc5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,18 +1,17 @@ -import Card from "./components/Card" -import Profile from "./components/Profile" -import Links from "./components/Links" -import Keys from "./components/Keys" -import Activities from "./components/Activities" -import Footer from "./components/Footer" +import { RecoilRoot } from 'recoil' + import Mutuals from "./components/Mutuals" -import Spotify from "./components/Spotify" -import Services from "./components/Services" +import Card from "./components/Card" +import Menu from "./components/Menu" +import ContentRenderer from "./components/ContentRenderer" +import Footer from "./components/Footer" import { useState, useEffect } from 'react'; export default function App() { const [cardY, setCardY] = useState(0); const [contentY, setContentY] = useState(0); + const [cardOpacity, setCardOpacity] = useState(1.0); const handleScroll = () => { @@ -57,34 +56,34 @@ export default function App() { }, []); return ( - <> -
- -
-
-
-
- -
+ +
+
- -
-
-
- - - - - - +
+
+
+ +
+ +
+
+
+
+ +
+
+ +
+
-
-
-
+
+
+
+
+
-
-
- + ) } diff --git a/src/components/Activities.tsx b/src/components/Activities.tsx index 36f6efb..b82d89c 100644 --- a/src/components/Activities.tsx +++ b/src/components/Activities.tsx @@ -1,7 +1,7 @@ export default function Activities() { return ( <> -
+

Recent activities

diff --git a/src/components/ContentRenderer.tsx b/src/components/ContentRenderer.tsx new file mode 100644 index 0000000..2ff2abb --- /dev/null +++ b/src/components/ContentRenderer.tsx @@ -0,0 +1,25 @@ +import { useRecoilState } from 'recoil' + +import Profile from "./Profile" +import Links from "./Links" +import Keys from "./Keys" +import Activities from "./Activities" +import Spotify from "./Spotify" +import Services from "./Services" + +import { currentPage, Pages } from "./Menu" + + + +export default function ContentRenderer() { + const [page, setPage] = useRecoilState(currentPage); + return ( + <> + { page === Pages.Profile && <> } + { page === Pages.Links && } + { page === Pages.Keys && } + { page === Pages.Activities && } + { page === Pages.Services && } + + ) +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx deleted file mode 100644 index 6770bfd..0000000 --- a/src/components/Header.tsx +++ /dev/null @@ -1,8 +0,0 @@ -export default function Header() { - return ( -

- Hello world! -

- ) - } - \ No newline at end of file diff --git a/src/components/Keys.tsx b/src/components/Keys.tsx index fae60c3..5838e1e 100644 --- a/src/components/Keys.tsx +++ b/src/components/Keys.tsx @@ -1,7 +1,7 @@ export default function Keys() { return ( <> -
+

Public keys

diff --git a/src/components/Links.tsx b/src/components/Links.tsx index a3321bf..783ba54 100644 --- a/src/components/Links.tsx +++ b/src/components/Links.tsx @@ -5,9 +5,7 @@ import { faAnglesRight } from '@fortawesome/free-solid-svg-icons' export default function Links() { return ( <> -
-

Links

-
+
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx new file mode 100644 index 0000000..a0e7bbc --- /dev/null +++ b/src/components/Menu.tsx @@ -0,0 +1,46 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faUser, faStar} from '@fortawesome/free-regular-svg-icons' +import { faLink, faKey, faSquarePersonConfined } from '@fortawesome/free-solid-svg-icons' + +import { RecoilRoot, atom, useRecoilState } from 'recoil' + +export enum Pages { + Profile = 0, + Links = 1, + Keys = 2, + Activities = 3, + Spotify = 4, + Services = 5, + } + +export const currentPage = atom({ + key: 'page', + default: Pages.Profile, +}) + +export default function Menu() { + const [page, setPage] = useRecoilState(currentPage); + + return ( + +
    +
  • {setPage(Pages.Profile)}}> + {" "}プロフィール +
    • +
  • {setPage(Pages.Links)}}> + {" "}リンク +
    • +
  • {setPage(Pages.Keys)}}> + {" "}公開鍵 +
    • +
  • {setPage(Pages.Activities)}}> + {" "}活動 +
    • +
  • {setPage(Pages.Services)}}> + {" "}サービス +
    • +
+ + ) + } + \ No newline at end of file diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx index 28193bd..8e4df8c 100644 --- a/src/components/Profile.tsx +++ b/src/components/Profile.tsx @@ -4,7 +4,7 @@ import { faCake, faMapPin } from '@fortawesome/free-solid-svg-icons' export default function Profile() { return ( <> -
+

Profile

diff --git a/src/components/Services.tsx b/src/components/Services.tsx index 330881b..e76db99 100644 --- a/src/components/Services.tsx +++ b/src/components/Services.tsx @@ -1,12 +1,12 @@ export default function Services() { return ( <> -
+

Active services

- Major public services + サービス

  • diff --git a/src/components/Spotify.tsx b/src/components/Spotify.tsx index aadfe76..8251980 100644 --- a/src/components/Spotify.tsx +++ b/src/components/Spotify.tsx @@ -1,7 +1,7 @@ export default function Spotify() { return ( <> -
    +
    Spotify Recently Played