こんにちは、histonobyです！
この度、自分のWebアプリや技術コンテンツをまとめたポートフォリオサイトを公開しました！
🌐 サイト概要
組み込み領域が本職のかけだしアプリ開発者として、日々の「あったらいいな」を形にしたWebアプリケーションや、技術の歴史をまとめたコンテンツを紹介しています。
URL：histonoby | Portfolio
技術スタック:
- Next.js (React)
- TypeScript
- Tailwind CSS
- Framer Motion（アニメーション）
- Vercel（ホスティング）
ダーク＆クール系のデザインで、各ページには個別のCanvas背景アニメーションを実装しています。
🚀 PROJECTS – 公開中のWebアプリ
1. Markdown for Engineer
エンジニア向けのマークダウンエディタです。リアルタイムプレビューで快適に文章を書けます。
2. StockScreenPro
国内株式のスクリーニングアプリです。様々な条件で銘柄を絞り込むことができます。
3. RapidReport
音声入力でレポートを素早く作成できるWebアプリです。Speech Recognition APIを活用しています。
📚 HISTORY – 技術の歴史タイムライン
技術の発展を年表形式でまとめたコンテンツも公開しています。それぞれのページには、テーマに合わせたユニークな背景アニメーションを実装しました。
| タイトル | 内容 | 背景エフェクト |
|---|---|---|
| AI/ML History | 機械学習の歴史（チューリングテスト〜生成AI） | ニューラルネットワーク風 |
| QR Code History | QRコード誕生から世界標準まで | ドット明滅アニメーション |
| Semiconductor History | トランジスタ誕生〜オングストローム時代 | 回路パターン風 |
| Programming Language History | FORTRAN〜Rust/Goまでの言語進化 | シンタックス浮遊 |
| Computing History | 解析機関〜量子コンピュータ | レトロCRTグリッド |
各カードをクリックすると詳細ページに遷移します。「裏話」ボタンで、その技術にまつわるトリビアも読めます！
💡 こだわりポイント
- レスポンシブ対応: スマホでも快適に閲覧できます
- スクロールアニメーション: IntersectionObserverを使った滑らかな表示
- 個別背景アニメーション: 各Historyページごとに異なるCanvas背景
- ダークモードデザイン: 目に優しいクールなカラースキーム
今後も新しいアプリや技術コンテンツを追加していく予定です。ぜひご覧ください！
フィードバックやご意見があれば、Xでお気軽にお声がけください 🙌
コメント