Screenshot_2026-07-25-17-18-40-40_1c337646f29875672b5a61192b9010f9.jpgAct as a Senior Frontend Web Developer and UI/UX Designer. Build a highly modern, sleek, interactive, and responsive single-page website tailored for "MD Rehan" (From Hussaina, Student at IES University Bhopal & CEO/Partner at Rahmani Technology).
🎯 Objective of the Website:
A custom "30-Day Tech Foundation & Developer Roadmap" dashboard designed to take Rehan from a complete laptop/computer beginner to a confident CSE student ready to target Big Tech (FAANG/MNC) companies.
🎨 Visual & UI Style:
- Theme: Dark Mode Developer Aesthetic (Deep Dark background
#0F172A, Neon Cyan/Green accents #06B6D4, Cyberpunk/Modern Software Engineer vibe).
- Typography: Modern Sans-Serif font (Inter / JetBrains Mono look).
- Components: Interactive Checkboxes for each day, Progress Bar (0% to 100%), Clean Cards, Badges, Accordions for daily details, and Motivational Quote banners.
🌐 Page Structure & Content:
-
HERO SECTION:
- Headline: "MD Rehan's 30-Day Tech Foundation Bootcamp"
- Subheadline: "CEO @ Rahmani Tech | CSE @ IES University Bhopal | Future Big-Tech Software Engineer"
- Interactive Elements: Overall Progress Bar (updates as days are marked completed), "Start Day 1" CTA button.
- Motivation Badge: "From Zero Laptop Literacy to Big Tech Aspirant in 30 Days."
-
REHAN'S VISION & GOALS (Card Section):
- Current Role: CEO & Partner, Rahmani Technology
- Academic Base: IES University, Bhopal (CSE)
- Ultimate Goal: Cracking Big-Tech Companies & Building Scalable Systems
- Motto: "Logic Over Tools. Consistency Over Speed."
-
30-DAY DAY-BY-DAY CURRICULUM (Interactive Accordion/Timeline):
- WEEK 1: Laptop Literacy & OS Mastery (Days 1–7)
- Day 1: Hardware & OS Basics – Booting, Wi-Fi, Trackpad, Shutdown, System Specs.
- Day 2: File System Mastery – Creating Folders, Drivers (C/D), File Paths, Copy-Paste, Delete.
- Day 3: Keyboard & Trackpad Mastery – Essential Shortcuts (Ctrl+C, Ctrl+V, Alt+Tab, Win+D, Ctrl+Z).
- Day 4: Software Management – Installing/Uninstalling Chrome, VS Code, PDF Readers safely.
- Day 5: Touch Typing Practice – Aim for 20 WPM on Monkeytype/TypingClub (1 hr/day).
- Day 6: Browser Mastery – Tab management, bookmarks, inspecting element basics, extension setup.
- Day 7: Week 1 Challenge – Organize your PC, set up custom wallpapers, and complete a 5-minute typing test.
- WEEK 2: Internet Literacy & Developer Mindset (Days 8–14)
- Day 8: Effective Google Search – Searching for tech errors, finding free PDFs & documentation.
- Day 9: Cloud Basics – Google Drive, Google Docs, creating project documentation.
- Day 10: YouTube as a Tech Tool – Subscribing to top CS channels (FreeCodeCamp, Gate Smashers, CodeWithHarry).
- Day 11: Email & Professional Communication – Writing professional emails and formal text.
- Day 12: Logic Building on Paper – Drawing Flowcharts (Start, Process, Decision, End).
- Day 13: Algorithm Thinking – Writing step-by-step pseudo-code for real-world tasks (e.g., Making Tea, Finding Largest Number).
- Day 14: Week 2 Challenge – Create a PDF document explaining "My Vision for Rahmani Tech & Future Career".
- WEEK 3: Programming Environment & First Code (Days 15–22)
- Day 15: Code Editors – Installing VS Code, understanding extensions (C/C++, Python, Live Server).
- Day 16: Command Line / Terminal Basics –
cd, dir, mkdir, cls commands in CMD.
- Day 17: Your First Program – "Hello, World!" in C/Python. Understanding compilation/execution.
- Day 18: Variables & Data Types – Integers, Floats, Characters, Strings in memory.
- Day 19: Inputs & Outputs – Taking user inputs (scanf/input) and printing formatted outputs.
- Day 20: Operators & Math Logic – Arithmetic, Relational, and Logical operators.
- Day 21: Decision Making –
if, else-if, else condition logic.
- Day 22: Week 3 Challenge – Build a program to check if a number is Even or Odd, and Positive or Negative.
- WEEK 4: Logic Loops & Big-Tech Career Vision (Days 23–30)
- Day 23: Loops Basics – Understanding
for and while loops (Automation).
- Day 24: Loop Practice – Printing tables, counting 1 to 100, pattern printing logic.
- Day 25: Basic Functions – Reusable code blocks, passing parameters, return values.
- Day 26: What is DSA (Data Structures & Algorithms)? – Why Big Tech (Google/Amazon) asks DSA.
- Day 27: Git & GitHub Overview – What is version control, setting up a GitHub account.
- Day 28: Mini Project Day – Create a Simple Command-Line Calculator.
- Day 29: College Syllabus Alignment – Reviewing IES University 1st Year Syllabus & Textbook list.
- Day 30: Graduation Day! – Reviewing all 30 days, setting goals for Semester 1, celebration badge!
-
THE BIG TECH ROADMAP (Infographic / Card Section):
- Year 1: Basics of Programming (C/C++), Strong Mathematics, Typing & Git.
- Year 2: Data Structures & Algorithms (DSA), Web/App Development, Hackathons.
- Year 3: Core Computer Science (OS, DBMS, Computer Networks), Open Source & Internships.
- Year 4: Advanced DSA, System Design Basics, Mock Interviews & Big Tech Applications.
-
FOOTER:
- Designed with ❤️ for MD Rehan.
- "Every Senior Engineer started as a beginner who didn't quit."
💻 Technical Requirements for Code Generation:
-
Use clean HTML5, Tailwind CSS (for quick styling), and vanilla JavaScript.
-
JavaScript functionality: Store progress (checkbox state) in localStorage so Rehan doesn't lose his prog
ress when refreshing the page.
-
Responsive for both Mobile and Desktop screens.
And add his photo as a gentelman