feat: Behavioural Interview Prep page with structured content and UI #318
Conversation
|
@cherylpinto is attempting to deploy a commit to the recode Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs. In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊 Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv. We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰 🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨ 📚Your perks for contribution to this community 👇🏻
If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
There was a problem hiding this comment.
Pull Request Overview
This PR adds a comprehensive Behavioral Interview Preparation page to the Interview Prep section, providing structured guidance for mastering soft skills and situational questions in hiring processes. The page includes practical frameworks like the STAR method, common question categories, best practices, and learning resources.
Key Changes:
- Expanded content structure: Added detailed behavioral interview guidance with introduction, STAR method examples, question categories, do's/don'ts, and video resources
- Enhanced interactivity: Implemented collapsible question categories and improved navigation
- Styling improvements: Added dark mode support and custom CSS classes for better visual presentation
Reviewed Changes
Copilot reviewed 2 out of 5 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
| src/pages/interview-prep/index.tsx | Significantly expanded behavioral interview tab with comprehensive content sections and improved code formatting |
| src/css/custom.css | Added dark mode styles and visual enhancements for behavioral interview components |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| import Head from "@docusaurus/Head"; | ||
| import { motion } from "framer-motion"; | ||
| import Link from "@docusaurus/Link"; | ||
| import React from "react"; |
There was a problem hiding this comment.
Importing React is unnecessary in modern React applications (React 17+) when using JSX Transform. The import on line 2 already imports useState from React.
| import React from "react"; |
Copilot uses AI. Check for mistakes.
| <motion.div className="text-center mb-12" variants={fadeIn}> | ||
| <h2 className="text-4xl font-bold mb-4 text-gray-900 dark:text-white"> | ||
| Behavioral Interview Questions | ||
| <h2 className="text-4xl font-bold mb-4 text-white"> |
There was a problem hiding this comment.
Using hardcoded 'text-white' class conflicts with the CSS override for light mode headings. Consider using 'text-gray-900 dark:text-white' for consistency with other headings.
| <h2 className="text-4xl font-bold mb-4 text-white"> | |
| <h2 className="text-4xl font-bold mb-4 text-gray-900 dark:text-white"> |
Copilot uses AI. Check for mistakes.
| variants={fadeIn} | ||
| > | ||
| <div className="max-w-4xl mx-auto"> | ||
| <h3 className="text-2xl font-bold mb-6 text-white flex items-center"> |
There was a problem hiding this comment.
Same issue with hardcoded 'text-white' class. This creates inconsistency with the CSS override pattern used elsewhere.
| <h3 className="text-2xl font-bold mb-6 text-white flex items-center"> | |
| <h3 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white flex items-center"> |
Copilot uses AI. Check for mistakes.
| <img | ||
| src={video.thumbnail || "/placeholder.svg"} | ||
| alt={video.title} | ||
| className="w-full h-40 object-cover" |
There was a problem hiding this comment.
The fallback image path '/placeholder.svg' may not exist, which could result in broken images. Consider using a more reliable fallback or handling missing images gracefully.
| className="w-full h-40 object-cover" | |
| src={video.thumbnail || "/img/placeholder.png"} | |
| alt={video.title} | |
| className="w-full h-40 object-cover" | |
| onError={e => { | |
| if (e.currentTarget.src !== window.location.origin + "/img/placeholder.png") { | |
| e.currentTarget.src = "/img/placeholder.png"; | |
| } | |
| }} |
Copilot uses AI. Check for mistakes.
| <div className="flex items-center mb-6"> | ||
| <img | ||
| src={company.logo} | ||
| src={company.logo || "/placeholder.svg"} |
There was a problem hiding this comment.
Same issue with placeholder image fallback - the path may not exist leading to broken images.
Copilot uses AI. Check for mistakes.
|
|
||
| } | ||
|
|
||
| [data-theme='dark'].interview-prep-join-comm{ |
There was a problem hiding this comment.
Missing space between attribute selector and class selector. Should be '[data-theme="dark"] .interview-prep-join-comm' to properly target elements with the class inside dark theme.
| [data-theme='dark'].interview-prep-join-comm{ | |
| [data-theme='dark'] .interview-prep-join-comm{ |
Copilot uses AI. Check for mistakes.
|
|
||
| .interview-prep-discord-btn{ | ||
| color:white; | ||
|
|
There was a problem hiding this comment.
[nitpick] The CSS rule only sets color to white but the actual button has background-color defined inline in the JSX. Consider moving all button styles to CSS for better maintainability.
| color: white; | |
| background-color: #5865F2; /* Discord brand color, or use the color from the inline JSX */ |
Copilot uses AI. Check for mistakes.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
2 participants
📄 Description
This PR adds the Interview Prep → Behaviour page, providing structured guidance for preparing for Behavioral/HR interviews — a key stage in most hiring processes alongside technical rounds.
🎯 Purpose
To help learners and contributors understand how to confidently approach and answer behavioral interview questions, using practical frameworks, examples, and best practices.
🧩 Key Additions
Introduction
Common Behavioral Questions
STAR Method
Do’s and Don’ts
(Optional) Video Resources
Contributor Note
💡 UI/UX Implementation
✅ Tasks Completed
Interview Prep📷 Implementation(Light/Dark Mode)
Interview.Preparation.-.RecodeHive.and.1.more.page.-.Personal.-.Microsoft_.Edge.2025-08-14.02-00-21.mp4
🔗 Related Issue
Fixes #252
Type of Change
Checklist
npm run buildand attached scrrenshot in this PR.