AI-Powered Full Stack Web Development

Your Mini Project 2: Build a Complete, Responsive Personal Resume Website — End to End

Your Mini Project 2: Build a Complete, Responsive Personal Resume Website — End to End Create and design your own professional Personal Resume Website using ONLY HTML and CSS. The goal is to transform your traditional CV/resume into a modern, responsive, and visually impressive web interface that represents your skills, education, projects, and professional profile. Strictly NO JavaScript. What We Expect 1. YOUR OWN DESIGN Your website must be your original design. - No Bootstrap templates - No Tailwind CSS - No copied portfolio/resume templates - No tutorial clones - No ready-made website templates Build the interface yourself using HTML5 and Vanilla CSS. 2. RESPONSIVE & FUNCTIONAL UI — End to End Your resume must work smoothly across different screen sizes: - 📱 Mobile — under 600px - 📱 Tablet — 600px–1024px - 💻 Desktop — 1024px+ Use CSS Flexbox, CSS Grid, and Media Queries to create a responsive layout. A design that looks good only on desktop but breaks on mobile will be considered incomplete. 3. ADVANCED CSS INTEGRATION Your project must demonstrate your understanding of CSS beyond basic styling. Your website should include: - Responsive typography using "rem", "em", "vw", or "clamp()" - Flexbox and/or CSS Grid - Sticky or fixed navigation - CSS transitions - Hover effects - Custom "@keyframes" animations - Proper positioning using "relative", "absolute", or "sticky" - CSS variables for colors/theme where appropriate - Proper use of the CSS Box Model 4. REQUIRED RESUME SECTIONS Your website must contain the following sections: 👤 Profile / Hero Section - Full Name - Professional title - Profile picture - Short introduction - Call-to-action buttons or links 📖 About Me A short description about yourself, your interests, goals, and professional background. 🎓 Education Include your: - Degree/Program - Institution - Duration/Year - Relevant details 💻 Skills Display your technical and/or professional skills using a creative UI. Examples: - HTML - CSS - JavaScript - Python - UI/UX - Graphic Design - Video Editing - Digital Marketing Only include skills that you actually know. 🚀 Projects Showcase your previous academic, personal, or professional projects. Each project should include: - Project name - Short description - Technologies/tools used - Relevant link if available 💼 Experience Include internships, jobs, freelance work, volunteer work, or relevant experience. If you have no professional experience, you can include academic or practical experience. 🏆 Certifications & Achievements Add relevant: - Certifications - Awards - Competitions - Workshops - Leadership roles - Other achievements 📞 Contact Include your professional contact information and relevant social/professional links such as: - Email - LinkedIn - GitHub - Portfolio/Social Links --- 5. CREATIVE DESIGN IS ENCOURAGED 🎨 Your resume should look like a website, not a plain Word document converted into HTML. You are encouraged to experiment with: - Modern layouts - Cards - Timeline designs - Gradient backgrounds - Glassmorphism - Minimalist designs - Dark/Light themes - Animated elements - Creative skill sections - Unique typography - Hover interactions However, the design must remain professional, readable, and user-friendly. 6. CODE REQUIREMENTS Your project should follow a clean file structure. Example: resume-website/ │ ├── index.html ├── style.css ├── images/ │ └── profile.jpg └── README.md Use an external CSS file for styling. Do not write all CSS inside the HTML file unless absolutely necessary. Strict Rule: NO JavaScript. Do not use: <script> or external JavaScript libraries. All interactions, animations, responsiveness, and visual effects must be created using HTML + CSS only. --- 7. PUBLIC GITHUB REPOSITORY Your complete project must be uploaded to a PUBLIC GitHub repository. Your repository should contain: - Complete HTML code - Complete CSS code - Images/assets used in the project - README.md Your repository must be accessible without requiring a login. --- 8. DEPLOY YOUR WEBSITE LIVE 🌐 Your resume website must also be deployed publicly. You can use: - GitHub Pages - Vercel - Netlify - Render - Any other reliable public hosting platform Anyone should be able to open your live URL and view your resume. --- 9. README.md — YOUR PROJECT REPORT Your README is an important part of the project. A weak README can make a good project difficult to evaluate. Write your README as if you are presenting your project to a potential employer or client. Your README MUST contain: a. Project Information Include: - Project Name - Project Description - Purpose of the project - Target audience b. Live Demo Add your deployed website URL. Example: Live Demo: https://your-resume.vercel.app The link must be clickable and working. c. Features Explain the major features and CSS techniques used. For example: - Responsive Design - CSS Grid - Flexbox - CSS Variables - Media Queries - CSS Animations - Hover Effects - Sticky Navigation - Responsive Typography d. Design Architecture Briefly explain how your project is structured. Mention things such as: - HTML structure - External CSS stylesheet - CSS variables - Layout system - Naming conventions - Responsive breakpoints - Component/section structure e. Screenshots Your README must include screenshots of your website: - 🖥️ Desktop View - 📱 Mobile View f. How to Run Locally Explain how someone can download/clone your repository and run the website locally. Example: git clone YOUR_REPOSITORY_URL Then open: index.html in a browser. --- How You Will Be Marked 🎨 DESIGN & UX - Originality - Visual hierarchy - Color selection - Typography - Spacing - Alignment - Overall professional appearance 💻 HTML & CSS MASTERY - Proper HTML structure - Semantic HTML - Box Model - Flexbox - CSS Grid - Positioning - CSS Variables - Transitions - Keyframe Animations 📱 RESPONSIVENESS - Mobile layout - Tablet layout - Desktop layout - Proper Media Queries - No overlapping or broken elements - Smooth adaptation across screen sizes 🌐 DEPLOYMENT - Public GitHub repository - Working live URL - Website accessible without login - No broken links or missing assets 📝 REPORTING - Quality of README - Clear project documentation - Working live demo link - Desktop screenshot - Mobile screenshot - Clear instructions for running the project --- ⚠️ VERY IMPORTANT Public Repository Your GitHub repository MUST be public. Before submitting, open your repository in a private/incognito browser window. If GitHub asks for a login or the repository cannot be accessed publicly, it cannot be graded. Live Website Your deployed URL must actually work. Graders will open your website on different devices and screen sizes to check responsiveness. NO JAVASCRIPT This project is strictly HTML + CSS only. If JavaScript is found controlling the layout, animations, interactions, or responsiveness, the project may be disqualified. INDIVIDUAL WORK This is an individual project. Do not submit: - Someone else's template - A copied GitHub repository - A downloaded resume template - Another student's project - A shared project Copied or shared work may receive 0 marks. --- 📌 Submission Submit ONLY your public GitHub repository link on the portal. Example: https://github.com/your-username/your-resume-website Make sure the repository is public and contains your complete project before submitting. 🎯 Main Objective By the end of this project, you should have a real, responsive, professional Resume Website that you can actually use as your personal portfolio and showcase to recruiters, clients, or future employers.

Mini Project 3: Build a Complete, Responsive & Interactive Job Portal — End to End

𝗠𝗜𝗡𝗜 𝗣𝗥𝗢𝗝𝗘𝗖𝗧 𝟯 𝗕𝗨𝗜𝗟𝗗 𝗔 𝗖𝗢𝗠𝗣𝗟𝗘𝗧𝗘, 𝗥𝗘𝗦𝗣𝗢𝗡𝗦𝗜𝗩𝗘 & 𝗜𝗡𝗧𝗘𝗥𝗔𝗖𝗧𝗜𝗩𝗘 𝗝𝗢𝗕 𝗣𝗢𝗥𝗧𝗔𝗟 𝗧𝗲𝗰𝗵𝗻𝗼𝗹𝗼𝗴𝗶𝗲𝘀: HTML5 • CSS3 • Vanilla JavaScript 𝗗𝗶𝗳𝗳𝗶𝗰𝘂𝗹𝘁𝘆: Advanced ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 𝗣𝗥𝗢𝗝𝗘𝗖𝗧 𝗢𝗩𝗘𝗥𝗩𝗜𝗘𝗪 Create and design your own complete Job Portal Web Application using HTML, CSS, and Vanilla JavaScript. The goal of this project is to move beyond static websites and build a real-world interactive frontend application where users can browse jobs, search and filter opportunities, view complete job details, apply for jobs, save jobs, and manage their applications. This project will test your practical understanding of: • HTML5 • CSS3 • Responsive Web Design • JavaScript • DOM Manipulation • Events • Arrays & Objects • Functions • Forms & Validation • Local Storage • Git & GitHub • Website Deployment 𝗪𝗛𝗔𝗧 𝗪𝗘 𝗘𝗫𝗣𝗘𝗖𝗧 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟬𝟭 — 𝗬𝗢𝗨𝗥 𝗢𝗪𝗡 𝗗𝗘𝗦𝗜𝗚𝗡 🎨 Your website must be your own original design. You are NOT allowed to use: • Bootstrap templates • Tailwind templates • Ready-made job portal templates • Downloaded website templates • Tutorial clones • Copied GitHub projects • Another student's design You may take design inspiration from platforms such as LinkedIn, Indeed, Glassdoor, Rozee.pk, etc., but your final interface must be independently designed. Build the interface using HTML5, CSS3, and Vanilla JavaScript. 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟬𝟮 — 𝗥𝗘𝗦𝗣𝗢𝗡𝗦𝗜𝗩𝗘 & 𝗙𝗨𝗡𝗖𝗧𝗜𝗢𝗡𝗔𝗟 𝗨𝗜 📱💻 Your Job Portal must work properly across different screen sizes. 📱 Mobile: Under 600px 📱 Tablet: 600px–1024px 💻 Desktop: 1024px+ You must use: • CSS Flexbox • CSS Grid • Media Queries • Responsive typography • Relative units • Proper spacing • Responsive navigation A website that looks good only on desktop but breaks on mobile will be considered incomplete. 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟬𝟯 — 𝗔𝗗𝗩𝗔𝗡𝗖𝗘𝗗 𝗛𝗧𝗠𝗟 & 𝗖𝗦𝗦 𝗜𝗡𝗧𝗘𝗚𝗥𝗔𝗧𝗜𝗢𝗡 Your project must demonstrate that you understand CSS beyond basic styling. Your website should include: • Semantic HTML5 • CSS Grid • Flexbox • Responsive typography • CSS variables • Sticky or fixed navigation • CSS transitions • Hover effects • Custom @keyframes animations • Proper positioning • Responsive cards • Modern buttons • Form styling • Custom UI components • Proper CSS Box Model • Media Queries You should avoid writing repetitive CSS wherever possible. 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟬𝟰 — 𝗝𝗔𝗩𝗔𝗦𝗖𝗥𝗜𝗣𝗧 𝗙𝗨𝗡𝗖𝗧𝗜𝗢𝗡𝗔𝗟𝗜𝗧𝗬 ⚡ This project is not just about designing a beautiful website. Your website must actually work. JavaScript must be used to create interactive functionality. 𝗦𝗲𝗮𝗿𝗰𝗵 𝗦𝘆𝘀𝘁𝗲𝗺 Users should be able to search jobs by: • Job title • Company name • Skills • Location Search results should update dynamically without refreshing the page. 𝗝𝗼𝗯 𝗙𝗶𝗹𝘁𝗲𝗿𝗶𝗻𝗴 Users must be able to filter jobs using multiple criteria: • Job Category • Location • Job Type • Experience Level • Salary Range A working 𝗥𝗲𝘀𝗲𝘁 𝗙𝗶𝗹𝘁𝗲𝗿𝘀 button is also required. 𝗦𝗼𝗿𝘁𝗶𝗻𝗴 𝗦𝘆𝘀𝘁𝗲𝗺 Users should be able to sort jobs by: • Latest Posted • Oldest Posted • Highest Salary • Lowest Salary • Job Title 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟬𝟱 — 𝗝𝗢𝗕 𝗟𝗜𝗦𝗧𝗜𝗡𝗚𝗦 💼 Your website must contain at least 𝟭𝟱 𝗝𝗼𝗯 𝗟𝗶𝘀𝘁𝗶𝗻𝗴𝘀. Each job should contain: • Job Title • Company Name • Company Logo • Location • Job Type • Experience Level • Salary • Required Skills • Posted Date • Short Description • Apply Button • View Details Button Do not manually create 15 separate HTML cards. The job listings must be generated dynamically using JavaScript data. 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟬𝟲 — 𝗝𝗢𝗕 𝗗𝗘𝗧𝗔𝗜𝗟𝗦 When a user clicks 𝗩𝗶𝗲𝘄 𝗗𝗲𝘁𝗮𝗶𝗹𝘀, the complete job information should be displayed. You may use: • A separate details page • A JavaScript modal The details should include: • Job Title • Company • Location • Salary • Job Type • Experience • Description • Responsibilities • Requirements • Skills • Benefits • Application Deadline The user should be able to close the details view easily. 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟬𝟳 — 𝗝𝗢𝗕 𝗔𝗣𝗣𝗟𝗜𝗖𝗔𝗧𝗜𝗢𝗡 𝗦𝗬𝗦𝗧𝗘𝗠 📝 Users must be able to apply for a job. Create a professional application form containing: • Full Name • Email • Phone Number • Cover Letter • Resume • LinkedIn Profile • GitHub Profile The form must include JavaScript validation. 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟬𝟴 — 𝗙𝗢𝗥𝗠 𝗩𝗔𝗟𝗜𝗗𝗔𝗧𝗜𝗢𝗡 ⚠️ Your application form must validate: • Required fields • Email format • Phone number • Minimum and maximum character limits • Resume selection • Valid LinkedIn/GitHub URLs Display proper error messages. Example: ❌ Please enter your full name. ❌ Please enter a valid email address. ❌ Phone number is required. ❌ Cover letter must contain at least 100 characters. After successful validation: ✅ Application submitted successfully! The page should NOT reload when submitting the form. 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟬𝟵 — 𝗟𝗢𝗖𝗔𝗟 𝗦𝗧𝗢𝗥𝗔𝗚𝗘 💾 You must use JavaScript Local Storage. Store submitted applications inside the browser. After refreshing the page, previously submitted applications should still exist. Application data should contain: • Applicant Name • Email • Job Applied For • Company • Application Date • Application Status 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟭𝟬 — 𝗔𝗣𝗣𝗟𝗜𝗖𝗔𝗧𝗜𝗢𝗡 𝗗𝗔𝗦𝗛𝗕𝗢𝗔𝗥𝗗 📊 Create a separate 𝗠𝘆 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀 dashboard. Users should be able to see all jobs they have applied for. Display: • Job • Company • Applied Date • Status The dashboard must be generated dynamically using JavaScript. Users must also be able to: • Delete an application • View application details 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟭𝟭 — 𝗗𝗔𝗥𝗞 / 𝗟𝗜𝗚𝗛𝗧 𝗠𝗢𝗗𝗘 🌙☀️ Implement a complete Dark Mode / Light Mode system. The theme should change: • Background • Text • Cards • Buttons • Navigation • Forms The selected theme must remain saved after refreshing the browser. Use Local Storage to store the selected theme. 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟭𝟮 — 𝗙𝗔𝗩𝗢𝗥𝗜𝗧𝗘 / 𝗦𝗔𝗩𝗘 𝗝𝗢𝗕𝗦 ❤️ Users should be able to save jobs. Each job should have a Save Job option. When clicked, the job should appear as Saved. Saved jobs must be stored in Local Storage. Create a section where users can view their saved jobs. Users should also be able to remove saved jobs. 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟭𝟯 — 𝗘𝗠𝗣𝗧𝗬 𝗦𝗧𝗔𝗧𝗘𝗦 Your application must properly handle situations where there are no results. For example: Quantum Developer If no job exists, display: 𝗡𝗼 𝗷𝗼𝗯𝘀 𝗳𝗼𝘂𝗻𝗱. 𝗧𝗿𝘆 𝗰𝗵𝗮𝗻𝗴𝗶𝗻𝗴 𝘆𝗼𝘂𝗿 𝘀𝗲𝗮𝗿𝗰𝗵 𝗼𝗿 𝗳𝗶𝗹𝘁𝗲𝗿𝘀. Do not leave the page blank. 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟭𝟰 — 𝗨𝗜 𝗦𝗧𝗔𝗧𝗘𝗦 Your website should provide proper visual feedback. Include: • Loading state • Empty state • Success message • Error message • Saved job notification • Application submitted notification You may implement these using CSS animations, JavaScript, toast notifications, or custom UI components. 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟭𝟱 — 𝗥𝗘𝗤𝗨𝗜𝗥𝗘𝗗 𝗪𝗘𝗕𝗦𝗜𝗧𝗘 𝗦𝗘𝗖𝗧𝗜𝗢𝗡𝗦 𝗛𝗼𝗺𝗲 Include: • Navigation • Hero section • Search bar • Popular categories • Featured jobs • Statistics • How It Works • Call-to-action • Footer 𝗝𝗼𝗯𝘀 Include: • Search • Filters • Sorting • Job Cards • Pagination or Load More • Empty State 𝗝𝗼𝗯 𝗗𝗲𝘁𝗮𝗶𝗹𝘀 Display complete information about the selected job. 𝗦𝗮𝘃𝗲𝗱 𝗝𝗼𝗯𝘀 Display jobs saved by the user. 𝗠𝘆 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀 Display all submitted applications. 𝗖𝗼𝗻𝘁𝗮𝗰𝘁 Include: • Contact form • Email • Social links • Location • Other relevant information 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟭𝟲 — 𝗣𝗔𝗚𝗜𝗡𝗔𝗧𝗜𝗢𝗡 / 𝗟𝗢𝗔𝗗 𝗠𝗢𝗥𝗘 You must implement at least ONE of the following. 𝗢𝗽𝘁𝗶𝗼𝗻 𝗔 — Pagination Display a limited number of jobs per page. Example: 1 2 3 4 Next 𝗢𝗽𝘁𝗶𝗼𝗻 𝗕 — Load More Initially show a limited number of jobs. When the user clicks Load More, additional jobs should appear dynamically. 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟭𝟳 — 𝗗𝗔𝗧𝗔 𝗛𝗔𝗡𝗗𝗟𝗜𝗡𝗚 🧠 Your job data should be stored in JavaScript using: • Arrays • Objects Do NOT hard-code every job card directly inside HTML. JavaScript should dynamically: • Generate cards • Search data • Filter data • Sort data • Display details • Save jobs • Remove jobs • Handle applications 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟭𝟴 — 𝗖𝗢𝗗𝗘 𝗤𝗨𝗔𝗟𝗜𝗧𝗬 Your project should follow clean coding practices. Use: • Meaningful variable names • Meaningful function names • Comments where necessary • Reusable functions • Organized JavaScript • Organized CSS • Semantic HTML Avoid: • Duplicate code • Unnecessary inline styles • Inline JavaScript • Extremely long functions • Unused variables • Unused files 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟭𝟵 — 𝗥𝗘𝗤𝗨𝗜𝗥𝗘𝗗 𝗙𝗜𝗟𝗘 𝗦𝗧𝗥𝗨𝗖𝗧𝗨𝗥𝗘 Example: job-portal/ │ ├── index.html ├── jobs.html ├── saved-jobs.html ├── applications.html ├── contact.html │ ├── css/ │ ├── style.css │ ├── responsive.css │ └── components.css │ ├── js/ │ ├── data.js │ ├── app.js │ ├── jobs.js │ ├── applications.js │ └── storage.js │ ├── images/ │ ├── companies/ │ └── banners/ │ └── README.md You may modify the structure according to your implementation, but your project must remain organized. 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟮𝟬 — 𝗣𝗨𝗕𝗟𝗜𝗖 𝗚𝗜𝗧𝗛𝗨𝗕 𝗥𝗘𝗣𝗢𝗦𝗜𝗧𝗢𝗥𝗬 🐙 Your complete project must be uploaded to a PUBLIC GitHub repository. Your repository should contain: • Complete HTML • Complete CSS • Complete JavaScript • Images/assets • README.md Your repository must be accessible without requiring a login. 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟮𝟭 — 𝗗𝗘𝗣𝗟𝗢𝗬 𝗬𝗢𝗨𝗥 𝗪𝗘𝗕𝗦𝗜𝗧𝗘 𝗟𝗜𝗩𝗘 🌐 Your website must be publicly deployed. You may use: • GitHub Pages • Vercel • Netlify • Render • Any other reliable public hosting platform The live website must be accessible through a public URL. 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟮𝟮 — 𝗥𝗘𝗔𝗗𝗠𝗘.𝗺𝗱 Your README is an important part of this project. Write your README as if you are presenting your project to a potential employer or client. Your README MUST contain: 𝗣𝗿𝗼𝗷𝗲𝗰𝘁 𝗜𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻 • Project Name • Project Description • Purpose • Target Audience • Technologies Used 𝗟𝗶𝘃𝗲 𝗗𝗲𝗺𝗼 Add your deployed website URL. Example: https://your-job-portal.vercel.app 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀 Explain your major features: • Dynamic Job Listings • Search • Multiple Filters • Sorting • Job Details • Application System • Form Validation • Local Storage • Saved Jobs • Dark Mode • Responsive Design • Dashboard 𝗧𝗲𝗰𝗵𝗻𝗶𝗰𝗮𝗹 𝗜𝗺𝗽𝗹𝗲𝗺𝗲𝗻𝘁𝗮𝘁𝗶𝗼𝗻 Briefly explain: • HTML structure • CSS architecture • JavaScript structure • Data handling • DOM manipulation • Local Storage implementation • Responsive breakpoints 𝗦𝗰𝗿𝗲𝗲𝗻𝘀𝗵𝗼𝘁𝘀 Your README must contain screenshots of: • Desktop Homepage • Desktop Jobs Page • Mobile Homepage • Mobile Jobs Page • Application Dashboard 𝗛𝗼𝘄 𝘁𝗼 𝗥𝘂𝗻 𝗟𝗼𝗰𝗮𝗹𝗹𝘆 Explain how someone can clone and run your project. Example: git clone YOUR_REPOSITORY_URL Then open: index.html in a browser. 𝗦𝗘𝗖𝗧𝗜𝗢𝗡 𝟮𝟯 — 𝗖𝗥𝗘𝗔𝗧𝗜𝗩𝗘 𝗗𝗘𝗦𝗜𝗚𝗡 🎨 You are encouraged to experiment with: • Modern layouts • Glassmorphism • Gradients • Dark UI • Minimalist design • Professional dashboards • Animated cards • Micro-interactions • Custom icons • Creative filters • Modern typography • Responsive layouts However, the website must remain: 𝗣𝗿𝗼𝗳𝗲𝘀𝘀𝗶𝗼𝗻𝗮𝗹 𝗨𝘀𝗮𝗯𝗹𝗲 𝗥𝗲𝗮𝗱𝗮𝗯𝗹𝗲 Do not sacrifice usability just to make the website look fancy. 𝗕𝗢𝗡𝗨𝗦 𝗖𝗛𝗔𝗟𝗟𝗘𝗡𝗚𝗘𝗦 🔥 These features are not mandatory but can make your project more advanced. You can implement: • Job Comparison • Recently Viewed Jobs • Search Suggestions • Debounced Search • URL-based Filters • Advanced Salary Filtering • Application Status Management • Toast Notification System • Skeleton Loading Animation • Keyboard Accessibility • Custom 404 Page • Print-friendly Job Details • Export Applications as JSON • Resume Preview • Job Sharing Button • Recently Searched Jobs 𝗩𝗘𝗥𝗬 𝗜𝗠𝗣𝗢𝗥𝗧𝗔𝗡𝗧 ⚠️ 𝗣𝘂𝗯𝗹𝗶𝗰 𝗥𝗲𝗽𝗼𝘀𝗶𝘁𝗼𝗿𝘆 Your GitHub repository MUST be public. Before submitting, open your repository in a private/incognito browser window. If GitHub asks for a login or the repository cannot be accessed publicly, it cannot be graded. 𝗟𝗶𝘃𝗲 𝗪𝗲𝗯𝘀𝗶𝘁𝗲 Your deployed URL must actually work. Graders will open your website on different devices and screen sizes. Broken links, missing assets, console errors, or non-functional features may result in marks being deducted. 𝗝𝗔𝗩𝗔𝗦𝗖𝗥𝗜𝗣𝗧 JavaScript is REQUIRED for this project. However, do not use: • React • Vue • Angular • Next.js • jQuery • Bootstrap JavaScript • Other JavaScript frameworks Use Vanilla JavaScript. 𝗜𝗡𝗗𝗜𝗩𝗜𝗗𝗨𝗔𝗟 𝗪𝗢𝗥𝗞 This is an individual project. Do not submit: • Someone else's template • A copied GitHub repository • A downloaded job portal • Another student's project • A shared project Copied or shared work may receive 0 marks. 𝗛𝗢𝗪 𝗬𝗢𝗨 𝗪𝗜𝗟𝗟 𝗕𝗘 𝗠𝗔𝗥𝗞𝗘𝗗 𝗗𝗘𝗦𝗜𝗚𝗡 & 𝗨𝗫 — 𝟮𝟬 𝗠𝗔𝗥𝗞𝗦 • Originality • Visual hierarchy • Typography • Colors • Spacing • Alignment • User experience • Overall professional appearance 𝗛𝗧𝗠𝗟 & 𝗖𝗦𝗦 — 𝟮𝟬 𝗠𝗔𝗥𝗞𝗦 • Semantic HTML • CSS Grid • Flexbox • Box Model • CSS Variables • Responsive Design • Animations • Transitions • Clean CSS 𝗝𝗔𝗩𝗔𝗦𝗖𝗥𝗜𝗣𝗧 — 𝟯𝟬 𝗠𝗔𝗥𝗞𝗦 • DOM Manipulation • Events • Functions • Arrays & Objects • Dynamic Rendering • Search • Filtering • Sorting • Form Validation 𝗗𝗔𝗧𝗔 & 𝗙𝗨𝗡𝗖𝗧𝗜𝗢𝗡𝗔𝗟𝗜𝗧𝗬 — 𝟭𝟱 𝗠𝗔𝗥𝗞𝗦 • Local Storage • Saved Jobs • Applications • Dashboard • Dynamic data handling 𝗥𝗘𝗦𝗣𝗢𝗡𝗦𝗜𝗩𝗘𝗡𝗘𝗦𝗦 — 𝟱 𝗠𝗔𝗥𝗞𝗦 • Mobile • Tablet • Desktop • No broken layouts 𝗗𝗘𝗣𝗟𝗢𝗬𝗠𝗘𝗡𝗧 & 𝗚𝗜𝗧𝗛𝗨𝗕 — 𝟱 𝗠𝗔𝗥𝗞𝗦 • Public Repository • Working Live Website • Proper GitHub structure 𝗗𝗢𝗖𝗨𝗠𝗘𝗡𝗧𝗔𝗧𝗜𝗢𝗡 — 𝟱 𝗠𝗔𝗥𝗞𝗦 • README • Screenshots • Live Demo • Project explanation • Setup instructions 𝗧𝗢𝗧𝗔𝗟 — 𝟭𝟬𝟬 𝗠𝗔𝗥𝗞𝗦 𝗦𝗨𝗕𝗠𝗜𝗦𝗦𝗜𝗢𝗡 📤 Submit ONLY your public GitHub repository link on the submission portal. Example: https://github.com/your-username/job-portal Make sure: • Repository is public • Code is complete • README is complete • Live website is working • All required features are functional 𝗠𝗔𝗜𝗡 𝗢𝗕𝗝𝗘𝗖𝗧𝗜𝗩𝗘 🎯 By the end of this project, you should have built a real-world interactive frontend application, not just another static webpage. You should be able to demonstrate that you can take a real-world problem, design its interface, structure the HTML, style it with CSS, and make it interactive using JavaScript. 𝗕𝘂𝗶𝗹𝗱 𝗶𝘁. 𝗕𝗿𝗲𝗮𝗸 𝗶𝘁. 𝗗𝗲𝗯𝘂𝗴 𝗶𝘁. 𝗜𝗺𝗽𝗿𝗼𝘃𝗲 𝗶𝘁. 🚀 𝗖𝗢𝗗𝗘𝗢𝗣𝗦 𝗣𝗥𝗢 𝗟𝗘𝗔𝗥𝗡𝗜𝗡𝗚 𝗔𝗖𝗔𝗗𝗘𝗠𝗬 𝗟𝗲𝗮𝗿𝗻 → 𝗣𝗿𝗮𝗰𝘁𝗶𝗰𝗲 → 𝗕𝘂𝗶𝗹𝗱 → 𝗗𝗲𝗽𝗹𝗼𝘆