Gabriel Kaszewski
a99b6353be
feat: create Chip component for displaying technology tags feat: implement ExperienceCard component to showcase job experiences feat: add Experience component to list multiple job experiences feat: create Footer component with social links and copyright information feat: implement Hero component for the landing section with social links feat: add ImageCarousel component for displaying project images feat: create Navbar component with scroll effect and navigation links feat: implement ProjectItem component to display individual project details feat: add Skills component to showcase technical skills feat: create data module with skills, jobs, and projects information feat: define types for Skill, Job, and Project in types module chore: update package.json with new dependencies for Tailwind CSS and Lucide icons chore: add CV PDF file to public directory chore: remove unused SVG files from public directory chore: add new images for background and hero sections feat: implement formatDate utility function for date formatting
191 lines
4.3 KiB
CSS
191 lines
4.3 KiB
CSS
@import "tailwindcss";
|
|
@plugin "@tailwindcss/typography";
|
|
@plugin "tailwindcss-motion";
|
|
|
|
:root {
|
|
--background: #ffffff;
|
|
--foreground: #171717;
|
|
}
|
|
|
|
@theme inline {
|
|
--card: hsl(0 0% 100%);
|
|
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
|
|
--gradient-fa-blue: 135deg, hsl(217 91% 60%) 0%, hsl(200 90% 70%) 100%;
|
|
--gradient-fa-green: 135deg, hsl(155 70% 55%) 0%, hsl(170 80% 65%) 100%;
|
|
--gradient-fa-card: 180deg, hsl(var(--card)) 0%, hsl(var(--card)) 90%,
|
|
hsl(var(--card)) 100%;
|
|
--gradient-fa-gloss: 135deg, rgba(255, 255, 255, 0.2) 0%,
|
|
rgba(255, 255, 255, 0) 100%;
|
|
|
|
--shadow-fa-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
--shadow-fa-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
|
|
--shadow-fa-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
--fa-inner: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
|
|
--text-shadow-default: 0 1px 1px rgba(0, 0, 0, 0.2);
|
|
--text-shadow-sm: 0 1px 0px rgba(255, 255, 255, 0.4);
|
|
--text-shadow-md: 0 2px 2px rgba(0, 0, 0, 0.2);
|
|
--text-shadow-lg: 0 4px 4px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: #0a0a0a;
|
|
--foreground: #ededed;
|
|
}
|
|
}
|
|
|
|
body {
|
|
/* background: var(--background); */
|
|
background-image: url("/images/background.avif");
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
color: var(--foreground);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
@layer base {
|
|
glossy-effect::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50%;
|
|
border-radius: inherit;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.4) 0%,
|
|
rgba(255, 255, 255, 0.1) 100%
|
|
);
|
|
opacity: 0.8;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.glossy-effect.bottom::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 30%;
|
|
border-radius: inherit;
|
|
background: linear-gradient(
|
|
0deg,
|
|
rgba(0, 0, 0, 0.1) 0%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.fa-gradient-blue {
|
|
background: linear-gradient(var(--gradient-fa-blue));
|
|
}
|
|
.fa-gradient-green {
|
|
background: linear-gradient(var(--gradient-fa-green));
|
|
}
|
|
.fa-gradient-card {
|
|
background: linear-gradient(var(--gradient-fa-card));
|
|
}
|
|
.fa-gloss {
|
|
position: relative;
|
|
}
|
|
.fa-gloss::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 50%;
|
|
border-radius: inherit;
|
|
background: linear-gradient(var(--gradient-fa-gloss));
|
|
opacity: 0.8;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
.fa-gloss.bottom::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 30%;
|
|
border-radius: inherit;
|
|
background: linear-gradient(
|
|
0deg,
|
|
rgba(0, 0, 0, 0.1) 0%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.shadow-fa-sm {
|
|
box-shadow: var(--shadow-fa-sm), var(--fa-inner);
|
|
}
|
|
.shadow-fa-md {
|
|
box-shadow: var(--shadow-fa-md), var(--fa-inner);
|
|
}
|
|
.shadow-fa-lg {
|
|
box-shadow: var(--shadow-fa-lg), var(--fa-inner);
|
|
}
|
|
.text-shadow-default {
|
|
text-shadow: var(--text-shadow-default);
|
|
}
|
|
.text-shadow-sm {
|
|
text-shadow: var(--text-shadow-sm);
|
|
}
|
|
.text-shadow-md {
|
|
text-shadow: var(--text-shadow-md);
|
|
}
|
|
.text-shadow-lg {
|
|
text-shadow: var(--text-shadow-lg);
|
|
}
|
|
|
|
.glass-effect {
|
|
@apply backdrop-blur-lg border border-white/20 shadow-fa-lg;
|
|
}
|
|
|
|
.gloss-highlight::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 60%;
|
|
border-radius: inherit;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(255, 255, 255, 0.5) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.my-animate {
|
|
opacity: 1 !important;
|
|
transform: translateY(0) !important;
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
.hidden-for-animation {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
}
|
|
}
|