[{"data":1,"prerenderedAt":91},["ShallowReactive",2],{"\u002Fworks\u002Fportfolio":3},{"id":4,"title":5,"body":6,"description":12,"extension":74,"github":75,"images":76,"meta":80,"navigation":81,"order":82,"path":83,"period":84,"seo":85,"stem":86,"tech":87,"__hash__":90},"works\u002Fworks\u002Fportfolio.md","ポートフォリオサイト",{"type":7,"value":8,"toc":66},"minimark",[9,13,18,21,30,33,37,40,44,47,50,53,57,60,63],[10,11,12],"p",{},"このサイトです。一番長いあいだ作り込んでいるものであるとも言えます。",[14,15,17],"h2",{"id":16},"_2021-年","2021 年",[10,19,20],{},"すでにアーカイブしていてリポジトリも非公開なのですが、HTML\u002FCSS\u002FJavaScript で開発し、Firebase Hosting で公開していました。",[10,22,23,24,29],{},"リポジトリを見ると、フラッシュ暗算ができるページがあったことが伺い知れます。",[25,26,28],"a",{"href":27},".\u002Fquiz-flasher","Quiz Flasher","の開発とほぼ同時期で、GAS 上で公開していたページをポートフォリオサイトから操作できるよう、フロント部分をこのサイトに組み込んでいたようです。",[10,31,32],{},"CSS は SCSS で書いていて、Gulp でビルドしていました。",[14,34,36],{"id":35},"_2022-年","2022 年",[10,38,39],{},"この年、生の HTML から Vue.js に移行しました。ホスティング先も Firebase Hosting から Cloudflare Pages に移行し、デザインも一新しました。",[14,41,43],{"id":42},"_2023-年","2023 年",[10,45,46],{},"大きな変化としては Vue.js から Nuxt の SSG モードに移行したことです。",[10,48,49],{},"また、トップページ下部に Spotify の My Top Tracks を表示するようにしました。Hono で動かしている api.newt239.dev というサービスがあり、認証やデータの整形はそちらで行っていて、このウェブサイトでは SSG するときにそのデータを取得しています。",[10,51,52],{},"毎週月曜日に GitHub Actions でビルドを走らせていて、Spotify の情報はそのタイミングで更新されます。",[14,54,56],{"id":55},"_2024-年","2024 年",[10,58,59],{},"SecHack365 で取り組んでいる「LLM にデザインを生成させる」というアプローチの PoC として、ユーザーからのプロンプトに応じてサイトのテーマが変わる機能を実装しました。",[10,61,62],{},"サイト右上のキラキラボタンから利用できます。これも Spotify と同様に api.newt239.dev で OpenAI の API を叩いているのですが、破産を防ぐために簡易的な利用回数制限を設けています。",[10,64,65],{},"Cloudflare D1 で本機能が実行された回数をカウントしていて、24 時間あたりの利用回数が 100 回を超えると利用できないようになっています。",{"title":67,"searchDepth":68,"depth":68,"links":69},"",2,[70,71,72,73],{"id":16,"depth":68,"text":17},{"id":35,"depth":68,"text":36},{"id":42,"depth":68,"text":43},{"id":55,"depth":68,"text":56},"md","newt239\u002Fnewt239.dev",[77],{"src":78,"alt":79},"portfolio.webp","「ne​wt239.dev」のポートフォリオ Web サイトのトップページ画面。左上に幾何学模様で象られたマスコットロゴとサイト名、右上にテーマ生成のためのボタンがある。ヒーローセクションはブルーグレーのグラデーションカードで、見出し「Welcome✨」と箇条書き「19さい」「すきなもの: Webフロントエンド, UI\u002FUX」「言語: TypeScript, Python, Go」「趣味: アニメ, ボカロ等」と記載されている。その右側にソーシャルリンクボタンが縦並びで「Twitter @newt239」「GitHub @newt239」「Zenn @newt_st21」「Qiita @newt239」とある。下部には見出し「Works」と 4 件のカードが並び、それぞれ「Gateway」「Score Watcher」「Look Inside View」「Roomkeeper」と記載されている。",{},true,null,"\u002Fworks\u002Fportfolio","2021 -",{"title":5,"description":12},"works\u002Fportfolio",[88,89],"Nuxt","Cloudflare Pages","iL5fLSEg-NutFnBd876bxzilioGCJ13HbEwOFTXRSow",1775013670133]