diff --git a/src/css/custom.css b/src/css/custom.css index 8b8aa298..c23bcef4 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1357,6 +1357,82 @@ html { pointer-events: auto !important; } + +/* STAR section border fixes for dark mode */ +[data-theme='dark'] .star-border-red { + border-color: #ef4444 !important; +} + +[data-theme='dark'] .star-border-yellow { + border-color: #eab308 !important; +} + +[data-theme='dark'] .star-border-green { + border-color: #22c55e !important; +} + +[data-theme='dark'] .star-border-blue { + border-color: #3b82f6 !important; +} + +[data-theme='light'] .interview-prep-page h1, +[data-theme='light'] .interview-prep-page h2, +[data-theme='light'] .interview-prep-page h3, +[data-theme='light'] .interview-prep-page h4, +[data-theme='light'] .interview-prep-page h5, +[data-theme='light'] .interview-prep-page h6 { + color: #ffffff !important; +} + +.watch-video-btn { + background-color: #dc2626; + color: #ffffff; + padding: 0.5rem 1rem; + border-radius: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + display: inline-flex; + align-items: center; + transition: background-color 0.2s ease-in-out; +} + +.watch-video-btn:hover { + background-color: #b91c1c; +} + +[data-theme='dark'] .interview-prep-sidebar:hover { + border-color: #3b82f6 !important; +} + +[data-theme='dark'] .interview-prep-sidebar { + border-color:#4b5563 !important; +} + +/* Active tab in dark mode */ +[data-theme='dark'] .interview-prep-nav-tab-active { + border-bottom-color: #60a5fa !important; + color: #60a5fa !important; +} + +/* Inactive tab in dark mode */ +[data-theme='dark'] .interview-prep-nav-tab-inactive { + border-bottom-color: transparent !important; + color: #9ca3af !important; +} + +[data-theme='dark'] .interview-prep-nav-tab-inactive:hover { + color: #d1d5db !important; +} + +.interview-prep-discord-btn{ + color:white; + +} + +[data-theme='dark'].interview-prep-join-comm{ + border-color:#854D0E +} + /* Fix: Remove extra box/space above dropdown nav items in sidebar */ .navbar-sidebar__item, .navbar-sidebar__link, @@ -1388,3 +1464,4 @@ html { padding-top: 0 !important; } } + diff --git a/src/pages/interview-prep/index.tsx b/src/pages/interview-prep/index.tsx index 29e02744..fb6f0e3b 100644 --- a/src/pages/interview-prep/index.tsx +++ b/src/pages/interview-prep/index.tsx @@ -1,222 +1,226 @@ -import React, { useState } from "react"; -import Layout from "@theme/Layout"; -import Head from "@docusaurus/Head"; -import { motion } from "framer-motion"; -import Link from "@docusaurus/Link"; +import React from "react"; +import { useState } from "react" +import Layout from "@theme/Layout" +import Head from "@docusaurus/Head" +import { motion } from "framer-motion" +import Link from "@docusaurus/Link" // Animation variants const fadeIn = { hidden: { opacity: 0, y: 20 }, - visible: { opacity: 1, y: 0, transition: { duration: 0.6 } } -}; + visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }, +} const staggerContainer = { hidden: {}, visible: { transition: { - staggerChildren: 0.2 - } - } -}; + staggerChildren: 0.2, + }, + }, +} // Interview categories data const interviewCategories = [ { - id: 'technical', - title: 'Technical Interviews', - icon: '💻', - description: 'Master coding challenges, system design, and technical concepts', - color: '#3b82f6', + id: "technical", + title: "Technical Interviews", + icon: "💻", + description: "Master coding challenges, system design, and technical concepts", + color: "#3b82f6", topics: [ - 'Data Structures & Algorithms', - 'System Design', - 'Database Design', - 'API Design', - 'Code Review', - 'Problem Solving' - ] + "Data Structures & Algorithms", + "System Design", + "Database Design", + "API Design", + "Code Review", + "Problem Solving", + ], }, { - id: 'behavioral', - title: 'Behavioral Interviews', - icon: '🤝', - description: 'Prepare for soft skills and situational questions', - color: '#10b981', + id: "behavioral", + title: "Behavioral Interviews", + icon: "🤝", + description: "Prepare for soft skills and situational questions", + color: "#10b981", topics: [ - 'Leadership Examples', - 'Conflict Resolution', - 'Team Collaboration', - 'Project Management', - 'Communication Skills', - 'Cultural Fit' - ] + "Leadership Examples", + "Conflict Resolution", + "Team Collaboration", + "Project Management", + "Communication Skills", + "Cultural Fit", + ], }, { - id: 'company-specific', - title: 'Company-Specific', - icon: '🏢', - description: 'Tailored preparation for top tech companies', - color: '#8b5cf6', - topics: [ - 'Google/Alphabet', - 'Amazon/AWS', - 'Microsoft', - 'Meta/Facebook', - 'Apple', - 'Netflix' - ] - } -]; + id: "company-specific", + title: "Company-Specific", + icon: "🏢", + description: "Tailored preparation for top tech companies", + color: "#8b5cf6", + topics: ["Google/Alphabet", "Amazon/AWS", "Microsoft", "Meta/Facebook", "Apple", "Netflix"], + }, +] // Technical interview resources const technicalResources = [ { - title: 'Data Structures & Algorithms', - difficulty: 'Beginner to Advanced', + title: "Data Structures & Algorithms", + difficulty: "Beginner to Advanced", problems: 150, - description: 'Master arrays, linked lists, trees, graphs, and dynamic programming', - link: '/docs/category/technical', - tags: ['Arrays', 'Trees', 'Graphs', 'DP'] + description: "Master arrays, linked lists, trees, graphs, and dynamic programming", + link: "/docs/category/technical", + tags: ["Arrays", "Trees", "Graphs", "DP"], }, { - title: 'System Design', - difficulty: 'Intermediate to Advanced', + title: "System Design", + difficulty: "Intermediate to Advanced", problems: 25, - description: 'Learn to design scalable systems and distributed architectures', - link: '/docs/category/technical', - tags: ['Scalability', 'Databases', 'Caching', 'Load Balancing'] + description: "Learn to design scalable systems and distributed architectures", + link: "/docs/category/technical", + tags: ["Scalability", "Databases", "Caching", "Load Balancing"], }, { - title: 'Database Design', - difficulty: 'Beginner to Intermediate', + title: "Database Design", + difficulty: "Beginner to Intermediate", problems: 40, - description: 'SQL queries, database optimization, and schema design', - link: '/docs/category/sql', - tags: ['SQL', 'NoSQL', 'Indexing', 'Normalization'] + description: "SQL queries, database optimization, and schema design", + link: "/docs/category/sql", + tags: ["SQL", "NoSQL", "Indexing", "Normalization"], }, { - title: 'API Design & Development', - difficulty: 'Intermediate', + title: "API Design & Development", + difficulty: "Intermediate", problems: 30, - description: 'RESTful APIs, GraphQL, and microservices architecture', - link: '/docs/category/technical', - tags: ['REST', 'GraphQL', 'Microservices', 'Authentication'] - } -]; + description: "RESTful APIs, GraphQL, and microservices architecture", + link: "/docs/category/technical", + tags: ["REST", "GraphQL", "Microservices", "Authentication"], + }, +] // Behavioral interview questions const behavioralQuestions = [ { - category: 'Leadership', + category: "Leadership", questions: [ - 'Tell me about a time you led a team through a difficult project', - 'Describe a situation where you had to influence others without authority', - 'How do you handle team conflicts?' - ] + "Tell me about a time you led a team through a difficult project", + "Describe a situation where you had to influence others without authority", + "How do you handle team conflicts?", + ], }, { - category: 'Problem Solving', + category: "Problem Solving", questions: [ - 'Describe the most challenging technical problem you\'ve solved', - 'Tell me about a time you failed and what you learned', - 'How do you approach debugging complex issues?' - ] + "Describe the most challenging technical problem you've solved", + "Tell me about a time you failed and what you learned", + "How do you approach debugging complex issues?", + ], }, { - category: 'Communication', + category: "Communication", questions: [ - 'Explain a complex technical concept to a non-technical person', - 'Tell me about a time you had to give difficult feedback', - 'How do you handle disagreements with stakeholders?' - ] + "Explain a complex technical concept to a non-technical person", + "Tell me about a time you had to give difficult feedback", + "How do you handle disagreements with stakeholders?", + ], }, { - category: 'Growth & Learning', + category: "Growth & Learning", questions: [ - 'How do you stay updated with new technologies?', - 'Tell me about a time you had to learn something completely new', - 'What\'s the most important thing you\'ve learned in your career?' - ] - } -]; + "How do you stay updated with new technologies?", + "Tell me about a time you had to learn something completely new", + "What's the most important thing you've learned in your career?", + ], + }, +] // Company-specific interview tips const companyTips = [ { - company: 'Google', - logo: '/icons/google.png', - focus: 'Googleyness & Leadership', + company: "Google", + logo: "/icons/google.png", + focus: "Googleyness & Leadership", tips: [ - 'Focus on scalability and efficiency', - 'Demonstrate analytical thinking', - 'Show passion for technology', - 'Prepare for system design questions' + "Focus on scalability and efficiency", + "Demonstrate analytical thinking", + "Show passion for technology", + "Prepare for system design questions", ], commonQuestions: [ - 'How would you design Google Search?', - 'Explain how you would handle billions of queries', - 'What would you do if Gmail was slow?' - ] + "How would you design Google Search?", + "Explain how you would handle billions of queries", + "What would you do if Gmail was slow?", + ], }, { - company: 'Amazon', - logo: '/icons/amazon.png', - focus: 'Leadership Principles', + company: "Amazon", + logo: "/icons/amazon.png", + focus: "Leadership Principles", tips: [ - 'Know all 16 Leadership Principles', - 'Use STAR method for behavioral questions', - 'Focus on customer obsession', - 'Demonstrate ownership mindset' + "Know all 16 Leadership Principles", + "Use STAR method for behavioral questions", + "Focus on customer obsession", + "Demonstrate ownership mindset", ], commonQuestions: [ - 'Tell me about a time you disagreed with your manager', - 'Describe a time you had to make a decision with incomplete information', - 'How do you handle tight deadlines?' - ] + "Tell me about a time you disagreed with your manager", + "Describe a time you had to make a decision with incomplete information", + "How do you handle tight deadlines?", + ], }, { - company: 'Microsoft', - logo: '/icons/mircosoft.png', - focus: 'Growth Mindset & Collaboration', + company: "Microsoft", + logo: "/icons/mircosoft.png", + focus: "Growth Mindset & Collaboration", tips: [ - 'Emphasize continuous learning', - 'Show collaborative approach', - 'Demonstrate inclusive thinking', - 'Focus on impact and results' + "Emphasize continuous learning", + "Show collaborative approach", + "Demonstrate inclusive thinking", + "Focus on impact and results", ], commonQuestions: [ - 'How do you handle failure?', - 'Tell me about a time you helped a colleague', - 'What motivates you to learn new things?' - ] - } -]; + "How do you handle failure?", + "Tell me about a time you helped a colleague", + "What motivates you to learn new things?", + ], + }, +] // Mock interview simulator data const mockInterviewQuestions = [ { - type: 'technical', - question: 'Implement a function to reverse a linked list', - difficulty: 'Medium', - hints: ['Think about iterative vs recursive approach', 'Consider edge cases like empty list'] + type: "technical", + question: "Implement a function to reverse a linked list", + difficulty: "Medium", + hints: ["Think about iterative vs recursive approach", "Consider edge cases like empty list"], }, { - type: 'behavioral', - question: 'Tell me about a time you had to work with a difficult team member', - framework: 'STAR Method', - hints: ['Situation', 'Task', 'Action', 'Result'] + type: "behavioral", + question: "Tell me about a time you had to work with a difficult team member", + framework: "STAR Method", + hints: ["Situation", "Task", "Action", "Result"], }, { - type: 'system-design', - question: 'Design a URL shortener like bit.ly', - difficulty: 'Hard', - hints: ['Consider scale', 'Database design', 'Caching strategy'] - } -]; + type: "system-design", + question: "Design a URL shortener like bit.ly", + difficulty: "Hard", + hints: ["Consider scale", "Database design", "Caching strategy"], + }, +] const InterviewPrepPage: React.FC = () => { - const [activeTab, setActiveTab] = useState<'overview' | 'technical' | 'behavioral' | 'companies' | 'practice'>('overview'); - const [selectedQuestion, setSelectedQuestion] = useState(null); + const [activeTab, setActiveTab] = useState<"overview" | "technical" | "behavioral" | "companies" | "practice">( + "overview", + ) + const [selectedQuestion, setSelectedQuestion] = useState(null) + const [expandedCategories, setExpandedCategories] = useState<{ [key: string]: boolean }>({}) + + const toggleCategory = (categoryIndex: number) => { + setExpandedCategories((prev) => ({ + ...prev, + [categoryIndex]: !prev[categoryIndex], + })) + } return ( { > Ace Your Next Interview - + Master technical challenges and behavioral questions with our comprehensive interview preparation platform - + + + {expandedCategories[index] && ( + -

{question}

+
+ {section.questions.map((question, i) => ( +
+

"{question}"

+
+ ))} +
+ + )} + + ))} + + + + {/* Do's and Don'ts */} + +

+ Do's and Don'ts for Behavioral Interviews +

+
+ {/* Do's */} +
+

+ ✅ + Do's +

+
+ {[ + "Practice with real scenarios from your experience", + "Be concise and specific in your answers", + "Show enthusiasm and passion for your work", + "Use the STAR method to structure responses", + "Prepare 5-7 strong examples beforehand", + "Focus on your individual contributions", + "Quantify results whenever possible", + "Show what you learned from each experience", + ].map((item, i) => ( +
+ + {item}
))}
- - ))} -
+
+ + {/* Don'ts */} +
+

+ ❌ + Don'ts +

+
+ {[ + "Memorize robotic, scripted answers", + "Be vague or over-explain situations", + "Appear disinterested or unenthusiastic", + "Speak negatively about previous employers", + "Make up stories or exaggerate experiences", + "Focus only on team achievements without your role", + "Give answers without clear structure", + "Forget to mention the results or outcomes", + ].map((item, i) => ( +
+ + {item} +
+ ))} +
+
+ + + + {/* Video Resources */} + +

+ 🎥 + Video Resources & Learning Materials +

+
+ {[ + { + title: "Behavioral Interview Masterclass", + channel: "CareerVidz", + duration: "25 min", + description: "Complete guide to behavioral interviews with real examples", + url: "https://www.youtube.com/watch?v=PJKYqLP6MRE", + thumbnail: "../../img/Behavioural_Interviews1.png", + }, + { + title: "STAR Method Explained", + channel: "Interview Success", + duration: "15 min", + description: "Step-by-step breakdown of the STAR method with practice", + url: "https://www.youtube.com/watch?v=V0jktOX8Jog", + thumbnail: "../../img/Behavioural_Interviews2.png", + }, + { + title: "Mock Behavioral Interview", + channel: "Tech Interview Pro", + duration: "30 min", + description: "Real behavioral interview simulation with feedback", + url: "https://www.youtube.com/watch?v=1qw5ITr3k9E", + thumbnail: "../../img/Behavioural_Interviews3.png", + }, + ].map((video, i) => ( +
+ {video.title} +
+

{video.title}

+

{video.description}

+
+ {video.channel} + {video.duration} +
+ + ▶️ + Watch Video + +
+
+ ))} +
+ + {/* Additional Resources */} +
+

Additional Learning Resources

+
+
+
📚 Recommended Books
+
    +
  • • "Cracking the Coding Interview" by Gayle McDowell
    • +
  • • "The Behavioral Interview Handbook" by Lewis Lin
    • +
  • • "What Color Is Your Parachute?" by Richard N. Bolles
    • +
+
+
+
🌐 Online Platforms
+
    +
  • • Pramp - Free mock interviews
    • +
  • • InterviewBit - Behavioral question bank
    • +
  • • Glassdoor - Company-specific questions
    • +
+
+
+
+ + + {/* Contributor Note */} + +
+

+ 🤝 + Join Our Community & Contribute +

+

+ Help make this resource better for everyone in the RecodeHive community +

+
+ +
+
+
💬
+

Share Your Experience

+

+ Share your behavioral interview experiences, both successes and challenges +

+
+
+
📝
+

Suggest Resources

+

+ Recommend helpful videos, articles, or tools you've found useful +

+
+
+
🔧
+

Improve Content

+

+ Help us add more examples, questions, or improve existing content +

+
+
+ +
+

How to Contribute

+
+
+
🚀 Quick Ways to Help
+
    +
  • + + + Join our Discord community and share tips + +
    • +
  • + + + Submit interview questions you've encountered + +
    • +
  • + + + Review and suggest improvements to examples + +
    • +
  • + + + Share company-specific behavioral interview tips + +
    • +
+
+
+
📋 Getting Started
+
+ + Join Discord Community + + + Contributing Guide + +
+
+
+
+ )} {/* Companies Tab */} - {activeTab === 'companies' && ( - + {activeTab === "companies" && ( + -

- Company-Specific Preparation -

-

- Tailored strategies for top tech companies -

+

Company-Specific Preparation

+

Tailored strategies for top tech companies
@@ -528,17 +965,13 @@ const InterviewPrepPage: React.FC = () => { >
{company.company}
-

- {company.company} -

-

- Focus: {company.focus} -

+

{company.company}

+

Focus: {company.focus}

@@ -572,19 +1005,11 @@ const InterviewPrepPage: React.FC = () => { )} {/* Practice Tab */} - {activeTab === 'practice' && ( - + {activeTab === "practice" && ( + -

- Mock Interview Practice -

-

- Practice with real interview questions -

+

Mock Interview Practice

+

Practice with real interview questions
@@ -595,47 +1020,47 @@ const InterviewPrepPage: React.FC = () => { variants={fadeIn} >
- + {question.type.charAt(0).toUpperCase() + question.type.slice(1)} {question.difficulty && ( - + {question.difficulty} )}
- -

- {question.question} -

- + +

{question.question}

+ {question.framework && ( -

- Framework: {question.framework} -

+

Framework: {question.framework}

)} - +
- + {selectedQuestion === index && (

Hints:

@@ -648,7 +1073,7 @@ const InterviewPrepPage: React.FC = () => {
)} - + @@ -657,13 +1082,8 @@ const InterviewPrepPage: React.FC = () => {
{/* Practice Tools */} - -

- Practice Tools -

+ +

Practice Tools

⏱️
@@ -682,9 +1102,7 @@ const InterviewPrepPage: React.FC = () => {
📊

Progress Tracking

-

- Track your improvement over time -

+

Track your improvement over time

@@ -701,22 +1119,13 @@ const InterviewPrepPage: React.FC = () => { variants={staggerContainer} >
- + Ready to Land Your Dream Job? - + Join thousands of developers who have successfully prepared for interviews with RecodeHive - + {
- ); -}; + ) +} -export default InterviewPrepPage; \ No newline at end of file +export default InterviewPrepPage diff --git a/static/img/Behavioural_Interviews1.png b/static/img/Behavioural_Interviews1.png new file mode 100644 index 00000000..2f4d2b11 Binary files /dev/null and b/static/img/Behavioural_Interviews1.png differ diff --git a/static/img/Behavioural_Interviews2.png b/static/img/Behavioural_Interviews2.png new file mode 100644 index 00000000..68aedb67 Binary files /dev/null and b/static/img/Behavioural_Interviews2.png differ diff --git a/static/img/Behavioural_Interviews3.png b/static/img/Behavioural_Interviews3.png new file mode 100644 index 00000000..99d03154 Binary files /dev/null and b/static/img/Behavioural_Interviews3.png differ