Add Dark Mode, Back to Top, Typing Animation, Skills Proficiency Bars, and About Me section#9
Draft
Copilot wants to merge 2 commits into
Draft
Add Dark Mode, Back to Top, Typing Animation, Skills Proficiency Bars, and About Me section#9Copilot wants to merge 2 commits into
Copilot wants to merge 2 commits into
Conversation
…on, Skills Proficiency Bars, About Me section Co-authored-by: Yasar2019 <60102921+Yasar2019@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Add features discussed in last pull request
Add Dark Mode, Back to Top, Typing Animation, Skills Proficiency Bars, and About Me section
Mar 14, 2026
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
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.
Implements the five features outlined in PR #8. The
AboutMecomponent existed but was never rendered; the other four features are net-new.New Components
DarkModeToggle— Fixed top-right button; persists preference inlocalStorage, toggles.dark-modeon<body>BackToTop— Fixed bottom-right button; appears after 300px scroll via scroll listener, smooth-scrolls to topUpdated Components
Header— Replaces static subtitle with auseTypewriterhook cycling through role phrases with a blinking cursorSkills— Replaces static badges with animated proficiency bars; animation fires once viaIntersectionObserveron viewport entryApp— Renders<AboutMe />,<DarkModeToggle />, and<BackToTop />; managesisDarkstate synced tolocalStorageStyles & Data
GlobalStyles— CSS custom properties for light/dark themes (--bg-color,--text-color,--card-bg, etc.) with.dark-modeoverrides onbody; enables theme-aware styling across all components without prop drillingsrc/data/skills.js— Extracted skills data (name + level) as a shared CommonJS module consumed by bothSkills.jsxand the test suiteTests
tests/skills.test.js— Validates skill entries from the shared data module have required fields and valid level ranges (0–100)Transient Props
Styled-components
$-prefixed transient props used for$visible,$animated,$levelto prevent unknown prop warnings from reaching the DOM.Original prompt
📍 Connect Copilot coding agent with Jira, Azure Boards or Linear to delegate work to Copilot in one click without leaving your project management tool.