feat: live activity, interactive terminal, command palette, project case studies, SEO#7
Merged
Merged
Conversation
Fetches public events from GitHub API for anhvuFE, maps them to a compact list with relative time. Cached in sessionStorage for 5 min to stay friendly with the unauthenticated rate limit. The widget appears below the contributions calendar and only fetches when the GitHub section actually scrolls into view.
The footer terminal now accepts real input. Commands include: help, whoami, about, skills, projects, contact, echo, clear, plus a couple of easter eggs for sudo and rm. ArrowUp/Down walks through prior commands. Input lives inside the terminal box, so clicking anywhere in the body focuses it.
Lazy-loaded dialog with fuzzy search across sections, contact actions and external links. Cmd/Ctrl+K toggles it; Arrow keys navigate, Enter opens, Esc closes. The header gets a small search button next to the nav (chip on desktop with platform-aware shortcut hint, icon button on mobile).
New bento card opens a drawer with three project case studies, each laid out as Problem -> Approach -> Result with the stack as chips at the bottom. Lazy-loaded like the other sections. Numbers in the result blocks are placeholders the user fills in.
Replace runtime fetch (which hit the unauthenticated 60-req/hr GitHub rate limit) with a prebuild script. The script writes a JSON snapshot that the widget imports statically. The build never blocks on a failed GitHub call — if the request fails, the existing JSON is reused. Set GITHUB_TOKEN in CI to refresh authenticated and skip the rate limit.
Adds the SEO surface that lets Google return a rich result and LinkedIn/Facebook/Twitter render a preview when the site is shared: - Open Graph tags (type=profile, url, title, description, image, locale, profile:* fields) - Twitter summary_large_image card - canonical URL - JSON-LD Person schema (jobTitle, sameAs, knowsAbout, worksFor, alumniOf, address) - JSON-LD WebSite schema - 1200x630 og-image generated from the avatar via sharp + SVG composition (scripts/generate-og-image.js)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Five new portfolio features plus an SEO upgrade — each shipped in its own commit so they can be reviewed independently.
6f95526ee2848dc1b43f964923a18b31e861. GitHub Recent Activity
A widget below the contributions calendar lists the latest 5 public events (commits, PRs, issues, stars, forks, branch creations) with relative time and a deep link.
The first version fetched live in the browser and hit the 60-req/hr unauthenticated rate limit, so it was rewritten as a build-time pre-fetch.
scripts/fetch-github-activity.jsruns as aprebuildhook, calls the GitHub events API once, and writessrc/components/github/recent-activity.jsonwhich the widget imports statically. If the API call fails the existing JSON is kept, so the build never breaks. SetGITHUB_TOKENin CI to authenticate.2. Interactive footer terminal
The footer terminal is now a real shell. Commands:
ArrowUp / ArrowDown walk through prior commands. Clicking anywhere in the terminal body focuses the input. The cursor blink and the existing terminal chrome are preserved.
3. ⌘K command palette
Lazy-loaded MUI dialog. ⌘K (or Ctrl+K on non-Apple) toggles it. Fuzzy search over Sections (home / about / skills / github / experience / certificates / services / projects / contact), Contact (email), and Links (GitHub / LinkedIn / CV). Arrow keys navigate, Enter opens, Esc closes. The header gets a small chip on desktop showing the platform-aware shortcut, or a search icon button on mobile.
4. Project case studies
A new bento card (purple accent, full-width row above "Let's Connect") opens a drawer with three project case studies. Each card lays out:
[TODO: ...]placeholders the author fills in)The data lives in
src/components/projects/projectsData.tsso it's easy to edit without touching JSX.5. SEO
Added everything that lets Google return a rich result and LinkedIn / Facebook / Twitter / Slack render a preview when the URL is shared:
og:type=profile, url, title, description, image with width / height / alt, site_name, locale,profile:*)summary_large_imagecardPersonschema (jobTitle, sameAs, knowsAbout, worksFor, alumniOf, address)WebSiteschemaog-image.pnggenerated from the avatar viascripts/generate-og-image.js(sharp + SVG composition)Realistic keyword expectations:
Test plan
npm run dev— all four sections work; ⌘K opens palette; terminal acceptshelp,whoami,clearnpm run build— prebuild logs[github] fetched N events, build succeedsNotes for the author
projectsData.tshas[TODO: ...]placeholders for real numbers (lighthouse scores, time saved, ship metrics). Replace before showing this PR's deploy to recruiters.GITHUB_TOKEN(orGH_TOKEN) is supported inscripts/fetch-github-activity.js. Add it to CI to refresh authenticated and skip the rate limit.