feat(skills): redesign section with compact cards and detail modal - #68
Conversation
Apply the same two-level pattern as Projects: compact SkillCard (icon + summary + first 3 skill pills + hover overlay with usage bars) opens a SkillModal with full skill metadata (description, years, projects, keywords). Adds `leadership` id to SkillCategory type and fixes the missing icon. 263 tests pass.
|
Deployment failed with the following error: |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the user experience of the Skills section by introducing a modern, interactive design. It transitions from a static list to a dynamic card-and-modal system, allowing users to quickly grasp an overview of skill categories and then delve into detailed information on demand. This change not only improves visual appeal and navigability but also standardizes the UI pattern across the portfolio, making it more cohesive and accessible. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request effectively redesigns the skills section by introducing a clean, component-based architecture with SkillCard and SkillModal. The new card-to-modal pattern improves user experience by presenting information in a more organized and digestible way. The code is well-structured, and the addition of comprehensive tests for the new components is commendable. I have one minor suggestion regarding internationalization to further improve the implementation.
| </li> | ||
| ))} | ||
| </ul> | ||
| <p className="text-xs text-accent font-mono text-right shrink-0">Ver detalles →</p> |
There was a problem hiding this comment.
The text 'Ver detalles →' is hardcoded in Spanish. To ensure it's translated for other locales, it should be internationalized using the useTranslations hook.
I recommend adding a labels object to the skills section in your message files, similar to how it's done for the projects section.
messages/en.json:
"skills": {
...
"labels": {
"viewDetails": "View details →"
},
"aria": { ... }
}messages/es.json:
"skills": {
...
"labels": {
"viewDetails": "Ver detalles →"
},
"aria": { ... }
}Then you can use t('labels.viewDetails') in the component.
| <p className="text-xs text-accent font-mono text-right shrink-0">Ver detalles →</p> | |
| <p className="text-xs text-accent font-mono text-right shrink-0">{t('labels.viewDetails')}</p> |
1 participant
Summary
SkillCardcomponent: icon + name + experience badge + 2-line summary + first 3 skill pills + overflow badge; hover overlay reveals all skills with usage barsSkillModalcomponent: full skill details (description, usage bar, experience years, project count, keywords) using the sharedModalprimitiveSkills.tsxrefactored: inline article list replaced with<SkillCard>+<SkillModal>driven byselectedCategorystateleadershipcategory id added toSkillCategorytype andCATEGORY_ICONSmapskills.aria.openCategoryandskills.aria.closeModali18n keys (ES + EN)Test plan
npm run test:run)tsc --noEmit --skipLibCheck)SkillCard.test.tsx— 10 tests: render, overflow pills, hover overlay content, click handler, accessibilitySkillModal.test.tsx— 14 tests: null render, content, close via button/ESC/backdropSkills.test.tsx— skill descriptions hidden in cards, visible after click, modal closes on ESC, donut chart + localization intact