feat : Add MySpace_2005 portfolio template#4398
Open
ayushsri-dev wants to merge 1 commit into
Open
Conversation
|
CodeAnt AI is reviewing your PR. |
|
@ayushsri-dev is attempting to deploy a commit to the Anurag Mishra's projects Team on Vercel. A member of the Team first needs to authorize it. |
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
Contributor
📝 WalkthroughWalkthroughAdds a MySpace 2005 portfolio template with responsive XP-era styling, context-driven portfolio sections, interactive projects and comments, and registration in the shared template catalog. ChangesMySpace 2005 portfolio template
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant Template
participant usePortfolio
participant PortfolioSections
participant Browser
Template->>usePortfolio: Read portfolioData
usePortfolio-->>Template: Return portfolio sections
Template->>PortfolioSections: Pass profile and portfolio data
PortfolioSections-->>Browser: Render MySpace 2005 layout
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
codeant-ai
Bot
added
the
size:XL
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
Comment on lines
+625
to
+629
| {p.liveUrl && ( | ||
| <a href={p.liveUrl} target="_blank" rel="noopener noreferrer" style={{ display: "flex", alignItems: "center", gap: 4 }}> | ||
| <ExternalLink size={12} /> Live Demo | ||
| </a> | ||
| )} |
There was a problem hiding this comment.
Suggestion: The project links use raw user-provided URLs directly in href, so a crafted value like javascript: can execute script when clicked. Normalize/validate project URLs (for example with the existing external URL sanitizer utility) before rendering, and skip or replace invalid links. [security]
Severity Level: Major ⚠️
❌ Portfolio previews can open unvalidated external project URLs.
⚠️ User data from ai_portfolio_draft drives outbound links.Steps of Reproduction ✅
1. In the preview route `TemplatePreviewOnly`
(frontend/src/pages/TemplatePreviewOnly.jsx:163-187), the app loads `ai_portfolio_draft`
from `localStorage` and merges it into `portfolioData`, including user-supplied
`projects[i].liveUrl` values.
2. `TemplatePreviewOnly` wraps the lazily imported portfolio template component in the
global `PortfolioProvider` (frontend/src/context/PortfolioContext.jsx:63-70), which calls
`normalizePortfolioData()`; that function preserves each project's `liveUrl` when building
the `projects` array (PortfolioContext.jsx:33-41).
3. When the MySpace_2005 template is visited via `/preview/MySpace_2005`,
`TemplatePreviewOnly` imports `../components/portfolio/templates/MySpace_2005/index.jsx`
(TemplatePreviewOnly.jsx:53-62) and renders its default `Template()` component, which
reads `projects` from `usePortfolio()`
(frontend/src/components/portfolio/templates/MySpace_2005/index.jsx:872-880).
4. Inside the `Projects` component, each project renders a “Live Demo” link as `<a
href={p.liveUrl} target="_blank" rel="noopener noreferrer"...>`
(frontend/src/components/portfolio/templates/MySpace_2005/index.jsx:624-629); if a user
enters `javascript:alert(1)` or another unsafe scheme in `projects[i].liveUrl` via the AI
portfolio draft, clicking that link in the preview opens the unvalidated scheme.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/portfolio/templates/MySpace_2005/index.jsx
**Line:** 625:629
**Comment:**
*Security: The project links use raw user-provided URLs directly in `href`, so a crafted value like `javascript:` can execute script when clicked. Normalize/validate project URLs (for example with the existing external URL sanitizer utility) before rendering, and skip or replace invalid links.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
Comment on lines
+725
to
+730
| <a | ||
| key={link.label} | ||
| href={link.href} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="ms05-social" |
There was a problem hiding this comment.
Suggestion: Social links are rendered from socials values without URL sanitization, which allows unsafe protocols to be injected into anchors. Validate each URL against allowed protocols before assigning it to href. [security]
Severity Level: Major ⚠️
❌ Social sidebar renders unsanitized user-controlled link URLs.
⚠️ Malicious schemes can be clicked in portfolio preview.Steps of Reproduction ✅
1. The preview page `TemplatePreviewOnly` merges user draft data from `ai_portfolio_draft`
into `portfolioData.socials` (frontend/src/pages/TemplatePreviewOnly.jsx:170-188),
allowing the user to control fields like `github`, `linkedin`, `twitter`, and `website`.
2. `TemplatePreviewOnly` passes this `portfolioData` into the global `PortfolioProvider`
(frontend/src/context/PortfolioContext.jsx:63-70); `normalizePortfolioData()` builds a
`socials` object that combines defaults with `source.socials` and `source.contact`
(PortfolioContext.jsx:47-51), preserving any custom URL values.
3. When the MySpace_2005 template is rendered for preview, its `Template()` component uses
`usePortfolio()` to read the normalized `socials` object and passes it into the `Socials`
component (frontend/src/components/portfolio/templates/MySpace_2005/index.jsx:872-883,
937-939).
4. `Socials` constructs link entries from `socials` (index.jsx:707-715) and then renders
each as an anchor `<a href={link.href} target="_blank" rel="noopener noreferrer"
className="ms05-social">`
(frontend/src/components/portfolio/templates/MySpace_2005/index.jsx:725-730); if a user
sets `socials.github` or `socials.website` to `javascript:alert(1)` or another unsafe
scheme in the draft, clicking that social link in the preview opens the unvalidated URL.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/components/portfolio/templates/MySpace_2005/index.jsx
**Line:** 725:730
**Comment:**
*Security: Social links are rendered from `socials` values without URL sanitization, which allows unsafe protocols to be injected into anchors. Validate each URL against allowed protocols before assigning it to `href`.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix| image: "/templates/MySpace_2005.png", | ||
| createdAt: "2026-07-17", | ||
| isComplete: true, | ||
| description: "A faithful recreation of a classic 2005 MySpace profile page as a developer portfolio. Features the iconic two-column layout, blue navigation, connected white panels, dark blue section headers, compact Verdana typography, interactive project accordion, and stacked profile modules — pure nostalgia." |
There was a problem hiding this comment.
Suggestion: The template metadata description claims a two-column layout, but the template implementation is explicitly three-column; this mismatch will mislead users in gallery/selection UI. Update the description to match the actual layout behavior. [comment mismatch]
Severity Level: Minor 🧹
⚠️ Template gallery metadata misstates MySpace layout column count.
⚠️ Users may misunderstand template structure before previewing.Steps of Reproduction ✅
1. The gallery page imports the `templates` metadata array from
`frontend/src/data/templates.js` (frontend/src/pages/TemplateGallery.jsx:6) and uses it to
build template cards and preview links.
2. In `templates.js`, the entry for `id: "MySpace_2005"` sets `layout: "Grid"` and defines
a description containing the phrase “Features the iconic two-column layout”
(frontend/src/data/templates.js:3-14).
3. The actual MySpace_2005 implementation defines a three-column layout in CSS
(`.ms05-layout` with left, center, and right columns at ~23%, ~52%, ~25%) and documents
this as a “persistent 3-column desktop grid” in its header comment
(frontend/src/components/portfolio/templates/MySpace_2005/index.jsx:13-17, 209-227).
4. Because the metadata description claims a two-column layout while the rendered template
clearly shows three columns, any UI that surfaces this description (e.g., future gallery
tooltips or detail views using `templates.description`) will present incorrect information
about the template’s structure compared to the live preview.
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** frontend/src/data/templates.js
**Line:** 14:14
**Comment:**
*Comment Mismatch: The template metadata description claims a two-column layout, but the template implementation is explicitly three-column; this mismatch will mislead users in gallery/selection UI. Update the description to match the actual layout behavior.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
|
CodeAnt AI finished reviewing your PR. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/components/portfolio/templates/MySpace_2005/index.jsx`:
- Around line 154-156: Update the animation fill mode on the .ms05-comment rule
to apply the initial keyframe throughout the delay while retaining the final
state after completion. Make the same change in the corresponding comment styles
referenced by the additional affected range.
- Around line 312-352: Update the search form and the referenced contact buttons
and pointer-styled spans in the MySpace_2005 component so every presented
control has a real action and keyboard-accessible behavior; wire the intended
handlers for search/contact interactions, and render decorative or unavailable
items as non-interactive text or explicitly disabled controls instead of inert
buttons/spans.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8c0e0053-c328-4da6-b313-01729a1138f1
⛔ Files ignored due to path filters (1)
frontend/public/templates/MySpace_2005.pngis excluded by!**/*.png
📒 Files selected for processing (2)
frontend/src/components/portfolio/templates/MySpace_2005/index.jsxfrontend/src/data/templates.js
Comment on lines
+154
to
+156
| .ms05-comment { | ||
| animation: ms05commentReveal 160ms ease-out forwards; | ||
| transition: background 120ms ease; |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Apply the initial comment keyframe during each delay.
With forwards, delayed comments initially render fully visible, then jump to 35% opacity when their animation starts. Use both so the sequential reveal works without flashing.
Proposed fix
.ms05-comment {
- animation: ms05commentReveal 160ms ease-out forwards;
+ animation: ms05commentReveal 160ms ease-out both;
transition: background 120ms ease;
}Also applies to: 802-814
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/components/portfolio/templates/MySpace_2005/index.jsx` around
lines 154 - 156, Update the animation fill mode on the .ms05-comment rule to
apply the initial keyframe throughout the delay while retaining the final state
after completion. Make the same change in the corresponding comment styles
referenced by the additional affected range.
Comment on lines
+312
to
+352
| <form onSubmit={(e) => e.preventDefault()} style={{ display: "flex", alignItems: "center", gap: 4 }}> | ||
| <label htmlFor="ms05-header-search" style={{ color: "#ffffff", fontSize: 11, fontWeight: 700, fontFamily: MS.font }}>Search:</label> | ||
| <input | ||
| id="ms05-header-search" | ||
| type="text" | ||
| placeholder="Search MySpace..." | ||
| style={{ | ||
| width: 200, | ||
| height: 20, | ||
| background: "#ffffff", | ||
| border: "1px solid #777777", | ||
| borderRadius: 0, | ||
| padding: "1px 5px", | ||
| fontSize: 11, | ||
| fontFamily: MS.font, | ||
| color: "#000000", | ||
| outline: "none", | ||
| }} | ||
| /> | ||
| <button | ||
| type="submit" | ||
| className="ms05-btn" | ||
| style={{ | ||
| height: 20, | ||
| padding: "0 8px", | ||
| fontSize: 10, | ||
| fontWeight: 700, | ||
| borderRadius: 0, | ||
| borderTop: "1px solid #ffffff", | ||
| borderLeft: "1px solid #ffffff", | ||
| borderRight: "1px solid #777777", | ||
| borderBottom: "1px solid #777777", | ||
| background: "#d4d0c8", | ||
| color: "#000000", | ||
| cursor: "pointer", | ||
| flex: "none", | ||
| }} | ||
| > | ||
| Go | ||
| </button> | ||
| </form> |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Do not present inert elements as interactive controls.
Search always suppresses submission, contact buttons have no handlers, and multiple pointer-styled spans provide neither behavior nor keyboard access. Wire the intended actions or render them as non-interactive text/explicitly disabled controls.
Also applies to: 355-359, 366-371, 448-457, 842-842, 859-864, 898-910
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/components/portfolio/templates/MySpace_2005/index.jsx` around
lines 312 - 352, Update the search form and the referenced contact buttons and
pointer-styled spans in the MySpace_2005 component so every presented control
has a real action and keyboard-accessible behavior; wire the intended handlers
for search/contact interactions, and render decorative or unavailable items as
non-interactive text or explicitly disabled controls instead of inert
buttons/spans.
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.
User description
Description
Added the MySpace 2005 developer portfolio template — an authentic, pixel-perfect recreation of a classic 2005 MySpace profile page powered dynamically by
PortfolioContext.Type of Change
Related Issue
Closes #3079
Testing
Screenshots (MANDATORY for UI/UX changes)
Screen.Recording.2026-07-17.192257-compressed-compressed.1.mp4
Checklist
CodeAnt-AI Description
Add a MySpace 2005 portfolio template with classic profile interactions
What Changed
Impact
✅ New nostalgic portfolio choice✅ Clearer project browsing✅ Better mobile viewing of the template💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.
Summary by CodeRabbit