Skip to content

P
portfolio
Commit 0b5eadcd authored by QuanMB's avatar QuanMB
Browse files
Options

fix(ui): fix invisible text and input issues in Light Mode

parent 14427aaf
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 52 additions and 51 deletions
src/app/page.tsx
View file @ 0b5eadcd
......@@ -30,13 +30,13 @@ export default function Home() {
</main>
{/* Footer */}
<footer className="border-t border-nav-border bg-nav-bg/90 py-8 px-6 text-center text-sm text-slate-500">
<footer className="border-t border-nav-border bg-nav-bg/90 py-8 px-6 text-center text-sm text-text-secondary">
<div className="max-w-[1200px] mx-auto flex justify-between items-center flex-wrap gap-6">
<div>
&copy; {new Date().getFullYear()} Bui Minh Quan. All rights reserved.
</div>
<div className="flex gap-6">
<a href="#home" className="text-slate-500 hover:text-white transition-colors duration-300">Back to top</a>
<a href="#home" className="text-text-secondary hover:text-text-primary transition-colors duration-300">Back to top</a>
<span>&bull;</span>
<span>Made with Next.js &amp; Tailwind CSS</span>
</div>
......
src/components/Contact/Contact.tsx
View file @ 0b5eadcd
This diff is collapsed.
src/components/Experience/Experience.tsx
View file @ 0b5eadcd
......@@ -42,13 +42,13 @@ export default function Experience() {
{/* Header */}
<div className="mb-16 text-center">
<span className="text-xs font-semibold uppercase text-primary tracking-widest block">Timeline</span>
<h2 className="text-3xl sm:text-4xl font-extrabold mt-2 text-white tracking-tight">Education &amp; Projects</h2>
<h2 className="text-3xl sm:text-4xl font-extrabold mt-2 text-text-primary tracking-tight">Education &amp; Projects</h2>
</div>
{/* Timeline Wrapper */}
<div className="relative max-w-[840px] mx-auto py-4">
{/* Central Vertical Line (Git style) */}
<div className="absolute top-0 bottom-0 left-5 md:left-1/2 w-[1px] bg-slate-800 -translate-x-1/2"></div>
<div className="absolute top-0 bottom-0 left-5 md:left-1/2 w-[1px] bg-surface-border -translate-x-1/2"></div>
{TIMELINE_DATA.map((item, index) => {
const isLeft = index % 2 === 0;
......@@ -71,13 +71,13 @@ export default function Experience() {
></div>
{/* Minimal Card Container */}
<div className="bg-[#111827] border border-white/5 p-7 rounded-2xl shadow-sm hover:border-white/10 transition-colors text-left">
<div className="bg-surface border border-surface-border p-7 rounded-2xl shadow-sm hover:border-surface-hover-border transition-colors text-left">
<span className="text-[10px] font-semibold uppercase tracking-wider text-primary mb-3 inline-block bg-primary/10 px-2.5 py-1 rounded-full border border-primary/20">
{item.period}
</span>
<h3 className="text-lg font-bold text-white mb-1 tracking-tight">{item.role}</h3>
<span className="text-xs font-semibold text-slate-400 mb-4 block">{item.company}</span>
<p className="text-sm text-slate-400 leading-relaxed">{item.description}</p>
<h3 className="text-lg font-bold text-text-primary mb-1 tracking-tight">{item.role}</h3>
<span className="text-xs font-semibold text-text-secondary mb-4 block">{item.company}</span>
<p className="text-sm text-text-secondary leading-relaxed">{item.description}</p>
</div>
</div>
);
......
src/components/Projects/ProjectModal.tsx
View file @ 0b5eadcd
......@@ -41,13 +41,13 @@ export default function ProjectModal({ project, onClose }: ProjectModalProps) {
return (
<div
className="fixed top-0 left-0 w-full h-full bg-[#05070c]/85 backdrop-blur-sm z-[999] flex justify-center items-center p-5 animate-fade-in"
className="fixed top-0 left-0 w-full h-full bg-slate-900/80 backdrop-blur-sm z-[999] flex justify-center items-center p-5 animate-fade-in"
onClick={handleOverlayClick}
>
<div className="bg-[#111827] border border-[#1f2937] w-full max-w-[760px] max-h-[85vh] overflow-y-auto relative rounded-2xl shadow-2xl">
<div className="bg-surface border border-surface-border w-full max-w-[760px] max-h-[85vh] overflow-y-auto relative rounded-2xl shadow-2xl">
{/* Close Button */}
<button
className="absolute top-4 right-4 bg-[#111827] border border-white/5 rounded-full w-9 h-9 flex items-center justify-center text-slate-400 hover:text-white transition-all z-10 cursor-pointer hover:scale-105"
className="absolute top-4 right-4 bg-surface border border-surface-border rounded-full w-9 h-9 flex items-center justify-center text-text-secondary hover:text-text-primary transition-all z-10 cursor-pointer hover:scale-105"
onClick={onClose}
aria-label="Close modal"
>
......@@ -58,17 +58,17 @@ export default function ProjectModal({ project, onClose }: ProjectModalProps) {
</button>
{/* Visual Mock Header */}
<div className="h-[180px] sm:h-[260px] w-full relative bg-slate-900 border-b border-white/5 overflow-hidden">
<div className="h-[180px] sm:h-[260px] w-full relative bg-slate-900 border-b border-surface-border overflow-hidden">
{project.svgHeader}
</div>
{/* Content */}
<div className="p-6 sm:p-10">
<h3 className="text-2xl font-extrabold mb-4 text-white tracking-tight">{project.title}</h3>
<p className="text-sm sm:text-[15px] leading-relaxed text-slate-400 mb-8">{project.description}</p>
<h3 className="text-2xl font-extrabold mb-4 text-text-primary tracking-tight">{project.title}</h3>
<p className="text-sm sm:text-[15px] leading-relaxed text-text-secondary mb-8">{project.description}</p>
{/* Key Features */}
<h4 className="text-base font-bold mb-4 text-white flex items-center gap-2">
<h4 className="text-base font-bold mb-4 text-text-primary flex items-center gap-2">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" className="text-primary">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
......@@ -77,7 +77,7 @@ export default function ProjectModal({ project, onClose }: ProjectModalProps) {
</h4>
<ul className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-8 list-none pl-0">
{project.features.map((feature, index) => (
<li key={index} className="flex items-start gap-2.5 text-xs sm:text-sm text-slate-300">
<li key={index} className="flex items-start gap-2.5 text-xs sm:text-sm text-text-secondary">
<svg className="text-primary flex-shrink-0 mt-0.5" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
......@@ -88,10 +88,10 @@ export default function ProjectModal({ project, onClose }: ProjectModalProps) {
{/* Technologies */}
<div className="mb-9">
<h4 className="text-base font-bold mb-4 text-white">Technologies Used</h4>
<h4 className="text-base font-bold mb-4 text-text-primary">Technologies Used</h4>
<div className="flex flex-wrap gap-2">
{project.tags.map((tag, index) => (
<span key={index} className="bg-white/3 border border-white/5 text-slate-300 px-3 py-1.5 rounded-lg text-xs font-semibold">
<span key={index} className="bg-surface border border-surface-border text-text-secondary px-3 py-1.5 rounded-lg text-xs font-semibold">
{tag}
</span>
))}
......@@ -99,12 +99,12 @@ export default function ProjectModal({ project, onClose }: ProjectModalProps) {
</div>
{/* Action Footer */}
<div className="flex flex-col sm:flex-row justify-end gap-3.5 border-t border-white/5 pt-6">
<div className="flex flex-col sm:flex-row justify-end gap-3.5 border-t border-surface-border pt-6">
<a
href={project.githubUrl}
target="_blank"
rel="noopener noreferrer"
className="px-5 py-2.5 rounded-full font-semibold text-xs tracking-wide flex items-center justify-center gap-2 cursor-pointer transition-all w-full sm:w-auto bg-white/3 border border-white/5 text-white hover:bg-white/8 hover:-translate-y-0.5"
className="px-5 py-2.5 rounded-full font-semibold text-xs tracking-wide flex items-center justify-center gap-2 cursor-pointer transition-all w-full sm:w-auto bg-surface border border-surface-border text-text-primary hover:bg-slate-500/10 hover:-translate-y-0.5"
>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
......
src/components/Projects/Projects.tsx
View file @ 0b5eadcd
......@@ -103,7 +103,7 @@ export default function Projects() {
{/* Header */}
<div className="mb-14 text-center">
<span className="text-xs font-semibold uppercase text-primary tracking-widest block">My Work</span>
<h2 className="text-3xl sm:text-4xl font-extrabold mt-2 text-white tracking-tight">Projects Showcase</h2>
<h2 className="text-3xl sm:text-4xl font-extrabold mt-2 text-text-primary tracking-tight">Projects Showcase</h2>
</div>
{/* Filter Tabs */}
......@@ -115,7 +115,7 @@ export default function Projects() {
className={`px-5 py-2 rounded-full font-inter font-semibold text-xs tracking-wider uppercase transition-all duration-200 cursor-pointer ${
filter === category
? "bg-primary text-white border border-primary shadow-sm"
: "bg-[#111827] border border-white/5 text-slate-400 hover:text-white"
: "bg-surface border border-surface-border text-text-secondary hover:text-text-primary"
}`}
>
{category}
......@@ -129,30 +129,30 @@ export default function Projects() {
<div
key={project.id}
onClick={() => setSelectedProject(project)}
className="bg-[#111827] border border-white/5 flex flex-col h-full overflow-hidden cursor-pointer rounded-2xl transition-all duration-300 hover:border-primary/30 hover:-translate-y-1 hover:shadow-lg group"
className="bg-surface border border-surface-border flex flex-col h-full overflow-hidden cursor-pointer rounded-2xl transition-all duration-300 hover:border-primary/30 hover:-translate-y-1 hover:shadow-lg group"
>
<div className="h-[200px] w-full overflow-hidden relative bg-slate-900 border-b border-white/5">
<div className="h-[200px] w-full overflow-hidden relative bg-slate-900 border-b border-surface-border">
<div className="w-full h-full transition-transform duration-350 group-hover:scale-102">
{project.svgHeader}
</div>
</div>
<div className="p-7 flex flex-col flex-1">
<h3 className="text-lg font-bold mb-2.5 text-white tracking-tight">{project.title}</h3>
<p className="text-sm leading-relaxed text-slate-400 mb-6 flex-1">
<h3 className="text-lg font-bold mb-2.5 text-text-primary tracking-tight">{project.title}</h3>
<p className="text-sm leading-relaxed text-text-secondary mb-6 flex-1">
{project.description}
</p>
<div className="flex flex-wrap gap-2 mb-6">
{project.tags.slice(0, 3).map((tag, idx) => (
<span key={idx} className="bg-white/4 border border-white/5 px-2.5 py-1 rounded-md text-[11px] font-semibold text-primary">
<span key={idx} className="bg-primary/5 border border-primary/20 px-2.5 py-1 rounded-md text-[11px] font-semibold text-primary">
{tag}
</span>
))}
{project.tags.length > 3 && (
<span className="bg-white/4 border border-white/5 px-2.5 py-1 rounded-md text-[11px] font-semibold text-slate-500">+{project.tags.length - 3} more</span>
<span className="bg-surface border border-surface-border px-2.5 py-1 rounded-md text-[11px] font-semibold text-text-secondary">+{project.tags.length - 3} more</span>
)}
</div>
<div className="flex justify-between items-center border-t border-white/5 pt-5">
<span className="text-xs font-semibold uppercase tracking-wider text-primary flex items-center gap-1.5 transition-all group-hover:text-white">
<div className="flex justify-between items-center border-t border-surface-border pt-5">
<span className="text-xs font-semibold uppercase tracking-wider text-primary flex items-center gap-1.5 transition-all group-hover:text-text-primary">
Project Details
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<line x1="5" y1="12" x2="19" y2="12"></line>
......@@ -160,7 +160,7 @@ export default function Projects() {
</svg>
</span>
<div className="flex gap-3" onClick={(e) => e.stopPropagation()}>
<a href={project.githubUrl} target="_blank" rel="noopener noreferrer" className="text-slate-500 hover:text-white transition-colors duration-200" aria-label="Github code">
<a href={project.githubUrl} target="_blank" rel="noopener noreferrer" className="text-text-secondary hover:text-text-primary transition-colors duration-200" aria-label="Github code">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment