サイト：made-by-maria.com

きっかけ

スマホにかざすだけで自分が設定したウェブサイトをブラウザで開けてくれるカードを作ってみた。プレーリーカードという。自分で書いたイラストを使ったデザインにして、凝るに凝って、「大好き！」って言いきれるカードができた。

注文の一週間後、
やっと届いた。

開封後、3分で作れる簡単なSNSリンク集のサイトに設定したが 。。。
なんか、ダサい
なんか、ピンと来ない

その時
「コードできる人感があふれる自己紹介ウェブサイトを一から作りたい！」
と決断。

コードの経験

一年半ほど c/c++ をゆったりと書いてきました。
その他 perl, sql, go, を軽く触ったことがあります。
( 軽くとは合計で150時間くらいです )

作業、始まる

YouTubeのJSMasteryのAdrian様にお世話になりました。
参考にした動画は https://www.youtube.com/watch?v=0fYi8SGA20k

知識がない状態でも、とにかく従ってればカッケーサイトが作れてしまう神動画です。（ 英語ですが。。。）

参考のチュートリアルではまず必要なライブラリをインストールし、npm create vite@latest でテンプレートを作成。
環境の準備がやはり一番沼る。。。

Adrianさんが用意したコードを数ファイルgistからコピペします。motion.js (アニメーション)、index.css (グラデとか） tailwind.config.jsなど設定のものだけです。React/htmlは後で全部自分で word-by-word 打ち込みます。

「自分で書かなくてちゃんと身につくのか」、と思いましたが、自分勝手にいじってみる ＋ わからないキーワードをなくすくらいまで調べると必然的に自分でも（最初にコピペしたファイルが）書けるような状態になります。まあ、けど書けなくても十分に使いこなせて上手くコピペができるっていうのも一つのスキルですからね。

言われたとおりに文字を打っていきます。
Navigation Bar の作成から飛び込み、interactiveな3Dモデルを表示したり、自己紹介文を作ります。Adrianさんが軽い説明や詳しく調べてみたらいいキーワードのヒントなどを少しずつ教えてくれます。（どんな方にでもお勧めできるチュートリアルです！是非やってみてください！）

なんじゃこれ、楽しい！

楽しすぎて毎日ずっと
→ チュートリアルを進める
→ そう簡単にはいかない、疲れた
→ 息抜に https://www.awwwards.com/ とか見てinspiration を受ける
→ 難しいことに挑戦してみたくなる
→ 挑戦してみる
→ 半日かけたら50%の確率で実装できる、又は、できなくてあきらめる
→ 模索に疲れてまたチュートリアルの方へ
の繰り返しでした。

Resourcefulness が大事だと改めて思った。
chatGPT, stack overflow, RTFM （ググってみてください）, deepL, YouTube で人はなんでも調べられ、作れる！
わからないことばかりで苦しみながらでも、一つ一つ、何がわからないかを突き止め、作業を進め続けたら自然とウキウキした前向きな気持ちになっていました。

ちなみに挑戦してみた難しい事とは、
svgを使用したカーブしたテキストの表示、
スクロールバーのカスタマイズ、
SNSアイコンのカーソルへの反応とかです。
（PCからじゃないと見れないように設定しているものもあります。）

終わりに

とにかくコードを書いてたら一週間後にはCSS, HTML, React, の基本な文法作法は身についた気がします。

まだ最低限の要素しかなく、スカスカでシンプルなサイトですが、

• 言語変更

• ダークモード

• ニュアンスのある自己紹介文

• 自作の3D画像の使用

とか作ってみたいものが沢山あります。とりあえず、すぐにでも使いたいので今の時点でウェブサイトを公開することにしました。
みんな見てね！（できればPCで！）
日々アップデートしていく予定です！

//GitHubに上げてます！
//こんな感じのコマンドで記事公開時のページが見れると思います。

git clone 'https://github.com/heyitsyosh/web_portfolio.git'
git checkout fede9a68ba1808fb8cc1c662ae097072130a5790
nvm install --lts
npm install @react-three/fiber @react-three/drei maath react-parallax-tilt react-vertical-timeline-component @emailjs/browser framer-motion react-router-dom
npm install -D tailwindcss
npx tailwindcss init
npm run dev

Feedback is a giftという言葉の通り、是非
「〇〇がかっこよかった！」
「色合いの統一感がないよ！」
「音楽が流れるようにしてみたら？」

どんなコメントもありがたく受け止めるのでおねがいします🙇‍♀️