feat: add portfolio template inspired by Bechir Lahoueg (#3907)#4158
Open
anjalikumari45 wants to merge 1 commit into
Open
feat: add portfolio template inspired by Bechir Lahoueg (#3907)#4158anjalikumari45 wants to merge 1 commit into
anjalikumari45 wants to merge 1 commit into
Conversation
|
@anjalikumari45 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 new React component ChangesInspiredBechirLahoueg Portfolio Template
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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:L
![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: 3
🤖 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/Inspired_Bechir_Lahoueg/index.jsx`:
- Line 8: The profile fallback on line 8 only handles the case when the entire
profile is missing, but does not protect against individual fields like name,
role, or bio being undefined or null. This causes runtime errors when
profile.name.split(...) is called on line 18 and when rendering profile.name on
line 33 and profile.role on line 124. Modify the profile object initialization
to normalize each field individually by providing fallback default values for
name, role, and bio properties, ensuring each field has a guaranteed string
value even if the parent data.profile object exists but contains null or
undefined values.
- Around line 58-60: The condition checking proj.technologies only validates
truthiness but not that it is an array, which will cause a crash if technologies
is a truthy non-array value like a string or object when calling map(). Update
the conditional statement to use Array.isArray(proj.technologies) in addition to
the truthy check to ensure technologies is verified as an array before calling
.map() on line 60.
- Line 112: The ternary operator checking typeof skill === 'object' needs to
guard against null values, since null is technically an object type in
JavaScript and will cause an error when attempting to access skill.name. Modify
the condition to explicitly check that skill is not null before treating it as
an object with a name property, ensuring the code handles null entries safely
without throwing an error when skill.name is accessed.
🪄 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: b287f191-bcc0-4af6-add6-6e90b93cd53f
📒 Files selected for processing (1)
frontend/src/components/portfolio/templates/Inspired_Bechir_Lahoueg/index.jsx
| const { portfolioData: data } = usePortfolio(); | ||
|
|
||
| // Fallback structural data if context is initially empty | ||
| const profile = data?.profile || { name: 'Your Name', role: 'Full Stack Developer', bio: 'Crafting digital experiences.' }; |
Contributor
There was a problem hiding this comment.
Normalize profile fields before rendering string operations.
Line 8 only falls back when data.profile is fully missing. If data.profile exists but name is undefined/null, Line 18 can throw on profile.name.split(...), and Lines 33/124 also render unsafe values.
Suggested fix
- const profile = data?.profile || { name: 'Your Name', role: 'Full Stack Developer', bio: 'Crafting digital experiences.' };
+ const profile = {
+ name: 'Your Name',
+ role: 'Full Stack Developer',
+ bio: 'Crafting digital experiences.',
+ ...(data?.profile ?? {}),
+ };Also applies to: 18-18, 33-33, 124-124
🤖 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/Inspired_Bechir_Lahoueg/index.jsx`
at line 8, The profile fallback on line 8 only handles the case when the entire
profile is missing, but does not protect against individual fields like name,
role, or bio being undefined or null. This causes runtime errors when
profile.name.split(...) is called on line 18 and when rendering profile.name on
line 33 and profile.role on line 124. Modify the profile object initialization
to normalize each field individually by providing fallback default values for
name, role, and bio properties, ensuring each field has a guaranteed string
value even if the parent data.profile object exists but contains null or
undefined values.
Comment on lines
+58
to
+60
| {proj.technologies && ( | ||
| <div className="flex flex-wrap gap-2 pt-4 border-t border-zinc-900"> | ||
| {proj.technologies.map((tech, tIdx) => ( |
Contributor
There was a problem hiding this comment.
Guard technologies as an array before calling .map().
At Line 58, a truthy non-array value (e.g., string/object) will pass the condition and crash at Line 60 (map is not a function).
Suggested fix
- {proj.technologies && (
+ {Array.isArray(proj.technologies) && proj.technologies.length > 0 && (
<div className="flex flex-wrap gap-2 pt-4 border-t border-zinc-900">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| {proj.technologies && ( | |
| <div className="flex flex-wrap gap-2 pt-4 border-t border-zinc-900"> | |
| {proj.technologies.map((tech, tIdx) => ( | |
| {Array.isArray(proj.technologies) && proj.technologies.length > 0 && ( | |
| <div className="flex flex-wrap gap-2 pt-4 border-t border-zinc-900"> | |
| {proj.technologies.map((tech, tIdx) => ( |
🤖 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/Inspired_Bechir_Lahoueg/index.jsx`
around lines 58 - 60, The condition checking proj.technologies only validates
truthiness but not that it is an array, which will cause a crash if technologies
is a truthy non-array value like a string or object when calling map(). Update
the conditional statement to use Array.isArray(proj.technologies) in addition to
the truthy check to ensure technologies is verified as an array before calling
.map() on line 60.
| key={idx} | ||
| className="bg-[#121214] border border-zinc-800 text-zinc-300 px-4 py-2 rounded-lg text-sm font-medium hover:text-white hover:border-zinc-700 transition" | ||
| > | ||
| {typeof skill === 'object' ? skill.name : skill} |
Contributor
There was a problem hiding this comment.
Handle null skill entries safely in the object branch.
Line 112 treats any object as { name }, but null is also an object in JS and will throw on skill.name.
Suggested fix
- {typeof skill === 'object' ? skill.name : skill}
+ {skill && typeof skill === 'object' ? skill.name : skill}🤖 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/Inspired_Bechir_Lahoueg/index.jsx`
at line 112, The ternary operator checking typeof skill === 'object' needs to
guard against null values, since null is technically an object type in
JavaScript and will cause an error when attempting to access skill.name. Modify
the condition to explicitly check that skill is not null before treating it as
an object with a name property, ensuring the code handles null entries safely
without throwing an error when skill.name is accessed.
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| @@ -0,0 +1,130 @@ | |||
| import React from 'react'; | |||
| import { usePortfolio } from '../../../../context/PortfolioContext'; | |||
There was a problem hiding this comment.
Suggestion: This import points to frontend/src/context/PortfolioContext, but that module does not exist in the current codebase, so the template will fail to build/load with a module resolution error. Update the import to an existing module or refactor the template to use the same data source pattern as other templates. [import error]
Severity Level: Critical 🚨
- ❌ Any consumer importing this template hits module-not-found error.
- ⚠️ Blocks integrating the new Bechir-inspired portfolio template.Steps of Reproduction ✅
1. Open `frontend/src/components/portfolio/templates/Inspired_Bechir_Lahoueg/index.jsx`
and note the import at line 2: `import { usePortfolio } from
'../../../../context/PortfolioContext';`.
2. Inspect the context directory `frontend/src/context` (listing shows only
`AuthContext.js`, `AuthProvider.jsx`, `SidebarContext.js`, `SocketContext.js`,
`SocketProvider.jsx`, `ThemeContext.js`, `ThemeProvider.jsx`; no `PortfolioContext.*` file
exists).
3. A global search for `PortfolioContext` and `usePortfolio` across
`/workspace/career-pilot` finds references only in this new template file, with no
corresponding hook or context definition.
4. When any page (for example, a new entry in `frontend/src/pages/TemplateGallery.jsx` or
`frontend/src/App.jsx`) imports `InspiredBechirLahoueg` and the frontend is built or `npm
run dev` is started, the bundler will attempt to resolve
`../../../../context/PortfolioContext` and fail with a "Module not found: Can't resolve
'../../../../context/PortfolioContext'" error, preventing the app (or that route) from
loading.
(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/Inspired_Bechir_Lahoueg/index.jsx
**Line:** 2:2
**Comment:**
*Import Error: This import points to `frontend/src/context/PortfolioContext`, but that module does not exist in the current codebase, so the template will fail to build/load with a module resolution error. Update the import to an existing module or refactor the template to use the same data source pattern as other templates.
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| {/* Header/Nav */} | ||
| <header className="sticky top-0 z-50 backdrop-blur-md bg-[#0a0a0c]/70 border-b border-zinc-800/50 px-6 py-4 flex justify-between items-center"> | ||
| <div className="text-xl font-bold bg-gradient-to-r from-purple-400 to-indigo-500 bg-clip-text text-transparent"> | ||
| {profile.name.split(' ')[0]}.dev |
There was a problem hiding this comment.
Suggestion: profile only falls back when the entire object is missing; if profile exists but name is undefined/null, calling .split will throw and crash rendering. Add a safe fallback for name before splitting (or guard with optional chaining/default string). [null pointer]
Severity Level: Major ⚠️
- ❌ Portfolio template crashes when profile.name is missing/invalid.
- ⚠️ Breaks any route that mounts this new template.Steps of Reproduction ✅
1. In `frontend/src/components/portfolio/templates/Inspired_Bechir_Lahoueg/index.jsx`,
observe `profile` initialization at lines 7–11: `const profile = data?.profile || { name:
'Your Name', ... };` followed by the header label at line 18: `{profile.name.split('
')[0]}.dev`.
2. Because the fallback only applies when `data.profile` is falsy, any truthy
`data.profile` object without a valid `name` (e.g., `{ role: 'Dev' }` or `{ name: null }`)
will be used as-is, leaving `profile.name` as `undefined` or `null`.
3. When this component is rendered in a route (e.g., after being imported into
`frontend/src/App.jsx` similarly to `ChatbotPortfolio` or into
`frontend/src/pages/TemplateGallery.jsx` like `LiquidGlass`) and the `usePortfolio`
context supplies a `portfolioData.profile` lacking a valid string `name`, React will
execute `profile.name.split(' ')` during render.
4. At that point, the browser throws a `TypeError` such as "Cannot read properties of
undefined (reading 'split')", causing the entire Inspired Bechir Lahoueg template (and
potentially the enclosing route) to fail to render.
(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/Inspired_Bechir_Lahoueg/index.jsx
**Line:** 18:18
**Comment:**
*Null Pointer: `profile` only falls back when the entire object is missing; if `profile` exists but `name` is `undefined`/`null`, calling `.split` will throw and crash rendering. Add a safe fallback for `name` before splitting (or guard with optional chaining/default string).
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
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
Implements a new modern, dark-themed developer portfolio template inspired by Bechir Lahoueg's minimalist design (
https://www.bechirlahoueg.tech).The component is fully integrated with the custom
usePortfoliohook, safely destructuring user profile details, experience milestones, core skills, and featured projects with robust fallbacks. Built using Tailwind CSS to ensure a fully fluid, sleek layout across mobile, tablet, and desktop viewports.Type of Change
Related Issue
Fixes #3907
Testing
Screenshots (MANDATORY for UI/UX changes)
(Note: Remember to drag and drop your screenshots/recordings here before submitting!)
Checklist
CodeAnt-AI Description
Add a dark-themed portfolio template with built-in fallback content
What Changed
Impact
✅ Clearer portfolio preview when profile data is incomplete✅ Smoother mobile and desktop viewing✅ Fewer blank sections on first load💡 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