jesseinit/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: for ui fixes

Browse Source
This commit is contained in:
Jesse Egbosionu
2025-12-01 22:42:59 +01:00
parent b6265c4f0f
commit 5c22b9b844
3 changed files with 90 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/api/v1/rates.js
+1 -1
View File
@@ -257,7 +257,7 @@ export default async (req, res) => {
.catch((error) => reject(error)); .catch((error) => reject(error));
}).then((result) => { }).then((result) => {
return { return {
rate: Math.floor(result.data.rate % 10000), rate: 0,
provider: "Lemfi(referal code - OBIN6518)", provider: "Lemfi(referal code - OBIN6518)",
bestRate: false, bestRate: false,
href: "https://lemfi.com", href: "https://lemfi.com",
pages/index.js
+1 -6
View File
@@ -23,11 +23,6 @@ export default function Home() {
<main className="main-content"> <main className="main-content">
<section className="hero"> <section className="hero">
<div className="hero-content"> <div className="hero-content">
<div className="hero-badge">
<span className="status-dot"></span>
Available for opportunities
</div>
<h1 className="hero-title"> <h1 className="hero-title">
Hey, I'm <span className="highlight">Jesse Egbosionu</span> Hey, I'm <span className="highlight">Jesse Egbosionu</span>
</h1> </h1>
@@ -44,7 +39,7 @@ export default function Home() {
</p> </p>
<p> <p>
Over the past 5 years, I've shipped products across <strong>finance</strong>, <strong>ecommerce</strong>, Over the past 6 years, I've shipped products across <strong>finance</strong>, <strong>ecommerce</strong>,
and <strong>logistics</strong>, working with technologies like Python (Django, FastAPI), and <strong>logistics</strong>, working with technologies like Python (Django, FastAPI),
JavaScript (React, Node.js), PostgreSQL, Docker, Redis, and Kubernetes. JavaScript (React, Node.js), PostgreSQL, Docker, Redis, and Kubernetes.
</p> </p>
styles/globals.scss
+88 -96
View File
@@ -6,16 +6,16 @@
} }
:root { :root {
--color-primary: #0f172a; --color-primary: #0a0a0a;
--color-secondary: #475569; --color-secondary: #1a1a1a;
--color-accent: #3b82f6; --color-accent: #fef3c7;
--color-accent-hover: #2563eb; --color-accent-hover: #fde68a;
--color-background: #ffffff; --color-background: #fffef0;
--color-surface: #f8fafc; --color-surface: #fefce8;
--color-border: #e2e8f0; --color-border: #fde68a;
--color-text: #1e293b; --color-text: #0a0a0a;
--color-text-muted: #64748b; --color-text-muted: #525252;
--color-success: #10b981; --color-success: #fbbf24;
--spacing-xs: 0.5rem; --spacing-xs: 0.5rem;
--spacing-sm: 1rem; --spacing-sm: 1rem;
@@ -81,8 +81,8 @@ strong {
// HEADER // HEADER
.header { .header {
padding: var(--spacing-lg) 0; padding: var(--spacing-lg) 0;
border-bottom: 1px solid var(--color-border); border-bottom: 2px solid var(--color-primary);
background: rgba(255, 255, 255, 0.8); background: rgba(255, 254, 240, 0.95);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
position: sticky; position: sticky;
top: 0; top: 0;
@@ -102,10 +102,11 @@ strong {
.logo-text { .logo-text {
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); background: var(--color-accent);
-webkit-background-clip: text; color: var(--color-primary);
-webkit-text-fill-color: transparent; padding: 0.25rem 0.75rem;
background-clip: text; border: 2px solid var(--color-primary);
border-radius: var(--radius-sm);
} }
} }
@@ -129,11 +130,12 @@ strong {
} }
&.cta { &.cta {
color: var(--color-accent); color: var(--color-primary);
background: rgba(59, 130, 246, 0.1); background: var(--color-accent);
border: 2px solid var(--color-primary);
&:hover { &:hover {
background: rgba(59, 130, 246, 0.15); background: var(--color-accent-hover);
} }
} }
} }
@@ -161,41 +163,19 @@ strong {
gap: var(--spacing-lg); gap: var(--spacing-lg);
} }
.hero-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-md);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
font-size: 0.875rem;
color: var(--color-text-muted);
width: fit-content;
animation: fadeInUp 0.6s ease forwards;
}
.status-dot {
width: 8px;
height: 8px;
background: var(--color-success);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
.hero-title { .hero-title {
font-size: clamp(2rem, 5vw, 3.5rem); font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800; font-weight: 800;
line-height: 1.2; line-height: 1.2;
color: var(--color-primary); color: var(--color-primary);
animation: fadeInUp 0.6s ease 0.1s forwards; animation: fadeInUp 0.6s ease forwards;
opacity: 0; opacity: 0;
.highlight { .highlight {
background: linear-gradient(135deg, var(--color-accent), #8b5cf6); background: var(--color-accent);
-webkit-background-clip: text; color: var(--color-primary);
-webkit-text-fill-color: transparent; padding: 0 0.5rem;
background-clip: text; border-bottom: 4px solid var(--color-primary);
} }
} }
@@ -203,7 +183,7 @@ strong {
font-size: clamp(1.125rem, 2vw, 1.5rem); font-size: clamp(1.125rem, 2vw, 1.5rem);
color: var(--color-secondary); color: var(--color-secondary);
font-weight: 500; font-weight: 500;
animation: fadeInUp 0.6s ease 0.2s forwards; animation: fadeInUp 0.6s ease 0.1s forwards;
opacity: 0; opacity: 0;
} }
@@ -216,7 +196,7 @@ strong {
font-size: 1.0625rem; font-size: 1.0625rem;
line-height: 1.75; line-height: 1.75;
color: var(--color-text-muted); color: var(--color-text-muted);
animation: fadeInUp 0.6s ease 0.3s forwards; animation: fadeInUp 0.6s ease 0.2s forwards;
opacity: 0; opacity: 0;
} }
} }
@@ -225,7 +205,7 @@ strong {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--spacing-sm); gap: var(--spacing-sm);
animation: fadeInUp 0.6s ease 0.4s forwards; animation: fadeInUp 0.6s ease 0.3s forwards;
opacity: 0; opacity: 0;
} }
@@ -234,19 +214,18 @@ strong {
align-items: center; align-items: center;
gap: var(--spacing-xs); gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-md); padding: var(--spacing-xs) var(--spacing-md);
background: var(--color-surface); background: var(--color-background);
border: 1px solid var(--color-border); border: 2px solid var(--color-primary);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
font-size: 0.9375rem; font-size: 0.9375rem;
font-weight: 500; font-weight: 600;
color: var(--color-text); color: var(--color-text);
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover { &:hover {
background: var(--color-background); background: var(--color-accent);
border-color: var(--color-accent);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: var(--shadow-md); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
.social-icon { .social-icon {
transform: translateX(4px); transform: translateX(4px);
@@ -265,20 +244,22 @@ strong {
gap: var(--spacing-sm); gap: var(--spacing-sm);
padding: var(--spacing-md) var(--spacing-lg); padding: var(--spacing-md) var(--spacing-lg);
background: var(--color-primary); background: var(--color-primary);
color: white; color: var(--color-background);
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 700;
border-radius: var(--radius-md); border-radius: var(--radius-md);
width: fit-content; width: fit-content;
transition: all 0.3s ease; transition: all 0.3s ease;
box-shadow: var(--shadow-md); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
animation: fadeInUp 0.6s ease 0.5s forwards; animation: fadeInUp 0.6s ease 0.4s forwards;
opacity: 0; opacity: 0;
border: 3px solid var(--color-primary);
&:hover { &:hover {
background: var(--color-accent); background: var(--color-accent);
color: var(--color-primary);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: var(--shadow-xl); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
.arrow { .arrow {
transform: translateX(4px); transform: translateX(4px);
@@ -304,10 +285,11 @@ strong {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1)); background: var(--color-accent);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
transform: rotate(-6deg); transform: rotate(-6deg);
z-index: -1; z-index: -1;
border: 3px solid var(--color-primary);
} }
.hero-image { .hero-image {
@@ -315,9 +297,10 @@ strong {
max-width: 400px; max-width: 400px;
height: auto; height: auto;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
object-fit: cover; object-fit: cover;
transition: transform 0.3s ease; transition: transform 0.3s ease;
border: 3px solid var(--color-primary);
&:hover { &:hover {
transform: scale(1.02) rotate(2deg); transform: scale(1.02) rotate(2deg);
@@ -326,7 +309,7 @@ strong {
// FOOTER // FOOTER
.footer { .footer {
border-top: 1px solid var(--color-border); border-top: 2px solid var(--color-primary);
padding: var(--spacing-lg) 0; padding: var(--spacing-lg) 0;
margin-top: auto; margin-top: auto;
} }
@@ -410,7 +393,7 @@ strong {
gap: var(--spacing-lg); gap: var(--spacing-lg);
text-align: center; text-align: center;
padding-bottom: var(--spacing-lg); padding-bottom: var(--spacing-lg);
border-bottom: 1px solid var(--color-border); border-bottom: 2px solid var(--color-primary);
} }
.rates-title-group { .rates-title-group {
@@ -445,18 +428,18 @@ strong {
align-items: center; align-items: center;
gap: var(--spacing-md); gap: var(--spacing-md);
padding: var(--spacing-md) var(--spacing-lg); padding: var(--spacing-md) var(--spacing-lg);
background: var(--color-surface); background: var(--color-accent);
border: 2px solid var(--color-border); border: 3px solid var(--color-primary);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
font-weight: 600; font-weight: 700;
font-size: 1.125rem; font-size: 1.125rem;
.currency-from { .currency-from {
color: var(--color-accent); color: var(--color-primary);
} }
.currency-arrow { .currency-arrow {
color: var(--color-text-muted); color: var(--color-primary);
} }
.currency-to { .currency-to {
@@ -478,7 +461,7 @@ strong {
gap: var(--spacing-md); gap: var(--spacing-md);
padding: var(--spacing-lg); padding: var(--spacing-lg);
background: var(--color-background); background: var(--color-background);
border: 2px solid var(--color-border); border: 3px solid var(--color-primary);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
@@ -486,21 +469,20 @@ strong {
opacity: 0; opacity: 0;
&:hover { &:hover {
border-color: var(--color-accent); background: var(--color-accent);
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: var(--shadow-xl); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
.visit-link { .visit-link {
color: var(--color-accent); color: var(--color-primary);
transform: translateX(4px); transform: translateX(4px);
} }
} }
&.best { &.best {
border-color: var(--color-success); border-width: 4px;
border-width: 3px; background: var(--color-accent);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@@ -510,24 +492,20 @@ strong {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 4px; height: 6px;
background: linear-gradient(90deg, var(--color-success), #34d399); background: var(--color-primary);
} }
&:hover { &:hover {
border-color: var(--color-success); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
} }
.provider-name { .provider-name {
color: var(--color-success); color: var(--color-primary);
} }
.rate-value { .rate-value {
background: linear-gradient(135deg, var(--color-success), #34d399); color: var(--color-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} }
} }
} }
@@ -550,32 +528,31 @@ strong {
align-items: center; align-items: center;
gap: 0.375rem; gap: 0.375rem;
padding: 0.375rem 0.875rem; padding: 0.375rem 0.875rem;
background: linear-gradient(135deg, #f59e0b, #f97316); background: var(--color-primary);
color: white; color: var(--color-accent);
font-size: 0.6875rem; font-size: 0.6875rem;
font-weight: 700; font-weight: 700;
border-radius: var(--radius-full); border-radius: var(--radius-full);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.75px; letter-spacing: 0.75px;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
animation: badgePulse 2s ease-in-out infinite; animation: badgePulse 2s ease-in-out infinite;
border: 2px solid rgba(255, 255, 255, 0.3); border: 2px solid var(--color-primary);
&::before { &::before {
content: '★'; content: '★';
font-size: 0.875rem; font-size: 0.875rem;
animation: starRotate 3s linear infinite; animation: starRotate 3s linear infinite;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
} }
} }
@keyframes badgePulse { @keyframes badgePulse {
0%, 100% { 0%, 100% {
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transform: scale(1); transform: scale(1);
} }
50% { 50% {
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
transform: scale(1.05); transform: scale(1.05);
} }
} }
@@ -621,6 +598,7 @@ strong {
gap: var(--spacing-xs); gap: var(--spacing-xs);
padding: var(--spacing-lg); padding: var(--spacing-lg);
background: var(--color-surface); background: var(--color-surface);
border: 2px solid var(--color-primary);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
text-align: center; text-align: center;
animation: fadeInUp 0.6s ease 0.4s forwards; animation: fadeInUp 0.6s ease 0.4s forwards;
@@ -721,8 +699,8 @@ strong {
margin-top: var(--spacing-sm); margin-top: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-lg); padding: var(--spacing-sm) var(--spacing-lg);
background: var(--color-primary); background: var(--color-primary);
color: white; color: var(--color-accent);
border: none; border: 3px solid var(--color-primary);
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
@@ -731,8 +709,9 @@ strong {
&:hover { &:hover {
background: var(--color-accent); background: var(--color-accent);
color: var(--color-primary);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: var(--shadow-md); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
} }
&:active { &:active {
@@ -779,6 +758,19 @@ strong {
display: none; display: none;
} }
.hero {
grid-template-columns: 1fr;
}
.hero-content {
order: 2;
}
.hero-image-wrapper {
order: 1;
margin-bottom: var(--spacing-lg);
}
.hero-image { .hero-image {
max-width: 280px; max-width: 280px;
} }