diff --git a/src/App.jsx b/src/App.jsx index 2c6564b..2e6acae 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,14 @@ import { RouterProvider } from "react-router-dom"; - +import { ThemeProvider } from "./context/ThemeContext"; +import "./style/theme.css"; import routes from "./routes"; function App() { - return ; + return ( + + + + ); } export default App; diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 8ac0423..389699f 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -104,153 +104,139 @@ const Footer = () => { ]; return ( - <> - ); }; diff --git a/src/components/TopBar.css b/src/components/TopBar.css index da1e009..1c87693 100644 --- a/src/components/TopBar.css +++ b/src/components/TopBar.css @@ -1,6 +1,6 @@ .topbar { - background: linear-gradient(135deg, rgb(28, 28, 64) 0%, rgb(36, 36, 80) 100%); - color: white; + background: var(--bg-gradient); + color: var(--text-color); padding: 0 1rem; box-shadow: 0 4px 12px rgba(28, 28, 64, 0.3); position: sticky; @@ -31,13 +31,13 @@ margin: 0; font-size: 1.5rem; font-weight: 600; - color: rgb(160, 160, 255); + color: var(--brand-color); transition: color 0.3s ease; letter-spacing: -0.02em; } .brand-title:hover { - color: rgb(140, 140, 235); + color: var(--brand-hover-color); } .topbar-nav { @@ -53,7 +53,7 @@ } .user-welcome { - color: #e0e0e0; + color: var(--text-color); font-size: 0.9rem; } @@ -77,37 +77,51 @@ .login-button { background-color: transparent; - color: rgb(160, 160, 255); - border: 1px solid rgb(160, 160, 255); + color: var(--brand-color); + border: 1px solid var(--brand-color); } .login-button:hover { - background-color: rgb(160, 160, 255); - color: rgb(28, 28, 64); + background-color: var(--brand-color); + color: var(--bg-color); } .register-button { - background-color: rgb(160, 160, 255); - color: rgb(28, 28, 64); + background-color: var(--brand-color); + color: var(--bg-color); } .register-button:hover { - background-color: rgb(140, 140, 235); + background-color: var(--brand-hover-color); transform: translateY(-1px); } .logout-button { - background-color: #ff6b6b; - color: white; - border: 1px solid #ff6b6b; + background-color: var(--danger-color); + color: var(--bg-color); + border: 1px solid var(--danger-color); } .logout-button:hover { - background-color: #ff5252; + background-color: var(--danger-hover-color); transform: translateY(-1px); } -/* Responsive design */ +.theme-toggle { + margin-left: 1rem; + background: transparent; + border: 1px solid var(--text-color); + color: var(--text-color); + cursor: pointer; + padding: 6px 12px; + border-radius: 6px; +} + +.theme-toggle:hover { + background: var(--text-color); + color: var(--card-bg); +} + @media (max-width: 768px) { .topbar-container { padding: 0 0.5rem; diff --git a/src/components/TopBar.jsx b/src/components/TopBar.jsx index 493b7a6..d36fd9d 100644 --- a/src/components/TopBar.jsx +++ b/src/components/TopBar.jsx @@ -1,9 +1,11 @@ import { Link } from "react-router-dom"; import { useMyContext } from "../context/MyContext"; +import { useTheme } from "../context/ThemeContext"; import "./TopBar.css"; const TopBar = () => { const { userProfile, clearUserProfile } = useMyContext(); + const {lightMode, toggleTheme} = useTheme(); const handleLogout = () => { clearUserProfile(); @@ -47,6 +49,11 @@ const TopBar = () => { SIGN UP + )} diff --git a/src/components/ui/About.jsx b/src/components/ui/About.jsx index af3e13c..b2668d1 100644 --- a/src/components/ui/About.jsx +++ b/src/components/ui/About.jsx @@ -2,25 +2,37 @@ import { motion } from 'framer-motion'; function About() { return ( -
-
- +
+ +

-

- A Blog Platform That Actually Gets It -

-

- HackerBlog is lowkey the blog platform developers have been waiting for. Share your coding wins and fails, drop tutorials that actually make sense, spill the tea on programming concepts, and vibe with a community that gets your semicolon struggles. Whether you're documenting your coding journey or sharing that breakthrough moment when everything finally clicks - we're here for it! ✨ -

- -
-
- ) + A Blog Platform That Actually Gets It + +

+ HackerBlog is lowkey the blog platform developers have been waiting for. Share your coding wins and fails, drop tutorials that actually make sense, spill the tea on programming concepts, and vibe with a community that gets your semicolon struggles. Whether you're documenting your coding journey or sharing that breakthrough moment when everything finally clicks - we're here for it! ✨ +

+ + + + ); } -export default About \ No newline at end of file +export default About; diff --git a/src/components/ui/Community.jsx b/src/components/ui/Community.jsx index e15982b..c087f22 100644 --- a/src/components/ui/Community.jsx +++ b/src/components/ui/Community.jsx @@ -1,16 +1,12 @@ -import {useState} from "react"; +import { useState } from "react"; import InfoCard from "./InfoCard"; import { motion } from "framer-motion"; -import { - FiPenTool, - FiUsers, - FiSend, -} from "react-icons/fi"; +import { FiPenTool, FiUsers, FiSend } from "react-icons/fi"; import { useNavigate } from "react-router-dom"; function Community() { - const [userProfile] = useState(null); // user state, if they dont exist... no need to show start your journey CTA - const navigate=useNavigate(); + const [userProfile] = useState(null); + const navigate = useNavigate(); const infoArray = [ { @@ -32,8 +28,12 @@ function Community() { "Display your portfolio and get that validation you deserve from people who actually understand", }, ]; + return ( -
+
-

+

Join Our Growing Community ✨

-

- Whether you're here to flex your latest project, learn from the - pros... +

+ Whether you're here to flex your latest project, learn from the pros...

@@ -69,14 +74,18 @@ function Community() { viewport={{ once: true }} className="text-center" > -

+

Ready to level up your developer game? Let's go! 🎮

navigate("/register")} + className="font-google-code px-8 py-4 rounded-lg font-bold text-lg shadow-lg transition-all" + style={{ + backgroundColor: "var(--brand-color)", + color: "var(--text-color)", + }} + onClick={() => navigate("/register")} > Start Your Journey diff --git a/src/components/ui/Hero.jsx b/src/components/ui/Hero.jsx index 4e6bb6f..58b4ec4 100644 --- a/src/components/ui/Hero.jsx +++ b/src/components/ui/Hero.jsx @@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom"; function Hero() { const [userProfile] = useState(null); + const navigate = useNavigate(); const containerVariants = { hidden: { opacity: 0 }, @@ -23,46 +24,40 @@ function Hero() { }, }; - const navigate=useNavigate(); - - function handleRedirect(value){ - if(value==="register"){navigate("/register")} - else if(value==="login"){navigate("/login")} - else{navigate("/dashboard")} + function handleRedirect(value) { + if (value === "register") navigate("/register"); + else if (value === "login") navigate("/login"); + else navigate("/dashboard"); } return ( -
- {/* top animation */} +
+ {/* Top animation */} - {/* bottom animation */} + {/* Bottom animation */} - {/* subtle central animation effect */} + {/* Subtle central animation effect */}
- {/* hero contents */} + {/* Hero contents */} HackerBlog @@ -82,7 +80,8 @@ function Hero() { Where developers share stories, insights, and code - no cap! 🔥 @@ -95,31 +94,44 @@ function Hero() { handleRedirect("register")} + className="font-google-code w-full sm:w-auto px-6 sm:px-8 py-3 sm:py-4 rounded-lg font-bold text-base sm:text-lg shadow-lg transition-all" + style={{ + backgroundColor: "var(--brand-color)", + color: "var(--text-color)", + }} + onClick={() => handleRedirect("register")} > Get Started + handleRedirect("login")} + className="font-google-code w-full sm:w-auto px-6 sm:px-8 py-3 sm:py-4 rounded-lg font-bold text-base sm:text-lg shadow-lg transition-all border-2" + style={{ + backgroundColor: "var(--card-bg)", + borderColor: "var(--brand-color)", + color: "var(--text-color)", + }} + onClick={() => handleRedirect("login")} > Sign In ) : ( -

- Welcome back, {userProfile.name || "Developer"}! Ready to drop - some fire content? 🚀 +

+ Welcome back, {userProfile.name || "Developer"}! Ready to drop some fire content? 🚀

handleRedirect("dashboard")} + className="font-google-code px-6 sm:px-8 py-3 sm:py-4 rounded-lg font-bold text-base sm:text-lg shadow-lg transition-all" + style={{ + backgroundColor: "var(--brand-color)", + color: "var(--text-color)", + }} + onClick={() => handleRedirect("dashboard")} > Go to Dashboard @@ -130,7 +142,8 @@ function Hero() { ↓ @@ -140,4 +153,4 @@ function Hero() { ); } -export default Hero; \ No newline at end of file +export default Hero; diff --git a/src/components/ui/InfoCard.jsx b/src/components/ui/InfoCard.jsx index f6ebf16..cbf605c 100644 --- a/src/components/ui/InfoCard.jsx +++ b/src/components/ui/InfoCard.jsx @@ -1,4 +1,4 @@ -import { motion } from 'framer-motion'; +import { motion } from "framer-motion"; const InfoCard = ({ icon, title, description, index }) => { return ( @@ -8,14 +8,33 @@ const InfoCard = ({ icon, title, description, index }) => { viewport={{ once: true }} transition={{ duration: 0.5, delay: index * 0.1 }} whileHover={{ y: -8, scale: 1.02 }} - className="bg-gradient-to-br from-slate-800 to-slate-900 p-6 rounded-xl border border-slate-700 hover:border-[#a0a0ff] transition-all duration-300 shadow-lg hover:shadow-purple-500/20" + className="p-6 rounded-xl border transition-all duration-300 shadow-lg" + style={{ + background: "var(--card-gradient)", + borderColor: "var(--card-border)", + color: "var(--text-color)", + }} > -
+
{icon}
-

{title}

-

{description}

+

+ {title} +

+

+ {description} +

); }; -export default InfoCard; \ No newline at end of file + +export default InfoCard; diff --git a/src/components/ui/Terminal.jsx b/src/components/ui/Terminal.jsx index b5382d5..e0b11c7 100644 --- a/src/components/ui/Terminal.jsx +++ b/src/components/ui/Terminal.jsx @@ -36,7 +36,6 @@ function Terminal() { }, ]; - // refs monitoring when the typing should start const cmd1Ref = useRef(null); const cmd1InView = useInView(cmd1Ref, { once: true }); @@ -50,22 +49,29 @@ function Terminal() { const cmd3InView = useInView(cmd3Ref, { once: true }); return ( -
+
{/* terminal header block */} -
+
-
+
hacktoberfest-2025
@@ -92,7 +98,7 @@ function Terminal() {
{headerInView && ( <> -

+

-

+

-

+
{area.icon}
-

+

{area.title}

-

+

{area.description}

@@ -179,7 +187,12 @@ function Terminal() { whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.2 }} - className="font-google-code flex items-center gap-2 px-6 py-3 bg-slate-900 text-[rgb(0,255,0)] hover:bg-[rgb(0,255,0)] hover:text-black border-2 border-[rgb(0,255,0)] rounded-lg font-bold transition-all text-sm sm:text-base" + className="font-google-code flex items-center gap-2 px-6 py-3 rounded-lg font-bold text-sm sm:text-base transition-all" + style={{ + background: "var(--card-bg)", + color: "var(--brand-color)", + border: "2px solid var(--brand-color)", + }} > Visit Our Organization @@ -194,7 +207,12 @@ function Terminal() { whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.4 }} - className="font-google-code flex items-center gap-2 px-6 py-3 bg-slate-900 text-[rgb(0,255,0)] hover:bg-[rgb(0,255,0)] hover:text-black border-2 border-[rgb(0,255,0)] rounded-lg font-bold transition-all text-sm sm:text-base" + className="font-google-code flex items-center gap-2 px-6 py-3 rounded-lg font-bold text-sm sm:text-base transition-all" + style={{ + background: "var(--card-bg)", + color: "var(--brand-color)", + border: "2px solid var(--brand-color)", + }} > Backend Repository diff --git a/src/context/ThemeContext.jsx b/src/context/ThemeContext.jsx new file mode 100644 index 0000000..c6e2967 --- /dev/null +++ b/src/context/ThemeContext.jsx @@ -0,0 +1,24 @@ +import { createContext, useContext, useState, useEffect } from "react"; + +const ThemeContext = createContext(); + +export const ThemeProvider = ({ children }) => { + const [lightMode, setLightMode] = useState(() => localStorage.getItem("theme") === "light"); + + const toggleTheme = () => setLightMode(prev => !prev); + + useEffect(() => { + const theme = lightMode ? "light" : "dark"; + document.documentElement.classList.remove("light", "dark"); + document.documentElement.classList.add(theme); + localStorage.setItem("theme", theme); + }, [lightMode]); + + return ( + + {children} + + ); +}; + +export const useTheme = () => useContext(ThemeContext); diff --git a/src/layout/Layout.css b/src/layout/Layout.css index 7f51753..5792842 100644 --- a/src/layout/Layout.css +++ b/src/layout/Layout.css @@ -7,5 +7,5 @@ .main-content { flex: 1; padding: 0; - background: linear-gradient(135deg, rgb(20, 20, 48) 0%, rgb(28, 28, 64) 100%); + background: var(--bg-gradient); } diff --git a/src/pages/AuthPages.css b/src/pages/AuthPages.css index 9f405ad..1667819 100644 --- a/src/pages/AuthPages.css +++ b/src/pages/AuthPages.css @@ -4,12 +4,7 @@ align-items: center; justify-content: center; padding: 2rem 1rem; - background: linear-gradient( - 135deg, - rgb(28, 28, 64) 0%, - rgb(20, 20, 48) 50%, - rgb(15, 15, 35) 100% - ); + background: var(--bg-gradient); } .auth-container { @@ -18,12 +13,13 @@ } .auth-card { - background: linear-gradient(135deg, rgb(20, 20, 48) 0%, rgb(28, 28, 64) 100%); + background: var(--card-bg); border-radius: 16px; padding: 2.5rem; - box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), - 0 10px 10px -5px rgba(0, 0, 0, 0.1); + box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3), + 0 10px 10px -5px rgba(0,0,0,0.1); border: 1px solid rgba(160, 160, 255, 0.2); + transition: background 0.3s; } .auth-header { @@ -34,13 +30,14 @@ .auth-header h1 { font-size: 2rem; font-weight: bold; - color: #f9fafb; + color: var(--text-color); margin-bottom: 0.5rem; } .auth-header p { - color: #d1d5db; + color: var(--text-color); font-size: 1rem; + opacity: 0.7; } .auth-form { @@ -57,7 +54,7 @@ .form-label { font-weight: 500; - color: #f9fafb; + color: var(--text-color); font-size: 0.9rem; } @@ -66,14 +63,14 @@ border: 1px solid rgba(160, 160, 255, 0.3); border-radius: 8px; background-color: rgba(28, 28, 64, 0.5); - color: #f9fafb; + color: var(--text-color); font-size: 1rem; transition: all 0.3s ease; } .form-input:focus { outline: none; - border-color: rgb(160, 160, 255); + border-color: var(--brand-color); box-shadow: 0 0 0 3px rgba(160, 160, 255, 0.1); background-color: rgba(28, 28, 64, 0.7); } @@ -84,7 +81,7 @@ } .form-input.error { - border-color: #ef4444; + border-color: var(--danger-color); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); } @@ -93,15 +90,15 @@ } .error-message { - color: #f87171; + color: var(--danger-color); font-size: 0.875rem; margin-top: 0.25rem; } .auth-button { padding: 0.875rem 1rem; - background-color: rgb(160, 160, 255); - color: rgb(28, 28, 64); + background-color: var(--brand-color); + color: var(--bg-color); border: none; border-radius: 8px; font-weight: 600; @@ -113,7 +110,7 @@ .auth-button:hover:not(:disabled) { transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(160, 160, 255, 0.3); + box-shadow: 0 4px 12px rgba(160,160,255,0.3); background-color: rgba(160, 160, 255, 0.9); } @@ -128,16 +125,17 @@ text-align: center; margin-top: 2rem; padding-top: 1.5rem; - border-top: 1px solid rgba(160, 160, 255, 0.2); + border-top: 1px solid rgba(160,160,255,0.2); } .auth-footer p { - color: #d1d5db; + color: var(--text-color); font-size: 0.9rem; + opacity: 0.7; } .auth-link { - color: rgb(160, 160, 255); + color: var(--brand-color); font-weight: 500; text-decoration: none; transition: color 0.3s ease; @@ -149,25 +147,11 @@ /* Responsive Design */ @media (max-width: 480px) { - .auth-page { - padding: 1rem; - } - - .auth-card { - padding: 2rem 1.5rem; - } - - .auth-header h1 { - font-size: 1.75rem; - } - - .form-input { - padding: 0.625rem 0.875rem; - } - - .auth-button { - padding: 0.75rem 1rem; - } + .auth-page { padding: 1rem; } + .auth-card { padding: 2rem 1.5rem; } + .auth-header h1 { font-size: 1.75rem; } + .form-input { padding: 0.625rem 0.875rem; } + .auth-button { padding: 0.75rem 1rem; } } .password-wrapper { @@ -176,9 +160,9 @@ } .password-wrapper .form-input { - width: 100%; /* same width as email */ - padding-right: 40px; /* space for the eye icon */ - box-sizing: border-box; /* keep consistent sizing */ + width: 100%; + padding-right: 40px; + box-sizing: border-box; } .password-toggle { @@ -189,7 +173,7 @@ background: none; border: none; cursor: pointer; - color: #555; /* same color as input text/icon */ + color: #555; display: flex; align-items: center; justify-content: center; diff --git a/src/style/theme.css b/src/style/theme.css new file mode 100644 index 0000000..f1629cf --- /dev/null +++ b/src/style/theme.css @@ -0,0 +1,23 @@ +:root { + --bg-gradient: linear-gradient(135deg, rgb(28,28,64) 0%, rgb(36,36,80) 100%); + --bg-color: #121212; + --text-color: #ffffff; + --brand-color: rgb(160,160,255); + --brand-hover-color: rgb(140,140,235); + --danger-color: #ff6b6b; + --danger-hover-color: #ff5252; + --card-bg: #1e1e1e; +} + +.light { + --bg-gradient: linear-gradient(135deg, #c9c7f8 0%, #f3f2ff 100%); + --bg-color: #f5f5f5; + --text-color: #1a1a1a; + --brand-color: rgb(120,100,255); + --brand-hover-color: rgb(140,120,255); + --danger-color: #ff7b7b; + --danger-hover-color: #ff4d4d; + --card-bg: #ffffff; +} + +