Spaces:

tharshitha05
/

careerglow-navigator

Running

App Files Files Community

tharshitha05 commited on Sep 29, 2025

Commit

b487d5d

verified ·

1 Parent(s): efc3766

Tech Stack (Simple + Free APIs)

Browse files

1. Industry Insights (Jobs & Salary Graphs)

Frontend: React + Chart.js (for salary/job graphs)

Backend: Node.js + Express

Database: MongoDB Atlas (free tier)

Free APIs:

Adzuna Jobs API (free tier)
→ jobs + salary info

Jooble Free Jobs API
→ job listings

2. Roadmap (Learning Path)

Frontend: React (Timeline UI)

Backend: Node.js

Database: MongoDB

Free APIs:

YouTube Data API
→ tutorials

Coursera Catalog API
→ free courses

EdX API
→ free MOOCs

3. Mock Interviews

Frontend: React + simple quiz/record UI

Backend: Node.js

Database: PostgreSQL (free on Supabase)

Free APIs:

Google Speech-to-Text (free credits)
→ convert answers to text

Open Trivia DB
→ free question sets

OR custom question bank (stored in DB)

4. Resume Builder

Frontend: React + drag-drop editor

Backend: Node.js

Free APIs / Libraries:

jsPDF
(free) → export to PDF

react-pdf
(free)

5. Internships

Frontend: React

Backend: Node.js

Database: MongoDB

Free APIs:

Adzuna API
→ internships/jobs

Jooble API

6. Placement Prep (MCQs, Aptitude, Coding)

Frontend: React (quiz UI)

Backend: Node.js

Database: PostgreSQL / MongoDB

Free APIs:

Open Trivia DB
→ free aptitude/MCQ

Coding Questions Dataset (GitHub repos)

7. Job Listings

Frontend: React

Backend: Node.js

Free APIs:

Jooble API
(global job search)

Adzuna API

8. Cover Letter Builder

Frontend: React + text editor

Backend: Node.js

Free APIs / Libraries:

jsPDF
(PDF generation)

Predefined templates (stored in DB)

9. Higher Studies Navigator

Frontend: React (table/filter UI)

Backend: Node.js

Free APIs:

College Scorecard API (US universities)

QS World Rankings (via free datasets)

EdX API

🏗 Common Tech Across All Features

Frontend → React + Tailwind CSS (UI)

Backend → Node.js + Express

Database → MongoDB Atlas (Free) or Supabase (Free PostgreSQL)

Auth → Firebase Authentication (free tier)

Hosting →

Frontend: Vercel / Netlify (free tier)

Backend: Render / Railway / Heroku free tier

🎯 Summary of Free APIs

Jobs/Internships → Adzuna API, Jooble API

Learning Resources → YouTube API, Coursera API, EdX API

Mock Interviews → Google Speech-to-Text (free credits), Open Trivia DB

Placement Prep → Open Trivia DB, GitHub coding datasets

Resume/Cover Letter → jsPDF, react-pdf (open-source)

Higher Studies → College Scorecard API, EdX API

👉 This stack is lightweight, free-tier friendly, and avoids heavy ML — just APIs + rule-based logic. 1. Signup Page

Fields: Name, Email, Password, Confirm Password

Option: Social login (Google/Facebook with Firebase)

On success → Create user in Firebase Auth + store profile in MongoDB

2. Login Page

Fields: Email, Password

Option: Social login

On success → Fetch user profile from DB, redirect to Dashboard

3. Profile Page

Shows:

User Name, Email

Saved resumes, cover letters

Progress on courses/roadmaps

Job/internship bookmarks

Editable fields: Skills, Career Interests

Logout button create me a professional career guidance and skill advisor website with the dark ui and effective background glowing effect and animations use background images

Files changed (4) hide show

README.md +9 -5
index.html +110 -19
login.html +95 -0
signup.html +107 -0

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Careerglow Navigator
-emoji: 🔥
-colorFrom: blue
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: CareerGlow Navigator 🚀✨
+colorFrom: green
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,110 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CareerGlow Navigator</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script>
+    <style>
+        body {
+            background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.9)),
+                        url('http://static.photos/technology/1200x630/42') no-repeat center center fixed;
+            background-size: cover;
+            color: #e2e8f0;
+            min-height: 100vh;
+        }
+        .glow-card {
+            background: rgba(15, 23, 42, 0.7);
+            border: 1px solid rgba(56, 189, 248, 0.3);
+            transition: all 0.3s ease;
+        }
+        .glow-card:hover {
+            box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
+            transform: translateY(-5px);
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
+        }
+    </style>
+</head>
+<body class="font-sans">
+    <div class="container mx-auto px-4 py-12">
+        <header class="flex justify-between items-center mb-16">
+            <div class="flex items-center space-x-2">
+                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#38bdf8" stroke-width="2"/>
+                    <path d="M12 8V16M8 12H16" stroke="#38bdf8" stroke-width="2"/>
+                </svg>
+                <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500">
+                    CareerGlow
+                </h1>
+            </div>
+            <nav class="hidden md:flex space-x-8">
+                <a href="#" class="hover:text-cyan-400 transition">Features</a>
+                <a href="#" class="hover:text-cyan-400 transition">Roadmap</a>
+                <a href="#" class="hover:text-cyan-400 transition">Resources</a>
+                <a href="login.html" class="px-4 py-2 bg-cyan-600 rounded-md hover:bg-cyan-700 transition">Login</a>
+            </nav>
+        </header>
+        <main class="text-center">
+            <div class="max-w-3xl mx-auto mb-20">
+                <h2 class="text-5xl font-bold mb-6 leading-tight">
+                    Illuminate Your <span class="text-cyan-400">Career Path</span> with AI Guidance
+                </h2>
+                <p class="text-xl opacity-90 mb-10">
+                    Personalized career navigation with real-time job insights, skill roadmaps, and interview preparation - all in one platform.
+                </p>
+                <a href="signup.html" class="inline-block px-8 py-3 bg-cyan-600 hover:bg-cyan-700 rounded-full text-lg font-medium pulse">
+                    Get Started - It's Free
+                </a>
+            </div>
+            <div class="grid md:grid-cols-3 gap-8 mb-20">
+                <div class="glow-card p-8 rounded-xl">
+                    <div class="w-16 h-16 bg-cyan-900/50 rounded-full flex items-center justify-center mb-6 mx-auto">
+                        <i data-feather="trending-up" class="text-cyan-400 w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Industry Insights</h3>
+                    <p class="opacity-80">Real-time salary data and job market trends to inform your career decisions.</p>
+                </div>
+                <div class="glow-card p-8 rounded-xl">
+                    <div class="w-16 h-16 bg-cyan-900/50 rounded-full flex items-center justify-center mb-6 mx-auto">
+                        <i data-feather="map" class="text-cyan-400 w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Skill Roadmap</h3>
+                    <p class="opacity-80">Personalized learning paths with curated resources from top platforms.</p>
+                </div>
+                <div class="glow-card p-8 rounded-xl">
+                    <div class="w-16 h-16 bg-cyan-900/50 rounded-full flex items-center justify-center mb-6 mx-auto">
+                        <i data-feather="mic" class="text-cyan-400 w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold mb-3">Mock Interviews</h3>
+                    <p class="opacity-80">Practice with AI-powered feedback and speech analysis.</p>
+                </div>
+            </div>
+        </main>
+    </div>
+    <script>
+        feather.replace();
+        anime({
+            targets: '.glow-card',
+            opacity: [0, 1],
+            translateY: [30, 0],
+            delay: anime.stagger(200),
+            easing: 'easeOutExpo'
+        });
+    </script>
+</body>
+</html>

	@@ -0,0 +1,95 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login | CareerGlow</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <style>
+        body {
+            background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.9)),
+                        url('http://static.photos/office/1200x630/7') no-repeat center center fixed;
+            background-size: cover;
+            color: #e2e8f0;
+            min-height: 100vh;
+        }
+        .form-container {
+            background: rgba(15, 23, 42, 0.8);
+            border: 1px solid rgba(56, 189, 248, 0.3);
+            box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
+        }
+        .input-field {
+            background: rgba(30, 41, 59, 0.6);
+            border: 1px solid rgba(56, 189, 248, 0.2);
+        }
+        .input-field:focus {
+            border-color: rgba(56, 189, 248, 0.5);
+            box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
+        }
+    </style>
+</head>
+<body class="font-sans flex items-center justify-center">
+    <div class="form-container max-w-md w-full p-8 rounded-xl mx-4">
+        <div class="text-center mb-10">
+            <h1 class="text-3xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500">
+                Welcome Back
+            </h1>
+            <p class="opacity-80">Login to continue your career journey</p>
+        </div>
+        <form class="space-y-6">
+            <div>
+                <label for="email" class="block mb-2 text-sm font-medium">Email</label>
+                <input type="email" id="email" class="input-field w-full px-4 py-3 rounded-lg focus:outline-none" required>
+            </div>
+            <div>
+                <label for="password" class="block mb-2 text-sm font-medium">Password</label>
+                <input type="password" id="password" class="input-field w-full px-4 py-3 rounded-lg focus:outline-none" required>
+            </div>
+            <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                    <input id="remember" type="checkbox" class="w-4 h-4 rounded bg-gray-800 border-gray-700">
+                    <label for="remember" class="ml-2 text-sm">Remember me</label>
+                </div>
+                <a href="#" class="text-sm text-cyan-400 hover:underline">Forgot password?</a>
+            </div>
+            <button type="submit" class="w-full py-3 px-4 bg-cyan-600 hover:bg-cyan-700 rounded-lg font-medium transition">
+                Login
+            </button>
+            <div class="relative my-6">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-gray-700"></div>
+                </div>
+                <div class="relative flex justify-center text-sm">
+                    <span class="px-2 bg-slate-900 text-gray-400">Or continue with</span>
+                </div>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+                <button type="button" class="flex items-center justify-center py-2.5 px-4 bg-gray-800 hover:bg-gray-700 rounded-lg transition">
+                    <i data-feather="github" class="w-5 h-5 mr-2"></i>
+                    GitHub
+                </button>
+                <button type="button" class="flex items-center justify-center py-2.5 px-4 bg-gray-800 hover:bg-gray-700 rounded-lg transition">
+                    <i data-feather="google" class="w-5 h-5 mr-2"></i>
+                    Google
+                </button>
+            </div>
+            <p class="text-center text-sm opacity-80">
+                Don't have an account?
+                <a href="signup.html" class="text-cyan-400 hover:underline">Sign up</a>
+            </p>
+        </form>
+    </div>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

signup.html ADDED Viewed

	@@ -0,0 +1,107 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign Up | CareerGlow</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <style>
+        body {
+            background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.9)),
+                        url('http://static.photos/workspace/1200x630/13') no-repeat center center fixed;
+            background-size: cover;
+            color: #e2e8f0;
+            min-height: 100vh;
+        }
+        .form-container {
+            background: rgba(15, 23, 42, 0.8);
+            border: 1px solid rgba(56, 189, 248, 0.3);
+            box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
+        }
+        .input-field {
+            background: rgba(30, 41, 59, 0.6);
+            border: 1px solid rgba(56, 189, 248, 0.2);
+        }
+        .input-field:focus {
+            border-color: rgba(56, 189, 248, 0.5);
+            box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
+        }
+    </style>
+</head>
+<body class="font-sans flex items-center justify-center">
+    <div class="form-container max-w-md w-full p-8 rounded-xl mx-4">
+        <div class="text-center mb-10">
+            <h1 class="text-3xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500">
+                Start Your Journey
+            </h1>
+            <p class="opacity-80">Create your free account</p>
+        </div>
+        <form class="space-y-6">
+            <div>
+                <label for="name" class="block mb-2 text-sm font-medium">Full Name</label>
+                <input type="text" id="name" class="input-field w-full px-4 py-3 rounded-lg focus:outline-none" required>
+            </div>
+            <div>
+                <label for="email" class="block mb-2 text-sm font-medium">Email</label>
+                <input type="email" id="email" class="input-field w-full px-4 py-3 rounded-lg focus:outline-none" required>
+            </div>
+            <div>
+                <label for="password" class="block mb-2 text-sm font-medium">Password</label>
+                <input type="password" id="password" class="input-field w-full px-4 py-3 rounded-lg focus:outline-none" required>
+            </div>
+            <div>
+                <label for="confirm-password" class="block mb-2 text-sm font-medium">Confirm Password</label>
+                <input type="password" id="confirm-password" class="input-field w-full px-4 py-3 rounded-lg focus:outline-none" required>
+            </div>
+            <div class="flex items-start">
+                <div class="flex items-center h-5">
+                    <input id="terms" type="checkbox" class="w-4 h-4 rounded bg-gray-800 border-gray-700" required>
+                </div>
+                <label for="terms" class="ml-2 text-sm">
+                    I agree to the <a href="#" class="text-cyan-400 hover:underline">Terms of Service</a> and
+                    <a href="#" class="text-cyan-400 hover:underline">Privacy Policy</a>
+                </label>
+            </div>
+            <button type="submit" class="w-full py-3 px-4 bg-cyan-600 hover:bg-cyan-700 rounded-lg font-medium transition">
+                Create Account
+            </button>
+            <div class="relative my-6">
+                <div class="absolute inset-0 flex items-center">
+                    <div class="w-full border-t border-gray-700"></div>
+                </div>
+                <div class="relative flex justify-center text-sm">
+                    <span class="px-2 bg-slate-900 text-gray-400">Or sign up with</span>
+                </div>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+                <button type="button" class="flex items-center justify-center py-2.5 px-4 bg-gray-800 hover:bg-gray-700 rounded-lg transition">
+                    <i data-feather="github" class="w-5 h-5 mr-2"></i>
+                    GitHub
+                </button>
+                <button type="button" class="flex items-center justify-center py-2.5 px-4 bg-gray-800 hover:bg-gray-700 rounded-lg transition">
+                    <i data-feather="google" class="w-5 h-5 mr-2"></i>
+                    Google
+                </button>
+            </div>
+            <p class="text-center text-sm opacity-80">
+                Already have an account?
+                <a href="login.html" class="text-cyan-400 hover:underline">Login</a>
+            </p>
+        </form>
+    </div>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>