mirror of
https://github.com/mmahdium/portfolio.git
synced 2026-08-17 05:24:30 +03:30
feat(blog): enhance content styling and add new blog post with sharing capabilities
- Refine blog typography with optimized font sizes and line heights for better readability - Adjust heading margins and sizes (h1-h4) for improved visual hierarchy - Implement custom bullet styling with primary color indicators for lists - Add highlighted key phrases styling with left border accent for emphasized content - Create new BlogShare component for social sharing functionality - Add Callout and PullQuote content components for enhanced blog formatting - Introduce resume-button.css for improved button styling - Update blog post template with slug-based routing support - Add new blog post "Career Change: From Huawei to Frontend" in English and Persian - Enhance portfolio components (Hero, Skills, AIStack, etc.) with refined styling - Improve RTL language support with better spacing and alignment for Persian content - Add blog hero image asset (big-career-change.webp) - Update i18n translations for new blog content and UI improvements - Optimize code block and inline code styling with CSS variables for consistency - Refine blockquote styling with better contrast and spacing
This commit is contained in:
mahdiarghyani
+136
-70
@@ -2,11 +2,11 @@
|
||||
|
||||
/* Base typography */
|
||||
.blog-content {
|
||||
font-size: 1.125rem; /* 18px */
|
||||
line-height: 2; /* خطفاصله بیشتر */
|
||||
font-size: 1.0625rem; /* 17px - کمی کوچکتر */
|
||||
line-height: 1.75; /* خطفاصله متعادلتر */
|
||||
letter-spacing: 0.01em;
|
||||
color: rgb(55, 65, 81);
|
||||
max-width: 75ch;
|
||||
max-width: 70ch; /* کمی باریکتر برای خوانایی بهتر */
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
@@ -18,8 +18,9 @@
|
||||
|
||||
/* RTL-specific improvements */
|
||||
.blog-content-rtl {
|
||||
line-height: 2.2 !important; /* فارسی نیاز به فاصله بیشتری داره */
|
||||
letter-spacing: 0.02em !important;
|
||||
line-height: 1.9 !important; /* فارسی نیاز به فاصله بیشتری داره ولی نه خیلی زیاد */
|
||||
letter-spacing: 0.015em !important;
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
/* Force LTR for code blocks in RTL */
|
||||
@@ -38,11 +39,11 @@
|
||||
}
|
||||
|
||||
.blog-content h1 {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.4;
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.3;
|
||||
font-weight: 700;
|
||||
font-size: 2.25em;
|
||||
font-size: 2em;
|
||||
color: rgb(17, 24, 39);
|
||||
}
|
||||
|
||||
@@ -51,11 +52,11 @@
|
||||
}
|
||||
|
||||
.blog-content h2 {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 1.75rem;
|
||||
line-height: 1.5;
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
line-height: 1.4;
|
||||
font-weight: 700;
|
||||
font-size: 1.875em;
|
||||
font-size: 1.75em;
|
||||
color: rgb(17, 24, 39);
|
||||
}
|
||||
|
||||
@@ -64,11 +65,11 @@
|
||||
}
|
||||
|
||||
.blog-content h3 {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.6;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.5;
|
||||
font-weight: 600;
|
||||
font-size: 1.5em;
|
||||
font-size: 1.375em;
|
||||
color: rgb(17, 24, 39);
|
||||
}
|
||||
|
||||
@@ -77,11 +78,11 @@
|
||||
}
|
||||
|
||||
.blog-content h4 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1.25rem;
|
||||
line-height: 1.6;
|
||||
margin-top: 1.75rem;
|
||||
margin-bottom: 0.875rem;
|
||||
line-height: 1.5;
|
||||
font-weight: 600;
|
||||
font-size: 1.25em;
|
||||
font-size: 1.125em;
|
||||
color: rgb(17, 24, 39);
|
||||
}
|
||||
|
||||
@@ -89,10 +90,10 @@
|
||||
color: rgb(243, 244, 246);
|
||||
}
|
||||
|
||||
/* Paragraphs - فاصله زیاد برای خوانایی بهتر */
|
||||
/* Paragraphs - فاصله متعادل */
|
||||
.blog-content p {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
@@ -101,14 +102,14 @@
|
||||
.blog-content h2 + p,
|
||||
.blog-content h3 + p,
|
||||
.blog-content h4 + p {
|
||||
margin-top: 1.25rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
.blog-content ul,
|
||||
.blog-content ol {
|
||||
margin-top: 2.25rem;
|
||||
margin-bottom: 2.25rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
@@ -118,14 +119,48 @@
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
/* Better bullet styling with custom bullets */
|
||||
.blog-content ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.blog-content ul > li {
|
||||
position: relative;
|
||||
padding-left: 1.75rem;
|
||||
}
|
||||
|
||||
.blog-content ul > li::before {
|
||||
content: "●";
|
||||
position: absolute;
|
||||
left: 0.25rem;
|
||||
color: var(--ui-color-primary-500);
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.dark .blog-content ul > li::before {
|
||||
color: var(--ui-color-primary-400);
|
||||
}
|
||||
|
||||
.blog-content-rtl ul > li {
|
||||
padding-left: 0;
|
||||
padding-right: 1.75rem;
|
||||
}
|
||||
|
||||
.blog-content-rtl ul > li::before {
|
||||
left: auto;
|
||||
right: 0.25rem;
|
||||
}
|
||||
|
||||
.blog-content li {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 2;
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.blog-content-rtl li {
|
||||
line-height: 2.2;
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
||||
.blog-content li p {
|
||||
@@ -152,12 +187,41 @@
|
||||
color: rgb(243, 244, 246);
|
||||
}
|
||||
|
||||
/* Highlighted key phrases - for emphasized sentences */
|
||||
.blog-content em strong,
|
||||
.blog-content strong em {
|
||||
background-color: var(--ui-color-primary-50);
|
||||
border-left: 3px solid var(--ui-color-primary-500);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
display: inline-block;
|
||||
margin: 0.125rem 0;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.dark .blog-content em strong,
|
||||
.dark .blog-content strong em {
|
||||
background-color: color-mix(in srgb, var(--ui-color-primary-950) 30%, transparent);
|
||||
border-left-color: var(--ui-color-primary-400);
|
||||
}
|
||||
|
||||
.blog-content-rtl em strong,
|
||||
.blog-content-rtl strong em {
|
||||
border-left: none;
|
||||
border-right: 3px solid var(--ui-color-primary-500);
|
||||
}
|
||||
|
||||
.dark .blog-content-rtl em strong,
|
||||
.dark .blog-content-rtl strong em {
|
||||
border-right-color: var(--ui-color-primary-400);
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
.blog-content pre {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
line-height: 1.7;
|
||||
font-size: 0.9375rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.6;
|
||||
font-size: 0.875rem;
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -171,42 +235,42 @@
|
||||
/* Inline code */
|
||||
.blog-content code:not(pre code) {
|
||||
padding: 0.25em 0.5em;
|
||||
background-color: rgba(99, 102, 241, 0.1);
|
||||
background-color: var(--ui-color-primary-100);
|
||||
color: var(--ui-color-primary-700);
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.9em;
|
||||
font-weight: 500;
|
||||
color: rgb(79, 70, 229);
|
||||
}
|
||||
|
||||
.dark .blog-content code:not(pre code) {
|
||||
background-color: rgba(99, 102, 241, 0.2);
|
||||
color: rgb(165, 180, 252);
|
||||
background-color: color-mix(in srgb, var(--ui-color-primary-950) 40%, transparent);
|
||||
color: var(--ui-color-primary-300);
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
.blog-content blockquote {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
padding: 1.75rem;
|
||||
border-left: 4px solid rgb(99, 102, 241);
|
||||
background-color: rgba(99, 102, 241, 0.05);
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem;
|
||||
border-left: 4px solid var(--ui-color-primary-500);
|
||||
background-color: var(--ui-color-primary-50);
|
||||
border-radius: 0.75rem;
|
||||
font-style: italic;
|
||||
line-height: 2;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.dark .blog-content blockquote {
|
||||
border-left-color: var(--ui-color-primary-400);
|
||||
background-color: color-mix(in srgb, var(--ui-color-primary-950) 20%, transparent);
|
||||
}
|
||||
|
||||
.blog-content-rtl blockquote {
|
||||
border-left: none;
|
||||
border-right: 4px solid rgb(99, 102, 241);
|
||||
}
|
||||
|
||||
.dark .blog-content blockquote {
|
||||
background-color: rgba(99, 102, 241, 0.1);
|
||||
border-left-color: rgb(129, 140, 248);
|
||||
border-right: 4px solid var(--ui-color-primary-500);
|
||||
}
|
||||
|
||||
.dark .blog-content-rtl blockquote {
|
||||
border-right-color: rgb(129, 140, 248);
|
||||
border-right-color: var(--ui-color-primary-400);
|
||||
}
|
||||
|
||||
.blog-content blockquote p {
|
||||
@@ -216,31 +280,33 @@
|
||||
|
||||
/* Links */
|
||||
.blog-content a {
|
||||
color: rgb(99, 102, 241);
|
||||
color: var(--ui-color-primary-600);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: rgba(99, 102, 241, 0.3);
|
||||
text-decoration-color: var(--ui-color-primary-300);
|
||||
text-underline-offset: 0.25em;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.blog-content a:hover {
|
||||
color: rgb(79, 70, 229);
|
||||
text-decoration-color: rgba(99, 102, 241, 0.8);
|
||||
.dark .blog-content a {
|
||||
color: var(--ui-color-primary-400);
|
||||
text-decoration-color: var(--ui-color-primary-600);
|
||||
}
|
||||
|
||||
.dark .blog-content a {
|
||||
color: rgb(129, 140, 248);
|
||||
.blog-content a:hover {
|
||||
color: var(--ui-color-primary-700);
|
||||
text-decoration-color: var(--ui-color-primary-500);
|
||||
}
|
||||
|
||||
.dark .blog-content a:hover {
|
||||
color: rgb(165, 180, 252);
|
||||
color: var(--ui-color-primary-300);
|
||||
text-decoration-color: var(--ui-color-primary-400);
|
||||
}
|
||||
|
||||
/* Horizontal rule */
|
||||
.blog-content hr {
|
||||
margin-top: 3.5rem;
|
||||
margin-bottom: 3.5rem;
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
border-color: rgba(148, 163, 184, 0.3);
|
||||
}
|
||||
|
||||
@@ -250,19 +316,19 @@
|
||||
|
||||
/* Images */
|
||||
.blog-content img {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.blog-content table {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.9375rem;
|
||||
font-size: 0.875rem;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
@@ -282,13 +348,13 @@
|
||||
}
|
||||
|
||||
.blog-content th {
|
||||
background-color: rgba(99, 102, 241, 0.1);
|
||||
font-weight: 600;
|
||||
background-color: var(--ui-color-primary-100);
|
||||
color: rgb(17, 24, 39);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dark .blog-content th {
|
||||
background-color: rgba(99, 102, 241, 0.15);
|
||||
background-color: color-mix(in srgb, var(--ui-color-primary-950) 30%, transparent);
|
||||
color: rgb(243, 244, 246);
|
||||
}
|
||||
|
||||
|
||||
+96
-12
@@ -5,6 +5,7 @@
|
||||
@import "./transitions.css";
|
||||
@import "./prose.css";
|
||||
@import "./blog-content.css";
|
||||
@import "./resume-button.css";
|
||||
|
||||
@source "../../components/**/*.{vue,js,ts}";
|
||||
@source "../../layouts/**/*.vue";
|
||||
@@ -146,15 +147,15 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--scrollbar-track: color-mix(in oklch, #e0e7ff 35%, transparent);
|
||||
--scrollbar-thumb: color-mix(in oklch, #7c3aed 65%, #6d28d9 35%);
|
||||
--scrollbar-thumb-hover: color-mix(in oklch, #7c3aed 80%, #a855f7 20%);
|
||||
--scrollbar-track: color-mix(in srgb, var(--ui-color-primary-100) 35%, transparent);
|
||||
--scrollbar-thumb: color-mix(in srgb, var(--ui-color-primary-500) 65%, var(--ui-color-primary-600) 35%);
|
||||
--scrollbar-thumb-hover: color-mix(in srgb, var(--ui-color-primary-500) 80%, var(--ui-color-primary-400) 20%);
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
--scrollbar-track: color-mix(in oklch, #0b1020 80%, #7c3aed 20%);
|
||||
--scrollbar-thumb: color-mix(in oklch, #a855f7 65%, #7c3aed 35%);
|
||||
--scrollbar-thumb-hover: color-mix(in oklch, #c084fc 75%, #8b5cf6 25%);
|
||||
--scrollbar-track: color-mix(in srgb, #0b1020 80%, var(--ui-color-primary-500) 20%);
|
||||
--scrollbar-thumb: color-mix(in srgb, var(--ui-color-primary-400) 65%, var(--ui-color-primary-500) 35%);
|
||||
--scrollbar-thumb-hover: color-mix(in srgb, var(--ui-color-primary-300) 75%, var(--ui-color-primary-400) 25%);
|
||||
}
|
||||
|
||||
/* Global scrollbar styling */
|
||||
@@ -297,16 +298,51 @@
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
@apply shadow-2xl shadow-violet-500/10 dark:shadow-violet-500/20 translate-y-[-2px];
|
||||
@apply translate-y-[-2px];
|
||||
box-shadow:
|
||||
0 25px 50px -12px color-mix(in srgb, var(--ui-color-primary-500) 10%, transparent);
|
||||
}
|
||||
|
||||
.dark .glass-card:hover {
|
||||
box-shadow:
|
||||
0 25px 50px -12px color-mix(in srgb, var(--ui-color-primary-500) 20%, transparent);
|
||||
}
|
||||
|
||||
/* Global hover utilities for consistent interactions */
|
||||
/* Global hover utilities for consistent interactions - using dynamic theme colors */
|
||||
.hover-ring-tint {
|
||||
@apply transition-all duration-300 ease-out ring-0 hover:ring-2 hover:ring-violet-500 dark:hover:ring-violet-400 hover:bg-violet-50/60 dark:hover:bg-violet-400/10 focus-visible:ring-2 focus-visible:ring-violet-500 dark:focus-visible:ring-violet-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900;
|
||||
@apply transition-all duration-300 ease-out focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900;
|
||||
}
|
||||
|
||||
.hover-ring-tint:hover {
|
||||
box-shadow: 0 0 0 2px var(--ui-color-primary-500);
|
||||
background-color: color-mix(in srgb, var(--ui-color-primary-50) 60%, transparent);
|
||||
}
|
||||
|
||||
.dark .hover-ring-tint:hover {
|
||||
box-shadow: 0 0 0 2px var(--ui-color-primary-400);
|
||||
background-color: color-mix(in srgb, var(--ui-color-primary-400) 10%, transparent);
|
||||
}
|
||||
|
||||
.hover-ring-tint:focus-visible {
|
||||
box-shadow: 0 0 0 2px var(--ui-color-primary-500);
|
||||
}
|
||||
|
||||
.dark .hover-ring-tint:focus-visible {
|
||||
box-shadow: 0 0 0 2px var(--ui-color-primary-400);
|
||||
}
|
||||
|
||||
.link-hover-clean {
|
||||
@apply transition-all duration-300 hover:text-violet-600 dark:hover:text-violet-400 hover:underline underline-offset-4 decoration-violet-500/60 dark:decoration-violet-400/60;
|
||||
@apply transition-all duration-300 hover:underline underline-offset-4;
|
||||
}
|
||||
|
||||
.link-hover-clean:hover {
|
||||
color: var(--ui-color-primary-600);
|
||||
text-decoration-color: color-mix(in srgb, var(--ui-color-primary-500) 60%, transparent);
|
||||
}
|
||||
|
||||
.dark .link-hover-clean:hover {
|
||||
color: var(--ui-color-primary-400);
|
||||
text-decoration-color: color-mix(in srgb, var(--ui-color-primary-400) 60%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -314,7 +350,12 @@
|
||||
|
||||
/* Minimal hover: subtle bg tint, slight shadow, no ring/border change */
|
||||
.hover-minimal {
|
||||
@apply transition-all duration-300 ease-out hover:bg-violet-50/50 dark:hover:bg-white/5 hover:shadow-lg hover:shadow-violet-500/5;
|
||||
@apply transition-all duration-300 ease-out dark:hover:bg-white/5 hover:shadow-lg;
|
||||
}
|
||||
|
||||
.hover-minimal:hover {
|
||||
background-color: color-mix(in srgb, var(--ui-color-primary-50) 50%, transparent);
|
||||
box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--ui-color-primary-500) 5%, transparent);
|
||||
}
|
||||
|
||||
/* Modern button with gradient */
|
||||
@@ -335,7 +376,50 @@
|
||||
|
||||
/* Chip-style icon button inspired by SkillGrid: subtle ring, soft bg, minimal hover */
|
||||
.chip-button {
|
||||
@apply inline-flex items-center justify-center h-12 w-12 rounded-2xl ring-1 ring-violet-200/70 dark:ring-violet-800/50 bg-gradient-to-br from-white/90 to-violet-50/50 dark:from-white/10 dark:to-violet-950/30 text-violet-700 dark:text-violet-200 shadow-lg shadow-violet-500/10 backdrop-blur-md transition-all duration-300 ease-out hover:scale-110 hover:shadow-xl hover:shadow-violet-500/20 hover:from-violet-50 hover:to-violet-100 dark:hover:from-white/15 dark:hover:to-violet-900/40;
|
||||
@apply inline-flex items-center justify-center h-12 w-12 rounded-2xl ring-1 backdrop-blur-md transition-all duration-300 ease-out hover:scale-110;
|
||||
|
||||
/* Dynamic theme colors using CSS variables */
|
||||
ring-color: color-mix(in srgb, var(--ui-color-primary-200) 70%, transparent);
|
||||
background: linear-gradient(to bottom right,
|
||||
color-mix(in srgb, white 90%, transparent),
|
||||
color-mix(in srgb, var(--ui-color-primary-50) 50%, transparent)
|
||||
);
|
||||
color: var(--ui-color-primary-700);
|
||||
box-shadow:
|
||||
0 10px 15px -3px color-mix(in srgb, var(--ui-color-primary-500) 10%, transparent),
|
||||
0 4px 6px -4px color-mix(in srgb, var(--ui-color-primary-500) 10%, transparent);
|
||||
}
|
||||
|
||||
.chip-button:hover {
|
||||
background: linear-gradient(to bottom right,
|
||||
color-mix(in srgb, var(--ui-color-primary-50) 100%, transparent),
|
||||
color-mix(in srgb, var(--ui-color-primary-100) 100%, transparent)
|
||||
);
|
||||
box-shadow:
|
||||
0 20px 25px -5px color-mix(in srgb, var(--ui-color-primary-500) 20%, transparent),
|
||||
0 8px 10px -6px color-mix(in srgb, var(--ui-color-primary-500) 20%, transparent);
|
||||
}
|
||||
|
||||
.dark .chip-button {
|
||||
ring-color: color-mix(in srgb, var(--ui-color-primary-800) 50%, transparent);
|
||||
background: linear-gradient(to bottom right,
|
||||
color-mix(in srgb, white 10%, transparent),
|
||||
color-mix(in srgb, var(--ui-color-primary-950) 30%, transparent)
|
||||
);
|
||||
color: var(--ui-color-primary-200);
|
||||
box-shadow:
|
||||
0 10px 15px -3px color-mix(in srgb, var(--ui-color-primary-500) 5%, transparent),
|
||||
0 4px 6px -4px color-mix(in srgb, var(--ui-color-primary-500) 5%, transparent);
|
||||
}
|
||||
|
||||
.dark .chip-button:hover {
|
||||
background: linear-gradient(to bottom right,
|
||||
color-mix(in srgb, white 15%, transparent),
|
||||
color-mix(in srgb, var(--ui-color-primary-900) 40%, transparent)
|
||||
);
|
||||
box-shadow:
|
||||
0 20px 25px -5px color-mix(in srgb, var(--ui-color-primary-500) 10%, transparent),
|
||||
0 8px 10px -6px color-mix(in srgb, var(--ui-color-primary-500) 10%, transparent);
|
||||
}
|
||||
|
||||
/* GitHub Activity Contribution Graph - Dynamic Primary Color */
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
/* Resume Button with Dynamic Gradient */
|
||||
.resume-gradient-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.875rem 1.75rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
border-radius: 9999px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
/* Dynamic gradient using theme colors */
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--ui-color-primary-600) 0%,
|
||||
var(--ui-color-primary-500) 50%,
|
||||
color-mix(in srgb, var(--ui-color-primary-500) 80%, #ec4899 20%) 100%
|
||||
);
|
||||
|
||||
/* Glow effect */
|
||||
box-shadow:
|
||||
0 0 30px color-mix(in srgb, var(--ui-color-primary-500) 40%, transparent),
|
||||
0 10px 25px color-mix(in srgb, var(--ui-color-primary-600) 30%, transparent),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.resume-gradient-button:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow:
|
||||
0 0 40px color-mix(in srgb, var(--ui-color-primary-500) 60%, transparent),
|
||||
0 0 60px color-mix(in srgb, var(--ui-color-primary-400) 40%, transparent),
|
||||
0 15px 35px color-mix(in srgb, var(--ui-color-primary-600) 40%, transparent),
|
||||
0 6px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Shine effect on hover */
|
||||
.resume-gradient-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.3),
|
||||
transparent
|
||||
);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.resume-gradient-button:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
/* Dark mode adjustments */
|
||||
.dark .resume-gradient-button {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--ui-color-primary-500) 0%,
|
||||
var(--ui-color-primary-600) 50%,
|
||||
color-mix(in srgb, var(--ui-color-primary-600) 80%, #ec4899 20%) 100%
|
||||
);
|
||||
|
||||
box-shadow:
|
||||
0 0 35px color-mix(in srgb, var(--ui-color-primary-400) 50%, transparent),
|
||||
0 10px 30px color-mix(in srgb, var(--ui-color-primary-500) 40%, transparent),
|
||||
0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.dark .resume-gradient-button:hover {
|
||||
box-shadow:
|
||||
0 0 50px color-mix(in srgb, var(--ui-color-primary-400) 70%, transparent),
|
||||
0 0 80px color-mix(in srgb, var(--ui-color-primary-300) 50%, transparent),
|
||||
0 15px 40px color-mix(in srgb, var(--ui-color-primary-500) 50%, transparent),
|
||||
0 6px 20px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
@@ -32,7 +32,7 @@ const handleImageError = () => {
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4 text-gray-900 dark:text-gray-100">
|
||||
<h1 class="text-2xl md:text-3xl lg:text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100 leading-tight">
|
||||
{{ post.title }}
|
||||
</h1>
|
||||
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
title: string
|
||||
url: string
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const shareLinks = computed(() => ({
|
||||
twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(props.title)}&url=${encodeURIComponent(props.url)}`,
|
||||
linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(props.url)}`,
|
||||
facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(props.url)}`,
|
||||
telegram: `https://t.me/share/url?url=${encodeURIComponent(props.url)}&text=${encodeURIComponent(props.title)}`
|
||||
}))
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const copyToClipboard = async () => {
|
||||
try {
|
||||
if (navigator?.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(props.url)
|
||||
toast.add({
|
||||
title: t('blog.linkCopied') || 'Link copied!',
|
||||
icon: 'i-heroicons-check-circle',
|
||||
color: 'green'
|
||||
})
|
||||
} else {
|
||||
// Fallback for older browsers
|
||||
const textArea = document.createElement('textarea')
|
||||
textArea.value = props.url
|
||||
textArea.style.position = 'fixed'
|
||||
textArea.style.left = '-999999px'
|
||||
document.body.appendChild(textArea)
|
||||
textArea.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(textArea)
|
||||
toast.add({
|
||||
title: t('blog.linkCopied') || 'Link copied!',
|
||||
icon: 'i-heroicons-check-circle',
|
||||
color: 'green'
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to copy:', err)
|
||||
toast.add({
|
||||
title: t('blog.copyFailed') || 'Failed to copy link',
|
||||
icon: 'i-heroicons-x-circle',
|
||||
color: 'red'
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="blog-share my-8 p-6 bg-gray-50 dark:bg-gray-900/50 rounded-lg border border-gray-200 dark:border-gray-800">
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<!-- Title -->
|
||||
<div class="flex items-center gap-3">
|
||||
<UIcon name="i-heroicons-share" class="w-5 h-5 text-primary-600 dark:text-primary-400" />
|
||||
<span class="font-semibold text-gray-900 dark:text-gray-100">
|
||||
{{ t('blog.sharePost') || 'Share this post' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Share Buttons -->
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<!-- Twitter -->
|
||||
<UButton :to="shareLinks.twitter" target="_blank" rel="noopener noreferrer" color="gray" variant="ghost"
|
||||
size="sm" icon="i-simple-icons-x" aria-label="Share on Twitter" />
|
||||
|
||||
<!-- LinkedIn -->
|
||||
<UButton :to="shareLinks.linkedin" target="_blank" rel="noopener noreferrer" color="gray" variant="ghost"
|
||||
size="sm" icon="i-simple-icons-linkedin" aria-label="Share on LinkedIn" />
|
||||
|
||||
<!-- Facebook -->
|
||||
<UButton :to="shareLinks.facebook" target="_blank" rel="noopener noreferrer" color="gray" variant="ghost"
|
||||
size="sm" icon="i-simple-icons-facebook" aria-label="Share on Facebook" />
|
||||
|
||||
<!-- Telegram -->
|
||||
<UButton :to="shareLinks.telegram" target="_blank" rel="noopener noreferrer" color="gray" variant="ghost"
|
||||
size="sm" icon="i-simple-icons-telegram" aria-label="Share on Telegram" />
|
||||
|
||||
<!-- Copy Link -->
|
||||
<UButton @click="copyToClipboard" color="gray" variant="ghost" size="sm" icon="i-heroicons-link"
|
||||
aria-label="Copy link" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
type?: 'info' | 'warning' | 'success' | 'tip' | 'primary'
|
||||
title?: string
|
||||
}>()
|
||||
|
||||
const typeConfig = {
|
||||
primary: {
|
||||
icon: 'i-heroicons-light-bulb',
|
||||
color: 'primary',
|
||||
bgClass: 'bg-primary-50 dark:bg-primary-950/30 border-primary-200 dark:border-primary-800'
|
||||
},
|
||||
info: {
|
||||
icon: 'i-heroicons-information-circle',
|
||||
color: 'blue',
|
||||
bgClass: 'bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800'
|
||||
},
|
||||
warning: {
|
||||
icon: 'i-heroicons-exclamation-triangle',
|
||||
color: 'yellow',
|
||||
bgClass: 'bg-yellow-50 dark:bg-yellow-950/30 border-yellow-200 dark:border-yellow-800'
|
||||
},
|
||||
success: {
|
||||
icon: 'i-heroicons-check-circle',
|
||||
color: 'green',
|
||||
bgClass: 'bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800'
|
||||
},
|
||||
tip: {
|
||||
icon: 'i-heroicons-light-bulb',
|
||||
color: 'purple',
|
||||
bgClass: 'bg-purple-50 dark:bg-purple-950/30 border-purple-200 dark:border-purple-800'
|
||||
}
|
||||
}
|
||||
|
||||
const config = typeConfig[props.type || 'info']
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="['callout-box', config.bgClass]" class="my-6 p-5 rounded-lg border-2 shadow-sm">
|
||||
<div class="flex items-start gap-3">
|
||||
<UIcon :name="config.icon" class="w-5 h-5 flex-shrink-0 mt-0.5"
|
||||
:class="`text-${config.color}-600 dark:text-${config.color}-400`" />
|
||||
<div class="flex-1 min-w-0">
|
||||
<div v-if="title" class="font-semibold text-base mb-1.5"
|
||||
:class="`text-${config.color}-900 dark:text-${config.color}-100`">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div class="prose prose-sm dark:prose-invert max-w-none">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.callout-box {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.callout-box:hover {
|
||||
transform: translateY(-2px);
|
||||
shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
author?: string
|
||||
highlight?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pull-quote my-8 relative">
|
||||
<div :class="[
|
||||
'relative p-6 rounded-lg',
|
||||
highlight
|
||||
? 'bg-gradient-to-br from-primary-50 to-primary-100 dark:from-primary-950/40 dark:to-primary-900/40 border-2 border-primary-200 dark:border-primary-800'
|
||||
: 'bg-gray-50 dark:bg-gray-900/50 border-l-4 border-primary-500 dark:border-primary-400'
|
||||
]">
|
||||
<!-- Quote Icon -->
|
||||
<div class="absolute top-4 left-4 opacity-10 dark:opacity-5">
|
||||
<UIcon name="i-heroicons-chat-bubble-left-right" class="w-16 h-16 text-primary-600" />
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="relative z-10">
|
||||
<blockquote class="text-lg md:text-xl font-medium leading-relaxed text-gray-900 dark:text-gray-100 italic">
|
||||
<slot />
|
||||
</blockquote>
|
||||
|
||||
<!-- Author -->
|
||||
<div v-if="author" class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<cite class="text-sm font-semibold text-primary-600 dark:text-primary-400 not-italic">
|
||||
— {{ author }}
|
||||
</cite>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.pull-quote {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -33,16 +33,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<UCard class="md:col-span-3">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
|
||||
{{ headerTitle }}
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<UAccordion type="single" :unmount-on-hide="false" :items="accordionItems" default-value="ai-stack"
|
||||
:ui="accordionUi">
|
||||
<template #body>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<div v-for="item in filtered" :key="item.id" class="inline-flex items-stretch">
|
||||
<UTooltip :arrow="true" :delay-duration="0.5" :text="item.shortWhy || item.name"
|
||||
@@ -51,24 +44,36 @@
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<UIcon v-if="item.icon" :name="item.icon" class="h-4 w-4 min-h-4 min-w-4 text-base" />
|
||||
<span class="text-xs font-medium cursor-default">{{ item.name }}</span>
|
||||
<!-- <UBadge size="xs" color="neutral" variant="subtle" class="ml-1">{{ groupLabel(item.group) }}
|
||||
</UBadge> -->
|
||||
</span>
|
||||
</UBadge>
|
||||
</UTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</template>
|
||||
</UAccordion>
|
||||
</UContainer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { computed, ref, onMounted, onUnmounted } from 'vue'
|
||||
import { AI_GROUPS, aiStackItems, type AiGroup } from '@/data/aiStack'
|
||||
const { t } = useI18n()
|
||||
|
||||
// Detect mobile for accordion behavior (SSR-safe)
|
||||
const isMobile = ref(true)
|
||||
|
||||
onMounted(() => {
|
||||
const checkMobile = () => {
|
||||
isMobile.value = window.innerWidth < 768
|
||||
}
|
||||
checkMobile()
|
||||
window.addEventListener('resize', checkMobile)
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', checkMobile)
|
||||
})
|
||||
})
|
||||
|
||||
type GroupMeta = { labelKey: string; icon: string }
|
||||
const GROUP_META: Record<AiGroup, GroupMeta> = {
|
||||
ide_dev: { labelKey: 'ai_stack.group.ide_dev', icon: 'i-mdi-laptop' },
|
||||
@@ -128,17 +133,30 @@ const filtered = computed(() => {
|
||||
return aiStackItems.filter(i => selectedGroups.value.includes(i.group))
|
||||
})
|
||||
|
||||
const groupLabel = (g: AiGroup) => t(GROUP_META[g].labelKey)
|
||||
|
||||
const headerTitle = computed(() => {
|
||||
if (selectedGroups.value.length === 1) return groupLabel(selectedGroups.value[0]!)
|
||||
if (selectedGroups.value.length === 1) return t(GROUP_META[selectedGroups.value[0]!].labelKey)
|
||||
return t('ai_stack.subtitle', 'Methods, tools, rules, and MCPs that power my AI workflow')
|
||||
})
|
||||
|
||||
const accordionItems = computed(() => [{
|
||||
label: headerTitle.value,
|
||||
value: 'ai-stack'
|
||||
}])
|
||||
|
||||
const accordionUi = {
|
||||
root: 'flex flex-col',
|
||||
item: 'flex flex-col rounded-2xl border border-gray-200/70 dark:border-gray-700/50 bg-white/70 dark:bg-gray-900/40 shadow-sm',
|
||||
header: 'px-4 data-[state=open]:border-b border-gray-200/70 dark:border-gray-700/50',
|
||||
trigger: 'group flex-1 items-center gap-2 py-3 text-left cursor-pointer',
|
||||
label: 'text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300',
|
||||
leadingIcon: 'shrink-0',
|
||||
trailingIcon: 'ms-auto text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]:rotate-180',
|
||||
content: 'px-4 pb-4 pt-3 data-[state=closed]:hidden',
|
||||
body: 'pt-1'
|
||||
} as const
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Adopt SkillFilters transition styles for smooth group filter UX */
|
||||
.filter-toggle {
|
||||
transition: transform 200ms ease, box-shadow 220ms ease, filter 220ms ease;
|
||||
}
|
||||
|
||||
@@ -20,86 +20,83 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- GitHub Calendar Card using UCard -->
|
||||
<UCard v-else-if="calendar">
|
||||
<template #header>
|
||||
<h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
|
||||
{{ t('portfolio.githubActivity.subtitle') }}
|
||||
</h3>
|
||||
<!-- GitHub Calendar Accordion -->
|
||||
<UAccordion v-else-if="calendar" type="single" :unmount-on-hide="false" :items="accordionItems"
|
||||
default-value="github" :ui="accordionUi">
|
||||
<template #body>
|
||||
<div class="flex flex-col gap-4">
|
||||
<!-- Scrollable Graph Container (only the graph scrolls) -->
|
||||
<div class="overflow-x-auto pb-4 lg:overflow-visible">
|
||||
<div class="min-w-[940px] max-w-full w-fit mx-auto">
|
||||
<!-- Month Labels Row -->
|
||||
<div class="flex mb-2">
|
||||
<div class="w-8 flex-shrink-0"></div>
|
||||
<div class="flex flex-1">
|
||||
<div v-for="(month, index) in monthLabels" :key="index"
|
||||
class="text-xs text-gray-500 dark:text-gray-400" :style="{ flex: `0 0 ${month.width}%` }">
|
||||
{{ month.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grid Container -->
|
||||
<div class="flex gap-1">
|
||||
<!-- Day Labels -->
|
||||
<div class="flex flex-col gap-[3px] w-8 flex-shrink-0">
|
||||
<span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1"></span>
|
||||
<span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1">Mon</span>
|
||||
<span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1"></span>
|
||||
<span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1">Wed</span>
|
||||
<span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1"></span>
|
||||
<span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1">Fri</span>
|
||||
<span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1"></span>
|
||||
</div>
|
||||
|
||||
<!-- Weeks Grid -->
|
||||
<div class="flex flex-1 justify-between gap-[3px]">
|
||||
<div v-for="(week, weekIndex) in calendar.weeks" :key="weekIndex" class="flex flex-col gap-[3px]">
|
||||
<div v-for="(day, dayIndex) in week.contributionDays" :key="dayIndex"
|
||||
class="w-[11px] h-[11px] rounded-[2px] cursor-pointer transition-transform hover:scale-110"
|
||||
:class="getContributionClass(day.contributionCount)" @mouseenter="hoveredDay = day"
|
||||
@mouseleave="hoveredDay = null" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer: Legend + Hover Info (always visible) -->
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span>Less</span>
|
||||
<div class="flex gap-[3px] mx-1">
|
||||
<div v-for="(cls, idx) in legendClasses" :key="idx" class="w-[11px] h-[11px] rounded-[2px]"
|
||||
:class="cls" />
|
||||
</div>
|
||||
<span>More</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-xs text-gray-600 dark:text-gray-300 min-h-[32px] flex flex-col justify-center text-right">
|
||||
<template v-if="hoveredDay">
|
||||
<span class="font-semibold text-gray-900 dark:text-white">
|
||||
{{ hoveredDay.contributionCount }} contribution{{ hoveredDay.contributionCount !== 1 ? 's' : '' }}
|
||||
</span>
|
||||
<span class="text-gray-500 dark:text-gray-400">
|
||||
{{ formatDateFull(hoveredDay.date) }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<!-- Scrollable Graph Container (only the graph scrolls) -->
|
||||
<div class="overflow-x-auto pb-4 lg:overflow-visible">
|
||||
<div class="min-w-[940px] max-w-full w-fit mx-auto">
|
||||
<!-- Month Labels Row -->
|
||||
<div class="flex mb-2">
|
||||
<div class="w-8 flex-shrink-0"></div>
|
||||
<div class="flex flex-1">
|
||||
<div v-for="(month, index) in monthLabels" :key="index" class="text-xs text-gray-500 dark:text-gray-400"
|
||||
:style="{ flex: `0 0 ${month.width}%` }">
|
||||
{{ month.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grid Container -->
|
||||
<div class="flex gap-1">
|
||||
<!-- Day Labels -->
|
||||
<div class="flex flex-col gap-[3px] w-8 flex-shrink-0">
|
||||
<span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1"></span>
|
||||
<span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1">Mon</span>
|
||||
<span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1"></span>
|
||||
<span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1">Wed</span>
|
||||
<span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1"></span>
|
||||
<span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1">Fri</span>
|
||||
<span class="h-[11px] text-[11px] text-gray-500 dark:text-gray-400 text-right pr-1"></span>
|
||||
</div>
|
||||
|
||||
<!-- Weeks Grid -->
|
||||
<div class="flex flex-1 justify-between gap-[3px]">
|
||||
<div v-for="(week, weekIndex) in calendar.weeks" :key="weekIndex" class="flex flex-col gap-[3px]">
|
||||
<div v-for="(day, dayIndex) in week.contributionDays" :key="dayIndex"
|
||||
class="w-[11px] h-[11px] rounded-[2px] cursor-pointer transition-transform hover:scale-110"
|
||||
:class="getContributionClass(day.contributionCount)" @mouseenter="hoveredDay = day"
|
||||
@mouseleave="hoveredDay = null" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer: Legend + Hover Info (always visible) -->
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span>Less</span>
|
||||
<div class="flex gap-[3px] mx-1">
|
||||
<div v-for="(cls, idx) in legendClasses" :key="idx" class="w-[11px] h-[11px] rounded-[2px]"
|
||||
:class="cls" />
|
||||
</div>
|
||||
<span>More</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-xs text-gray-600 dark:text-gray-300 min-h-[32px] flex flex-col justify-center text-right">
|
||||
<template v-if="hoveredDay">
|
||||
<span class="font-semibold text-gray-900 dark:text-white">
|
||||
{{ hoveredDay.contributionCount }} contribution{{ hoveredDay.contributionCount !== 1 ? 's' : '' }}
|
||||
</span>
|
||||
<span class="text-gray-500 dark:text-gray-400">
|
||||
{{ formatDateFull(hoveredDay.date) }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</UAccordion>
|
||||
</UContainer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
||||
import type { GitHubContributionCalendar, GitHubContributionDay } from '@/types/github'
|
||||
|
||||
const { t } = useI18n()
|
||||
@@ -114,12 +111,44 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
username: 'aliarghyani'
|
||||
})
|
||||
|
||||
// Detect mobile for accordion behavior (SSR-safe)
|
||||
const isMobile = ref(true)
|
||||
|
||||
onMounted(() => {
|
||||
const checkMobile = () => {
|
||||
isMobile.value = window.innerWidth < 768
|
||||
}
|
||||
checkMobile()
|
||||
window.addEventListener('resize', checkMobile)
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', checkMobile)
|
||||
})
|
||||
})
|
||||
|
||||
// State
|
||||
const calendar = ref<GitHubContributionCalendar | null>(null)
|
||||
const loading = ref(true)
|
||||
const error = ref(false)
|
||||
const hoveredDay = ref<GitHubContributionDay | null>(null)
|
||||
|
||||
// Accordion config
|
||||
const accordionItems = computed(() => [{
|
||||
label: t('portfolio.githubActivity.subtitle'),
|
||||
value: 'github'
|
||||
}])
|
||||
|
||||
const accordionUi = {
|
||||
root: 'flex flex-col',
|
||||
item: 'flex flex-col rounded-2xl border border-gray-200/70 dark:border-gray-700/50 bg-white/70 dark:bg-gray-900/40 shadow-sm',
|
||||
header: 'px-4 data-[state=open]:border-b border-gray-200/70 dark:border-gray-700/50',
|
||||
trigger: 'group flex-1 items-center gap-2 py-3 text-left cursor-pointer',
|
||||
label: 'text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300',
|
||||
leadingIcon: 'shrink-0',
|
||||
trailingIcon: 'ms-auto text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]:rotate-180',
|
||||
content: 'px-4 pb-4 pt-3 data-[state=closed]:hidden',
|
||||
body: 'pt-1'
|
||||
} as const
|
||||
|
||||
// Get contribution level class - uses CSS utility classes from main.css
|
||||
// that reference Nuxt UI's dynamic --ui-color-primary-* variables
|
||||
const getContributionClass = (count: number): string => {
|
||||
|
||||
@@ -21,9 +21,9 @@
|
||||
<img v-if="currentRole.companyLogo" :src="currentRole.companyLogo" :alt="`${currentRole.company} logo`"
|
||||
class="h-7 w-7 rounded-md object-contain" loading="lazy" />
|
||||
<span class="">{{ t('hero.currently') }}</span>
|
||||
<span class="font-semibold text-primary-600 dark:text-primary-300">
|
||||
<span class="font-semibold company-name">
|
||||
<a v-if="currentRole.companyLink" :href="currentRole.companyLink" target="_blank" rel="noopener"
|
||||
class="hover:underline text-primary-600 dark:text-primary-300">
|
||||
class="hover:underline company-name">
|
||||
{{ currentRole.company }}
|
||||
</a>
|
||||
<span v-else>{{ currentRole.company }}</span>
|
||||
@@ -31,7 +31,7 @@
|
||||
</div>
|
||||
<!-- Resume Button - Desktop only -->
|
||||
<NuxtLink to="/resume" class="hidden sm:inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold
|
||||
bg-gradient-to-r from-primary-500 via-purple-500 to-pink-500
|
||||
bg-gradient-to-r from-primary-500 via-purple-500 to-pink-500
|
||||
hover:from-primary-600 hover:via-purple-600 hover:to-pink-600
|
||||
text-white rounded-full shadow-lg shadow-primary-500/25
|
||||
transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-primary-500/40
|
||||
@@ -43,7 +43,7 @@
|
||||
</div>
|
||||
<!-- Resume Button - Mobile only -->
|
||||
<NuxtLink to="/resume" class="sm:hidden inline-flex items-center justify-center gap-2 mt-2 px-4 py-2 text-sm font-medium
|
||||
bg-gradient-to-r from-primary-500 via-purple-500 to-pink-500
|
||||
bg-gradient-to-r from-primary-500 via-purple-500 to-pink-500
|
||||
hover:from-primary-600 hover:via-purple-600 hover:to-pink-600
|
||||
text-white rounded-full shadow-lg shadow-primary-500/25
|
||||
transition-all duration-300 hover:scale-105">
|
||||
@@ -211,3 +211,35 @@ async function copyEmail() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.company-name {
|
||||
color: var(--ui-color-primary-600);
|
||||
}
|
||||
|
||||
.dark .company-name {
|
||||
color: var(--ui-color-primary-300);
|
||||
}
|
||||
|
||||
/* Override Tailwind ring color variable for chip buttons */
|
||||
:deep(.chip-button) {
|
||||
--tw-ring-color: var(--ui-color-primary-500) !important;
|
||||
}
|
||||
|
||||
:deep(.dark .chip-button) {
|
||||
--tw-ring-color: var(--ui-color-primary-400) !important;
|
||||
}
|
||||
|
||||
/* Also override on hover and focus states */
|
||||
:deep(.chip-button:hover),
|
||||
:deep(.chip-button:focus),
|
||||
:deep(.chip-button:focus-visible) {
|
||||
--tw-ring-color: var(--ui-color-primary-500) !important;
|
||||
}
|
||||
|
||||
:deep(.dark .chip-button:hover),
|
||||
:deep(.dark .chip-button:focus),
|
||||
:deep(.dark .chip-button:focus-visible) {
|
||||
--tw-ring-color: var(--ui-color-primary-400) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,66 +6,61 @@
|
||||
<h2 class="section-title">{{ t('sections.language') }}</h2>
|
||||
</div>
|
||||
|
||||
<UCard>
|
||||
<div class="space-y-6">
|
||||
<div class="flex flex-wrap items-center justify-between gap-4">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300 max-w-3xl">
|
||||
{{ t('languageSection.tagline') }}
|
||||
</p>
|
||||
<UBadge
|
||||
size="lg"
|
||||
color="primary"
|
||||
variant="soft"
|
||||
class="inline-flex items-center gap-2"
|
||||
>
|
||||
<UIcon
|
||||
name="simple-icons:duolingo"
|
||||
class="text-xl text-[#58CC02] dark:text-[#58CC02]"
|
||||
/>
|
||||
<span>
|
||||
{{ t('languageSection.duolingo.label') }}: {{ t('languageSection.duolingo.value') }}
|
||||
</span>
|
||||
</UBadge>
|
||||
</div>
|
||||
<UAccordion type="single" :unmount-on-hide="false" :items="accordionItems" default-value="language"
|
||||
:ui="accordionUi">
|
||||
<template #body>
|
||||
<div class="space-y-6">
|
||||
<div class="flex justify-center">
|
||||
<UBadge size="lg" color="primary" variant="soft" class="inline-flex items-center gap-2">
|
||||
<UIcon name="simple-icons:duolingo" class="text-xl text-[#58CC02] dark:text-[#58CC02]" />
|
||||
<span>
|
||||
{{ t('languageSection.duolingo.label') }}: {{ t('languageSection.duolingo.value') }}
|
||||
</span>
|
||||
</UBadge>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<div
|
||||
v-for="item in items"
|
||||
:key="item.key"
|
||||
class="flex flex-col gap-2 rounded-lg border border-slate-200/80 p-3 dark:border-slate-700/60"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<img
|
||||
v-if="item.iconType === 'image'"
|
||||
:src="item.icon"
|
||||
:alt="item.title"
|
||||
class="h-6 w-6 object-contain"
|
||||
/>
|
||||
<UIcon
|
||||
v-else
|
||||
:name="item.icon"
|
||||
class="text-lg text-primary-500 dark:text-primary-400"
|
||||
/>
|
||||
<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
||||
{{ item.title }}
|
||||
</h3>
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<div v-for="item in items" :key="item.key"
|
||||
class="flex flex-col gap-2 rounded-lg border border-slate-200/80 p-3 dark:border-slate-700/60">
|
||||
<div class="flex items-center gap-2">
|
||||
<img v-if="item.iconType === 'image'" :src="item.icon" :alt="item.title"
|
||||
class="h-6 w-6 object-contain" />
|
||||
<UIcon v-else :name="item.icon" class="text-lg text-primary-500 dark:text-primary-400" />
|
||||
<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
||||
{{ item.title }}
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
{{ item.description }}
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
||||
{{ item.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
</UAccordion>
|
||||
</UContainer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// Detect mobile for accordion behavior (SSR-safe)
|
||||
const isMobile = ref(true)
|
||||
|
||||
onMounted(() => {
|
||||
const checkMobile = () => {
|
||||
isMobile.value = window.innerWidth < 768
|
||||
}
|
||||
checkMobile()
|
||||
window.addEventListener('resize', checkMobile)
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', checkMobile)
|
||||
})
|
||||
})
|
||||
|
||||
const items = computed(() => [
|
||||
{
|
||||
key: 'ielts',
|
||||
@@ -82,4 +77,21 @@ const items = computed(() => [
|
||||
description: t('languageSection.items.huawei.desc'),
|
||||
},
|
||||
])
|
||||
|
||||
const accordionItems = computed(() => [{
|
||||
label: t('languageSection.accordionLabel'),
|
||||
value: 'language'
|
||||
}])
|
||||
|
||||
const accordionUi = {
|
||||
root: 'flex flex-col',
|
||||
item: 'flex flex-col rounded-2xl border border-gray-200/70 dark:border-gray-700/50 bg-white/70 dark:bg-gray-900/40 shadow-sm',
|
||||
header: 'px-4 data-[state=open]:border-b border-gray-200/70 dark:border-gray-700/50',
|
||||
trigger: 'group flex-1 items-center gap-2 py-3 text-left cursor-pointer',
|
||||
label: 'text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300',
|
||||
leadingIcon: 'shrink-0',
|
||||
trailingIcon: 'ms-auto text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]:rotate-180',
|
||||
content: 'px-4 pb-4 pt-3 data-[state=closed]:hidden',
|
||||
body: 'pt-1'
|
||||
} as const
|
||||
</script>
|
||||
|
||||
@@ -5,75 +5,112 @@
|
||||
<UIcon name="i-twemoji-rocket" class="text-2xl" />
|
||||
<h2 class="section-title text-start">{{ t('sections.projects') }}</h2>
|
||||
</div>
|
||||
<div v-for="g in nonEmptyCategoryList" :key="g.cat" class="space-y-3 mb-5">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-twemoji-open-book" class="text-xl" />
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ tCategory(g.cat) }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<UCard v-for="(p, i) in g.items" :key="`${g.cat}-${i}-${p.name}`"
|
||||
class="flex h-full flex-col border border-gray-200/60 shadow-none transition hover:-translate-y-1 hover:shadow-lg dark:border-gray-700/40">
|
||||
<div class="flex h-full flex-col gap-4">
|
||||
<div class="flex gap-3">
|
||||
<NuxtImg v-if="p.thumbnail" :src="p.thumbnail" :alt="`${p.name} logo`"
|
||||
class="h-12 w-12 rounded-xl border border-gray-200/70 bg-white object-cover shadow-sm dark:border-gray-700/40 dark:bg-slate-900"
|
||||
width="96" height="96" sizes="96px" format="webp" loading="lazy" />
|
||||
<div v-else
|
||||
class="flex h-12 w-12 items-center justify-center rounded-xl border border-gray-200/70 bg-primary-500/10 text-primary-600 shadow-sm dark:border-gray-700/40 dark:bg-primary-400/10 dark:text-primary-200">
|
||||
<UIcon :name="getProjectIcon(p)" class="text-2xl" />
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-3">
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ p.name }}</h3>
|
||||
<div v-if="p.status || p.opensource" class="mt-2 flex flex-wrap items-center gap-2">
|
||||
<UBadge v-if="p.status" color="primary" variant="soft" class="rounded-full capitalize">
|
||||
{{ p.status }}
|
||||
</UBadge>
|
||||
<UBadge v-if="p.opensource" color="emerald" variant="soft" class="rounded-full">
|
||||
<UIcon name="i-mdi-source-branch" class="mr-1" />
|
||||
{{ t('projectLabels.openSource') }}
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-200">{{ p.description }}</p>
|
||||
<div class="flex flex-1 flex-col gap-3 pt-1">
|
||||
<div v-if="p.icons?.length"
|
||||
class="flex flex-wrap items-center gap-2 text-primary-500 dark:text-primary-300">
|
||||
<UIcon v-for="(ic, k) in p.icons" :key="k" :name="ic" class="text-xl" />
|
||||
</div>
|
||||
<div v-if="p.links?.length" class="mt-auto flex flex-wrap gap-2">
|
||||
<UButton v-for="(l, j) in p.links" :key="j" :to="l.to" target="_blank" size="xs" color="primary"
|
||||
variant="soft" trailing-icon="i-mdi-arrow-top-right-thin" class="hover-ring-tint"
|
||||
:aria-label="l.label">
|
||||
<UIcon v-if="l.icon" :name="l.icon" class="mr-1" />
|
||||
{{ l.label }}
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<UAccordion type="single" :unmount-on-hide="false" :items="accordionItems" default-value="projects"
|
||||
:ui="accordionUi">
|
||||
<template #body>
|
||||
<div v-for="g in nonEmptyCategoryList" :key="g.cat" class="space-y-3 mb-5">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-twemoji-open-book" class="text-xl" />
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ tCategory(g.cat) }}</h3>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-2">
|
||||
<UCard v-for="(p, i) in g.items" :key="`${g.cat}-${i}-${p.name}`"
|
||||
class="flex h-full flex-col border border-gray-200/60 shadow-none transition hover:-translate-y-1 hover:shadow-lg dark:border-gray-700/40">
|
||||
<div class="flex h-full flex-col gap-4">
|
||||
<div class="flex gap-3">
|
||||
<NuxtImg v-if="p.thumbnail" :src="p.thumbnail" :alt="`${p.name} logo`"
|
||||
class="h-12 w-12 rounded-xl border border-gray-200/70 bg-white object-cover shadow-sm dark:border-gray-700/40 dark:bg-slate-900"
|
||||
width="96" height="96" sizes="96px" format="webp" loading="lazy" />
|
||||
<div v-else
|
||||
class="flex h-12 w-12 items-center justify-center rounded-xl border border-gray-200/70 bg-primary-500/10 text-primary-600 shadow-sm dark:border-gray-700/40 dark:bg-primary-400/10 dark:text-primary-200">
|
||||
<UIcon :name="getProjectIcon(p)" class="text-2xl" />
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-3">
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ p.name }}</h3>
|
||||
<div v-if="p.status || p.opensource" class="mt-2 flex flex-wrap items-center gap-2">
|
||||
<UBadge v-if="p.status" color="primary" variant="soft" class="rounded-full capitalize">
|
||||
{{ p.status }}
|
||||
</UBadge>
|
||||
<UBadge v-if="p.opensource" color="emerald" variant="soft" class="rounded-full">
|
||||
<UIcon name="i-mdi-source-branch" class="mr-1" />
|
||||
{{ t('projectLabels.openSource') }}
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-200">{{ p.description }}</p>
|
||||
<div class="flex flex-1 flex-col gap-3 pt-1">
|
||||
<div v-if="p.icons?.length"
|
||||
class="flex flex-wrap items-center gap-2 text-primary-500 dark:text-primary-300">
|
||||
<UIcon v-for="(ic, k) in p.icons" :key="k" :name="ic" class="text-xl" />
|
||||
</div>
|
||||
<div v-if="p.links?.length" class="mt-auto flex flex-wrap gap-2">
|
||||
<UButton v-for="(l, j) in p.links" :key="j" :to="l.to" target="_blank" size="xs"
|
||||
color="primary" variant="soft" trailing-icon="i-mdi-arrow-top-right-thin"
|
||||
class="hover-ring-tint" :aria-label="l.label">
|
||||
<UIcon v-if="l.icon" :name="l.icon" class="mr-1" />
|
||||
{{ l.label }}
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UAccordion>
|
||||
</UContainer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { usePortfolio } from '@/composables/usePortfolio'
|
||||
import type { Project } from '@/types/portfolio.types'
|
||||
|
||||
const portfolio = usePortfolio()
|
||||
const { t } = useI18n()
|
||||
|
||||
// Detect mobile for accordion behavior (SSR-safe)
|
||||
const isMobile = ref(true)
|
||||
|
||||
onMounted(() => {
|
||||
const checkMobile = () => {
|
||||
isMobile.value = window.innerWidth < 768
|
||||
}
|
||||
checkMobile()
|
||||
window.addEventListener('resize', checkMobile)
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', checkMobile)
|
||||
})
|
||||
})
|
||||
|
||||
// Accordion config
|
||||
const accordionItems = computed(() => [{
|
||||
label: t('sections.projectsAccordion'),
|
||||
value: 'projects'
|
||||
}])
|
||||
|
||||
const accordionUi = {
|
||||
root: 'flex flex-col',
|
||||
item: 'flex flex-col rounded-2xl border border-gray-200/70 dark:border-gray-700/50 bg-white/70 dark:bg-gray-900/40 shadow-sm',
|
||||
header: 'px-4 data-[state=open]:border-b border-gray-200/70 dark:border-gray-700/50',
|
||||
trigger: 'group flex-1 items-center gap-2 py-3 text-left cursor-pointer',
|
||||
label: 'text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300',
|
||||
leadingIcon: 'shrink-0',
|
||||
trailingIcon: 'ms-auto text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]:rotate-180',
|
||||
content: 'px-4 pb-4 pt-3 data-[state=closed]:hidden',
|
||||
body: 'pt-1'
|
||||
} as const
|
||||
|
||||
type Category = NonNullable<Project['category']>
|
||||
const categories: Category[] = ['current', 'freelance', 'public']
|
||||
|
||||
const projectsByCategory = computed<Record<Category, Project[]>>(() => {
|
||||
// Initialize with all categories to preserve order and allow skipping empty ones
|
||||
const acc: Record<Category, Project[]> = { current: [], freelance: [], public: [] }
|
||||
for (const p of portfolio.value.projects) {
|
||||
const cat = (p.category ?? 'freelance') as Category
|
||||
@@ -81,9 +118,11 @@ const projectsByCategory = computed<Record<Category, Project[]>>(() => {
|
||||
}
|
||||
return acc
|
||||
})
|
||||
|
||||
const categoryList = computed<Array<{ cat: Category; items: Project[] }>>(() => {
|
||||
return categories.map((c) => ({ cat: c as Category, items: projectsByCategory.value[c as Category] }))
|
||||
})
|
||||
|
||||
const nonEmptyCategoryList = computed<Array<{ cat: Category; items: Project[] }>>(() => {
|
||||
return categoryList.value.filter(g => g.items.length > 0)
|
||||
})
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
</div>
|
||||
|
||||
<UAccordion type="multiple" :unmount-on-hide="false" :items="skillSections" :default-value="openSkillSections"
|
||||
:ui="accordionUi">
|
||||
:ui="accordionUi" :disabled="!isMobile">
|
||||
<template #leading="{ item }">
|
||||
<UIcon v-if="item.icon" :name="item.icon" class="text-base text-primary-500 dark:text-primary-300" />
|
||||
</template>
|
||||
@@ -23,13 +23,28 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import type { Tag, SkillType } from '@/types/portfolio.types'
|
||||
import { expert, proficient, usedBefore } from '@/data/skills'
|
||||
import SkillGrid from '@/components/portfolio/SkillGrid.vue'
|
||||
import SkillFilters from '@/components/portfolio/SkillFilters.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// Detect mobile for accordion behavior (SSR-safe)
|
||||
const isMobile = ref(true)
|
||||
|
||||
onMounted(() => {
|
||||
const checkMobile = () => {
|
||||
isMobile.value = window.innerWidth < 768
|
||||
}
|
||||
checkMobile()
|
||||
window.addEventListener('resize', checkMobile)
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', checkMobile)
|
||||
})
|
||||
})
|
||||
|
||||
type SkillSectionKey = 'expert' | 'proficient' | 'usedBefore'
|
||||
|
||||
// Multi-select filters for Skill types
|
||||
@@ -61,11 +76,11 @@ const openSkillSections = computed(() => skillSections.value.map(section => sect
|
||||
const accordionUi = {
|
||||
root: 'flex flex-col gap-3 md:grid md:grid-cols-3 md:gap-4 md:items-stretch',
|
||||
item: 'flex flex-col rounded-2xl border border-gray-200/70 dark:border-gray-700/50 bg-white/70 dark:bg-gray-900/40 shadow-sm md:self-stretch data-[state=closed]:md:self-start md:h-full data-[state=open]:md:h-full data-[state=closed]:md:h-auto data-[state=open]:md:min-h-[320px] data-[state=closed]:md:min-h-[64px]',
|
||||
header: 'px-4',
|
||||
trigger: 'group flex-1 items-center gap-2 py-3 text-left',
|
||||
header: 'px-4 border-b border-gray-200/70 dark:border-gray-700/50',
|
||||
trigger: 'group flex-1 items-center gap-2 py-3 text-left md:cursor-default',
|
||||
label: 'text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300',
|
||||
leadingIcon: 'shrink-0',
|
||||
trailingIcon: 'ms-auto text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]:rotate-180',
|
||||
trailingIcon: 'ms-auto text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]:rotate-180 md:hidden',
|
||||
content: 'px-4 pb-4 pt-1 data-[state=closed]:hidden',
|
||||
body: 'pt-1'
|
||||
} as const
|
||||
|
||||
@@ -6,25 +6,31 @@
|
||||
<h2 class="section-title">{{ t('sections.softSkills') }}</h2>
|
||||
</div>
|
||||
|
||||
<UCard>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<template v-for="(s, i) in resolved" :key="s.key">
|
||||
<UTooltip :arrow="true" :delay-duration="0.5" :text="s.description">
|
||||
<UBadge variant="soft" class="chip-base select-none" :class="chipClass(i)">
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<UIcon :name="s.icon" class="text-sm" />
|
||||
<span class="text-xs">{{ s.label }}</span>
|
||||
</span>
|
||||
</UBadge>
|
||||
</UTooltip>
|
||||
</template>
|
||||
</div>
|
||||
</UCard>
|
||||
<UAccordion type="single" :unmount-on-hide="false" :items="accordionItems" default-value="soft-skills"
|
||||
:ui="accordionUi">
|
||||
<template #body>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<template v-for="(s, i) in resolved" :key="s.key">
|
||||
<UTooltip :arrow="true" :delay-duration="0.5" :text="s.description">
|
||||
<UBadge variant="soft" class="chip-base select-none" :class="chipClass(i)">
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<UIcon :name="s.icon" class="text-sm" />
|
||||
<span class="text-xs">{{ s.label }}</span>
|
||||
</span>
|
||||
</UBadge>
|
||||
</UTooltip>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</UAccordion>
|
||||
</UContainer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { chipTones } from '@/utils/chipTones'
|
||||
|
||||
type SoftKey =
|
||||
| 'problemSolving'
|
||||
| 'attentionToDetail'
|
||||
@@ -36,7 +42,21 @@ type SoftKey =
|
||||
| 'projectManagement'
|
||||
| 'adaptability'
|
||||
|
||||
import { chipTones } from '@/utils/chipTones'
|
||||
const { t } = useI18n()
|
||||
|
||||
// Detect mobile for accordion behavior (SSR-safe)
|
||||
const isMobile = ref(true)
|
||||
|
||||
onMounted(() => {
|
||||
const checkMobile = () => {
|
||||
isMobile.value = window.innerWidth < 768
|
||||
}
|
||||
checkMobile()
|
||||
window.addEventListener('resize', checkMobile)
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', checkMobile)
|
||||
})
|
||||
})
|
||||
|
||||
const base: { key: SoftKey; icon: string }[] = [
|
||||
{ key: 'problemSolving', icon: 'i-twemoji-light-bulb' },
|
||||
@@ -50,7 +70,6 @@ const base: { key: SoftKey; icon: string }[] = [
|
||||
{ key: 'adaptability', icon: 'i-twemoji-counterclockwise-arrows-button' },
|
||||
]
|
||||
|
||||
const { t } = useI18n()
|
||||
const resolved = computed(() =>
|
||||
base.map(s => ({
|
||||
...s,
|
||||
@@ -60,4 +79,21 @@ const resolved = computed(() =>
|
||||
)
|
||||
|
||||
const chipClass = (i: number) => chipTones[i % chipTones.length]
|
||||
|
||||
const accordionItems = computed(() => [{
|
||||
label: t('softSkillsAccordion.label'),
|
||||
value: 'soft-skills'
|
||||
}])
|
||||
|
||||
const accordionUi = {
|
||||
root: 'flex flex-col',
|
||||
item: 'flex flex-col rounded-2xl border border-gray-200/70 dark:border-gray-700/50 bg-white/70 dark:bg-gray-900/40 shadow-sm',
|
||||
header: 'px-4 data-[state=open]:border-b border-gray-200/70 dark:border-gray-700/50',
|
||||
trigger: 'group flex-1 items-center gap-2 py-3 text-left cursor-pointer',
|
||||
label: 'text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300',
|
||||
leadingIcon: 'shrink-0',
|
||||
trailingIcon: 'ms-auto text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]:rotate-180',
|
||||
content: 'px-4 pb-4 pt-3 data-[state=closed]:hidden',
|
||||
body: 'pt-1'
|
||||
} as const
|
||||
</script>
|
||||
|
||||
@@ -5,34 +5,39 @@
|
||||
<UIcon name="i-twemoji-briefcase" class="text-2xl" />
|
||||
<h2 class="section-title">{{ t('sections.work') }}</h2>
|
||||
</div>
|
||||
<UTimeline :items="experiences" :default-value="0" color="primary" size="md" class="max-w-3xl">
|
||||
<template #indicator="{ item }">
|
||||
<img v-if="item.logo" :src="item.logo" :alt="`${item.company} logo`"
|
||||
class="h-10 w-10 object-contain" loading="lazy" />
|
||||
|
||||
<UAccordion type="single" :unmount-on-hide="false" :items="accordionItems" default-value="work" :ui="accordionUi">
|
||||
<template #body>
|
||||
<UTimeline :items="experiences" :default-value="0" color="primary" size="md" class="max-w-3xl">
|
||||
<template #indicator="{ item }">
|
||||
<img v-if="item.logo" :src="item.logo" :alt="`${item.company} logo`" class="h-10 w-10 object-contain"
|
||||
loading="lazy" />
|
||||
</template>
|
||||
<template #title="{ item }">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="font-semibold">{{ item.title }}</span>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">{{ item.company }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #description="{ item }">
|
||||
<ul v-if="item.descriptions?.length"
|
||||
class="mt-2 list-disc space-y-1 text-sm text-gray-700 dark:text-gray-300 pl-5">
|
||||
<li v-for="(desc, i) in item.descriptions" :key="i">{{ desc }}</li>
|
||||
</ul>
|
||||
<div v-if="item.icons?.length" class="mt-3 flex flex-wrap gap-2">
|
||||
<UIcon v-for="(icon, i) in item.icons" :key="i" :name="icon"
|
||||
class="text-xl text-primary-500 dark:text-primary-400" />
|
||||
</div>
|
||||
</template>
|
||||
</UTimeline>
|
||||
</template>
|
||||
<template #title="{ item }">
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="font-semibold">{{ item.title }}</span>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">{{ item.company }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #description="{ item }">
|
||||
<ul v-if="item.descriptions?.length"
|
||||
class="mt-2 list-disc space-y-1 text-sm text-gray-700 dark:text-gray-300 pl-5">
|
||||
<li v-for="(desc, i) in item.descriptions" :key="i">{{ desc }}</li>
|
||||
</ul>
|
||||
<div v-if="item.icons?.length" class="mt-3 flex flex-wrap gap-2">
|
||||
<UIcon v-for="(icon, i) in item.icons" :key="i" :name="icon"
|
||||
class="text-xl text-primary-500 dark:text-primary-400" />
|
||||
</div>
|
||||
</template>
|
||||
</UTimeline>
|
||||
</UAccordion>
|
||||
</UContainer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { usePortfolio } from '@/composables/usePortfolio'
|
||||
import type { TimelineItem } from '@nuxt/ui'
|
||||
import type { CompanyExperience, Experience } from '@/types/portfolio.types'
|
||||
@@ -41,6 +46,38 @@ const { t } = useI18n()
|
||||
const portfolio = usePortfolio()
|
||||
const presentText = computed(() => t('common.present'))
|
||||
|
||||
// Detect mobile for accordion behavior (SSR-safe)
|
||||
const isMobile = ref(true)
|
||||
|
||||
onMounted(() => {
|
||||
const checkMobile = () => {
|
||||
isMobile.value = window.innerWidth < 768
|
||||
}
|
||||
checkMobile()
|
||||
window.addEventListener('resize', checkMobile)
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', checkMobile)
|
||||
})
|
||||
})
|
||||
|
||||
// Accordion config
|
||||
const accordionItems = computed(() => [{
|
||||
label: t('sections.workAccordion'),
|
||||
value: 'work'
|
||||
}])
|
||||
|
||||
const accordionUi = {
|
||||
root: 'flex flex-col',
|
||||
item: 'flex flex-col rounded-2xl border border-gray-200/70 dark:border-gray-700/50 bg-white/70 dark:bg-gray-900/40 shadow-sm',
|
||||
header: 'px-4 data-[state=open]:border-b border-gray-200/70 dark:border-gray-700/50',
|
||||
trigger: 'group flex-1 items-center gap-2 py-3 text-left cursor-pointer',
|
||||
label: 'text-sm font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-300',
|
||||
leadingIcon: 'shrink-0',
|
||||
trailingIcon: 'ms-auto text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]:rotate-180',
|
||||
content: 'px-4 pb-4 pt-3 data-[state=closed]:hidden',
|
||||
body: 'pt-1'
|
||||
} as const
|
||||
|
||||
type RichTimelineItem = TimelineItem & {
|
||||
company: string
|
||||
descriptions?: string[]
|
||||
@@ -54,7 +91,6 @@ const experiences = computed<RichTimelineItem[]>(() => {
|
||||
|
||||
list.forEach((exp: any, index: number) => {
|
||||
if (Array.isArray(exp.positions)) {
|
||||
// CompanyExperience with multiple positions
|
||||
const company = exp as CompanyExperience
|
||||
company.positions.forEach((pos, posIndex) => {
|
||||
items.push({
|
||||
@@ -69,7 +105,6 @@ const experiences = computed<RichTimelineItem[]>(() => {
|
||||
})
|
||||
})
|
||||
} else {
|
||||
// Single Experience
|
||||
const single = exp as Experience
|
||||
items.push({
|
||||
date: `${single.start}${single.ongoing ? ` - ${presentText.value}` : single.end ? ` - ${single.end}` : ''}`,
|
||||
|
||||
@@ -139,6 +139,9 @@ if (post.value) {
|
||||
<ContentRenderer v-if="(post as any).body" :value="(post as any).body" />
|
||||
</article>
|
||||
|
||||
<!-- Share Buttons -->
|
||||
<BlogShare :title="(post as any).title" :url="`${siteUrl}${(post as any).path}`" />
|
||||
|
||||
<!-- Blog Navigation (Prev/Next) -->
|
||||
<BlogNavigation :prev="prevPost" :next="nextPost" />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user