Skip to content

Commit 741f26f

Browse files
InzGIBAInzGIBA
committed
update design
1 parent 80ce8ad commit 741f26f

File tree

20 files changed

+777
-970
lines changed

20 files changed

+777
-970
lines changed

‎src/app.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<link rel="icon" href="/favicon.png" type="image/png" sizes="192x192" />
99
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
1010
<link rel="manifest" href="/site.webmanifest" />
11+
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@1.0.8/dist/iconify-icon.min.js"></script>
1112
%sveltekit.head%
1213
</head>
1314
<body data-sveltekit-preload-data="hover">

‎src/app/styles/layout.css‎

Lines changed: 106 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
/* Inter font - must be at top */
2-
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
33
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
44

55
@import 'tailwindcss';
66
@plugin '@tailwindcss/forms';
77
@plugin '@tailwindcss/typography';
88

9-
/* Modern SaaS Palette - Vercel/Linear inspired */
9+
/* Modern SaaS Palette - Dark Minimal inspired */
1010
@theme {
1111
/* Background colors */
12-
--color-bg-primary: #030303; /* Deep void black */
13-
--color-bg-secondary: #0a0a0a; /* Subtle surface */
14-
--color-bg-tertiary: #161616; /* Card background */
12+
--color-bg-primary: #050505; /* Deep void black */
13+
--color-bg-secondary: #0a0a0a; /* Surface */
14+
--color-bg-tertiary: #121212; /* Surface highlight */
1515
--color-bg-canvas: #000000;
1616

1717
/* Border colors */
@@ -21,36 +21,43 @@
2121
--color-border-highlight: #444444;
2222

2323
/* Text colors */
24-
--color-text-primary: #ededed;
25-
--color-text-secondary: #a1a1a1;
26-
--color-text-tertiary: #666666;
24+
--color-text-primary: #d4d4d8; /* Zinc 300 */
25+
--color-text-secondary: #a1a1aa; /* Zinc 400 */
26+
--color-text-tertiary: #52525b; /* Zinc 600 */
2727
--color-text-placeholder: #555555;
2828
--color-text-disabled: #333333;
2929

3030
/* Accent colors */
31-
--color-accent-blue: #3291ff; /* Vercel Blue */
32-
--color-accent-green: #2ea043; /* GitHub Green */
33-
--color-accent-purple: #8b5cf6; /* Linear Purple */
34-
--color-accent-yellow: #f5a623;
35-
--color-accent-orange: #f97316;
36-
--color-accent-red: #e00;
31+
--color-accent-blue: #3b82f6; /* Blue 500 */
32+
--color-accent-green: #10b981; /* Emerald 500 */
33+
--color-accent-purple: #8b5cf6; /* Violet 500 */
34+
--color-accent-yellow: #eab308; /* Yellow 500 */
35+
--color-accent-orange: #f97316; /* Orange 500 */
36+
--color-accent-red: #ef4444; /* Red 500 */
3737
--color-accent-pink: #ec4899;
38-
--color-saas-green: #0d3a20;
38+
--color-accent-amber: #f59e0b; /* Amber 500 */
39+
--color-accent-cyan: #06b6d4; /* Cyan 500 */
40+
--color-saas-green: #10b981;
41+
42+
/* Design system colors */
43+
--color-tertiary: #52525b; /* Zinc 600 */
3944

4045
/* Button colors */
41-
--color-btn-primary-bg: #ededed;
46+
--color-btn-primary-bg: #ffffff;
4247
--color-btn-primary-text: #000000;
43-
--color-btn-primary-hover: #ffffff;
44-
--color-btn-secondary-bg: #1a1a1a;
45-
--color-btn-secondary-text: #ededed;
46-
--color-btn-secondary-hover: #222222;
48+
--color-btn-primary-hover: #e4e4e7;
49+
--color-btn-secondary-bg: #121212;
50+
--color-btn-secondary-text: #d4d4d8;
51+
--color-btn-secondary-hover: #1a1a1a;
4752

4853
/* Shadows & Glows */
4954
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
5055
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
5156
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
52-
--shadow-glow: 0 0 40px -10px rgba(255, 255, 255, 0.15);
57+
--shadow-glow: 0 0 20px rgba(255, 255, 255, 0.1);
58+
--shadow-glow-hover: 0 0 25px rgba(255, 255, 255, 0.2);
5359
--shadow-glow-blue: 0 0 40px -10px rgba(50, 145, 255, 0.3);
60+
--shadow-glow-emerald: 0 0 8px rgba(16, 185, 129, 0.5);
5461

5562
/* Border radius */
5663
--radius-sm: 4px;
@@ -314,3 +321,81 @@ body:has(.page-exit),
314321
body:has(.page-enter) {
315322
overflow: hidden;
316323
}
324+
325+
/* Slide Up Animation */
326+
@keyframes slideUp {
327+
0% {
328+
transform: translateY(10px);
329+
opacity: 0;
330+
}
331+
100% {
332+
transform: translateY(0);
333+
opacity: 1;
334+
}
335+
}
336+
337+
.animate-slide-up {
338+
animation: slideUp 0.3s ease-out forwards;
339+
}
340+
341+
/* Pulse Slow Animation */
342+
@keyframes pulseSlow {
343+
0%, 100% {
344+
opacity: 1;
345+
}
346+
50% {
347+
opacity: 0.5;
348+
}
349+
}
350+
351+
.animate-pulse-slow {
352+
animation: pulseSlow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
353+
}
354+
355+
/* Spotlight Card Effect */
356+
.spotlight-card {
357+
position: relative;
358+
overflow: hidden;
359+
}
360+
361+
.spotlight-card::before {
362+
content: "";
363+
position: absolute;
364+
height: 100%;
365+
width: 100%;
366+
left: 0;
367+
top: 0;
368+
background: radial-gradient(800px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), rgba(255, 255, 255, 0.06), transparent 40%);
369+
opacity: 0;
370+
transition: opacity 0.3s;
371+
pointer-events: none;
372+
z-index: 10;
373+
}
374+
375+
.spotlight-card:hover::before {
376+
opacity: 1;
377+
}
378+
379+
/* Contribution Grid */
380+
.contribution-grid {
381+
display: grid;
382+
grid-template-rows: repeat(7, 1fr);
383+
grid-auto-flow: column;
384+
gap: 3px;
385+
}
386+
387+
/* Language Badge Glow Effects */
388+
.lang-badge-glow {
389+
box-shadow: 0 0 8px var(--glow-color, rgba(255, 255, 255, 0.3));
390+
}
391+
392+
/* Timeline Glow */
393+
.timeline-glow {
394+
background: linear-gradient(to bottom, rgba(16, 185, 129, 0.5), transparent);
395+
}
396+
397+
/* Selection color */
398+
::selection {
399+
background-color: rgba(16, 185, 129, 0.2);
400+
color: #10b981;
401+
}

0 commit comments

Comments
 (0)