From 38a64783d31cc6398163c70daafd5a8a3afddf02 Mon Sep 17 00:00:00 2001 From: Devesh S Date: Fri, 7 Aug 2026 14:47:05 +0530 Subject: [PATCH] separate Toolkit into standalone page and route --- src/App.tsx | 2 + src/constants/index.ts | 2 +- src/pages/Notes/Notes.tsx | 52 -- src/pages/Toolkit/Toolkit.tsx | 1020 +++++++++++++++++++++++++++++++++ 4 files changed, 1023 insertions(+), 53 deletions(-) create mode 100644 src/pages/Toolkit/Toolkit.tsx diff --git a/src/App.tsx b/src/App.tsx index 19058ff..4bd0292 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,7 @@ import ProtectedRoute from '@/components/Auth/ProtectedRoute'; import MainLayout from '@/layouts/MainLayout'; import Home from '@/pages/Home/Home'; import Notes from '@/pages/Notes/Notes'; +import Toolkit from '@/pages/Toolkit/Toolkit'; import AIAssistant from '@/pages/AIAssistant/AIAssistant'; import Campus from '@/pages/Campus/Campus'; import Events from '@/pages/Events/Events'; @@ -44,6 +45,7 @@ function App() { }> } /> } /> + } /> } /> } /> } /> diff --git a/src/constants/index.ts b/src/constants/index.ts index 34f9b46..3424b18 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -94,7 +94,7 @@ export const FEATURES: Feature[] = [ icon: 'Wrench', title: 'Student Toolkit', description: 'Download timetables, academic calendar, syllabus, forms, and ERP guides.', - path: '/notes?section=toolkit', + path: '/toolkit', color: '#06B6D4', bgColor: '#ECFEFF', }, diff --git a/src/pages/Notes/Notes.tsx b/src/pages/Notes/Notes.tsx index 7e48e37..8b4ccd1 100644 --- a/src/pages/Notes/Notes.tsx +++ b/src/pages/Notes/Notes.tsx @@ -2025,58 +2025,6 @@ export default function Notes() { - - {/* Toolkit Section */} -
- - - {TOOLKIT_ITEMS.map((item) => { - const iconConfig = TOOLKIT_ICONS[item.title] || { icon: Code, bg: '#FFF7ED', color: '#F97316' }; - const IconComponent = iconConfig.icon; - return ( - - { - if (item.title === 'CS tools') { - setSelectedToolkit('cs'); - } else if (item.title === 'Business tools') { - setSelectedToolkit('business'); - } else if (item.title === 'Electrical and Electronic tools') { - setSelectedToolkit('electrical'); - } else if (item.title === 'Cybersecurity tools') { - setSelectedToolkit('cybersecurity'); - } else if (item.title === 'AI tools') { - setSelectedToolkit('ai'); - } else if (item.title === 'Biotech tools') { - setSelectedToolkit('biotech'); - } else if (item.url && item.url !== '#') { - window.open(item.url, '_blank'); - } - }} - whileHover={{ y: -4, boxShadow: '0 12px 30px -10px rgba(249,115,22,0.15)' }} - className="flex items-start gap-5 p-7 bg-white hover:bg-[#FFF7ED] rounded-[22px] border border-[#E5E7EB] hover:border-[#FED7AA] cursor-pointer group w-full transition-all shadow-xs hover:shadow-md" - > -
- -
-
-
- {item.title} -
-
- {item.description} -
-
- - - - ); - })} - -
)} diff --git a/src/pages/Toolkit/Toolkit.tsx b/src/pages/Toolkit/Toolkit.tsx new file mode 100644 index 0000000..e7a03d3 --- /dev/null +++ b/src/pages/Toolkit/Toolkit.tsx @@ -0,0 +1,1020 @@ +import { useState, useRef, useEffect } from 'react'; +import { useSearchParams, Link } from 'react-router-dom'; +import { motion } from 'framer-motion'; +import { + Search, Download, BookOpen, ChevronRight, ArrowLeft, ExternalLink, Code, Globe, + GitBranch, Cloud, Palette, Shield, DollarSign, BarChart3, Users, Megaphone, + TrendingUp, UserCheck, ClipboardList, ShoppingCart, Cpu, Activity, LayoutGrid, + Layers, Zap, Settings, Gauge, Radio, Wifi, Bot, Sun, Wrench, Binary, BatteryCharging, + CircuitBoard, ShieldCheck, BrainCircuit, FlaskConical, Lock, Terminal, Dna, Microscope, + Sparkles, Smartphone, Monitor, Server, CheckCircle2, Database, Briefcase, AlertTriangle, RefreshCw +} from 'lucide-react'; +import SectionTitle from '@/components/SectionTitle/SectionTitle'; +import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer'; +import { TOOLKIT_ITEMS } from '@/constants'; + +const TOOLKIT_ICONS: Record; bg: string; color: string }> = { + 'CS tools': { icon: Code, bg: '#EFF6FF', color: '#3B82F6' }, + 'Business tools': { icon: Briefcase, bg: '#ECFDF5', color: '#10B981' }, + 'Cybersecurity tools': { icon: ShieldCheck, bg: '#F5F3FF', color: '#8B5CF6' }, + 'AI tools': { icon: BrainCircuit, bg: '#FDF2F8', color: '#EC4899' }, + 'Electrical and Electronic tools': { icon: Zap, bg: '#FEF3C7', color: '#D97706' }, + 'Biotech tools': { icon: Dna, bg: '#ECFEFF', color: '#06B6D4' }, +}; + +const PROGRAMMING_LANGUAGES_GUIDES = [ + { + name: 'Python', + tagline: 'Simple, Readable & Beginner-Friendly', + color: '#3776AB', + bg: '#EFF6FF', + whatItIs: 'Python is known for its clean, English-like syntax. It lets you write code quickly without worrying about complex computer memory setups, making it the top choice for beginners.', + keyConcepts: [ + 'Writing your first line of code using print("Hello World!")', + 'Storing numbers, text, and lists in smart variables', + 'Making decisions in code using simple if and else conditions', + 'Automating repetitive tasks effortlessly using loops', + 'Reusing code blocks with custom functions (def)', + 'Using pre-built libraries to build web apps, AI bots, or scrape web data' + ], + useCases: ['Web Development (Django, FastAPI)', 'Data Science & Analytics', 'Artificial Intelligence & Machine Learning', 'Automation & Web Scraping'], + links: [ + { label: 'Official Python Documentation', url: 'https://docs.python.org/3/' }, + { label: 'Python for Beginners Guide', url: 'https://www.python.org/about/gettingstarted/' }, + { label: 'FreeCodeCamp Python Course', url: 'https://www.freecodecamp.org/news/learn-python-free-python-courses-for-beginners/' } + ] + }, + { + name: 'Java', + tagline: 'Build Once, Run Anywhere', + color: '#007396', + bg: '#E0F2FE', + whatItIs: 'Java powers enterprise apps, banking systems, and Android smartphones. Code written in Java can run on any operating system without modification!', + keyConcepts: [ + 'Understanding Classes & Objects — modeling real-world items in code', + 'Learning how the main() method serves as the starting trigger', + 'Organizing data cleanly using static types like int, String, and boolean', + 'Reusing existing code seamlessly with Inheritance & Interfaces', + 'Handling errors gracefully so applications never crash unexpectedly', + 'Building robust backend services with Spring Boot' + ], + useCases: ['Enterprise Backend Systems', 'Android Application Development', 'Financial & Banking Systems', 'Large-Scale Web Services'], + links: [ + { label: 'Official Oracle Java Docs', url: 'https://docs.oracle.com/en/java/' }, + { label: 'W3Schools Java Tutorial', url: 'https://www.w3schools.com/java/' }, + { label: 'Spring Boot Getting Started', url: 'https://spring.io/guides' } + ] + }, + { + name: 'C++', + tagline: 'Blazing Speed & Hardware Control', + color: '#00599C', + bg: '#EFF6FF', + whatItIs: 'C++ provides ultimate control over memory and hardware. It is the core language powering high-end video games, operating systems, and flight controllers.', + keyConcepts: [ + 'Compiling human-readable code into ultra-fast machine instructions', + 'Exploring Pointers (*) & Memory Addresses (&) for direct hardware control', + 'Using the Standard Template Library (STL) for instant stacks, queues, and vectors', + 'Structuring programs cleanly with Classes, Structs, and Objects', + 'Solving complex algorithmic puzzles in competitive programming', + 'Building 3D game engines like Unreal Engine' + ], + useCases: ['Game Engines (Unreal Engine)', 'Operating Systems & Browsers', 'Competitive Programming & DSA', 'Embedded Systems & Robotics'], + links: [ + { label: 'cppreference.com Reference', url: 'https://en.cppreference.com/' }, + { label: 'LearnCpp Free Tutorials', url: 'https://www.learncpp.com/' }, + { label: 'GeeksforGeeks C++ Programming', url: 'https://www.geeksforgeeks.org/c-plus-plus/' } + ] + }, + { + name: 'JavaScript', + tagline: 'The Heartbeat of the Web', + color: '#D97706', + bg: '#FEFCE8', + whatItIs: 'JavaScript brings websites to life! Every button click, popup animation, dynamic page update, and live chat on the web is powered by JavaScript.', + keyConcepts: [ + 'Making web pages interactive by responding to user clicks and keypresses', + 'Changing text, colors, and layouts dynamically on the screen (DOM)', + 'Fetching live data from servers without refreshing the browser (fetch API)', + 'Writing clean code using modern Arrow Functions (() => {})', + 'Handling background actions smoothly using async / await', + 'Building backend web servers using Node.js' + ], + useCases: ['Interactive Web Interfaces (React, Vue)', 'Backend Web Servers (Node.js)', 'Full-Stack Web Applications', 'Mobile Apps (React Native)'], + links: [ + { label: 'MDN JavaScript Documentation', url: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript' }, + { label: 'JavaScript.info Modern Tutorial', url: 'https://javascript.info/' }, + { label: 'W3Schools JavaScript Guide', url: 'https://www.w3schools.com/js/' } + ] + }, + { + name: 'TypeScript', + tagline: 'JavaScript with Smart Safety Nets', + color: '#3178C6', + bg: '#EFF6FF', + whatItIs: 'TypeScript is JavaScript with built-in type checking! It acts like an intelligent spell-checker for code, preventing bugs and typos before your app even launches.', + keyConcepts: [ + 'Adding clear types (string, number) to catch bugs as you type', + 'Creating Interfaces to define exact data structures for your app', + 'Enjoying supercharged code suggestions & autocomplete in VS Code', + 'Building scalable React and Next.js web applications', + 'Catching errors during development instead of in production' + ], + useCases: ['Enterprise Web Applications', 'Modern React & Next.js Apps', 'Scalable Microservices', 'Large-Scale Team Projects'], + links: [ + { label: 'Official TypeScript Handbook', url: 'https://www.typescriptlang.org/docs/handbook/intro.html' }, + { label: 'TypeScript in 5 Minutes', url: 'https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html' } + ] + }, + { + name: 'Go (Golang)', + tagline: 'Built by Google for Cloud Speed', + color: '#00ADD8', + bg: '#ECFEFF', + whatItIs: 'Created at Google for simplicity and lightning speed. Go is famous for powering modern cloud infrastructure like Docker and Kubernetes.', + keyConcepts: [ + 'Writing simple, ultra-clean code without unnecessary syntax clutter', + 'Running thousands of background tasks at once using Goroutines', + 'Passing data safely between parallel tasks using Channels', + 'Building super-fast Web APIs in just a few lines of code', + 'Compiling your entire project into a single fast binary executable' + ], + useCases: ['Cloud Platforms (Docker, Kubernetes)', 'High-Speed Microservices', 'DevOps Tools', 'Network Infrastructure'], + links: [ + { label: 'A Tour of Go (Interactive)', url: 'https://go.dev/tour/' }, + { label: 'Official Go Documentation', url: 'https://go.dev/doc/' } + ] + }, + { + name: 'Rust', + tagline: 'Maximum Speed Without System Crashes', + color: '#CE412B', + bg: '#FFF7ED', + whatItIs: 'Rust gives you the speed of C++ with memory safety. It guarantees that software will not crash due to memory leaks or unexpected buffer glitches.', + keyConcepts: [ + 'Understanding Ownership — how Rust automatically manages memory', + 'Sharing data safely across code using Borrowing (&)', + 'Handling all possible conditions cleanly with pattern matching (match)', + 'Managing packages, builds, and tests using the Cargo tool', + 'Building high-security web servers, crypto engines, and WebAssembly apps' + ], + useCases: ['Systems & Kernel Development', 'WebAssembly (Wasm) Applications', 'High-Performance Networking', 'Blockchain & Security Engines'], + links: [ + { label: 'The Rust Programming Language Book', url: 'https://doc.rust-lang.org/book/' }, + { label: 'Rust by Example', url: 'https://doc.rust-lang.org/rust-by-example/' } + ] + }, + { + name: 'C# (.NET)', + tagline: 'Modern, Versatile & Game-Ready', + color: '#239120', + bg: '#ECFDF5', + whatItIs: 'Created by Microsoft, C# is an elegant language widely used for building 3D/2D games in Unity, Windows desktop applications, and web services.', + keyConcepts: [ + 'Writing clean Object-Oriented code with concise Properties', + 'Filtering, searching, and sorting data in 1 line using LINQ', + 'Building immersive video games with the Unity Game Engine', + 'Creating high-speed web APIs using ASP.NET Core', + 'Building cross-platform desktop & mobile apps with .NET MAUI' + ], + useCases: ['Unity 3D/2D Game Development', 'Enterprise Web Backends (ASP.NET Core)', 'Windows Desktop Applications', 'Cross-Platform Apps (.NET MAUI)'], + links: [ + { label: 'Official Microsoft C# Documentation', url: 'https://learn.microsoft.com/en-us/dotnet/csharp/' }, + { label: 'W3Schools C# Guide', url: 'https://www.w3schools.com/cs/' } + ] + } +]; + +const CS_TOOLS_CATEGORIES = [ + { + title: 'Programming Languages', + icon: Code, + color: '#3B82F6', + bg: '#EFF6FF', + tools: [ + { name: 'Python', desc: 'High-level, beginner-friendly language for AI, Web, & Scripts.', url: '#' }, + { name: 'Java', desc: 'Object-oriented enterprise language running on the JVM.', url: '#' }, + { name: 'C++', desc: 'High-performance systems programming and game development.', url: '#' }, + { name: 'JavaScript', desc: 'Core language of the web for frontend and backend.', url: '#' }, + { name: 'TypeScript', desc: 'Strongly typed superset of JavaScript at scale.', url: '#' }, + { name: 'Go (Golang)', desc: 'Fast, concurrent language for cloud & microservices.', url: '#' }, + { name: 'Rust', desc: 'Ultra-fast memory-safe systems programming language.', url: '#' }, + { name: 'C# (.NET)', desc: 'Versatile OOP language for games, desktop, & web backends.', url: '#' } + ] + }, + { + title: 'Version Control', + icon: GitBranch, + color: '#F97316', + bg: '#FFF7ED', + tools: [ + { name: 'Source Code Management', desc: 'Git CLI distributed version control system.', url: 'https://git-scm.com/' }, + { name: 'Repository Hosting', desc: 'GitHub, GitLab, Bitbucket, and Gitea platforms.', url: 'https://github.com/' }, + { name: 'Git Clients', desc: 'GitHub Desktop, GitKraken, Sourcetree, and Lazygit.', url: 'https://desktop.github.com/' }, + { name: 'Code Review', desc: 'GitHub Pull Requests, Crucible, and Gerrit review workflows.', url: 'https://github.com/features/code-review' } + ] + }, + { + title: 'Web Development', + icon: Globe, + color: '#10B981', + bg: '#ECFDF5', + tools: [ + { name: 'Frontend Development', desc: 'React, Vue.js, Angular, Svelte, Tailwind CSS, HTML5/CSS3.', url: 'https://react.dev/' }, + { name: 'Backend Development', desc: 'Spring Boot, Express.js, Django, FastAPI, NestJS.', url: 'https://spring.io/projects/spring-boot' }, + { name: 'Full-Stack Development', desc: 'Next.js, Remix, Nuxt.js, and Astro full-stack frameworks.', url: 'https://nextjs.org/' }, + { name: 'Static Site Generators', desc: 'Gatsby, Hugo, Jekyll, and Eleventy.', url: 'https://www.gatsbyjs.com/' }, + { name: 'CMS', desc: 'WordPress, Strapi, Sanity, and Ghost Content Management Systems.', url: 'https://strapi.io/' }, + { name: 'Web Performance', desc: 'Lighthouse, PageSpeed Insights, and Web Vitals analytics.', url: 'https://pagespeed.web.dev/' } + ] + }, + { + title: 'Mobile Development', + icon: Smartphone, + color: '#8B5CF6', + bg: '#F5F3FF', + tools: [ + { name: 'Android Development', desc: 'Android Studio, Kotlin, Jetpack Compose, and Java.', url: 'https://developer.android.com/studio' }, + { name: 'iOS Development', desc: 'Xcode, Swift, SwiftUI, and CocoaPods.', url: 'https://developer.apple.com/xcode/' }, + { name: 'Cross-Platform Development', desc: 'Flutter, React Native, and Expo framework.', url: 'https://flutter.dev/' }, + { name: 'Mobile Testing', desc: 'Appium, Espresso, and XCUITest automation.', url: 'https://appium.io/' }, + { name: 'App Deployment', desc: 'Google Play Console, Apple App Store Connect, Fastlane.', url: 'https://play.google.com/console' } + ] + }, + { + title: 'Databases', + icon: Database, + color: '#06B6D4', + bg: '#ECFEFF', + tools: [ + { name: 'Relational Databases (SQL)', desc: 'PostgreSQL, MySQL, SQLite, and Microsoft SQL Server.', url: 'https://www.postgresql.org/' }, + { name: 'NoSQL Databases', desc: 'MongoDB, Cassandra, CouchDB, and DynamoDB.', url: 'https://www.mongodb.com/' }, + { name: 'Graph Databases', desc: 'Neo4j, Amazon Neptune, and ArangoDB.', url: 'https://neo4j.com/' }, + { name: 'Time-Series Databases', desc: 'InfluxDB, TimescaleDB, and Prometheus.', url: 'https://www.influxdata.com/' }, + { name: 'In-Memory Databases', desc: 'Redis, Memcached, and Dragonfly.', url: 'https://redis.io/' }, + { name: 'Database Administration', desc: 'pgAdmin, DBeaver, DataGrip, and phpMyAdmin.', url: 'https://www.dbeaver.io/' }, + { name: 'Database Modeling', desc: 'dbdiagram.io, Erwin, and MySQL Workbench.', url: 'https://dbdiagram.io/' } + ] + }, + { + title: 'UI / UX Design', + icon: Palette, + color: '#EC4899', + bg: '#FDF2F8', + tools: [ + { name: 'Wireframing', desc: 'Balsamiq, Figma, and Whimsical wireframing.', url: 'https://balsamiq.com/' }, + { name: 'Prototyping', desc: 'Figma, Adobe XD, Proto.io, and Framer.', url: 'https://www.figma.com/' }, + { name: 'Design Systems', desc: 'Storybook, Material Design, and Tailwind UI.', url: 'https://storybook.js.org/' }, + { name: 'User Research', desc: 'Maze, UserTesting, and Hotjar analytics.', url: 'https://maze.co/' }, + { name: 'Accessibility Testing', desc: 'axe DevTools, WAVE, and Lighthouse A11y audit.', url: 'https://www.deque.com/axe/' } + ] + }, + { + title: 'Collaboration', + icon: Users, + color: '#EAB308', + bg: '#FEFCE8', + tools: [ + { name: 'Documentation', desc: 'Confluence, Notion, MkDocs, and Docusaurus.', url: 'https://docusaurus.io/' }, + { name: 'Team Communication', desc: 'Slack, Microsoft Teams, Discord, and Mattermost.', url: 'https://slack.com/' }, + { name: 'Project Management', desc: 'Jira, Trello, Asana, and Linear ticket tracking.', url: 'https://linear.app/' }, + { name: 'Whiteboarding', desc: 'Miro, FigJam, Excalidraw, and Lucidchart.', url: 'https://excalidraw.com/' }, + { name: 'Knowledge Management', desc: 'Obsidian, Notion, and Slite workspace wiki.', url: 'https://obsidian.md/' } + ] + }, + { + title: 'Software Engineering', + icon: Layers, + color: '#D97706', + bg: '#FEF3C7', + tools: [ + { name: 'UML & System Design', desc: 'Draw.io, PlantUML, Mermaid.js, and StarUML.', url: 'https://mermaid.js.org/' }, + { name: 'Architecture Design', desc: 'C4 Model, ArchiMate, and System Architecture patterns.', url: 'https://c4model.com/' }, + { name: 'Design Patterns', desc: 'Gang of Four (GoF) Creational, Structural, Behavioral patterns.', url: 'https://refactoring.guru/design-patterns' }, + { name: 'Code Analysis', desc: 'SonarQube, ESLint, Pylint, and SpotBugs linters.', url: 'https://eslint.org/' }, + { name: 'Debugging', desc: 'GDB, Chrome DevTools, Visual Studio Debugger, and Charles Proxy.', url: 'https://developer.chrome.com/docs/devtools/' }, + { name: 'Performance Profiling', desc: 'Perf, JProfiler, Py-Spy, and Chrome Memory Profiler.', url: 'https://github.com/benfred/py-spy' } + ] + }, + { + title: 'Networking', + icon: Wifi, + color: '#2563EB', + bg: '#EFF6FF', + tools: [ + { name: 'Network Analysis', desc: 'Wireshark packet capture and traffic protocol analyzer.', url: 'https://www.wireshark.org/' }, + { name: 'Packet Simulation', desc: 'Cisco Packet Tracer and GNS3 network topology simulation.', url: 'https://www.netacad.com/courses/packet-tracer' }, + { name: 'Port Scanning & Recon', desc: 'Nmap and Masscan network discovery tools.', url: 'https://nmap.org/' }, + { name: 'API & HTTP Debugging', desc: 'Postman, Fiddler, and Charles Proxy HTTP inspection.', url: 'https://www.postman.com/' }, + { name: 'Remote Terminal & SSH', desc: 'PuTTY, OpenSSH, and Termius terminal clients.', url: 'https://www.putty.org/' } + ] + } +]; + +const BUSINESS_TOOLS_CATEGORIES = [ + { + title: 'Accounting & Finance', + icon: DollarSign, + color: '#10B981', + bg: '#ECFDF5', + tools: [ + { name: 'QuickBooks', desc: 'Cloud accounting software for small and mid-sized businesses.', url: 'https://quickbooks.intuit.com/' }, + { name: 'Tally Prime', desc: 'India\'s leading accounting and inventory management solution.', url: 'https://tallysolutions.com/' }, + { name: 'Zoho Books', desc: 'Online accounting software for growing businesses.', url: 'https://www.zoho.com/books/' } + ] + }, + { + title: 'Business Intelligence', + icon: BarChart3, + color: '#3B82F6', + bg: '#EFF6FF', + tools: [ + { name: 'Power BI', desc: 'Microsoft\'s interactive data visualization and BI tool.', url: 'https://powerbi.microsoft.com/' }, + { name: 'Tableau', desc: 'Visual analytics platform for data-driven decisions.', url: 'https://www.tableau.com/' }, + { name: 'Google Looker', desc: 'Business intelligence and data analytics by Google Cloud.', url: 'https://cloud.google.com/looker' } + ] + }, + { + title: 'CRM', + icon: Users, + color: '#8B5CF6', + bg: '#F5F3FF', + tools: [ + { name: 'Salesforce', desc: 'World\'s leading CRM platform for sales and support.', url: 'https://www.salesforce.com/' }, + { name: 'HubSpot CRM', desc: 'Free CRM with marketing, sales, and service tools.', url: 'https://www.hubspot.com/products/crm' }, + { name: 'Zoho CRM', desc: 'AI-powered CRM for customer lifecycle management.', url: 'https://www.zoho.com/crm/' } + ] + }, + { + title: 'Marketing', + icon: Megaphone, + color: '#EC4899', + bg: '#FDF2F8', + tools: [ + { name: 'Google Ads', desc: 'Online advertising platform for paid search and display.', url: 'https://ads.google.com/' }, + { name: 'Mailchimp', desc: 'Email marketing and automation platform.', url: 'https://mailchimp.com/' }, + { name: 'Canva', desc: 'Design tool for social media graphics and presentations.', url: 'https://www.canva.com/' } + ] + }, + { + title: 'Sales', + icon: TrendingUp, + color: '#F97316', + bg: '#FFF7ED', + tools: [ + { name: 'LinkedIn Sales Navigator', desc: 'Advanced lead generation and prospecting tool.', url: 'https://business.linkedin.com/sales-solutions' }, + { name: 'Pipedrive', desc: 'Sales CRM and pipeline management tool.', url: 'https://www.pipedrive.com/' }, + { name: 'Freshsales', desc: 'AI-powered sales CRM for high-velocity teams.', url: 'https://www.freshworks.com/crm/sales/' } + ] + }, + { + title: 'Human Resources (HR)', + icon: UserCheck, + color: '#06B6D4', + bg: '#ECFEFF', + tools: [ + { name: 'BambooHR', desc: 'HR software for employee records, onboarding, and PTO.', url: 'https://www.bamboohr.com/' }, + { name: 'Workday', desc: 'Enterprise cloud platform for finance, HR, and planning.', url: 'https://www.workday.com/' }, + { name: 'Zoho People', desc: 'Cloud HRMS software for managing employee operations.', url: 'https://www.zoho.com/people/' } + ] + }, + { + title: 'Project & Operations', + icon: ClipboardList, + color: '#D97706', + bg: '#FEF3C7', + tools: [ + { name: 'Asana', desc: 'Work management platform to organize team projects.', url: 'https://asana.com/' }, + { name: 'Trello', desc: 'Kanban-style project management and list tool.', url: 'https://trello.com/' }, + { name: 'Smartsheet', desc: 'Enterprise platform for dynamic work and project management.', url: 'https://www.smartsheet.com/' } + ] + }, + { + title: 'E-Commerce', + icon: ShoppingCart, + color: '#6366F1', + bg: '#EEF2FF', + tools: [ + { name: 'Shopify', desc: 'E-commerce platform for online stores and retail POS.', url: 'https://www.shopify.com/' }, + { name: 'WooCommerce', desc: 'Open-source e-commerce plugin for WordPress.', url: 'https://woocommerce.com/' }, + { name: 'Magento (Adobe Commerce)', desc: 'Flexible enterprise e-commerce platform.', url: 'https://business.adobe.com/products/magento/magento-commerce.html' } + ] + } +]; + +const EE_TOOLS_CATEGORIES = [ + { + title: 'Circuit Simulation & CAD', + icon: Cpu, + color: '#D97706', + bg: '#FEF3C7', + tools: [ + { name: 'LTspice', desc: 'High-performance SPICE simulation software for analog circuits.', url: 'https://www.analog.com/en/design-center/design-tools-and-calculators/ltspice-simulator.html' }, + { name: 'Proteus Design Suite', desc: 'Circuit simulation, schematic capture, and PCB layout.', url: 'https://www.labcenter.com/' }, + { name: 'Multisim (NI)', desc: 'SPICE simulation and circuit design environment.', url: 'https://www.ni.com/en-in/shop/electronic-test-instrumentation/application-software-for-electronic-test-and-instrumentation-category/what-is-multisim.html' } + ] + }, + { + title: 'Computation & Analysis', + icon: Activity, + color: '#0284C7', + bg: '#E0F2FE', + tools: [ + { name: 'MATLAB', desc: 'Numerical computing environment for algorithms and data analysis.', url: 'https://www.mathworks.com/products/matlab.html' }, + { name: 'Simulink', desc: 'Block diagram environment for multi-domain simulation.', url: 'https://www.mathworks.com/products/simulink.html' }, + { name: 'LabVIEW', desc: 'System design software for test, measurement, and control.', url: 'https://www.ni.com/en-in/shop/labview.html' } + ] + }, + { + title: 'PCB Design', + icon: LayoutGrid, + color: '#16A34A', + bg: '#DCFCE7', + tools: [ + { name: 'KiCad EDA', desc: 'Open-source electronics design automation suite.', url: 'https://www.kicad.org/' }, + { name: 'Altium Designer', desc: 'PCB design and electronics development software.', url: 'https://www.altium.com/' }, + { name: 'Eagle (Autodesk)', desc: 'PCB layout and schematic editing software.', url: 'https://www.autodesk.com/products/eagle/overview' } + ] + }, + { + title: 'Embedded Systems', + icon: Layers, + color: '#7C3AED', + bg: '#F3E8FF', + tools: [ + { name: 'STM32CubeIDE', desc: 'C/C++ development platform for STM32 microcontrollers.', url: 'https://www.st.com/en/development-tools/stm32cubeide.html' }, + { name: 'Keil uVision', desc: 'IDE for ARM cortex microcontroller programming.', url: 'https://www.keil.com/' }, + { name: 'Arduino IDE', desc: 'Open-source software for microcontroller board programming.', url: 'https://www.arduino.cc/en/software' } + ] + }, + { + title: 'Power Systems', + icon: Zap, + color: '#EA580C', + bg: '#FFEDD5', + tools: [ + { name: 'ETAP', desc: 'Electrical power system analysis and operation software.', url: 'https://etap.com/' }, + { name: 'PSCAD', desc: 'Power system transient simulation environment.', url: 'https://www.pscad.com/' }, + { name: 'PowerWorld Simulator', desc: 'Power system visual analysis and power flow tool.', url: 'https://www.powerworld.com/' } + ] + }, + { + title: 'Control Systems', + icon: Settings, + color: '#059669', + bg: '#D1FAE5', + tools: [ + { name: 'Control System Toolbox (MATLAB)', desc: 'Tools for analyzing and designing control systems.', url: 'https://www.mathworks.com/products/control.html' }, + { name: 'Scilab Xcos', desc: 'Open-source graphical editor for dynamic systems simulation.', url: 'https://www.scilab.org/' } + ] + }, + { + title: 'Instrumentation', + icon: Gauge, + color: '#4F46E5', + bg: '#EEF2FF', + tools: [ + { name: 'NI MAX (Measurement & Automation Explorer)', desc: 'Configuration tool for NI hardware devices.', url: 'https://www.ni.com/' }, + { name: 'Keysight PathWave', desc: 'Test and measurement software suite.', url: 'https://www.keysight.com/' } + ] + }, + { + title: 'Signal Processing', + icon: Radio, + color: '#DB2777', + bg: '#FCE7F3', + tools: [ + { name: 'GNU Radio', desc: 'Software development toolkit for signal processing & SDR.', url: 'https://www.gnuradio.org/' }, + { name: 'DSP System Toolbox (MATLAB)', desc: 'Design and simulate signal processing systems.', url: 'https://www.mathworks.com/products/dsp-system.html' } + ] + } +]; + +const CYBERSECURITY_TOOLS_CATEGORIES = [ + { + title: 'Network Scanner', + icon: Wifi, + color: '#3B82F6', + bg: '#EFF6FF', + tools: [ + { name: 'Nmap', desc: 'Network discovery and vulnerability scanning security auditor.', url: 'https://nmap.org/' }, + { name: 'Masscan', desc: 'Ultra-fast IP port scanner capable of scanning the whole internet.', url: 'https://github.com/robertdavidgraham/masscan' }, + { name: 'Angry IP Scanner', desc: 'Fast and friendly network scanner for desktop platforms.', url: 'https://angryip.org/' } + ] + }, + { + title: 'Penetration Testing', + icon: ShieldCheck, + color: '#8B5CF6', + bg: '#F5F3FF', + tools: [ + { name: 'Metasploit Framework', desc: 'World\'s most used penetration testing framework.', url: 'https://www.metasploit.com/' }, + { name: 'Burp Suite', desc: 'Leading web security testing and vulnerability scanner.', url: 'https://portswigger.net/burp' }, + { name: 'OWASP ZAP', desc: 'Open-source web application security scanner.', url: 'https://www.zaproxy.org/' } + ] + }, + { + title: 'Forensics', + icon: Terminal, + color: '#06B6D4', + bg: '#ECFEFF', + tools: [ + { name: 'Autopsy', desc: 'Digital forensics platform and GUI for The Sleuth Kit.', url: 'https://www.autopsy.com/' }, + { name: 'Volatility', desc: 'Advanced memory forensics framework for incident response.', url: 'https://www.volatilityfoundation.org/' }, + { name: 'FTK Imager', desc: 'Data preview and forensic imaging tool.', url: 'https://www.exterro.com/ftk-imager' } + ] + }, + { + title: 'Cryptography', + icon: Lock, + color: '#EC4899', + bg: '#FDF2F8', + tools: [ + { name: 'OpenSSL', desc: 'Robust commercial-grade cryptography toolkit and SSL/TLS CLI.', url: 'https://www.openssl.org/' }, + { name: 'CyberChef', desc: 'The Cyber Swiss Army Knife for encryption, encoding, and data analysis.', url: 'https://gchq.github.io/CyberChef/' }, + { name: 'VeraCrypt', desc: 'Free open-source disk encryption software based on TrueCrypt.', url: 'https://www.veracrypt.fr/' } + ] + }, + { + title: 'Malware Analysis', + icon: Bot, + color: '#EF4444', + bg: '#FEF2F2', + tools: [ + { name: 'Ghidra', desc: 'NSA reverse engineering framework for software analysis.', url: 'https://ghidra-sre.org/' }, + { name: 'IDA Free', desc: 'Interactive disassembler for binary malware analysis.', url: 'https://hex-rays.com/ida-free/' }, + { name: 'Cuckoo Sandbox', desc: 'Automated malware analysis system.', url: 'https://cuckoosandbox.org/' } + ] + }, + { + title: 'Identity Management', + icon: UserCheck, + color: '#10B981', + bg: '#ECFDF5', + tools: [ + { name: 'HashiCorp Vault', desc: 'Manage secrets, keys, and credentials securely.', url: 'https://www.vaultproject.io/' }, + { name: 'Keycloak', desc: 'Open-source identity and access management for modern apps.', url: 'https://www.keycloak.org/' }, + { name: 'Okta', desc: 'Enterprise identity cloud platform for workforce authentication.', url: 'https://www.okta.com/' } + ] + } +]; + +const AI_TOOLS_CATEGORIES = [ + { + title: 'Machine Learning Frameworks', + icon: BrainCircuit, + color: '#EC4899', + bg: '#FDF2F8', + tools: [ + { name: 'PyTorch', desc: 'Leading open-source deep learning framework by Meta.', url: 'https://pytorch.org/' }, + { name: 'TensorFlow', desc: 'End-to-end open-source machine learning platform by Google.', url: 'https://www.tensorflow.org/' }, + { name: 'Scikit-Learn', desc: 'Simple and efficient tools for predictive data analysis in Python.', url: 'https://scikit-learn.org/' } + ] + }, + { + title: 'LLM & Generative AI', + icon: Bot, + color: '#8B5CF6', + bg: '#F5F3FF', + tools: [ + { name: 'Hugging Face Transformers', desc: 'Thousands of pretrained models for NLP, Vision, & Audio.', url: 'https://huggingface.co/' }, + { name: 'LangChain', desc: 'Framework for developing applications powered by language models.', url: 'https://www.langchain.com/' }, + { name: 'Ollama', desc: 'Run large language models locally on your machine.', url: 'https://ollama.com/' } + ] + }, + { + title: 'Computer Vision', + icon: Microscope, + color: '#3B82F6', + bg: '#EFF6FF', + tools: [ + { name: 'OpenCV', desc: 'Open-source computer vision and machine learning software library.', url: 'https://opencv.org/' }, + { name: 'YOLOv8 (Ultralytics)', desc: 'Real-time object detection and image segmentation.', url: 'https://www.ultralytics.com/' }, + { name: 'MediaPipe', desc: 'Cross-platform ML solutions for live and streaming media.', url: 'https://developers.google.com/mediapipe' } + ] + }, + { + title: 'Natural Language Processing (NLP)', + icon: Sparkles, + color: '#10B981', + bg: '#ECFDF5', + tools: [ + { name: 'spaCy', desc: 'Industrial-strength Natural Language Processing in Python.', url: 'https://spacy.io/' }, + { name: 'NLTK', desc: 'Natural Language Toolkit for symbolic and statistical NLP.', url: 'https://www.nltk.org/' }, + { name: 'Gensim', desc: 'Topic modeling and document similarity analysis for human language.', url: 'https://radimrehurek.com/gensim/' } + ] + }, + { + title: 'Data Annotation & MLOps', + icon: Database, + color: '#F97316', + bg: '#FFF7ED', + tools: [ + { name: 'MLflow', desc: 'Open-source platform to manage the ML lifecycle.', url: 'https://mlflow.org/' }, + { name: 'Label Studio', desc: 'Multi-type data labeling and annotation tool.', url: 'https://labelstud.io/' }, + { name: 'Weights & Biases (W&B)', desc: 'Developer platform for machine learning experiment tracking.', url: 'https://wandb.ai/' } + ] + } +]; + +const BIOTECH_TOOLS_CATEGORIES = [ + { + title: 'Bioinformatics & Sequence Analysis', + icon: Dna, + color: '#06B6D4', + bg: '#ECFEFF', + tools: [ + { name: 'NCBI BLAST', desc: 'Basic Local Alignment Search Tool for nucleotide & protein sequences.', url: 'https://blast.ncbi.nlm.nih.gov/Blast.cgi' }, + { name: 'Biopython', desc: 'Freely available Python tools for computational molecular biology.', url: 'https://biopython.org/' }, + { name: 'Clustal Omega', desc: 'Multiple sequence alignment program for DNA/RNA/protein.', url: 'https://www.ebi.ac.uk/Tools/msa/clustalo/' } + ] + }, + { + title: 'Molecular Modeling & Visualization', + icon: FlaskConical, + color: '#10B981', + bg: '#ECFDF5', + tools: [ + { name: 'PyMOL', desc: 'Molecular visualization system on an open-source foundation.', url: 'https://pymol.org/' }, + { name: 'UCSF ChimeraX', desc: 'Next-generation interactive molecular visualization and analysis.', url: 'https://www.rbvi.ucsf.edu/chimerax/' }, + { name: 'AutoDock Vina', desc: 'Molecular docking program for drug discovery and structural biology.', url: 'https://vina.scripps.edu/' } + ] + }, + { + title: 'Genomics & Next-Gen Sequencing', + icon: Microscope, + color: '#8B5CF6', + bg: '#F5F3FF', + tools: [ + { name: 'SAMtools', desc: 'Utilities for interacting with high-throughput sequencing data.', url: 'http://www.htslib.org/' }, + { name: 'FASTQC', desc: 'Quality control tool for high-throughput sequence data.', url: 'https://www.bioinformatics.babraham.ac.uk/projects/fastqc/' }, + { name: 'IGV (Integrative Genomics Viewer)', desc: 'High-performance interactive visualization tool for genomic data.', url: 'https://igv.org/' } + ] + } +]; + +export default function Toolkit() { + const [searchParams, setSearchParams] = useSearchParams(); + const selectedToolkit = searchParams.get('toolkit'); + const [selectedCategory, setSelectedCategory] = useState(null); + const [selectedLanguage, setSelectedLanguage] = useState(null); + const [selectedTool, setSelectedTool] = useState<{ name: string; desc: string; url: string; category: string; bg: string; color: string } | null>(null); + + const setSelectedToolkit = (value: string | null) => { + if (value) { + setSearchParams({ toolkit: value }); + setSelectedCategory(null); + setSelectedLanguage(null); + setSelectedTool(null); + } else { + setSearchParams({}); + setSelectedCategory(null); + setSelectedLanguage(null); + setSelectedTool(null); + } + }; + + const toolkitRef = useRef(null); + + return ( +
+ {/* Header */} + {!selectedToolkit && ( +
+
+ +
+ Home + + Student Toolkit +
+

+ Student{' '} + + Toolkit + +

+

+ Access specialized development environments, IDE configurations, compiler guides, and department toolkits. +

+ +
+
+ )} + +
+ {selectedToolkit ? ( + (() => { + const TOOLKIT_MAP: Record = { + cs: { categories: CS_TOOLS_CATEGORIES, label: 'Computer Science' }, + business: { categories: BUSINESS_TOOLS_CATEGORIES, label: 'Business' }, + electrical: { categories: EE_TOOLS_CATEGORIES, label: 'Electrical & Electronics' }, + cybersecurity: { categories: CYBERSECURITY_TOOLS_CATEGORIES, label: 'Cybersecurity' }, + ai: { categories: AI_TOOLS_CATEGORIES, label: 'Artificial Intelligence' }, + biotech: { categories: BIOTECH_TOOLS_CATEGORIES, label: 'Biotechnology' }, + }; + const current = TOOLKIT_MAP[selectedToolkit]; + if (!current) return null; + const { categories, label } = current; + return ( +
+ {/* Back Button and Title */} + + +
+

+ {label} Toolkit +

+
+

+ {selectedLanguage !== null + ? `Complete beginner guide, core concepts, use cases, and resources for ${PROGRAMMING_LANGUAGES_GUIDES[selectedLanguage].name}.` + : selectedCategory !== null + ? `Browse essential ${categories[selectedCategory].title} software, guides, and developer resources.` + : `Explore all categories and tools curated for ${label} students.`} +

+ + + {/* Main Content Area */} + {selectedLanguage !== null ? ( + /* ── Detailed Programming Language Guide View ── */ + (() => { + const guide = PROGRAMMING_LANGUAGES_GUIDES[selectedLanguage]; + return ( + +
+
+
+ +
+
+

{guide.name}

+

{guide.tagline}

+
+
+

+ {guide.whatItIs} +

+ +
+
+

+ Key Concepts to Learn +

+
    + {guide.keyConcepts.map((concept, idx) => ( +
  • + • + {concept} +
    • + ))} +
+
+ +
+

+ Real-World Use Cases +

+
+ {guide.useCases.map((useCase, idx) => ( + + {useCase} + + ))} +
+ +

+ Official Documentation & Courses +

+
+ {guide.links.map((link, idx) => ( + + {link.label} + + + ))} +
+
+
+
+ + ); + })() + ) : selectedCategory !== null ? ( + /* ── Tools inside selected Category ── */ + (() => { + const cat = categories[selectedCategory]; + const IconComp = cat.icon; + return ( + +
+
+ +
+
+

{cat.title}

+

+ {cat.tools.length} software tools & resources available +

+
+
+ +
+ {cat.tools.map((tool, idx) => ( + { + if (selectedToolkit === 'cs' && selectedCategory === 0) { + setSelectedLanguage(idx); + } else { + setSelectedTool({ ...tool, category: cat.title, bg: cat.bg, color: cat.color }); + } + }} + className="p-6 bg-white hover:bg-[#FFF7ED] rounded-2xl border border-[#E5E7EB] hover:border-[#FED7AA] cursor-pointer group transition-all flex flex-col justify-between" + > +
+
+

+ {tool.name} +

+ +
+

+ {tool.desc} +

+
+ + {selectedToolkit === 'cs' && selectedCategory === 0 ? 'View Beginner Guide & Concepts' : 'Explore Tool & Resources'} + + + + ))} +
+ + ); + })() + ) : ( + /* ── Category Cards Grid ── */ +
+ {categories.map((cat, idx) => { + const IconComp = cat.icon; + return ( + setSelectedCategory(idx)} + className="p-7 bg-white hover:bg-[#FFF7ED] rounded-[22px] border border-[#E5E7EB] hover:border-[#FED7AA] cursor-pointer group transition-all shadow-xs flex flex-col justify-between" + > +
+
+ +
+

+ {cat.title} +

+

+ {cat.tools.length} curated tools and guides available. +

+
+
+ Browse Tools + +
+ + ); + })} +
+ )} +
+ ); + })() + ) : ( +
+ {/* Toolkit Section Main */} +
+ + + {TOOLKIT_ITEMS.map((item) => { + const iconConfig = TOOLKIT_ICONS[item.title] || { icon: Code, bg: '#FFF7ED', color: '#F97316' }; + const IconComponent = iconConfig.icon; + return ( + + { + if (item.title === 'CS tools') { + setSelectedToolkit('cs'); + } else if (item.title === 'Business tools') { + setSelectedToolkit('business'); + } else if (item.title === 'Electrical and Electronic tools') { + setSelectedToolkit('electrical'); + } else if (item.title === 'Cybersecurity tools') { + setSelectedToolkit('cybersecurity'); + } else if (item.title === 'AI tools') { + setSelectedToolkit('ai'); + } else if (item.title === 'Biotech tools') { + setSelectedToolkit('biotech'); + } else if (item.url && item.url !== '#') { + window.open(item.url, '_blank'); + } + }} + whileHover={{ y: -4, boxShadow: '0 12px 30px -10px rgba(249,115,22,0.15)' }} + className="flex items-start gap-5 p-7 bg-white hover:bg-[#FFF7ED] rounded-[22px] border border-[#E5E7EB] hover:border-[#FED7AA] cursor-pointer group w-full transition-all shadow-xs hover:shadow-md" + > +
+ +
+
+
+ {item.title} +
+
+ {item.description} +
+
+ + + + ); + })} + +
+ )} +
+ + {/* Tool Modal */} + {selectedTool && ( +
+ +
+
+ +
+
+

{selectedTool.name}

+ {selectedTool.category} +
+
+

+ {selectedTool.desc} +

+
+ + {selectedTool.url && selectedTool.url !== '#' && ( + + Visit Official Website + + )} +
+ +
+ )} +
+ ); +}