GKaszewski/gabrielkaszewski-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add AboutSummary component with personal introduction and game preview

Browse Source 
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
This commit is contained in:
Gabriel Kaszewski
2025-09-08 19:12:30 +02:00
parent fab7310436
commit a99b6353be
32 changed files with 1522 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
app/globals.css
View File

@@ -1,4 +1,6 @@
@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "tailwindcss-motion";
:root {
--background: #ffffff;
@@ -6,10 +8,30 @@
}
@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) {
@@ -20,7 +42,149 @@
}
body {
background: var(--background);
/* 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;
}
}