Skip to content

🎨 Complete Color System Overhaul - Fix All Color Discrepancies and Design Improvements #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

🎨 Complete Color System Overhaul - Fix All Color Discrepancies and Design Improvements #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
11039ac
Initial plan
Copilot Jul 12, 2025
9ccc9c6
Complete color system overhaul with professional design improvements
Copilot Jul 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions src/components/layout/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import TechIcons from '@/components/icons/TechIcons'
export default function Footer() {

return (
<footer className="bg-primary text-background py-12 mt-20">
<footer className="bg-primary-900 text-white py-12 mt-20">
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
Expand All @@ -22,23 +22,23 @@ export default function Footer() {
>
Abdulrohim Mustapha
</motion.h3>
<p className="text-sm text-background/80 leading-relaxed">
<p className="text-sm text-surface-300 leading-relaxed">
Building innovative solutions across Web3, mobile, and cloud platforms
</p>
<div className="flex gap-4 mt-4">
<a
href="mailto:your@email.com"
className="p-2 hover:bg-accent/10 rounded-lg transition-colors"
className="p-2 hover:bg-accent-600/10 rounded-lg transition-colors"
aria-label="Send email"
>
<FiMail className="w-5 h-5" />
<FiMail className="w-5 h-5 text-accent-400" />
</a>
<a
href="https://github.com/yourprofile"
className="p-2 hover:bg-accent/10 rounded-lg transition-colors"
className="p-2 hover:bg-accent-600/10 rounded-lg transition-colors"
aria-label="GitHub profile"
>
<FiCode className="w-5 h-5" />
<FiCode className="w-5 h-5 text-accent-400" />
</a>
</div>
</div>
Expand All @@ -55,9 +55,9 @@ export default function Footer() {
>
<a
href={`#${link.toLowerCase()}`}
className="text-background/80 hover:text-accent transition-colors flex items-center gap-2"
className="text-surface-300 hover:text-accent-400 transition-colors flex items-center gap-2"
>
<span className="text-accent">▹</span>
<span className="text-accent-400">▹</span>
{link}
</a>
</motion.li>
Expand Down Expand Up @@ -88,7 +88,7 @@ export default function Footer() {
href={url}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 text-background/80 hover:text-accent transition-colors"
className="flex items-center gap-2 text-surface-300 hover:text-accent-400 transition-colors"
whileHover={{ x: 5 }}
>
<Icon className="w-5 h-5" />
Expand All @@ -100,10 +100,10 @@ export default function Footer() {
</motion.div>

{/* Copyright */}
<div className="border-t border-background/20 pt-8 text-center">
<p className="text-sm text-background/80">
<div className="border-t border-surface-600 pt-8 text-center">
<p className="text-sm text-surface-300">
© {new Date().getFullYear()} Abdulrohim Mustapha. Crafted with
<span className="text-accent mx-1">⚡</span>
<span className="text-accent-400 mx-1">⚡</span>
by a developer for developers
</p>
</div>
Expand Down
16 changes: 8 additions & 8 deletions src/components/layout/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function Header() {
const { theme, toggleTheme } = useTheme()

return (
<header className="bg-surface/95 backdrop-blur-sm text-primary sticky top-0 z-50 shadow-sm dark:shadow-accent/10 border-b border-primary/10">
<header className="bg-background-secondary/95 backdrop-blur-sm text-text-primary sticky top-0 z-50 shadow-custom-sm border-b border-color-border">
<nav className="mx-auto px-4 sm:px-6 lg:px-8 py-3 max-w-7xl">
<div className="flex justify-between items-center">
{/* Logo/Name with enhanced interaction */}
Expand All @@ -22,10 +22,10 @@ export default function Header() {
className="flex items-center gap-2 group"
aria-label="Home"
>
<span className="text-2xl font-bold bg-accent text-surface px-3 py-1 rounded-lg shadow-md transition-all duration-300 group-hover:bg-accent/90">
<span className="text-2xl font-bold bg-accent-600 text-white px-3 py-1 rounded-lg shadow-custom-md transition-all duration-300 group-hover:bg-accent-700">
AM
</span>
<span className="hidden md:inline-block text-xl font-semibold ml-2 text-primary hover:text-accent transition-colors">
<span className="hidden md:inline-block text-xl font-semibold ml-2 text-text-primary hover:text-accent-600 transition-colors">
Abdulrohim Mustapha
</span>
</Link>
Expand All @@ -39,11 +39,11 @@ export default function Header() {
<Link
key={link}
href={`#${link}`}
className="relative px-2 py-1 text-sm font-medium text-primary/90 hover:text-accent transition-colors"
className="relative px-2 py-1 text-sm font-medium text-text-secondary hover:text-accent-600 transition-colors"
>
{link.charAt(0).toUpperCase() + link.slice(1)}
<motion.span
className="absolute left-0 -bottom-0.5 w-full h-px bg-accent origin-left scale-x-0"
className="absolute left-0 -bottom-0.5 w-full h-px bg-accent-600 origin-left scale-x-0"
whileHover={{ scaleX: 1 }}
transition={{ duration: 0.3 }}
/>
Expand All @@ -56,7 +56,7 @@ export default function Header() {
onClick={toggleTheme}
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
className="p-2 rounded-lg hover:bg-accent/10 transition-colors"
className="p-2 rounded-lg hover:bg-accent-50 dark:hover:bg-accent-950 transition-colors"
aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
>
{theme === 'dark' ? (
Expand All @@ -65,15 +65,15 @@ export default function Header() {
initial={{ rotate: -30, opacity: 0 }}
animate={{ rotate: 0, opacity: 1 }}
>
<SunIcon className="w-6 h-6 text-accent" />
<SunIcon className="w-6 h-6 text-accent-600" />
</motion.div>
) : (
<motion.div
key="light"
initial={{ rotate: 30, opacity: 0 }}
animate={{ rotate: 0, opacity: 1 }}
>
<MoonIcon className="w-6 h-6 text-accent" />
<MoonIcon className="w-6 h-6 text-accent-600" />
</motion.div>
)}
</motion.button>
Expand Down
21 changes: 10 additions & 11 deletions src/components/layout/MobileNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function MobileNav() {
<div className="md:hidden">
<button
onClick={() => setIsOpen(!isOpen)}
className="p-2 rounded-lg hover:bg-accent/10 transition-colors text-primary"
className="p-2 rounded-lg hover:bg-accent-50 dark:hover:bg-accent-900 transition-colors text-text-primary"
aria-label="Open navigation menu"
>
{isOpen ? (
Expand All @@ -34,9 +34,9 @@ export default function MobileNav() {
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
className="fixed inset-0 top-16 bg-surface/95 backdrop-blur-lg z-40"
className="fixed inset-0 top-16 bg-background-primary/95 backdrop-blur-lg z-40"
>
<nav className="p-4 border-t border-primary/10 bg-primary">
<nav className="p-4 border-t border-color-border bg-background-secondary">
<ul className="space-y-2">
{navItems.map((item, index) => (
<motion.li
Expand All @@ -48,14 +48,14 @@ export default function MobileNav() {
<Link
href={`#${item.id}`}
onClick={() => setIsOpen(false)}
className="flex text-accent items-center gap-4 p-3 rounded-lg hover:bg-accent/10 transition-colors group"
className="flex text-text-primary items-center gap-4 p-3 rounded-lg hover:bg-accent-50 dark:hover:bg-accent-900 transition-colors group"
>
<item.icon className="w-5 h-5 text-accent shrink-0" />
<span className="text-accent font-medium">
<item.icon className="w-5 h-5 text-accent-600 shrink-0" />
<span className="text-text-primary font-medium">
{item.label}
</span>
<motion.span
className="ml-auto h-px bg-accent/20 flex-1 transition-all group-hover:bg-accent/50"
className="ml-auto h-px bg-accent-600/20 flex-1 transition-all group-hover:bg-accent-600/50"
initial={{ width: 0 }}
animate={{ width: '100%' }}
transition={{ duration: 0.3 }}
Expand All @@ -66,17 +66,16 @@ export default function MobileNav() {
</ul>

{/* Social Links Section */}
<div className="mt-8 pt-6 border-t border-primary/10">
<div className="mt-8 pt-6 border-t border-color-border">
<div className="flex justify-center gap-6">
<a
href="https://github.com/Mbdulrohim"
target="_blank"
rel="noopener noreferrer"
className="p-2 rounded-lg hover:bg-accent/10 transition-colors"
className="p-2 rounded-lg hover:bg-accent-50 dark:hover:bg-accent-900 transition-colors"
>
<FiGithub className="w-6 h-6 text-accent hover:text-primary" />
<FiGithub className="w-6 h-6 text-accent-600 hover:text-accent-700" />
</a>

</div>
</div>
</nav>
Expand Down
16 changes: 8 additions & 8 deletions src/components/sections/AboutSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { skills } from '@/data/skills';

export default function AboutSection() {
return (
<section className="py-20 bg-primary/5">
<section className="py-20 bg-background-secondary">
<div className="container mx-auto px-4">
<motion.div
initial={{ opacity: 0 }}
Expand All @@ -14,8 +14,8 @@ export default function AboutSection() {
>
{/* Left Column */}
<div>
<h2 className="text-4xl font-bold mb-6">About Me</h2>
<p className="text-text/80 mb-8">
<h2 className="text-4xl font-bold mb-6 text-text-primary">About Me</h2>
<p className="text-text-secondary mb-8 leading-relaxed">
Full-stack developer with expertise in building cross-platform solutions
using modern web and blockchain technologies. Passionate about creating
efficient, scalable applications with great user experiences.
Expand All @@ -30,15 +30,15 @@ export default function AboutSection() {
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
className="p-4 bg-background dark:bg-primary/10 rounded-lg"
className="p-4 bg-background-elevated rounded-lg shadow-custom-sm border border-color-border"
>
<div className="flex items-center gap-3 mb-2">
<skill.icon className="w-6 h-6 text-accent" />
<span className="font-medium">{skill.name}</span>
<skill.icon className="w-6 h-6 text-accent-600" />
<span className="font-medium text-text-primary">{skill.name}</span>
</div>
<div className="h-2 bg-gray-200 rounded-full">
<div className="h-2 bg-surface-200 dark:bg-surface-700 rounded-full">
<div
className="h-full bg-accent rounded-full transition-all duration-1000"
className="h-full bg-accent-600 rounded-full transition-all duration-1000"
style={{ width: `${skill.level}%` }}
/>
</div>
Expand Down
57 changes: 31 additions & 26 deletions src/components/sections/ContactSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,17 @@ export default function ContactSection() {
const [loading] = useState(false);

return (
<section className="py-20" id='contact'>
<section className="py-20 bg-background-primary" id='contact'>
<div className="container mx-auto px-4">
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
className="max-w-2xl mx-auto text-center"
>
<h2 className="text-4xl font-bold mb-6">Let&apos;s Connect</h2>
<h2 className="text-4xl font-bold mb-6 text-text-primary">Let&apos;s Connect</h2>

<p className="text-text/80 mb-12">

<p className="text-text-secondary mb-12">
Have a project in mind? Let&apos;s discuss how I can help bring it to life.
</p>

Expand All @@ -30,46 +29,52 @@ export default function ContactSection() {
<input
type="text"
placeholder="Name"
className="w-full px-4 py-3 rounded-lg bg-background dark:bg-primary/10 border border-text/20"
className="w-full px-4 py-3 rounded-lg bg-background-elevated border border-color-border focus:border-accent-600 focus:outline-none focus:ring-2 focus:ring-accent-600/20 transition-colors text-text-primary placeholder-text-muted"
/>
<input
type="email"
placeholder="Email"
className="w-full px-4 py-3 rounded-lg bg-background dark:bg-primary/10 border border-text/20"
className="w-full px-4 py-3 rounded-lg bg-background-elevated border border-color-border focus:border-accent-600 focus:outline-none focus:ring-2 focus:ring-accent-600/20 transition-colors text-text-primary placeholder-text-muted"
/>
</div>
<textarea
placeholder="Message"
rows={5}
className="w-full px-4 py-3 rounded-lg bg-background dark:bg-primary/10 border border-text/20"
className="w-full px-4 py-3 rounded-lg bg-background-elevated border border-color-border focus:border-accent-600 focus:outline-none focus:ring-2 focus:ring-accent-600/20 transition-colors text-text-primary placeholder-text-muted"
/>
<Button
type="submit"
className="w-full flex items-center justify-center gap-2 bg-accent hover:bg-accent/80 transition-all py-3 px-6 rounded-lg font-semibold"
disabled={loading}
>
{loading ? (
<>
<span className="animate-spin border-2 border-white border-t-transparent rounded-full w-5 h-5"></span>
Sending...
</>
) : (
<>
<FiSend className="w-5 h-5" />
Send Message
</>
)}
</Button>
type="submit"
className="w-full flex items-center justify-center gap-2 bg-accent-600 hover:bg-accent-700 text-white transition-all py-3 px-6 rounded-lg font-semibold shadow-custom-md hover:shadow-custom-lg"
disabled={loading}
>
{loading ? (
<>
<span className="animate-spin border-2 border-white border-t-transparent rounded-full w-5 h-5"></span>
Sending...
</>
) : (
<>
<FiSend className="w-5 h-5" />
Send Message
</>
)}
</Button>
</form>

<div className="flex justify-center gap-6">
<a href="mailto:doyextech@gmail.com" className="text-accent hover:text-accent/80">
<a
href="mailto:doyextech@gmail.com"
className="text-accent-600 hover:text-accent-700 transition-colors p-2 rounded-lg hover:bg-accent-50 dark:hover:bg-accent-900"
>
<FiMail className="w-8 h-8" />
</a>
<a href="https://github.com/mbdulrohim" className="text-accent hover:text-accent/80">
<a
href="https://github.com/mbdulrohim"
className="text-accent-600 hover:text-accent-700 transition-colors p-2 rounded-lg hover:bg-accent-50 dark:hover:bg-accent-900"
>
<FiGithub className="w-8 h-8" />
</a>
{/* <a href="#" className="text-accent hover:text-accent/80">
{/* <a href="#" className="text-accent-600 hover:text-accent-700 transition-colors">
<FiLinkedin className="w-8 h-8" />
</a> */}
</div>
Expand Down
Loading