-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlint_cmd.json
More file actions
1 lines (1 loc) · 128 KB
/
Copy pathlint_cmd.json
File metadata and controls
1 lines (1 loc) · 128 KB
1
[{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\app\\api\\auth\\[...nextauth]\\route.js","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\app\\api\\coach\\route.js","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\app\\api\\resume\\route.js","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\app\\assessment\\page.jsx","messages":[{"ruleId":"react/no-unescaped-entities","severity":2,"message":"`\"` can be escaped with `"`, `“`, `"`, `”`.","line":442,"column":49,"nodeType":"JSXText","messageId":"unescapedEntityAlts","suggestions":[{"messageId":"replaceWithAlt","data":{"alt":"""},"fix":{"range":[21645,21696],"text":"\r\n Add ""},"desc":"Replace with `"`."},{"messageId":"replaceWithAlt","data":{"alt":"“"},"fix":{"range":[21645,21696],"text":"\r\n Add “"},"desc":"Replace with `“`."},{"messageId":"replaceWithAlt","data":{"alt":"""},"fix":{"range":[21645,21696],"text":"\r\n Add ""},"desc":"Replace with `"`."},{"messageId":"replaceWithAlt","data":{"alt":"”"},"fix":{"range":[21645,21696],"text":"\r\n Add ”"},"desc":"Replace with `”`."}]},{"ruleId":"react/no-unescaped-entities","severity":2,"message":"`\"` can be escaped with `"`, `“`, `"`, `”`.","line":442,"column":62,"nodeType":"JSXText","messageId":"unescapedEntityAlts","suggestions":[{"messageId":"replaceWithAlt","data":{"alt":"""},"fix":{"range":[21708,21767],"text":"" as custom skill\r\n "},"desc":"Replace with `"`."},{"messageId":"replaceWithAlt","data":{"alt":"“"},"fix":{"range":[21708,21767],"text":"“ as custom skill\r\n "},"desc":"Replace with `“`."},{"messageId":"replaceWithAlt","data":{"alt":"""},"fix":{"range":[21708,21767],"text":"" as custom skill\r\n "},"desc":"Replace with `"`."},{"messageId":"replaceWithAlt","data":{"alt":"”"},"fix":{"range":[21708,21767],"text":"” as custom skill\r\n "},"desc":"Replace with `”`."}]}],"suppressedMessages":[],"errorCount":2,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"source":"'use client'\r\nimport { useState } from 'react'\r\nimport { useRouter } from 'next/navigation'\r\n\r\nconst QUICK_SKILLS = [\r\n // Programming Languages\r\n 'python', 'javascript', 'java', 'c', 'c++', 'c#', 'typescript',\r\n 'kotlin', 'swift', 'go', 'rust', 'php', 'ruby', 'scala', 'r',\r\n 'matlab', 'perl', 'haskell', 'elixir', 'dart', 'lua', 'julia',\r\n 'assembly', 'cobol', 'fortran', 'groovy', 'clojure', 'erlang',\r\n\r\n // Frontend\r\n 'react', 'nextjs', 'vue', 'nuxtjs', 'angular', 'svelte',\r\n 'html', 'css', 'sass', 'tailwind', 'bootstrap', 'materialui',\r\n 'jquery', 'redux', 'graphql', 'webpack', 'vite', 'babel',\r\n 'storybook', 'framer-motion', 'threejs', 'webgl', 'pwa',\r\n\r\n // Backend\r\n 'nodejs', 'express', 'nestjs', 'django', 'flask', 'fastapi',\r\n 'spring', 'springboot', 'laravel', 'rails', 'aspnet', 'gin',\r\n 'fiber', 'phoenix', 'strapi', 'hasura', 'graphql-server',\r\n\r\n // Mobile\r\n 'react-native', 'flutter', 'android', 'ios', 'swift-ui',\r\n 'jetpack-compose', 'xamarin', 'ionic', 'cordova', 'expo',\r\n\r\n // Database\r\n 'sql', 'mysql', 'postgresql', 'sqlite', 'mongodb', 'redis',\r\n 'cassandra', 'dynamodb', 'firebase', 'supabase', 'neo4j',\r\n 'elasticsearch', 'couchdb', 'influxdb', 'mariadb', 'oracle-db',\r\n 'snowflake', 'bigquery', 'prisma', 'sequelize', 'mongoose',\r\n\r\n // Cloud & DevOps\r\n 'aws', 'azure', 'gcp', 'docker', 'kubernetes', 'terraform',\r\n 'ansible', 'jenkins', 'github-actions', 'circleci', 'gitlab-ci',\r\n 'linux', 'bash', 'powershell', 'nginx', 'apache', 'vercel',\r\n 'netlify', 'heroku', 'digitalocean', 'cloudflare', 'pulumi',\r\n 'vagrant', 'prometheus', 'grafana', 'elk-stack', 'istio',\r\n\r\n // AI & Machine Learning\r\n 'machine-learning', 'deep-learning', 'nlp', 'computer-vision',\r\n 'tensorflow', 'pytorch', 'keras', 'scikit-learn', 'opencv',\r\n 'huggingface', 'langchain', 'openai-api', 'stable-diffusion',\r\n 'reinforcement-learning', 'data-science', 'feature-engineering',\r\n 'model-deployment', 'mlops', 'llm', 'rag', 'fine-tuning',\r\n\r\n // Data & Analytics\r\n 'pandas', 'numpy', 'matplotlib', 'seaborn', 'plotly',\r\n 'tableau', 'powerbi', 'looker', 'excel', 'google-analytics',\r\n 'statistics', 'data-analysis', 'data-visualization',\r\n 'data-engineering', 'etl', 'apache-spark', 'hadoop', 'kafka',\r\n 'airflow', 'dbt', 'data-warehousing', 'business-intelligence',\r\n\r\n // Cybersecurity\r\n 'network-security', 'penetration-testing', 'ethical-hacking',\r\n 'cryptography', 'soc', 'siem', 'vulnerability-assessment',\r\n 'owasp', 'firewalls', 'vpn', 'iam', 'zero-trust',\r\n 'malware-analysis', 'incident-response', 'forensics', 'ctf',\r\n\r\n // Design & Creative\r\n 'figma', 'adobe-xd', 'sketch', 'invision', 'zeplin',\r\n 'photoshop', 'illustrator', 'indesign', 'after-effects',\r\n 'premiere-pro', 'blender', 'cinema4d', 'canva',\r\n 'ui-design', 'ux-design', 'ux-research', 'wireframing',\r\n 'prototyping', 'design-systems', 'accessibility', 'motion-design',\r\n\r\n // Testing & QA\r\n 'unit-testing', 'integration-testing', 'e2e-testing',\r\n 'jest', 'cypress', 'selenium', 'playwright', 'pytest',\r\n 'junit', 'testng', 'postman', 'k6', 'jmeter', 'tdd', 'bdd',\r\n\r\n // Blockchain & Web3\r\n 'blockchain', 'solidity', 'ethereum', 'web3js', 'ethersjs',\r\n 'smart-contracts', 'nft', 'defi', 'hardhat', 'truffle',\r\n 'ipfs', 'polygon', 'solana', 'rust-blockchain',\r\n\r\n // Game Development\r\n 'unity', 'unreal-engine', 'godot', 'game-design',\r\n 'c++-games', 'opengl', 'directx', 'vulkan', 'ar', 'vr',\r\n 'xr', 'game-physics', 'shader-programming',\r\n\r\n // Project Management & Soft Skills\r\n 'agile', 'scrum', 'kanban', 'jira', 'confluence', 'trello',\r\n 'project-management', 'product-management', 'roadmapping',\r\n 'stakeholder-management', 'risk-management', 'pmp',\r\n\r\n // Communication & Leadership\r\n 'communication', 'leadership', 'teamwork', 'mentoring',\r\n 'public-speaking', 'technical-writing', 'documentation',\r\n 'problem-solving', 'critical-thinking', 'decision-making',\r\n 'negotiation', 'conflict-resolution', 'emotional-intelligence',\r\n\r\n // Business & Marketing\r\n 'business-analysis', 'market-research', 'seo', 'sem',\r\n 'social-media-marketing', 'content-marketing', 'email-marketing',\r\n 'growth-hacking', 'crm', 'salesforce', 'hubspot',\r\n 'financial-modeling', 'excel-advanced', 'powerpoint',\r\n\r\n // Networking\r\n 'tcp-ip', 'dns', 'http', 'rest-api', 'grpc', 'websockets',\r\n 'microservices', 'system-design', 'load-balancing',\r\n 'cdn', 'oauth', 'jwt', 'api-design', 'swagger',\r\n\r\n // Embedded & IoT\r\n 'arduino', 'raspberry-pi', 'embedded-c', 'rtos',\r\n 'iot', 'mqtt', 'can-bus', 'arm-cortex', 'fpga', 'vhdl',\r\n]\r\n\r\nconst APTITUDE_DIMS = [\r\n 'Logical', 'Analytical', 'Technical',\r\n 'Creative', 'Communication', 'Leadership', 'Mathematical'\r\n]\r\n\r\nexport default function AssessmentPage() {\r\n const router = useRouter()\r\n const [step, setStep] = useState(1)\r\n const [cgpa, setCgpa] = useState(3.0)\r\n const [education, setEducation] = useState(\"Bachelor's\")\r\n const [skillInput, setSkillInput] = useState('')\r\n const [skills, setSkills] = useState([])\r\n // skills is now array of { name, level }\r\n // e.g. [{ name: 'python', level: 'intermediate' }]\r\n const [aptitude, setAptitude] = useState(\r\n Object.fromEntries(APTITUDE_DIMS.map(d => [d, 50]))\r\n )\r\n\r\n const addSkill = (s) => {\r\n const val = s.trim().toLowerCase()\r\n if (val && !skills.find(sk => sk.name === val)) {\r\n setSkills([...skills, { name: val, level: 'intermediate' }])\r\n }\r\n setSkillInput('')\r\n }\r\n\r\n const removeSkill = (name) =>\r\n setSkills(skills.filter(x => x.name !== name))\r\n\r\n const updateSkillLevel = (name, level) =>\r\n setSkills(skills.map(sk =>\r\n sk.name === name ? { ...sk, level } : sk\r\n ))\r\n\r\n const complete = () => {\r\n localStorage.setItem('skillgap-assessment', JSON.stringify({\r\n cgpa, education, skills, aptitude\r\n }))\r\n router.push('/results')\r\n }\r\n\r\n const progress = step === 1 ? 33 : step === 2 ? 66 : 100\r\n\r\n return (\r\n <div style={{\r\n minHeight: '100vh',\r\n background: '#070b16',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n padding: '80px 24px 48px',\r\n position: 'relative',\r\n }}>\r\n {/* Blue glow */}\r\n <div style={{\r\n position: 'fixed',\r\n top: '30%',\r\n left: '50%',\r\n transform: 'translate(-50%,-50%)',\r\n width: '600px',\r\n height: '400px',\r\n background: 'radial-gradient(ellipse, rgba(59,130,246,0.12) 0%, transparent 70%)',\r\n pointerEvents: 'none',\r\n }} />\r\n\r\n {/* Card */}\r\n <div style={{\r\n width: '100%',\r\n maxWidth: '620px',\r\n background: '#0d1526',\r\n border: '1px solid rgba(59,130,246,0.15)',\r\n borderRadius: '20px',\r\n padding: '40px',\r\n boxShadow: '0 24px 64px rgba(0,0,0,0.5)',\r\n animation: 'fadeIn 0.4s ease',\r\n position: 'relative',\r\n zIndex: 1,\r\n }}>\r\n\r\n {/* Progress */}\r\n <div style={{ marginBottom: '32px' }}>\r\n <div style={{\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n marginBottom: '10px',\r\n }}>\r\n <span style={{ color: '#94a3b8', fontSize: '14px' }}>\r\n Step {step} of 3\r\n </span>\r\n <span style={{ color: '#3b82f6', fontSize: '14px', fontWeight: 600 }}>\r\n {progress}% Complete\r\n </span>\r\n </div>\r\n <div style={{\r\n height: '6px',\r\n background: 'rgba(255,255,255,0.08)',\r\n borderRadius: '999px',\r\n overflow: 'hidden',\r\n }}>\r\n <div style={{\r\n height: '100%',\r\n width: `${progress}%`,\r\n background: 'linear-gradient(90deg, #3b82f6, #60a5fa)',\r\n borderRadius: '999px',\r\n transition: 'width 0.5s ease',\r\n }} />\r\n </div>\r\n </div>\r\n\r\n {/* ── STEP 1 ── */}\r\n {step === 1 && (\r\n <div style={{ animation: 'fadeIn 0.3s ease' }}>\r\n <div style={{ textAlign: 'center', marginBottom: '32px' }}>\r\n <div style={{ fontSize: '48px', marginBottom: '12px' }}>🎓</div>\r\n <h2 style={{\r\n fontFamily: 'Syne, sans-serif',\r\n fontSize: '28px',\r\n fontWeight: 800,\r\n color: 'white',\r\n marginBottom: '8px',\r\n }}>Academic Background</h2>\r\n <p style={{ color: '#94a3b8', fontSize: '15px' }}>\r\n Tell us about your education\r\n </p>\r\n </div>\r\n\r\n {/* CGPA */}\r\n <div style={{ marginBottom: '28px' }}>\r\n <div style={{\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n marginBottom: '12px',\r\n }}>\r\n <label style={{ color: '#e2e8f0', fontWeight: 600 }}>\r\n CGPA / GPA (out of 4.0)\r\n </label>\r\n <span style={{\r\n fontSize: '24px',\r\n fontWeight: 800,\r\n color: '#3b82f6',\r\n fontFamily: 'Syne, sans-serif',\r\n }}>\r\n {cgpa.toFixed(1)}\r\n </span>\r\n </div>\r\n <input\r\n type=\"range\" min=\"0\" max=\"4\" step=\"0.1\"\r\n value={cgpa}\r\n onChange={e => setCgpa(parseFloat(e.target.value))}\r\n style={{ width: '100%', accentColor: '#3b82f6', height: '6px' }}\r\n />\r\n </div>\r\n\r\n {/* Education */}\r\n <div style={{ marginBottom: '32px' }}>\r\n <label style={{\r\n display: 'block',\r\n color: '#e2e8f0',\r\n fontWeight: 600,\r\n marginBottom: '10px',\r\n }}>\r\n Education Level\r\n </label>\r\n <select\r\n value={education}\r\n onChange={e => setEducation(e.target.value)}\r\n style={{\r\n width: '100%',\r\n background: '#111827',\r\n color: 'white',\r\n border: '1px solid rgba(255,255,255,0.1)',\r\n borderRadius: '10px',\r\n padding: '12px 16px',\r\n fontSize: '15px',\r\n cursor: 'pointer',\r\n }}\r\n >\r\n {[\"High School\", \"Bachelor's\", \"Master's\", \"PhD\"].map(o => (\r\n <option key={o} value={o}>{o}</option>\r\n ))}\r\n </select>\r\n </div>\r\n\r\n <button\r\n onClick={() => setStep(2)}\r\n style={{\r\n width: '100%',\r\n background: 'linear-gradient(135deg, #3b82f6, #2563eb)',\r\n color: 'white',\r\n border: 'none',\r\n borderRadius: '12px',\r\n padding: '14px',\r\n fontSize: '16px',\r\n fontWeight: 700,\r\n cursor: 'pointer',\r\n transition: 'transform 0.2s, box-shadow 0.2s',\r\n boxShadow: '0 4px 20px rgba(59,130,246,0.4)',\r\n }}\r\n onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}\r\n onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}\r\n >\r\n Next →\r\n </button>\r\n </div>\r\n )}\r\n\r\n {/* ── STEP 2 ── */}\r\n {step === 2 && (\r\n <div style={{ animation: 'fadeIn 0.3s ease' }}>\r\n <div style={{ textAlign: 'center', marginBottom: '32px' }}>\r\n <div style={{ fontSize: '48px', marginBottom: '12px' }}>💡</div>\r\n <h2 style={{\r\n fontFamily: 'Syne, sans-serif',\r\n fontSize: '28px',\r\n fontWeight: 800,\r\n color: 'white',\r\n marginBottom: '8px',\r\n }}>Your Skills</h2>\r\n <p style={{ color: '#94a3b8', fontSize: '15px' }}>\r\n Add your technical and soft skills\r\n </p>\r\n </div>\r\n\r\n {/* Input */}\r\n {/* Search Input with Autocomplete */}\r\n <div style={{ position: 'relative', marginBottom: '16px' }}>\r\n <div style={{ display: 'flex', gap: '10px' }}>\r\n <input\r\n value={skillInput}\r\n onChange={e => setSkillInput(e.target.value)}\r\n onKeyDown={e => {\r\n if (e.key === 'Enter' && skillInput.trim()) addSkill(skillInput)\r\n if (e.key === 'Escape') setSkillInput('')\r\n }}\r\n placeholder=\"🔍 Search or type any skill...\"\r\n style={{\r\n flex: 1,\r\n background: '#111827',\r\n color: 'white',\r\n border: '1px solid rgba(59,130,246,0.3)',\r\n borderRadius: '10px',\r\n padding: '14px 16px',\r\n fontSize: '15px',\r\n outline: 'none',\r\n }}\r\n />\r\n <button\r\n onClick={() => addSkill(skillInput)}\r\n style={{\r\n background: '#3b82f6',\r\n color: 'white',\r\n border: 'none',\r\n borderRadius: '10px',\r\n padding: '14px 20px',\r\n fontWeight: 700,\r\n cursor: 'pointer',\r\n }}\r\n >\r\n Add\r\n </button>\r\n </div>\r\n\r\n {/* Autocomplete Dropdown */}\r\n {skillInput.trim().length > 0 && (\r\n <div style={{\r\n position: 'absolute',\r\n top: '100%',\r\n left: 0,\r\n right: '70px',\r\n background: '#0d1526',\r\n border: '1px solid rgba(59,130,246,0.2)',\r\n borderRadius: '10px',\r\n marginTop: '6px',\r\n zIndex: 100,\r\n overflow: 'hidden',\r\n boxShadow: '0 8px 32px rgba(0,0,0,0.4)',\r\n maxHeight: '220px',\r\n overflowY: 'auto',\r\n }}>\r\n {QUICK_SKILLS\r\n .filter(s =>\r\n s.toLowerCase().includes(skillInput.toLowerCase()) &&\r\n !skills.find(sk => sk.name === s)\r\n )\r\n .sort((a, b) => {\r\n const query = skillInput.toLowerCase()\r\n const aStarts = a.toLowerCase().startsWith(query)\r\n const bStarts = b.toLowerCase().startsWith(query)\r\n if (aStarts && !bStarts) return -1\r\n if (!aStarts && bStarts) return 1\r\n return a.localeCompare(b)\r\n })\r\n .slice(0, 6)\r\n .map(s => (\r\n <div\r\n key={s}\r\n onClick={() => { addSkill(s); setSkillInput('') }}\r\n style={{\r\n padding: '10px 16px',\r\n cursor: 'pointer',\r\n color: '#e2e8f0',\r\n fontSize: '14px',\r\n borderBottom: '1px solid rgba(255,255,255,0.04)',\r\n transition: 'background 0.15s',\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '8px',\r\n }}\r\n onMouseEnter={e => e.currentTarget.style.background = 'rgba(59,130,246,0.1)'}\r\n onMouseLeave={e => e.currentTarget.style.background = 'transparent'}\r\n >\r\n <span style={{ color: '#3b82f6' }}>+</span>\r\n {s}\r\n </div>\r\n ))\r\n }\r\n {/* Allow custom skill if not in list */}\r\n {!QUICK_SKILLS.some(s => s.toLowerCase() === skillInput.toLowerCase()) && (\r\n <div\r\n onClick={() => { addSkill(skillInput); setSkillInput('') }}\r\n style={{\r\n padding: '10px 16px',\r\n cursor: 'pointer',\r\n color: '#22c55e',\r\n fontSize: '14px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '8px',\r\n }}\r\n onMouseEnter={e => e.currentTarget.style.background = 'rgba(34,197,94,0.1)'}\r\n onMouseLeave={e => e.currentTarget.style.background = 'transparent'}\r\n >\r\n <span>✨</span>\r\n Add \"{skillInput}\" as custom skill\r\n </div>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n\r\n {/* Popular Skills — show only when input is empty */}\r\n {skillInput.trim().length === 0 && (\r\n <div style={{ marginBottom: '20px' }}>\r\n <p style={{ color: '#64748b', fontSize: '13px', marginBottom: '10px' }}>\r\n Popular skills:\r\n </p>\r\n <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>\r\n {['python', 'javascript', 'react', 'sql', 'java',\r\n 'figma', 'docker', 'aws', 'machine-learning',\r\n 'communication', 'leadership', 'nodejs'].map(s => (\r\n <button\r\n key={s}\r\n onClick={() => addSkill(s)}\r\n disabled={!!skills.find(sk => sk.name === s)}\r\n style={{\r\n background: skills.find(sk => sk.name === s) ? 'rgba(59,130,246,0.2)'\r\n : 'rgba(255,255,255,0.04)',\r\n color: skills.find(sk => sk.name === s) ? '#60a5fa' : '#94a3b8',\r\n border: `1px solid skills.find(sk => sk.name === s) ?\r\n 'rgba(59,130,246,0.3)'\r\n : 'rgba(255,255,255,0.08)'}`,\r\n borderRadius: '999px',\r\n padding: '6px 14px',\r\n fontSize: '13px',\r\n cursor: skills.includes(s) ? 'default' : 'pointer',\r\n transition: 'all 0.2s',\r\n }}\r\n >\r\n {skills.includes(s) ? '✓' : '+'} {s}\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n )}\r\n\r\n\r\n {/* Added skills with proficiency */}\r\n {skills.length > 0 && (\r\n <div style={{\r\n background: 'rgba(255,255,255,0.03)',\r\n border: '1px solid rgba(255,255,255,0.06)',\r\n borderRadius: '12px',\r\n padding: '16px',\r\n marginBottom: '24px',\r\n }}>\r\n <p style={{ color: '#64748b', fontSize: '13px', marginBottom: '12px' }}>\r\n Rate your proficiency for each skill:\r\n </p>\r\n {skills.map(skill => (\r\n <div key={skill.name} style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n marginBottom: '10px',\r\n flexWrap: 'wrap',\r\n gap: '8px',\r\n }}>\r\n <div style={{ display: 'flex', alignItems: 'center', gap: '8px', minWidth: '120px' }}>\r\n <span\r\n onClick={() => removeSkill(skill.name)}\r\n style={{ cursor: 'pointer', color: '#ef4444', fontSize: '16px' }}\r\n >×</span>\r\n <span style={{ color: '#e2e8f0', fontSize: '14px', fontWeight: 500 }}>\r\n {skill.name}\r\n </span>\r\n </div>\r\n <div style={{ display: 'flex', gap: '6px' }}>\r\n {[\r\n { level: 'beginner', label: 'Beginner', color: '#94a3b8' },\r\n { level: 'intermediate', label: 'Intermediate', color: '#3b82f6' },\r\n { level: 'advanced', label: 'Advanced', color: '#f59e0b' },\r\n { level: 'expert', label: 'Expert', color: '#22c55e' },\r\n ].map(({ level, label, color }) => (\r\n <button\r\n key={level}\r\n onClick={() => updateSkillLevel(skill.name, level)}\r\n style={{\r\n padding: '4px 10px',\r\n borderRadius: '999px',\r\n border: `1px solid ${skill.level === level ? color : 'rgba(255,255,255,0.1)'}`,\r\n background: skill.level === level ? `${color}20` : 'transparent',\r\n color: skill.level === level ? color : '#64748b',\r\n fontSize: '11px',\r\n fontWeight: 600,\r\n cursor: 'pointer',\r\n transition: 'all 0.2s',\r\n }}\r\n >\r\n {label}\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n ))}\r\n </div>\r\n )}\r\n\r\n <div style={{ display: 'flex', gap: '12px' }}>\r\n <button\r\n onClick={() => setStep(1)}\r\n style={{\r\n flex: 1,\r\n background: 'rgba(255,255,255,0.05)',\r\n color: '#94a3b8',\r\n border: '1px solid rgba(255,255,255,0.1)',\r\n borderRadius: '12px',\r\n padding: '14px',\r\n fontSize: '15px',\r\n cursor: 'pointer',\r\n }}\r\n >\r\n ← Previous\r\n </button>\r\n <button\r\n onClick={() => setStep(3)}\r\n style={{\r\n flex: 2,\r\n background: 'linear-gradient(135deg, #3b82f6, #2563eb)',\r\n color: 'white',\r\n border: 'none',\r\n borderRadius: '12px',\r\n padding: '14px',\r\n fontSize: '15px',\r\n fontWeight: 700,\r\n cursor: 'pointer',\r\n boxShadow: '0 4px 20px rgba(59,130,246,0.4)',\r\n }}\r\n >\r\n Next →\r\n </button>\r\n </div>\r\n </div>\r\n )}\r\n\r\n {/* ── STEP 3 ── */}\r\n {step === 3 && (\r\n <div style={{ animation: 'fadeIn 0.3s ease' }}>\r\n <div style={{ textAlign: 'center', marginBottom: '32px' }}>\r\n <div style={{ fontSize: '48px', marginBottom: '12px' }}>🧠</div>\r\n <h2 style={{\r\n fontFamily: 'Syne, sans-serif',\r\n fontSize: '28px',\r\n fontWeight: 800,\r\n color: 'white',\r\n marginBottom: '8px',\r\n }}>Aptitude Assessment</h2>\r\n <p style={{ color: '#94a3b8', fontSize: '15px' }}>\r\n Rate yourself on each dimension (0–100)\r\n </p>\r\n </div>\r\n\r\n <div style={{ marginBottom: '32px' }}>\r\n {APTITUDE_DIMS.map(dim => (\r\n <div key={dim} style={{ marginBottom: '20px' }}>\r\n <div style={{\r\n display: 'flex',\r\n justifyContent: 'space-between',\r\n marginBottom: '8px',\r\n }}>\r\n <span style={{ color: '#e2e8f0', fontWeight: 500 }}>\r\n {dim}\r\n </span>\r\n <span style={{\r\n color: '#3b82f6',\r\n fontWeight: 700,\r\n fontSize: '16px',\r\n minWidth: '36px',\r\n textAlign: 'right',\r\n }}>\r\n {aptitude[dim]}\r\n </span>\r\n </div>\r\n <input\r\n type=\"range\" min=\"0\" max=\"100\" step=\"1\"\r\n value={aptitude[dim]}\r\n onChange={e => setAptitude({\r\n ...aptitude,\r\n [dim]: parseInt(e.target.value)\r\n })}\r\n style={{\r\n width: '100%',\r\n accentColor: '#3b82f6',\r\n height: '6px',\r\n }}\r\n />\r\n </div>\r\n ))}\r\n </div>\r\n\r\n <div style={{ display: 'flex', gap: '12px' }}>\r\n <button\r\n onClick={() => setStep(2)}\r\n style={{\r\n flex: 1,\r\n background: 'rgba(255,255,255,0.05)',\r\n color: '#94a3b8',\r\n border: '1px solid rgba(255,255,255,0.1)',\r\n borderRadius: '12px',\r\n padding: '14px',\r\n fontSize: '15px',\r\n cursor: 'pointer',\r\n }}\r\n >\r\n ← Previous\r\n </button>\r\n <button\r\n onClick={complete}\r\n style={{\r\n flex: 2,\r\n background: 'linear-gradient(135deg, #22c55e, #16a34a)',\r\n color: 'white',\r\n border: 'none',\r\n borderRadius: '12px',\r\n padding: '14px',\r\n fontSize: '15px',\r\n fontWeight: 700,\r\n cursor: 'pointer',\r\n boxShadow: '0 4px 20px rgba(34,197,94,0.4)',\r\n }}\r\n >\r\n ✓ Complete Assessment\r\n </button>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n )\r\n}","usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\app\\dashboard\\page.jsx","messages":[{"ruleId":"@next/next/no-img-element","severity":1,"message":"Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element","line":153,"column":21,"nodeType":"JSXOpeningElement","endLine":161,"endColumn":23}],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"'use client'\r\nimport { useSession } from 'next-auth/react'\r\nimport { useRouter } from 'next/navigation'\r\nimport { useEffect } from 'react'\r\n\r\nexport default function DashboardPage() {\r\n const { data: session, status } = useSession()\r\n const router = useRouter()\r\n\r\n useEffect(() => {\r\n if (status === 'unauthenticated') {\r\n router.push('/login')\r\n }\r\n }, [status, router])\r\n\r\n if (status === 'loading') {\r\n return (\r\n <div style={{\r\n minHeight: '100vh',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n background: '#070b16',\r\n }}>\r\n <p style={{ color: '#94a3b8' }}>Loading...</p>\r\n </div>\r\n )\r\n }\r\n\r\n return (\r\n <div style={{\r\n minHeight: '100vh',\r\n background: '#070b16',\r\n paddingTop: '80px',\r\n padding: '80px 32px 48px',\r\n maxWidth: '1100px',\r\n margin: '0 auto',\r\n }}>\r\n {/* Welcome */}\r\n <div style={{ marginBottom: '40px' }}>\r\n <h1 style={{\r\n fontFamily: 'Syne, sans-serif',\r\n fontSize: '36px',\r\n fontWeight: 800,\r\n color: 'white',\r\n marginBottom: '8px',\r\n }}>\r\n Welcome back, {session?.user?.name?.split(' ')[0]}! 👋\r\n </h1>\r\n <p style={{ color: '#94a3b8', fontSize: '16px' }}>\r\n Ready to discover your perfect career path?\r\n </p>\r\n </div>\r\n\r\n {/* Quick Action Cards */}\r\n <div style={{\r\n display: 'grid',\r\n gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',\r\n gap: '16px',\r\n marginBottom: '48px',\r\n }}>\r\n {[\r\n {\r\n icon: '🎯',\r\n title: 'Start Assessment',\r\n desc: 'Discover your career compatibility score',\r\n href: '/assessment',\r\n color: '#3b82f6',\r\n },\r\n {\r\n icon: '📄',\r\n title: 'Resume Analyzer',\r\n desc: 'Get your ATS score and improvements',\r\n href: '/resume',\r\n color: '#22c55e',\r\n badge: 'NEW',\r\n },\r\n {\r\n icon: '🤖',\r\n title: 'AI Career Coach',\r\n desc: 'Chat with your personal AI coach',\r\n href: '/results',\r\n color: '#a855f7',\r\n },\r\n ].map((card) => (\r\n <div\r\n key={card.title}\r\n onClick={() => router.push(card.href)}\r\n style={{\r\n background: '#0d1526',\r\n border: '1px solid rgba(255,255,255,0.06)',\r\n borderRadius: '12px',\r\n padding: '24px',\r\n cursor: 'pointer',\r\n transition: 'all 0.2s',\r\n }}\r\n onMouseEnter={e => {\r\n e.currentTarget.style.borderColor = card.color + '40'\r\n e.currentTarget.style.transform = 'translateY(-2px)'\r\n }}\r\n onMouseLeave={e => {\r\n e.currentTarget.style.borderColor = 'rgba(255,255,255,0.06)'\r\n e.currentTarget.style.transform = 'translateY(0)'\r\n }}\r\n >\r\n <div style={{ fontSize: '32px', marginBottom: '12px' }}>\r\n {card.icon}\r\n </div>\r\n <div style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '8px',\r\n marginBottom: '6px',\r\n }}>\r\n <h3 style={{\r\n fontSize: '16px',\r\n fontWeight: 700,\r\n color: 'white',\r\n }}>\r\n {card.title}\r\n </h3>\r\n {card.badge && (\r\n <span style={{\r\n fontSize: '10px',\r\n padding: '2px 8px',\r\n borderRadius: '999px',\r\n background: 'rgba(59,130,246,0.2)',\r\n color: '#60a5fa',\r\n fontWeight: 600,\r\n }}>\r\n {card.badge}\r\n </span>\r\n )}\r\n </div>\r\n <p style={{ color: '#94a3b8', fontSize: '13px' }}>\r\n {card.desc}\r\n </p>\r\n </div>\r\n ))}\r\n </div>\r\n\r\n {/* User Info Card */}\r\n <div style={{\r\n background: '#0d1526',\r\n border: '1px solid rgba(255,255,255,0.06)',\r\n borderRadius: '12px',\r\n padding: '24px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '16px',\r\n }}>\r\n {session?.user?.image && (\r\n <img\r\n src={session.user.image}\r\n alt=\"avatar\"\r\n style={{\r\n width: '48px',\r\n height: '48px',\r\n borderRadius: '50%',\r\n }}\r\n />\r\n )}\r\n <div>\r\n <p style={{ fontWeight: 700, color: 'white' }}>\r\n {session?.user?.name}\r\n </p>\r\n <p style={{ color: '#94a3b8', fontSize: '13px' }}>\r\n {session?.user?.email}\r\n </p>\r\n </div>\r\n <div style={{ marginLeft: 'auto' }}>\r\n <span style={{\r\n padding: '4px 12px',\r\n borderRadius: '999px',\r\n background: 'rgba(34,197,94,0.15)',\r\n color: '#22c55e',\r\n fontSize: '12px',\r\n fontWeight: 600,\r\n border: '1px solid rgba(34,197,94,0.3)',\r\n }}>\r\n ✓ Logged In\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n )\r\n}","usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\app\\layout.jsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\app\\login\\page.jsx","messages":[{"ruleId":"@next/next/no-html-link-for-pages","severity":2,"message":"Do not use an `<a>` element to navigate to `/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages","line":340,"column":21,"nodeType":"JSXOpeningElement","endLine":350,"endColumn":22}],"suppressedMessages":[],"errorCount":1,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"source":"'use client';\r\n\r\nimport { useEffect, useRef } from 'react';\r\nimport { signIn } from 'next-auth/react';\r\n\r\n// ─── Matrix Background Canvas ─────────────────────────────\r\nfunction MatrixBackground() {\r\n const canvasRef = useRef(null);\r\n\r\n useEffect(() => {\r\n const canvas = canvasRef.current;\r\n if (!canvas) return;\r\n const ctx = canvas.getContext('2d');\r\n\r\n // Characters to display\r\n const chars = 'アイウエオカキクケコサシスセソタチツテトナニヌネノ0123456789ABCDEF{}[]<>/\\\\|;:'.split('');\r\n\r\n const fontSize = 13;\r\n let columns, drops;\r\n\r\n function init() {\r\n canvas.width = window.innerWidth;\r\n canvas.height = window.innerHeight;\r\n columns = Math.floor(canvas.width / fontSize);\r\n drops = Array(columns).fill(1);\r\n }\r\n\r\n function draw() {\r\n // Fade effect — very subtle trail\r\n ctx.fillStyle = 'rgba(7, 11, 22, 0.08)';\r\n ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n\r\n // Character color — very dim blue/teal\r\n ctx.font = `${fontSize}px monospace`;\r\n\r\n drops.forEach((y, i) => {\r\n // Leading char slightly brighter\r\n const isHead = Math.random() > 0.97;\r\n ctx.fillStyle = isHead\r\n ? 'rgba(99, 179, 237, 0.25)' // bright blue head\r\n : 'rgba(59, 130, 246, 0.06)'; // very dim blue body\r\n\r\n const char = chars[Math.floor(Math.random() * chars.length)];\r\n ctx.fillText(char, i * fontSize, y * fontSize);\r\n\r\n // Reset drop randomly near bottom\r\n if (y * fontSize > canvas.height && Math.random() > 0.975) {\r\n drops[i] = 0;\r\n }\r\n drops[i]++;\r\n });\r\n }\r\n\r\n init();\r\n const interval = setInterval(draw, 55);\r\n const onResize = () => { init(); };\r\n window.addEventListener('resize', onResize);\r\n\r\n return () => {\r\n clearInterval(interval);\r\n window.removeEventListener('resize', onResize);\r\n };\r\n }, []);\r\n\r\n return (\r\n <canvas\r\n ref={canvasRef}\r\n style={{\r\n position: 'fixed',\r\n top: 0,\r\n left: 0,\r\n width: '100%',\r\n height: '100%',\r\n zIndex: 0,\r\n pointerEvents: 'none',\r\n }}\r\n />\r\n );\r\n}\r\n\r\n// ─── Google \"G\" SVG Icon ──────────────────────────────────\r\nfunction GoogleIcon() {\r\n return (\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\" fill=\"#4285F4\" />\r\n <path d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\" fill=\"#34A853\" />\r\n <path d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z\" fill=\"#FBBC05\" />\r\n <path d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\" fill=\"#EA4335\" />\r\n </svg>\r\n );\r\n}\r\n\r\n// ─── Login Page ───────────────────────────────────────────\r\nexport default function LoginPage() {\r\n const handleGoogleSignIn = () => {\r\n signIn('google', { callbackUrl: '/dashboard' });\r\n };\r\n\r\n return (\r\n <div\r\n style={{\r\n minHeight: '100dvh',\r\n background: '#070b16',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n position: 'relative',\r\n padding: '1.5rem',\r\n }}\r\n >\r\n {/* Subtle matrix background */}\r\n <MatrixBackground />\r\n\r\n {/* Ambient glow */}\r\n <div\r\n aria-hidden\r\n style={{\r\n position: 'fixed',\r\n top: '30%',\r\n left: '50%',\r\n transform: 'translate(-50%, -50%)',\r\n width: '500px',\r\n height: '400px',\r\n background: 'radial-gradient(ellipse, rgba(59,130,246,0.1) 0%, transparent 70%)',\r\n pointerEvents: 'none',\r\n zIndex: 1,\r\n }}\r\n />\r\n\r\n {/* Login Card */}\r\n <div\r\n style={{\r\n position: 'relative',\r\n zIndex: 2,\r\n width: '100%',\r\n maxWidth: '420px',\r\n background: 'rgba(13, 21, 38, 0.85)',\r\n backdropFilter: 'blur(24px)',\r\n WebkitBackdropFilter: 'blur(24px)',\r\n border: '1px solid rgba(59, 130, 246, 0.15)',\r\n borderRadius: '1.5rem',\r\n padding: 'clamp(2rem, 5vw, 2.75rem)',\r\n boxShadow: '0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.03)',\r\n animation: 'fadeIn 0.5s ease both',\r\n }}\r\n >\r\n {/* Logo */}\r\n <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '2rem' }}>\r\n <span style={{ fontSize: '1.5rem' }}>⚡</span>\r\n <span\r\n style={{\r\n fontFamily: 'var(--font-display)',\r\n fontWeight: 700,\r\n fontSize: '1.125rem',\r\n background: 'linear-gradient(135deg, #f1f5f9, #94a3b8)',\r\n WebkitBackgroundClip: 'text',\r\n WebkitTextFillColor: 'transparent',\r\n backgroundClip: 'text',\r\n }}\r\n >\r\n Skill Gap\r\n </span>\r\n </div>\r\n\r\n {/* Heading */}\r\n <h1\r\n style={{\r\n fontFamily: 'var(--font-display)',\r\n fontSize: '1.75rem',\r\n fontWeight: 700,\r\n color: '#f1f5f9',\r\n marginBottom: '0.5rem',\r\n letterSpacing: '-0.02em',\r\n lineHeight: 1.2,\r\n }}\r\n >\r\n Welcome to Skill Gap\r\n </h1>\r\n\r\n {/* Subtext */}\r\n <p\r\n style={{\r\n fontSize: '0.9375rem',\r\n color: 'var(--text-muted)',\r\n marginBottom: '2rem',\r\n lineHeight: 1.6,\r\n }}\r\n >\r\n Sign in to discover your career path\r\n </p>\r\n\r\n {/* Divider */}\r\n <div\r\n style={{\r\n height: '1px',\r\n background: 'linear-gradient(90deg, transparent, rgba(59,130,246,0.2), transparent)',\r\n marginBottom: '2rem',\r\n }}\r\n />\r\n\r\n {/* Google Sign In Button */}\r\n <button\r\n onClick={handleGoogleSignIn}\r\n style={{\r\n position: 'relative',\r\n width: '100%',\r\n padding: '14px 24px',\r\n borderRadius: '999px',\r\n border: '1px solid rgba(255,255,255,0.1)',\r\n background: 'white',\r\n color: '#0f172a',\r\n fontSize: '15px',\r\n fontWeight: 600,\r\n cursor: 'pointer',\r\n overflow: 'hidden',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n gap: '10px',\r\n }}\r\n onMouseEnter={e => {\r\n const dot = e.currentTarget.querySelector('.dot')\r\n const text = e.currentTarget.querySelector('.btn-text')\r\n const arrow = e.currentTarget.querySelector('.btn-arrow')\r\n if (dot) {\r\n dot.style.width = '100%'\r\n dot.style.height = '100%'\r\n dot.style.left = '0%'\r\n dot.style.top = '0%'\r\n dot.style.borderRadius = '999px'\r\n dot.style.transform = 'scale(1.8)'\r\n }\r\n if (text) {\r\n text.style.transform = 'translateX(48px)'\r\n text.style.opacity = '0'\r\n }\r\n if (arrow) {\r\n arrow.style.transform = 'translateX(0px)'\r\n arrow.style.opacity = '1'\r\n }\r\n }}\r\n onMouseLeave={e => {\r\n const dot = e.currentTarget.querySelector('.dot')\r\n const text = e.currentTarget.querySelector('.btn-text')\r\n const arrow = e.currentTarget.querySelector('.btn-arrow')\r\n if (dot) {\r\n dot.style.width = '8px'\r\n dot.style.height = '8px'\r\n dot.style.left = '20%'\r\n dot.style.top = '40%'\r\n dot.style.transform = 'scale(1)'\r\n }\r\n if (text) {\r\n text.style.transform = 'translateX(0px)'\r\n text.style.opacity = '1'\r\n }\r\n if (arrow) {\r\n arrow.style.transform = 'translateX(48px)'\r\n arrow.style.opacity = '0'\r\n }\r\n }}\r\n >\r\n {/* Animated dot */}\r\n <div\r\n className=\"dot\"\r\n style={{\r\n position: 'absolute',\r\n left: '20%',\r\n top: '40%',\r\n width: '8px',\r\n height: '8px',\r\n borderRadius: '50%',\r\n background: '#0f172a',\r\n transition: 'all 0.3s cubic-bezier(0.23, 1, 0.32, 1)',\r\n zIndex: 0,\r\n }}\r\n />\r\n\r\n {/* Default text */}\r\n <span\r\n className=\"btn-text\"\r\n style={{\r\n position: 'relative',\r\n zIndex: 1,\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '10px',\r\n transition: 'all 0.3s cubic-bezier(0.23, 1, 0.32, 1)',\r\n }}\r\n >\r\n <GoogleIcon />\r\n Continue with Google\r\n </span>\r\n\r\n {/* Hover text with arrow */}\r\n <span\r\n className=\"btn-arrow\"\r\n style={{\r\n position: 'absolute',\r\n zIndex: 1,\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '8px',\r\n color: 'white',\r\n transform: 'translateX(48px)',\r\n opacity: 0,\r\n transition: 'all 0.3s cubic-bezier(0.23, 1, 0.32, 1)',\r\n }}\r\n >\r\n Continue with Google\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\" />\r\n </svg>\r\n </span>\r\n </button>\r\n\r\n {/* Legal text */}\r\n <p\r\n style={{\r\n marginTop: '1.25rem',\r\n fontSize: '0.75rem',\r\n color: 'var(--text-faint)',\r\n textAlign: 'center',\r\n lineHeight: 1.6,\r\n }}\r\n >\r\n By continuing, you agree to our{' '}\r\n <a href=\"#\" style={{ color: 'var(--color-blue-light)', textDecoration: 'underline' }}>\r\n Terms of Service\r\n </a>{' '}\r\n and{' '}\r\n <a href=\"#\" style={{ color: 'var(--color-blue-light)', textDecoration: 'underline' }}>\r\n Privacy Policy\r\n </a>\r\n .\r\n </p>\r\n\r\n {/* Back to home */}\r\n <div style={{ marginTop: '1.75rem', textAlign: 'center' }}>\r\n <a\r\n href=\"/\"\r\n style={{\r\n fontSize: '0.8125rem',\r\n color: 'var(--text-faint)',\r\n textDecoration: 'none',\r\n transition: 'color 150ms',\r\n }}\r\n onMouseEnter={(e) => (e.target.style.color = 'var(--text-muted)')}\r\n onMouseLeave={(e) => (e.target.style.color = 'var(--text-faint)')}\r\n >\r\n ← Back to home\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n","usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\app\\page.jsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\app\\results\\page.jsx","messages":[{"ruleId":"react-hooks/set-state-in-effect","severity":2,"message":"Error: Calling setState synchronously within an effect can trigger cascading renders\n\nEffects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).\n\n 169 | if (!saved) { router.push('/assessment'); return }\n 170 | const data = JSON.parse(saved)\n> 171 | setAssessment(data)\n | ^^^^^^^^^^^^^ Avoid calling setState() directly within an effect\n 172 | setResults(calculateResults(data))\n 173 | }, [])\n 174 |","line":171,"column":9,"nodeType":null,"endLine":171,"endColumn":22},{"ruleId":"react-hooks/exhaustive-deps","severity":1,"message":"React Hook useEffect has a missing dependency: 'router'. Either include it or remove the dependency array.","line":173,"column":8,"nodeType":"ArrayExpression","endLine":173,"endColumn":10,"suggestions":[{"desc":"Update the dependencies array to be: [router]","fix":{"range":[7540,7542],"text":"[router]"}}]},{"ruleId":"react-hooks/set-state-in-effect","severity":2,"message":"Error: Calling setState synchronously within an effect can trigger cascading renders\n\nEffects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect).\n\n 176 | useEffect(() => {\n 177 | if (window.location.hash === '#coach') {\n> 178 | setActiveTab('coach')\n | ^^^^^^^^^^^^ Avoid calling setState() directly within an effect\n 179 | }\n 180 | }, [])\n 181 |","line":178,"column":13,"nodeType":null,"endLine":178,"endColumn":25}],"suppressedMessages":[],"errorCount":2,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"'use client'\r\nimport { useState, useEffect } from 'react'\r\nimport { useRouter } from 'next/navigation'\r\nimport { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis } from 'recharts'\r\n\r\nconst CAREER_PROFILES = {\r\n 'Data Scientist': {\r\n skills: ['python', 'machine-learning', 'sql', 'statistics', 'pandas',\r\n 'numpy', 'tensorflow', 'pytorch', 'data-analysis', 'r', 'deep-learning',\r\n 'scikit-learn', 'data-visualization', 'matplotlib', 'jupyter'],\r\n aptitude: { Analytical: 80, Mathematical: 75 }\r\n },\r\n 'Software Engineer': {\r\n skills: ['javascript', 'python', 'react', 'nodejs', 'java', 'git',\r\n 'typescript', 'c++', 'algorithms', 'data-structures', 'sql',\r\n 'docker', 'rest-api', 'system-design', 'nextjs'],\r\n aptitude: { Technical: 80, Logical: 75 }\r\n },\r\n 'Frontend Developer': {\r\n skills: ['javascript', 'react', 'html', 'css', 'typescript', 'nextjs',\r\n 'tailwind', 'vue', 'angular', 'figma', 'sass', 'redux',\r\n 'webpack', 'ui-design', 'responsive-design'],\r\n aptitude: { Creative: 70, Technical: 75 }\r\n },\r\n 'Backend Developer': {\r\n skills: ['nodejs', 'python', 'java', 'sql', 'postgresql', 'mongodb',\r\n 'docker', 'aws', 'rest-api', 'graphql', 'redis', 'kubernetes',\r\n 'microservices', 'system-design', 'linux'],\r\n aptitude: { Technical: 80, Logical: 70 }\r\n },\r\n 'Product Manager': {\r\n skills: ['communication', 'leadership', 'analytics', 'agile', 'scrum',\r\n 'jira', 'roadmapping', 'stakeholder-management', 'product-management',\r\n 'user-research', 'data-analysis', 'figma', 'project-management'],\r\n aptitude: { Communication: 85, Leadership: 80 }\r\n },\r\n 'UX Designer': {\r\n skills: ['figma', 'ui-design', 'ux-research', 'wireframing', 'prototyping',\r\n 'adobe-xd', 'sketch', 'user-research', 'design-systems', 'accessibility',\r\n 'photoshop', 'illustrator', 'css', 'html'],\r\n aptitude: { Creative: 85, Communication: 70 }\r\n },\r\n 'DevOps Engineer': {\r\n skills: ['docker', 'kubernetes', 'aws', 'linux', 'bash', 'terraform',\r\n 'ansible', 'jenkins', 'github-actions', 'monitoring', 'nginx',\r\n 'python', 'git', 'azure', 'gcp'],\r\n aptitude: { Technical: 85, Logical: 75 }\r\n },\r\n 'Data Engineer': {\r\n skills: ['python', 'sql', 'apache-spark', 'kafka', 'airflow', 'hadoop',\r\n 'aws', 'etl', 'postgresql', 'mongodb', 'data-warehousing', 'dbt',\r\n 'scala', 'bigquery', 'snowflake'],\r\n aptitude: { Analytical: 80, Technical: 75 }\r\n },\r\n 'Machine Learning Engineer': {\r\n skills: ['python', 'machine-learning', 'tensorflow', 'pytorch', 'mlops',\r\n 'docker', 'aws', 'deep-learning', 'scikit-learn', 'sql',\r\n 'model-deployment', 'kubernetes', 'linux', 'git', 'statistics'],\r\n aptitude: { Technical: 85, Mathematical: 80 }\r\n },\r\n 'Cybersecurity Analyst': {\r\n skills: ['network-security', 'ethical-hacking', 'linux', 'python',\r\n 'penetration-testing', 'cryptography', 'siem', 'firewalls',\r\n 'vulnerability-assessment', 'owasp', 'incident-response', 'bash'],\r\n aptitude: { Analytical: 80, Technical: 80 }\r\n },\r\n 'Business Analyst': {\r\n skills: ['sql', 'analytics', 'communication', 'excel', 'powerbi',\r\n 'tableau', 'project-management', 'agile', 'documentation',\r\n 'stakeholder-management', 'python', 'data-analysis'],\r\n aptitude: { Analytical: 80, Communication: 75 }\r\n },\r\n 'Mobile Developer': {\r\n skills: ['react-native', 'flutter', 'swift', 'kotlin', 'android',\r\n 'ios', 'javascript', 'dart', 'firebase', 'git',\r\n 'ui-design', 'rest-api', 'java'],\r\n aptitude: { Technical: 80, Creative: 65 }\r\n },\r\n 'Cloud Architect': {\r\n skills: ['aws', 'azure', 'gcp', 'terraform', 'kubernetes', 'docker',\r\n 'microservices', 'system-design', 'networking', 'security',\r\n 'linux', 'python', 'devops'],\r\n aptitude: { Technical: 85, Analytical: 75 }\r\n },\r\n 'AI Engineer': {\r\n skills: ['python', 'llm', 'langchain', 'openai-api', 'pytorch',\r\n 'tensorflow', 'rag', 'fine-tuning', 'docker', 'fastapi',\r\n 'machine-learning', 'nlp', 'deep-learning'],\r\n aptitude: { Technical: 85, Mathematical: 75 }\r\n },\r\n 'Full Stack Developer': {\r\n skills: ['javascript', 'react', 'nodejs', 'sql', 'mongodb', 'html',\r\n 'css', 'typescript', 'git', 'docker', 'rest-api', 'aws',\r\n 'nextjs', 'postgresql'],\r\n aptitude: { Technical: 80, Logical: 70 }\r\n },\r\n}\r\n\r\nconst LEVEL_WEIGHTS = {\r\n beginner: 0.25,\r\n intermediate: 0.6,\r\n advanced: 0.85,\r\n expert: 1.0,\r\n}\r\n\r\nfunction calculateResults(assessment) {\r\n const { skills = [], aptitude = {} } = assessment\r\n\r\n // Handle both old format (strings) and new format (objects)\r\n const normalizedSkills = skills.map(s =>\r\n typeof s === 'string'\r\n ? { name: s.toLowerCase().trim(), level: 'intermediate' }\r\n : { name: s.name.toLowerCase().trim(), level: s.level || 'intermediate' }\r\n )\r\n\r\n return Object.entries(CAREER_PROFILES).map(([career, profile]) => {\r\n // Skill matching (case insensitive + partial match)\r\n const skillMatches = profile.skills.filter(required =>\r\n normalizedSkills.some(s =>\r\n s.name.includes(required) || required.includes(s.name)\r\n )\r\n )\r\n\r\n // Weighted skill score based on proficiency\r\n const weightedScore = profile.skills.reduce((total, required) => {\r\n const match = normalizedSkills.find(s =>\r\n s.name.includes(required) || required.includes(s.name)\r\n )\r\n if (match) {\r\n return total + (LEVEL_WEIGHTS[match.level] || 0.6)\r\n }\r\n return total\r\n }, 0)\r\n\r\n const skillScore = (weightedScore / profile.skills.length) * 55\r\n // Aptitude matching\r\n const aptScores = Object.entries(profile.aptitude).map(([dim, req]) => {\r\n const userVal = aptitude[dim] || 50\r\n return Math.min(userVal / req, 1) * 20\r\n })\r\n const aptScore = aptScores.reduce((a, b) => a + b, 0)\r\n\r\n const score = Math.round(Math.min(20 + skillScore + aptScore, 99))\r\n\r\n return {\r\n career,\r\n score,\r\n skillMatches,\r\n missingSkills: profile.skills\r\n .filter(s => !normalizedSkills.some(u =>\r\n u.name.includes(s) || s.includes(u.name)\r\n ))\r\n .slice(0, 4)\r\n }\r\n }).sort((a, b) => b.score - a.score)\r\n}\r\n\r\nexport default function ResultsPage() {\r\n const router = useRouter()\r\n const [assessment, setAssessment] = useState(null)\r\n const [results, setResults] = useState([])\r\n const [messages, setMessages] = useState([])\r\n const [input, setInput] = useState('')\r\n const [loading, setLoading] = useState(false)\r\n const [activeTab, setActiveTab] = useState('overview')\r\n\r\n useEffect(() => {\r\n const saved = localStorage.getItem('skillgap-assessment')\r\n if (!saved) { router.push('/assessment'); return }\r\n const data = JSON.parse(saved)\r\n setAssessment(data)\r\n setResults(calculateResults(data))\r\n }, [])\r\n\r\n // ← ADD THIS RIGHT HERE\r\n useEffect(() => {\r\n if (window.location.hash === '#coach') {\r\n setActiveTab('coach')\r\n }\r\n }, [])\r\n\r\n const sendMessage = async () => {\r\n if (!input.trim() || loading) return\r\n const userMsg = input.trim()\r\n setInput('')\r\n setMessages(m => [...m, { role: 'user', text: userMsg }])\r\n setLoading(true)\r\n try {\r\n const res = await fetch('/api/chat', {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application/json' },\r\n body: JSON.stringify({\r\n message: userMsg,\r\n context: {\r\n topCareer: results[0]?.career,\r\n score: results[0]?.score,\r\n skills: assessment?.skills || [],\r\n }\r\n })\r\n })\r\n const data = await res.json()\r\n setMessages(m => [...m, { role: 'ai', text: data.reply }])\r\n } catch {\r\n setMessages(m => [...m, { role: 'ai', text: 'Sorry, something went wrong. Please try again.' }])\r\n }\r\n setLoading(false)\r\n }\r\n\r\n if (!results.length) return (\r\n <div style={{ minHeight: '100vh', background: '#070b16', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\r\n <p style={{ color: '#94a3b8' }}>Loading results...</p>\r\n </div>\r\n )\r\n\r\n const top = results[0]\r\n const radarData = assessment?.aptitude\r\n ? Object.entries(assessment.aptitude).map(([k, v]) => ({ dim: k, value: v }))\r\n : []\r\n const barData = results.map(r => ({ career: r.career.split(' ')[0], score: r.score }))\r\n\r\n const tabs = ['overview', 'careers', 'coach']\r\n\r\n return (\r\n <div style={{ minHeight: '100vh', background: '#070b16', paddingTop: '80px', padding: '80px 24px 48px' }}>\r\n <div style={{ maxWidth: '1100px', margin: '0 auto' }}>\r\n\r\n {/* Header */}\r\n <div style={{ marginBottom: '32px' }}>\r\n <h1 style={{ fontFamily: 'Syne, sans-serif', fontSize: '36px', fontWeight: 800, color: 'white', marginBottom: '8px' }}>\r\n Your Career Profile\r\n </h1>\r\n <p style={{ color: '#94a3b8' }}>Based on your assessment results</p>\r\n </div>\r\n\r\n {/* Stat Cards */}\r\n <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '16px', marginBottom: '32px' }}>\r\n {[\r\n { label: 'Top Career Match', value: top.career, color: '#3b82f6' },\r\n { label: 'Compatibility Score', value: `${top.score}%`, color: '#22c55e' },\r\n { label: 'Skills Identified', value: assessment?.skills?.length || 0, color: '#a855f7' },\r\n ].map(card => (\r\n <div key={card.label} style={{ background: '#0d1526', border: '1px solid rgba(255,255,255,0.06)', borderRadius: '16px', padding: '24px' }}>\r\n <p style={{ color: '#64748b', fontSize: '13px', marginBottom: '8px' }}>{card.label}</p>\r\n <p style={{ fontFamily: 'Syne, sans-serif', fontSize: '24px', fontWeight: 800, color: card.color }}>{card.value}</p>\r\n </div>\r\n ))}\r\n </div>\r\n\r\n {/* Tabs */}\r\n <div style={{ display: 'flex', gap: '8px', marginBottom: '24px' }}>\r\n {tabs.map(tab => (\r\n <button key={tab} onClick={() => setActiveTab(tab)} style={{\r\n padding: '8px 20px', borderRadius: '999px', border: 'none', cursor: 'pointer', fontWeight: 600, fontSize: '14px',\r\n background: activeTab === tab ? '#3b82f6' : 'rgba(255,255,255,0.05)',\r\n color: activeTab === tab ? 'white' : '#94a3b8',\r\n transition: 'all 0.2s',\r\n }}>\r\n {tab === 'overview' ? '📊 Overview' : tab === 'careers' ? '🎯 Careers' : '🤖 AI Coach'}\r\n </button>\r\n ))}\r\n </div>\r\n\r\n {/* Overview Tab */}\r\n {activeTab === 'overview' && (\r\n <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>\r\n {/* Bar Chart */}\r\n <div style={{ background: '#0d1526', border: '1px solid rgba(255,255,255,0.06)', borderRadius: '16px', padding: '24px' }}>\r\n <h3 style={{ color: 'white', fontWeight: 700, marginBottom: '20px' }}>🎯 Career Compatibility</h3>\r\n <ResponsiveContainer width=\"100%\" height={220}>\r\n <BarChart data={barData}>\r\n <XAxis dataKey=\"career\" tick={{ fill: '#64748b', fontSize: 11 }} />\r\n <YAxis tick={{ fill: '#64748b', fontSize: 11 }} />\r\n <Tooltip contentStyle={{ background: '#0d1526', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '8px', color: 'white' }} />\r\n <Bar dataKey=\"score\" fill=\"#3b82f6\" radius={[6, 6, 0, 0]} />\r\n </BarChart>\r\n </ResponsiveContainer>\r\n </div>\r\n\r\n {/* Radar Chart */}\r\n <div style={{ background: '#0d1526', border: '1px solid rgba(255,255,255,0.06)', borderRadius: '16px', padding: '24px' }}>\r\n <h3 style={{ color: 'white', fontWeight: 700, marginBottom: '20px' }}>🧠 Aptitude Profile</h3>\r\n <ResponsiveContainer width=\"100%\" height={220}>\r\n <RadarChart data={radarData}>\r\n <PolarGrid stroke=\"rgba(255,255,255,0.1)\" />\r\n <PolarAngleAxis dataKey=\"dim\" tick={{ fill: '#64748b', fontSize: 10 }} />\r\n <PolarRadiusAxis domain={[0, 100]} tick={false} axisLine={false} />\r\n <Radar dataKey=\"value\" stroke=\"#a855f7\" fill=\"#a855f7\" fillOpacity={0.3} />\r\n </RadarChart>\r\n </ResponsiveContainer>\r\n </div>\r\n </div>\r\n )}\r\n\r\n {/* Careers Tab */}\r\n {activeTab === 'careers' && (\r\n <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\r\n {results.map((r, i) => (\r\n <div key={r.career} style={{ background: '#0d1526', border: '1px solid rgba(255,255,255,0.06)', borderRadius: '16px', padding: '24px' }}>\r\n <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>\r\n <div>\r\n <h3 style={{ color: 'white', fontWeight: 700, fontSize: '18px' }}>{r.career}</h3>\r\n <p style={{ color: '#64748b', fontSize: '13px' }}>{r.skillMatches.length} / {CAREER_PROFILES[r.career].skills.length} skills match</p>\r\n </div>\r\n <span style={{ fontFamily: 'Syne, sans-serif', fontSize: '28px', fontWeight: 800, color: i === 0 ? '#22c55e' : '#3b82f6' }}>\r\n {r.score}%\r\n </span>\r\n </div>\r\n {/* Progress bar */}\r\n <div style={{ height: '6px', background: 'rgba(255,255,255,0.08)', borderRadius: '999px', marginBottom: '12px' }}>\r\n <div style={{ height: '100%', width: `${r.score}%`, background: i === 0 ? '#22c55e' : '#3b82f6', borderRadius: '999px', transition: 'width 1s ease' }} />\r\n </div>\r\n {/* Missing skills */}\r\n {r.missingSkills.length > 0 && (\r\n <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>\r\n {r.missingSkills.map(s => (\r\n <span key={s} style={{ background: 'rgba(239,68,68,0.1)', color: '#f87171', border: '1px solid rgba(239,68,68,0.2)', borderRadius: '999px', padding: '3px 10px', fontSize: '12px' }}>\r\n missing: {s}\r\n </span>\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n ))}\r\n </div>\r\n )}\r\n\r\n {/* AI Coach Tab */}\r\n {activeTab === 'coach' && (\r\n <div style={{ background: '#0d1526', border: '1px solid rgba(255,255,255,0.06)', borderRadius: '16px', overflow: 'hidden' }}>\r\n <div style={{ padding: '24px', borderBottom: '1px solid rgba(255,255,255,0.06)' }}>\r\n <h3 style={{ color: 'white', fontWeight: 700 }}>🤖 AI Career Coach</h3>\r\n <p style={{ color: '#64748b', fontSize: '13px' }}>Powered by GPT-4o — ask anything about your career path</p>\r\n </div>\r\n\r\n {/* Messages */}\r\n <div style={{ height: '380px', overflowY: 'auto', padding: '24px', display: 'flex', flexDirection: 'column', gap: '16px' }}>\r\n {messages.length === 0 && (\r\n <div style={{ textAlign: 'center', margin: 'auto' }}>\r\n <div style={{ fontSize: '40px', marginBottom: '12px' }}>💬</div>\r\n <p style={{ color: '#64748b' }}>Ask me anything about your career path!</p>\r\n {['How do I become a {top.career}?', 'What skills should I learn first?', 'How long to reach my goal?'].map(q => (\r\n <button key={q} onClick={() => setInput(q.replace('{top.career}', top.career))}\r\n style={{ display: 'block', margin: '8px auto', background: 'rgba(59,130,246,0.1)', color: '#60a5fa', border: '1px solid rgba(59,130,246,0.2)', borderRadius: '999px', padding: '8px 16px', cursor: 'pointer', fontSize: '13px' }}>\r\n {q.replace('{top.career}', top.career)}\r\n </button>\r\n ))}\r\n </div>\r\n )}\r\n {messages.map((m, i) => (\r\n <div key={i} style={{ display: 'flex', justifyContent: m.role === 'user' ? 'flex-end' : 'flex-start' }}>\r\n <div style={{\r\n maxWidth: '80%', padding: '12px 16px', borderRadius: '16px', fontSize: '14px', lineHeight: 1.6,\r\n background: m.role === 'user' ? '#3b82f6' : 'rgba(255,255,255,0.05)',\r\n color: 'white',\r\n }}>\r\n {m.text}\r\n </div>\r\n </div>\r\n ))}\r\n {loading && (\r\n <div style={{ display: 'flex', gap: '6px', padding: '12px 16px' }}>\r\n {[0, 1, 2].map(i => (\r\n <div key={i} style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#3b82f6', animation: `bounce 0.6s ${i * 0.1}s infinite alternate` }} />\r\n ))}\r\n </div>\r\n )}\r\n </div>\r\n\r\n {/* Input */}\r\n <div style={{ padding: '16px 24px', borderTop: '1px solid rgba(255,255,255,0.06)', display: 'flex', gap: '12px' }}>\r\n <input\r\n value={input}\r\n onChange={e => setInput(e.target.value)}\r\n onKeyDown={e => e.key === 'Enter' && sendMessage()}\r\n placeholder=\"Ask about your career path...\"\r\n style={{ flex: 1, background: 'rgba(255,255,255,0.05)', color: 'white', border: '1px solid rgba(255,255,255,0.1)', borderRadius: '10px', padding: '12px 16px', fontSize: '14px', outline: 'none' }}\r\n />\r\n <button onClick={sendMessage} style={{ background: '#3b82f6', color: 'white', border: 'none', borderRadius: '10px', padding: '12px 20px', fontWeight: 700, cursor: 'pointer' }}>\r\n Send\r\n </button>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n )\r\n}","usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\app\\resume\\page.jsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\components\\Navbar.jsx","messages":[{"ruleId":"@next/next/no-html-link-for-pages","severity":2,"message":"Do not use an `<a>` element to navigate to `/`. Use `<Link />` from `next/link` instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages","line":46,"column":17,"nodeType":"JSXOpeningElement","endLine":54,"endColumn":18}],"suppressedMessages":[],"errorCount":1,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"source":"'use client';\r\n\r\nimport { useState } from 'react';\r\nimport { useSession, signOut } from 'next-auth/react';\r\nimport Image from 'next/image';\r\n\r\nconst NAV_LINKS = [\r\n { label: 'Features', href: '#features' },\r\n { label: 'AI Coach', href: '/results#coach' },\r\n { label: 'Resume', href: '/resume' },\r\n { label: 'Assessment', href: '/assessment' },\r\n];\r\n\r\nexport default function Navbar() {\r\n const { data: session, status } = useSession();\r\n const [hovered, setHovered] = useState(null);\r\n const [menuOpen, setMenuOpen] = useState(false);\r\n\r\n const isLoading = status === 'loading';\r\n const isLoggedIn = !!session?.user;\r\n\r\n return (\r\n <header\r\n style={{\r\n position: 'fixed',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n zIndex: 100,\r\n background: 'rgba(7, 11, 22, 0.88)',\r\n backdropFilter: 'blur(16px)',\r\n WebkitBackdropFilter: 'blur(16px)',\r\n borderBottom: '1px solid var(--color-border-muted)',\r\n }}\r\n >\r\n <div\r\n className=\"container\"\r\n style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'space-between',\r\n height: '64px',\r\n }}\r\n >\r\n {/* ── Logo ─────────────────────────────────────── */}\r\n <a\r\n href=\"/\"\r\n style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '0.5rem',\r\n textDecoration: 'none',\r\n }}\r\n >\r\n <span style={{ fontSize: '1.375rem' }}>⚡</span>\r\n <span\r\n style={{\r\n fontFamily: 'var(--font-display)',\r\n fontWeight: 700,\r\n fontSize: '1.1875rem',\r\n letterSpacing: '-0.02em',\r\n background: 'linear-gradient(135deg, #f1f5f9, #94a3b8)',\r\n WebkitBackgroundClip: 'text',\r\n WebkitTextFillColor: 'transparent',\r\n backgroundClip: 'text',\r\n }}\r\n >\r\n Skill Gap\r\n </span>\r\n </a>\r\n\r\n {/* ── Nav Links (desktop) ───────────────────────── */}\r\n <nav\r\n className=\"hide-mobile\"\r\n style={{ display: 'flex', alignItems: 'center', gap: '2rem' }}\r\n >\r\n {NAV_LINKS.map((item) => (\r\n <a\r\n key={item.label}\r\n href={item.href}\r\n onMouseEnter={() => setHovered(item.label)}\r\n onMouseLeave={() => setHovered(null)}\r\n style={{\r\n fontFamily: 'var(--font-body)',\r\n fontSize: '0.9rem',\r\n fontWeight: 500,\r\n color: hovered === item.label ? 'var(--text-primary)' : 'var(--text-muted)',\r\n textDecoration: 'none',\r\n transition: 'color 150ms ease',\r\n }}\r\n >\r\n {item.label}\r\n </a>\r\n ))}\r\n </nav>\r\n\r\n {/* ── Auth Area ─────────────────────────────────── */}\r\n <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>\r\n {isLoading ? (\r\n /* Skeleton placeholder while session loads */\r\n <div\r\n className=\"skeleton\"\r\n style={{ width: '100px', height: '34px', borderRadius: '9999px' }}\r\n />\r\n ) : isLoggedIn ? (\r\n /* Logged-in: avatar + name + dropdown */\r\n <div style={{ position: 'relative' }}>\r\n <button\r\n onClick={() => setMenuOpen((o) => !o)}\r\n style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '0.5rem',\r\n background: 'var(--color-card)',\r\n border: '1px solid var(--color-border)',\r\n borderRadius: '9999px',\r\n padding: '0.25rem 0.75rem 0.25rem 0.25rem',\r\n cursor: 'pointer',\r\n transition: 'border-color 150ms',\r\n }}\r\n onMouseEnter={(e) => (e.currentTarget.style.borderColor = 'var(--color-blue)')}\r\n onMouseLeave={(e) => (e.currentTarget.style.borderColor = 'var(--color-border)')}\r\n >\r\n {/* Avatar */}\r\n {session.user.image ? (\r\n <Image\r\n src={session.user.image}\r\n alt={session.user.name ?? 'User'}\r\n width={28}\r\n height={28}\r\n style={{ borderRadius: '50%', flexShrink: 0 }}\r\n />\r\n ) : (\r\n <div\r\n style={{\r\n width: '28px',\r\n height: '28px',\r\n borderRadius: '50%',\r\n background: 'var(--color-blue)',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n fontSize: '0.75rem',\r\n fontWeight: 700,\r\n color: '#fff',\r\n flexShrink: 0,\r\n }}\r\n >\r\n {(session.user.name ?? 'U')[0].toUpperCase()}\r\n </div>\r\n )}\r\n {/* Name */}\r\n <span\r\n className=\"hide-mobile\"\r\n style={{\r\n fontFamily: 'var(--font-body)',\r\n fontSize: '0.875rem',\r\n fontWeight: 500,\r\n color: 'var(--text-primary)',\r\n maxWidth: '120px',\r\n overflow: 'hidden',\r\n textOverflow: 'ellipsis',\r\n whiteSpace: 'nowrap',\r\n }}\r\n >\r\n {session.user.name?.split(' ')[0]}\r\n </span>\r\n {/* Chevron */}\r\n <svg\r\n width=\"12\"\r\n height=\"12\"\r\n viewBox=\"0 0 12 12\"\r\n fill=\"none\"\r\n style={{\r\n transform: menuOpen ? 'rotate(180deg)' : 'rotate(0deg)',\r\n transition: 'transform 200ms ease',\r\n flexShrink: 0,\r\n }}\r\n >\r\n <path d=\"M2 4l4 4 4-4\" stroke=\"var(--text-muted)\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n </svg>\r\n </button>\r\n\r\n {/* Dropdown */}\r\n {menuOpen && (\r\n <div\r\n style={{\r\n position: 'absolute',\r\n top: 'calc(100% + 8px)',\r\n right: 0,\r\n minWidth: '180px',\r\n background: 'var(--color-card)',\r\n border: '1px solid var(--color-border)',\r\n borderRadius: 'var(--radius-lg)',\r\n boxShadow: 'var(--shadow-lg)',\r\n overflow: 'hidden',\r\n animation: 'scaleIn 0.15s ease both',\r\n transformOrigin: 'top right',\r\n }}\r\n >\r\n {[\r\n { label: '📊 Dashboard', href: '/dashboard' },\r\n { label: '🎯 Assess Skills', href: '/assessment' },\r\n { label: '📄 Resume', href: '/resume' },\r\n ].map((item) => (\r\n <a\r\n key={item.label}\r\n href={item.href}\r\n style={{\r\n display: 'block',\r\n padding: '0.6875rem 1rem',\r\n fontSize: '0.875rem',\r\n color: 'var(--text-secondary)',\r\n textDecoration: 'none',\r\n transition: 'background 100ms, color 100ms',\r\n borderBottom: '1px solid var(--color-border-muted)',\r\n }}\r\n onMouseEnter={(e) => {\r\n e.currentTarget.style.background = 'var(--color-blue-glow)';\r\n e.currentTarget.style.color = 'var(--text-primary)';\r\n }}\r\n onMouseLeave={(e) => {\r\n e.currentTarget.style.background = 'transparent';\r\n e.currentTarget.style.color = 'var(--text-secondary)';\r\n }}\r\n >\r\n {item.label}\r\n </a>\r\n ))}\r\n\r\n {/* Sign out */}\r\n <button\r\n onClick={() => signOut({ callbackUrl: '/' })}\r\n style={{\r\n display: 'block',\r\n width: '100%',\r\n padding: '0.6875rem 1rem',\r\n fontSize: '0.875rem',\r\n color: 'var(--color-red-light)',\r\n textAlign: 'left',\r\n background: 'transparent',\r\n border: 'none',\r\n cursor: 'pointer',\r\n transition: 'background 100ms',\r\n }}\r\n onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--color-red-glow)')}\r\n onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}\r\n >\r\n 🚪 Sign Out\r\n </button>\r\n </div>\r\n )}\r\n </div>\r\n ) : (\r\n /* Not logged in: Sign In button */\r\n <a href=\"/login\" className=\"btn btn-primary btn-sm\">\r\n Sign In\r\n </a>\r\n )}\r\n </div>\r\n </div>\r\n </header >\r\n );\r\n}\r\n","usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\components\\Providers.jsx","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\components\\assessment\\page.jsx","messages":[{"ruleId":"react/no-unescaped-entities","severity":2,"message":"`'` can be escaped with `'`, `‘`, `'`, `’`.","line":109,"column":72,"nodeType":"JSXText","messageId":"unescapedEntityAlts","suggestions":[{"messageId":"replaceWithAlt","data":{"alt":"'"},"fix":{"range":[4771,4788],"text":"Bachelor's Degree"},"desc":"Replace with `'`."},{"messageId":"replaceWithAlt","data":{"alt":"‘"},"fix":{"range":[4771,4788],"text":"Bachelor‘s Degree"},"desc":"Replace with `‘`."},{"messageId":"replaceWithAlt","data":{"alt":"'"},"fix":{"range":[4771,4788],"text":"Bachelor's Degree"},"desc":"Replace with `'`."},{"messageId":"replaceWithAlt","data":{"alt":"’"},"fix":{"range":[4771,4788],"text":"Bachelor’s Degree"},"desc":"Replace with `’`."}]},{"ruleId":"react/no-unescaped-entities","severity":2,"message":"`'` can be escaped with `'`, `‘`, `'`, `’`.","line":110,"column":68,"nodeType":"JSXText","messageId":"unescapedEntityAlts","suggestions":[{"messageId":"replaceWithAlt","data":{"alt":"'"},"fix":{"range":[4860,4875],"text":"Master's Degree"},"desc":"Replace with `'`."},{"messageId":"replaceWithAlt","data":{"alt":"‘"},"fix":{"range":[4860,4875],"text":"Master‘s Degree"},"desc":"Replace with `‘`."},{"messageId":"replaceWithAlt","data":{"alt":"'"},"fix":{"range":[4860,4875],"text":"Master's Degree"},"desc":"Replace with `'`."},{"messageId":"replaceWithAlt","data":{"alt":"’"},"fix":{"range":[4860,4875],"text":"Master’s Degree"},"desc":"Replace with `’`."}]}],"suppressedMessages":[],"errorCount":2,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"source":"\"use client\";\r\n\r\nimport { useState } from \"react\";\r\nimport { useRouter } from \"next/navigation\";\r\nimport { ChevronRight, ChevronLeft, Plus, X, CheckCircle2 } from \"lucide-react\";\r\n\r\nexport default function AssessmentPage() {\r\n const router = useRouter();\r\n const [step, setStep] = useState(1);\r\n const totalSteps = 3;\r\n\r\n // State Step 1\r\n const [cgpa, setCgpa] = useState(3.0);\r\n const [education, setEducation] = useState(\"Bachelor's\");\r\n\r\n // State Step 2\r\n const [currentSkill, setCurrentSkill] = useState(\"\");\r\n const [skills, setSkills] = useState([]);\r\n const quickSkills = [\r\n \"python\", \"javascript\", \"react\", \"sql\", \"java\",\r\n \"figma\", \"docker\", \"aws\", \"communication\", \"leadership\"\r\n ];\r\n\r\n // State Step 3\r\n const [aptitudes, setAptitudes] = useState({\r\n Logical: 50,\r\n Analytical: 50,\r\n Technical: 50,\r\n Creative: 50,\r\n Communication: 50,\r\n Leadership: 50,\r\n Mathematical: 50\r\n });\r\n\r\n const handleAddSkill = (skill) => {\r\n const s = skill.trim().toLowerCase();\r\n if (s && !skills.includes(s)) {\r\n setSkills([...skills, s]);\r\n }\r\n setCurrentSkill(\"\");\r\n };\r\n\r\n const handleRemoveSkill = (skillToRemove) => {\r\n setSkills(skills.filter(s => s !== skillToRemove));\r\n };\r\n\r\n const handleComplete = () => {\r\n const assessmentData = {\r\n academic: {\r\n cgpa: parseFloat(cgpa),\r\n education\r\n },\r\n skills,\r\n aptitudes\r\n };\r\n localStorage.setItem(\"skillgap-assessment\", JSON.stringify(assessmentData));\r\n router.push(\"/results\");\r\n };\r\n\r\n return (\r\n <div className=\"min-h-screen bg-[#070b16] text-white p-6 flex flex-col items-center\">\r\n <div className=\"w-full max-w-3xl mt-12\">\r\n {/* Progress Header */}\r\n <div className=\"mb-8\">\r\n <div className=\"flex justify-between items-end mb-4\">\r\n <h1 className=\"text-3xl font-bold font-syne\">Assessment</h1>\r\n <span className=\"text-sm text-gray-400 font-dm-sans\">\r\n Step {step} of {totalSteps}\r\n </span>\r\n </div>\r\n <div className=\"w-full bg-[#0d1526] h-2 rounded-full overflow-hidden\">\r\n <div\r\n className=\"h-full bg-blue-500 transition-all duration-500 ease-out\"\r\n style={{ width: `${(step / totalSteps) * 100}%` }}\r\n ></div>\r\n </div>\r\n </div>\r\n\r\n {/* Form Container */}\r\n <div className=\"bg-[#0d1526] rounded-2xl p-8 shadow-xl border border-white/5\">\r\n {step === 1 && (\r\n <div className=\"space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500\">\r\n <h2 className=\"text-2xl font-semibold mb-6\">Academic Background</h2>\r\n\r\n <div className=\"space-y-4\">\r\n <div className=\"flex justify-between items-center\">\r\n <label className=\"text-gray-300\">CGPA (0.0 - 4.0)</label>\r\n <span className=\"text-blue-500 font-bold text-xl\">{cgpa.toFixed(1)}</span>\r\n </div>\r\n <input\r\n type=\"range\"\r\n min=\"0.0\"\r\n max=\"4.0\"\r\n step=\"0.1\"\r\n value={cgpa}\r\n onChange={(e) => setCgpa(parseFloat(e.target.value))}\r\n className=\"w-full accent-blue-500 h-2 bg-[#070b16] rounded-lg appearance-none cursor-pointer\"\r\n />\r\n </div>\r\n\r\n <div className=\"space-y-4\">\r\n <label className=\"text-gray-300 block\">Education Level</label>\r\n <select\r\n value={education}\r\n onChange={(e) => setEducation(e.target.value)}\r\n className=\"w-full bg-[#070b16] border border-white/10 rounded-xl p-4 text-white focus:outline-none focus:border-blue-500 transition-colors cursor-pointer appearance-none\"\r\n >\r\n <option value=\"High School\">High School</option>\r\n <option value=\"Bachelor's\">Bachelor's Degree</option>\r\n <option value=\"Master's\">Master's Degree</option>\r\n <option value=\"PhD\">PhD</option>\r\n </select>\r\n </div>\r\n\r\n <div className=\"pt-6 flex justify-end\">\r\n <button\r\n onClick={() => setStep(2)}\r\n className=\"bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-xl font-medium transition-colors flex items-center gap-2\"\r\n >\r\n Next Step <ChevronRight className=\"w-5 h-5\" />\r\n </button>\r\n </div>\r\n </div>\r\n )}\r\n\r\n {step === 2 && (\r\n <div className=\"space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500\">\r\n <h2 className=\"text-2xl font-semibold mb-6\">Your Skills</h2>\r\n\r\n <div className=\"space-y-4\">\r\n <label className=\"text-gray-300 block\">Add technical & soft skills</label>\r\n <div className=\"flex gap-3\">\r\n <input\r\n type=\"text\"\r\n value={currentSkill}\r\n onChange={(e) => setCurrentSkill(e.target.value)}\r\n onKeyDown={(e) => e.key === 'Enter' && handleAddSkill(currentSkill)}\r\n placeholder=\"e.g. React, Docker...\"\r\n className=\"flex-1 bg-[#070b16] border border-white/10 rounded-xl p-4 text-white focus:outline-none focus:border-blue-500 transition-colors\"\r\n />\r\n <button\r\n onClick={() => handleAddSkill(currentSkill)}\r\n className=\"bg-blue-600 hover:bg-blue-700 text-white px-6 py-4 rounded-xl font-medium transition-colors flex items-center gap-2\"\r\n >\r\n <Plus className=\"w-5 h-5\" /> Add\r\n </button>\r\n </div>\r\n </div>\r\n\r\n {skills.length > 0 && (\r\n <div className=\"flex flex-wrap gap-2 pt-2\">\r\n {skills.map(skill => (\r\n <div key={skill} className=\"bg-blue-500/10 text-blue-400 border border-blue-500/20 px-4 py-2 rounded-full flex items-center gap-2\">\r\n <span className=\"text-sm font-medium\">{skill}</span>\r\n <button onClick={() => handleRemoveSkill(skill)} className=\"hover:text-blue-300 transition-colors\">\r\n <X className=\"w-4 h-4\" />\r\n </button>\r\n </div>\r\n ))}\r\n </div>\r\n )}\r\n\r\n <div className=\"space-y-3 pt-4 border-t border-white/5\">\r\n <label className=\"text-sm text-gray-500 block\">Quick Add:</label>\r\n <div className=\"flex flex-wrap gap-2\">\r\n {quickSkills.map(skill => (\r\n <button\r\n key={skill}\r\n onClick={() => handleAddSkill(skill)}\r\n disabled={skills.includes(skill)}\r\n className=\"bg-[#070b16] border border-white/5 hover:border-white/20 disabled:opacity-30 disabled:hover:border-white/5 text-gray-400 px-3 py-1.5 rounded-lg text-sm transition-colors\"\r\n >\r\n {skill}\r\n </button>\r\n ))}\r\n </div>\r\n </div>\r\n\r\n <div className=\"pt-6 flex justify-between\">\r\n <button\r\n onClick={() => setStep(1)}\r\n className=\"bg-transparent border border-white/10 hover:bg-white/5 text-white px-6 py-3 rounded-xl font-medium transition-colors flex items-center gap-2\"\r\n >\r\n <ChevronLeft className=\"w-5 h-5\" /> Previous\r\n </button>\r\n <button\r\n onClick={() => setStep(3)}\r\n className=\"bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-xl font-medium transition-colors flex items-center gap-2\"\r\n >\r\n Next Step <ChevronRight className=\"w-5 h-5\" />\r\n </button>\r\n </div>\r\n </div>\r\n )}\r\n\r\n {step === 3 && (\r\n <div className=\"space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500\">\r\n <h2 className=\"text-2xl font-semibold mb-6\">Aptitude Rating</h2>\r\n <p className=\"text-gray-400 text-sm mb-6\">Rate your proficiency in the following areas from 0 to 100.</p>\r\n\r\n <div className=\"space-y-6\">\r\n {Object.keys(aptitudes).map(trait => (\r\n <div key={trait} className=\"space-y-2\">\r\n <div className=\"flex justify-between items-center\">\r\n <label className=\"text-gray-300 text-sm font-medium\">{trait}</label>\r\n <span className=\"text-blue-500 font-bold text-sm bg-blue-500/10 px-2 py-1 rounded-md min-w-[3rem] text-center\">\r\n {aptitudes[trait]}\r\n </span>\r\n </div>\r\n <input\r\n type=\"range\"\r\n min=\"0\"\r\n max=\"100\"\r\n step=\"1\"\r\n value={aptitudes[trait]}\r\n onChange={(e) => setAptitudes({ ...aptitudes, [trait]: parseInt(e.target.value) })}\r\n className=\"w-full accent-blue-500 h-1.5 bg-[#070b16] rounded-lg appearance-none cursor-pointer\"\r\n />\r\n </div>\r\n ))}\r\n </div>\r\n\r\n <div className=\"pt-8 flex justify-between border-t border-white/5\">\r\n <button\r\n onClick={() => setStep(2)}\r\n className=\"bg-transparent border border-white/10 hover:bg-white/5 text-white px-6 py-3 rounded-xl font-medium transition-colors flex items-center gap-2\"\r\n >\r\n <ChevronLeft className=\"w-5 h-5\" /> Previous\r\n </button>\r\n <button\r\n onClick={handleComplete}\r\n className=\"bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-xl font-medium transition-colors flex items-center gap-2 shadow-lg shadow-blue-500/20\"\r\n >\r\n <CheckCircle2 className=\"w-5 h-5\" /> Complete Assessment\r\n </button>\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n","usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\components\\dashboard\\page.jsx","messages":[{"ruleId":"@next/next/no-img-element","severity":1,"message":"Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element","line":153,"column":21,"nodeType":"JSXOpeningElement","endLine":161,"endColumn":23}],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"'use client'\r\nimport { useSession } from 'next-auth/react'\r\nimport { useRouter } from 'next/navigation'\r\nimport { useEffect } from 'react'\r\n\r\nexport default function DashboardPage() {\r\n const { data: session, status } = useSession()\r\n const router = useRouter()\r\n\r\n useEffect(() => {\r\n if (status === 'unauthenticated') {\r\n router.push('/login')\r\n }\r\n }, [status, router])\r\n\r\n if (status === 'loading') {\r\n return (\r\n <div style={{\r\n minHeight: '100vh',\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n background: '#070b16',\r\n }}>\r\n <p style={{ color: '#94a3b8' }}>Loading...</p>\r\n </div>\r\n )\r\n }\r\n\r\n return (\r\n <div style={{\r\n minHeight: '100vh',\r\n background: '#070b16',\r\n paddingTop: '80px',\r\n padding: '80px 32px 48px',\r\n maxWidth: '1100px',\r\n margin: '0 auto',\r\n }}>\r\n {/* Welcome */}\r\n <div style={{ marginBottom: '40px' }}>\r\n <h1 style={{\r\n fontFamily: 'Syne, sans-serif',\r\n fontSize: '36px',\r\n fontWeight: 800,\r\n color: 'white',\r\n marginBottom: '8px',\r\n }}>\r\n Welcome back, {session?.user?.name?.split(' ')[0]}! 👋\r\n </h1>\r\n <p style={{ color: '#94a3b8', fontSize: '16px' }}>\r\n Ready to discover your perfect career path?\r\n </p>\r\n </div>\r\n\r\n {/* Quick Action Cards */}\r\n <div style={{\r\n display: 'grid',\r\n gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',\r\n gap: '16px',\r\n marginBottom: '48px',\r\n }}>\r\n {[\r\n {\r\n icon: '🎯',\r\n title: 'Start Assessment',\r\n desc: 'Discover your career compatibility score',\r\n href: '/assessment',\r\n color: '#3b82f6',\r\n },\r\n {\r\n icon: '📄',\r\n title: 'Resume Analyzer',\r\n desc: 'Get your ATS score and improvements',\r\n href: '/resume',\r\n color: '#22c55e',\r\n badge: 'NEW',\r\n },\r\n {\r\n icon: '🤖',\r\n title: 'AI Career Coach',\r\n desc: 'Chat with your personal AI coach',\r\n href: '/results',\r\n color: '#a855f7',\r\n },\r\n ].map((card) => (\r\n <div\r\n key={card.title}\r\n onClick={() => router.push(card.href)}\r\n style={{\r\n background: '#0d1526',\r\n border: '1px solid rgba(255,255,255,0.06)',\r\n borderRadius: '12px',\r\n padding: '24px',\r\n cursor: 'pointer',\r\n transition: 'all 0.2s',\r\n }}\r\n onMouseEnter={e => {\r\n e.currentTarget.style.borderColor = card.color + '40'\r\n e.currentTarget.style.transform = 'translateY(-2px)'\r\n }}\r\n onMouseLeave={e => {\r\n e.currentTarget.style.borderColor = 'rgba(255,255,255,0.06)'\r\n e.currentTarget.style.transform = 'translateY(0)'\r\n }}\r\n >\r\n <div style={{ fontSize: '32px', marginBottom: '12px' }}>\r\n {card.icon}\r\n </div>\r\n <div style={{\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '8px',\r\n marginBottom: '6px',\r\n }}>\r\n <h3 style={{\r\n fontSize: '16px',\r\n fontWeight: 700,\r\n color: 'white',\r\n }}>\r\n {card.title}\r\n </h3>\r\n {card.badge && (\r\n <span style={{\r\n fontSize: '10px',\r\n padding: '2px 8px',\r\n borderRadius: '999px',\r\n background: 'rgba(59,130,246,0.2)',\r\n color: '#60a5fa',\r\n fontWeight: 600,\r\n }}>\r\n {card.badge}\r\n </span>\r\n )}\r\n </div>\r\n <p style={{ color: '#94a3b8', fontSize: '13px' }}>\r\n {card.desc}\r\n </p>\r\n </div>\r\n ))}\r\n </div>\r\n\r\n {/* User Info Card */}\r\n <div style={{\r\n background: '#0d1526',\r\n border: '1px solid rgba(255,255,255,0.06)',\r\n borderRadius: '12px',\r\n padding: '24px',\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '16px',\r\n }}>\r\n {session?.user?.image && (\r\n <img\r\n src={session.user.image}\r\n alt=\"avatar\"\r\n style={{\r\n width: '48px',\r\n height: '48px',\r\n borderRadius: '50%',\r\n }}\r\n />\r\n )}\r\n <div>\r\n <p style={{ fontWeight: 700, color: 'white' }}>\r\n {session?.user?.name}\r\n </p>\r\n <p style={{ color: '#94a3b8', fontSize: '13px' }}>\r\n {session?.user?.email}\r\n </p>\r\n </div>\r\n <div style={{ marginLeft: 'auto' }}>\r\n <span style={{\r\n padding: '4px 12px',\r\n borderRadius: '999px',\r\n background: 'rgba(34,197,94,0.15)',\r\n color: '#22c55e',\r\n fontSize: '12px',\r\n fontWeight: 600,\r\n border: '1px solid rgba(34,197,94,0.3)',\r\n }}>\r\n ✓ Logged In\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n )\r\n}","usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\constants\\careers.js","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\constants\\skills.js","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\eslint.config.mjs","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\next.config.mjs","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\postcss.config.mjs","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]},{"filePath":"C:\\Users\\SUBHAM\\Desktop\\Codes\\PROJECTS\\SkillGap\\skillgap\\store\\appStore.js","messages":[],"suppressedMessages":[],"errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":[]}]