Skip to content

Customize portfolio with my personal info #296

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Gezzy87 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Customize portfolio with my personal info #296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .claude/settings.local.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"permissions": {
"allow": [
"Skill(impeccable)",
"Skill(impeccable:*)",
"Bash(node \"C:\\\\Users\\\\GEZZY\\\\.claude\\\\skills\\\\impeccable\\\\scripts\\\\load-context.mjs\")"
]
}
}
72 changes: 45 additions & 27 deletions src/components/About.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,57 @@
import { siteConfig } from "../config";
---

<section id="about" class="p-8 sm:p-12 md:p-16 lg:p-24">
<div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16 items-start">
<div class="lg:col-span-4">
<h2
class="text-3xl sm:text-4xl md:text-5xl xl:text-7xl font-bold text-gray-900"
>
About Me
</h2>
<div
class="w-[75px] h-[5px] mt-2 rounded-full"
style={`background-color: ${siteConfig.accentColor}`}
>
</div>
</div>
<section id="about" class="px-8 sm:px-12 md:px-16 lg:px-20 py-20 md:py-28 lg:py-36" style="background: var(--bg)">
<div class="max-w-6xl mx-auto">

<!-- Section label -->
<div class="reveal flex items-center gap-4 mb-14 sm:mb-20">
<span class="text-xs tracking-[0.22em] uppercase font-semibold" style="color: var(--accent)">01</span>
<span class="text-xs tracking-[0.22em] uppercase" style="color: var(--fg-subtle)">About</span>
<div class="flex-1 h-px ml-2" style="background: var(--border)"></div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-12 lg:gap-24 items-start">

<div class="lg:col-span-8 space-y-8">
<p class="text-lg sm:text-xl md:text-2xl leading-relaxed text-gray-600">
<!-- Bio -->
<div class="reveal stagger-1">
<p
class="font-medium leading-[1.65]"
style="font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--fg-muted); max-width: 60ch; text-wrap: pretty"
>
{siteConfig.aboutMe}
</p>
</div>

<div class="pt-4">
<div class="flex flex-wrap gap-3">
{
siteConfig.skills.map((skill) => (
<span class="px-3 sm:px-4 py-1.5 sm:py-2 bg-gray-100 text-gray-800 rounded-full text-sm sm:text-base md:text-lg font-medium hover:bg-gray-200 transition-colors duration-200">
{skill}
</span>
))
}
</div>
<!-- Skills -->
<div class="reveal stagger-2">
<p class="text-xs tracking-[0.22em] uppercase mb-5" style="color: var(--fg-subtle)">
Technologies
</p>
<div class="flex flex-wrap gap-2.5">
{siteConfig.skills.map((skill) => (
<span class="skill-tag px-3 py-1.5 text-sm font-medium">
{skill}
</span>
))}
</div>
</div>

</div>
</div>
</section>

<style>
.skill-tag {
color: var(--fg-muted);
border: 1px solid var(--border);
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
cursor: default;
}

.skill-tag:hover {
color: var(--accent);
border-color: oklch(78% 0.16 58 / 0.5);
background: oklch(78% 0.16 58 / 0.06);
}
</style>
91 changes: 41 additions & 50 deletions src/components/Education.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,58 +3,49 @@ import { siteConfig } from "../config";
const hasEducation = siteConfig.education && siteConfig.education.length > 0;
---

{
hasEducation && (
<section id="education" class="p-8 sm:p-12 md:p-16 lg:p-24">
<div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16 items-start">
<div class="lg:col-span-4">
<h2 class="text-3xl sm:text-4xl md:text-5xl xl:text-7xl font-bold text-gray-900">
Education
</h2>
<div
class="w-[75px] h-[5px] mt-2 rounded-full"
style={`background-color: ${siteConfig.accentColor}`}
/>
</div>
{hasEducation && (
<section
id="education"
class="px-8 sm:px-12 md:px-16 lg:px-20 py-20 md:py-28 lg:py-36"
style="background: var(--bg-surface)"
>
<div class="max-w-6xl mx-auto">

<!-- Section label -->
<div class="reveal flex items-center gap-4 mb-14 sm:mb-20">
<span class="text-xs tracking-[0.22em] uppercase font-semibold" style="color: var(--accent)">04</span>
<span class="text-xs tracking-[0.22em] uppercase" style="color: var(--fg-subtle)">Education</span>
<div class="flex-1 h-px ml-2" style="background: var(--border)"></div>
</div>

<div class="lg:col-span-8">
<div class="space-y-8">
{siteConfig.education.map((edu) => (
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 sm:p-5 md:p-6 hover:shadow-md transition-shadow duration-300">
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between mb-4">
<div>
<h3 class="text-lg sm:text-xl font-semibold text-gray-900">
{edu.degree}
</h3>
<p
class="text-base sm:text-lg"
style={`color: ${siteConfig.accentColor}`}
>
{edu.school}
</p>
</div>
<span class="text-xs sm:text-sm text-gray-500 mt-2 sm:mt-0">
{edu.dateRange}
</span>
</div>
<div class="space-y-14 sm:space-y-18">
{siteConfig.education.map((edu, index) => (
<div class={`reveal stagger-${index + 1} grid grid-cols-1 sm:grid-cols-[190px_1fr] gap-4 sm:gap-14`}>

<ul class="space-y-2">
{edu.achievements.map((achievement) => (
<li class="flex items-start">
<span class="inline-block w-1.5 h-1.5 rounded-full bg-gray-400 mt-2 mr-3 flex-shrink-0" />
<span class="text-sm sm:text-base text-gray-600">
{achievement}
</span>
</li>
))}
</ul>
</div>
))}
<div class="pt-0.5">
<p class="text-xs tracking-wide leading-relaxed" style="color: var(--fg-subtle)">{edu.dateRange}</p>
<p class="text-sm font-semibold mt-2" style="color: var(--accent)">{edu.school}</p>
</div>

<div>
<h3 class="font-semibold text-base sm:text-lg" style="color: var(--fg)">{edu.degree}</h3>
<ul class="mt-4 space-y-3">
{edu.achievements.map((achievement) => (
<li class="flex items-start gap-3">
<span
class="shrink-0 mt-[7px] w-1 h-1 rounded-full"
style="background: var(--accent); opacity: 0.55"
></span>
<span class="text-sm leading-relaxed" style="color: var(--fg-muted)">{achievement}</span>
</li>
))}
</ul>
</div>

</div>
</div>
))}
</div>
</section>
)
}

</div>
</section>
)}
101 changes: 39 additions & 62 deletions src/components/Experience.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,72 +3,49 @@ import { siteConfig } from "../config";
const hasExperience = siteConfig.experience && siteConfig.experience.length > 0;
---

{
hasExperience && (
<section id="experience" class="p-8 sm:p-12 md:p-16 lg:p-24">
<div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16 items-start">
<div class="lg:col-span-4">
<h2 class="text-3xl sm:text-4xl md:text-5xl xl:text-7xl font-bold text-gray-900">
Experience
</h2>
<div
class="w-[75px] h-[5px] mt-2 rounded-full"
style={`background-color: ${siteConfig.accentColor}`}
/>
</div>
{hasExperience && (
<section
id="experience"
class="px-8 sm:px-12 md:px-16 lg:px-20 py-20 md:py-28 lg:py-36"
style="background: var(--bg)"
>
<div class="max-w-6xl mx-auto">

<div class="lg:col-span-8">
<div class="relative">
{siteConfig.experience.map((exp, index) => (
<div class="relative mb-12 last:mb-0">
{/* Timeline dot at top of card */}
<div
class="absolute left-1/2 -top-2 w-4 h-4 bg-white border-2 rounded-full -translate-x-1/2 z-20 transition-all duration-300"
style={`border-color: ${siteConfig.accentColor}; background-color: ${siteConfig.accentColor}`}
/>
<!-- Section label -->
<div class="reveal flex items-center gap-4 mb-14 sm:mb-20">
<span class="text-xs tracking-[0.22em] uppercase font-semibold" style="color: var(--accent)">03</span>
<span class="text-xs tracking-[0.22em] uppercase" style="color: var(--fg-subtle)">Experience</span>
<div class="flex-1 h-px ml-2" style="background: var(--border)"></div>
</div>

{/* Connecting line below card */}
{index < siteConfig.experience.length - 1 && (
<div class="absolute left-1/2 bottom-0 w-0.5 h-12 bg-gray-300 -translate-x-1/2 translate-y-full z-10" />
)}
<div class="space-y-14 sm:space-y-18">
{siteConfig.experience.map((exp, index) => (
<div class={`reveal stagger-${index + 1} grid grid-cols-1 sm:grid-cols-[190px_1fr] gap-4 sm:gap-14`}>

{/* Experience card */}
<div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 sm:p-5 md:p-6 hover:shadow-md transition-shadow duration-300">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4">
<div>
<h3 class="text-lg sm:text-xl font-semibold text-gray-900">
{exp.title}
</h3>
<p
class="text-base sm:text-lg"
style={`color: ${siteConfig.accentColor}`}
>
{exp.company}
</p>
</div>
<span class="text-xs sm:text-sm text-gray-500 mt-2 sm:mt-0">
{exp.dateRange}
</span>
</div>
<div class="pt-0.5">
<p class="text-xs tracking-wide leading-relaxed" style="color: var(--fg-subtle)">{exp.dateRange}</p>
<p class="text-sm font-semibold mt-2" style="color: var(--accent)">{exp.company}</p>
</div>

<ul class="space-y-2">
{exp.bullets.map((bullet) => (
<li class="flex items-start">
<span class="inline-block w-1.5 h-1.5 rounded-full bg-gray-400 mt-2 mr-3 flex-shrink-0" />
<span class="text-sm sm:text-base text-gray-600">
{bullet}
</span>
</li>
))}
</ul>
</div>
</div>
))}
<div>
<h3 class="font-semibold text-base sm:text-lg" style="color: var(--fg)">{exp.title}</h3>
<ul class="mt-4 space-y-3">
{exp.bullets.map((bullet) => (
<li class="flex items-start gap-3">
<span
class="shrink-0 mt-[7px] w-1 h-1 rounded-full"
style="background: var(--accent); opacity: 0.55"
></span>
<span class="text-sm leading-relaxed" style="color: var(--fg-muted)">{bullet}</span>
</li>
))}
</ul>
</div>

</div>
</div>
))}
</div>
</section>
)
}

</div>
</section>
)}
Loading