rock/riotpiao.com
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: consolidate homelab projects, add skills dropdown, update timeline animations
Build & Push Portfolio Image / build-push (push) Successful in 2m33s
Details

Browse Source 
- Consolidate 3 homelab projects into single 'Self-Hosted Cloud' card
- Add /homelab deep dive page with full tech stack
- Update to 4 nodes (3 control plane + 1 worker)
- Add organized skills dropdown (6 categories)
- Update timeline skills for riotpiao.com experience
- Add 'Learn more' links for all major experiences
- Change timeline animation to scroll-reveal (y-axis)
This commit is contained in:
Story Crater Bot
2026-08-31 19:39:34 -07:00
parent c4a92d17e9
commit e8dbc2100c
5 changed files with 388 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Header.tsx
+30 -4
View File
@@ -70,8 +70,21 @@ export default function Header() {
{t.header.nav.skills}
</button>
{skillsOpen && (
<div className="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg shadow-lg p-4 space-y-2">
<div className="text-xs font-semibold text-gray-600 dark:text-gray-400">{t.header.skillsPlaceholder}</div>
<div className="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg shadow-lg p-4">
<div className="grid grid-cols-2 gap-3">
{Object.entries(t.header.skills).map(([key, category]) => (
<div key={key}>
<div className="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">{(category as {title: string}).title}</div>
<div className="flex flex-wrap gap-1">
{(category as {items: string[]}).items.map((skill) => (
<span key={skill} className="text-xs px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded">
{skill}
</span>
))}
</div>
</div>
))}
</div>
</div>
)}
</div>
@@ -234,8 +247,21 @@ export default function Header() {
{t.header.nav.skills}
</button>
{skillsOpen && (
<div className="bg-gray-50 dark:bg-gray-800 rounded p-3 mt-2 space-y-2">
<div className="text-xs font-semibold text-gray-600 dark:text-gray-400">{t.header.skillsPlaceholder}</div>
<div className="bg-gray-50 dark:bg-gray-800 rounded p-3 mt-2">
<div className="grid grid-cols-2 gap-3">
{Object.entries(t.header.skills).map(([key, category]) => (
<div key={key}>
<div className="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">{(category as {title: string}).title}</div>
<div className="flex flex-wrap gap-1">
{(category as {items: string[]}).items.map((skill) => (
<span key={skill} className="text-xs px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded">
{skill}
</span>
))}
</div>
</div>
))}
</div>
</div>
)}
<button