自分のポートフォリオサイト作りました

こんにちは。

3ヶ月くらい前にポートフォリオを完成させましたが、今回そのポートフォリオについて説明しようと思います。

ポートフォリオのURL：https://zuk246.github.io/portfolio/blog/
リポジトリ：https://github.com/zuk246/portfolio

構成

• デプロイ：Github Pages

• フレームワーク：Gatsby.js

• CSSフレームワーク：TailwindCSS

• その他：Framer Motion、dayjs、react-icons

メンテナンスしやすく無料でホスティングしたかったので、この構成にしました。Framer Motionは、アニメーション用、dayjsは、RSSで取得したZennやNoteの記事の表示の際に日時をフォーマットするため、react-iconsは、GithubやXのSNSリンク用、メニューバー用です。

トップページ

ポートフォリオのトップページ

上の画像はPCでアクセスした時のトップページです。もちろんレスポンシブデザインにしています。Framer Motionを利用して文字をアニメーションさせて表示しています。（たまに表示が遅いですが）

ブログページ

このページでは、GatsbyのGraphQLを利用してZennやNoteの記事をRSSで取得しています。

const data = useStaticQuery(graphql`
    query {
        allFeedZennBlog {
            edges {
                node {
                    title
                    isoDate
                    enclosure {
                        url
                    }
                    guid
                }
            }
        }
        allFeedNoteBlog {
            edges {
                node {
                    title
                    guid
                    isoDate
                }
            }
        }
    }
`);

スキルページのロゴについて

gilbarbara/logosを利用しました。

今後の予定

多分、私が現在のポートフォリオのデザインに飽きると思うので、その時にもう少し見やすくわかりやすいデザインにします。
あと、これは私のミスなのですが、OGP設定をしっかり行なっていなかったので、SNSなどで共有する際に画像が読み込まれません。暇な時に直したいと思っています。