mirror of
https://github.com/mmahdium/portfolio.git
synced 2026-09-28 02:21:41 +03:30
Merge remote-tracking branch 'upstream/main' into feature/sync-with-upstream
This commit is contained in:
+3
-3
@@ -1,10 +1,10 @@
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
strategy: "merge",
|
||||
primary: "indigo",
|
||||
gray: "slate",
|
||||
primary: "violet",
|
||||
gray: "zinc",
|
||||
colors: {
|
||||
primary: 'indigo',
|
||||
primary: 'violet',
|
||||
},
|
||||
icons: {
|
||||
dynamic: true,
|
||||
|
||||
+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);
|
||||
}
|
||||
|
||||
|
||||
+375
-33
@@ -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";
|
||||
@@ -18,8 +19,8 @@
|
||||
@source "../../../content/**/*.{md,json,yaml,yml}";
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Outfit', 'ui-sans-serif', 'system-ui', 'sans-serif';
|
||||
--font-display: 'Fraunces', 'Roobert', 'Inter', 'serif';
|
||||
--font-sans: 'Geist', 'DM Sans', '-apple-system', 'ui-sans-serif', 'system-ui', 'sans-serif';
|
||||
--font-display: 'Space Grotesk', 'Geist', 'ui-sans-serif', 'sans-serif';
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -64,7 +65,8 @@
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
/* Avoid width variation */
|
||||
scroll-padding-top: 2rem; /* Offset for fixed navbar when using anchor links */
|
||||
scroll-padding-top: 2rem;
|
||||
/* Offset for fixed navbar when using anchor links */
|
||||
}
|
||||
|
||||
html,
|
||||
@@ -72,10 +74,20 @@
|
||||
#__nuxt,
|
||||
#__layout {
|
||||
@apply min-h-screen w-full;
|
||||
background-color: #f2f5f9;
|
||||
background: linear-gradient(135deg, #f8f9fc 0%, #faf5ff 50%, #fdf4ff 100%);
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
@media print {
|
||||
html,
|
||||
body,
|
||||
#__nuxt,
|
||||
#__layout {
|
||||
background: white !important;
|
||||
min-height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dark html,
|
||||
.dark body,
|
||||
.dark #__nuxt,
|
||||
@@ -89,10 +101,22 @@
|
||||
html.dark body,
|
||||
html.dark #__nuxt,
|
||||
html.dark #__layout {
|
||||
background-color: #0b1220;
|
||||
background: linear-gradient(135deg, #0a0a0f 0%, #18181b 50%, #1c1425 100%);
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@media print {
|
||||
:root.dark #__nuxt,
|
||||
:root.dark #__layout,
|
||||
html.dark,
|
||||
html.dark body,
|
||||
html.dark #__nuxt,
|
||||
html.dark #__layout {
|
||||
background: white !important;
|
||||
color-scheme: light !important;
|
||||
}
|
||||
}
|
||||
|
||||
div,
|
||||
span,
|
||||
input,
|
||||
@@ -110,11 +134,64 @@
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
:root {
|
||||
--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 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 */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: var(--scrollbar-track);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(135deg, var(--scrollbar-thumb), color-mix(in oklch, var(--scrollbar-thumb), black 10%));
|
||||
border-radius: 9999px;
|
||||
border: 2px solid color-mix(in oklch, var(--scrollbar-track), transparent 50%);
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
/* In Persian/RTL, prefer Vazirmatn for both body and headings via variables */
|
||||
html[dir="rtl"],
|
||||
html[lang^="fa"] {
|
||||
--font-sans: 'Vazirmatn', 'Outfit', 'ui-sans-serif', 'system-ui', 'sans-serif';
|
||||
--font-display: 'Vazirmatn', 'Roobert', 'Inter', 'serif';
|
||||
--font-sans: 'Vazirmatn', 'Geist', 'ui-sans-serif', 'system-ui', 'sans-serif';
|
||||
--font-display: 'Vazirmatn', 'Space Grotesk', 'ui-sans-serif', 'sans-serif';
|
||||
}
|
||||
|
||||
/* Hide promotional banners from @nuxt/ui and certificates.dev */
|
||||
[class*="VueSchool"],
|
||||
[class*="banner"][class*="promotional"],
|
||||
[data-v-inspector*="VueSchool"],
|
||||
#bb-banner,
|
||||
[id^="bb-"],
|
||||
[class*="bb-campaign"],
|
||||
[class*="bb-close"],
|
||||
a[href*="certificates.dev"] {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
height: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -123,42 +200,144 @@
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
@apply font-display tracking-tight;
|
||||
@apply font-display tracking-tight font-bold;
|
||||
background: linear-gradient(135deg, currentColor 0%, color-mix(in oklch, currentColor, var(--ui-color-primary-500) 30%) 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-3xl sm:text-4xl;
|
||||
@apply text-4xl sm:text-5xl lg:text-6xl;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-2xl sm:text-3xl;
|
||||
@apply text-3xl sm:text-4xl lg:text-5xl;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-xl sm:text-2xl;
|
||||
@apply text-2xl sm:text-3xl lg:text-4xl;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/**
|
||||
* THEME COLOR USAGE GUIDE
|
||||
*
|
||||
* Always use Nuxt UI CSS variables for primary colors:
|
||||
* - var(--ui-color-primary-500) for main primary color
|
||||
* - var(--ui-color-primary-400) for lighter shade
|
||||
* - var(--ui-color-primary-600) for darker shade
|
||||
*
|
||||
* Or use semantic Tailwind classes:
|
||||
* - text-primary, bg-primary, border-primary
|
||||
*
|
||||
* Never use hardcoded colors like:
|
||||
* - purple-500, violet-600, #a855f7
|
||||
*
|
||||
* For gradients, use CSS variables:
|
||||
* background: linear-gradient(to right,
|
||||
* var(--ui-color-primary-600),
|
||||
* var(--ui-color-primary-500)
|
||||
* );
|
||||
*
|
||||
* See docs/THEME-COLOR-GUIDE.md for detailed documentation.
|
||||
*/
|
||||
|
||||
.primary-text {
|
||||
@apply text-primary-500 dark:text-primary-400;
|
||||
@apply text-primary;
|
||||
}
|
||||
|
||||
.section-spacing {
|
||||
@apply pt-5 pb-8 sm:pt-8 sm:pb-12;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@apply text-xl sm:text-2xl font-semibold leading-tight text-gray-900 dark:text-gray-100;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
@apply flex flex-wrap items-center gap-3 mb-5 sm:mb-6;
|
||||
}
|
||||
|
||||
.primary-text-muted {
|
||||
@apply text-slate-500 dark:text-slate-400;
|
||||
@apply text-zinc-500 dark:text-zinc-400;
|
||||
}
|
||||
|
||||
.decorated {
|
||||
@apply underline underline-offset-8 decoration-primary-500 dark:decoration-primary-400;
|
||||
@apply underline underline-offset-8 decoration-primary decoration-2;
|
||||
}
|
||||
|
||||
/* Soft text color helpers */
|
||||
.muted {
|
||||
@apply text-slate-600 dark:text-slate-300;
|
||||
@apply text-zinc-600 dark:text-zinc-300;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--ui-color-primary-600),
|
||||
var(--ui-color-primary-500),
|
||||
var(--ui-color-primary-400)
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.dark .gradient-text {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--ui-color-primary-400),
|
||||
var(--ui-color-primary-300),
|
||||
var(--ui-color-primary-200)
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.chip-base {
|
||||
@apply inline-flex items-center gap-1.5 rounded-xl px-2.5 py-1 text-xs font-medium ring-1 ring-slate-200/70 bg-white/70 text-slate-700 shadow-sm backdrop-blur-sm dark:bg-white/5 dark:text-slate-300 dark:ring-slate-700/50;
|
||||
@apply inline-flex items-center gap-1.5 rounded-2xl px-3 py-1.5 text-xs font-semibold ring-2 transition-all hover:scale-105 hover:shadow-xl backdrop-blur-md;
|
||||
--tw-ring-color: color-mix(in oklch, var(--ui-color-primary-400) 60%, transparent);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
color-mix(in oklch, white 75%, transparent),
|
||||
color-mix(in oklch, var(--ui-color-primary-100) 80%, transparent)
|
||||
);
|
||||
color: var(--ui-color-primary-700);
|
||||
box-shadow:
|
||||
0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 15%, transparent),
|
||||
0 4px 6px -2px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent);
|
||||
border: 1px solid color-mix(in oklch, var(--ui-color-primary-300) 40%, transparent);
|
||||
}
|
||||
|
||||
.chip-base:hover {
|
||||
--tw-ring-color: color-mix(in oklch, var(--ui-color-primary-500) 70%, transparent);
|
||||
box-shadow:
|
||||
0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 25%, transparent),
|
||||
0 8px 10px -6px color-mix(in oklch, var(--ui-color-primary-500) 20%, transparent);
|
||||
}
|
||||
|
||||
.dark .chip-base {
|
||||
--tw-ring-color: color-mix(in oklch, var(--ui-color-primary-600) 50%, transparent);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
color-mix(in oklch, var(--ui-color-primary-950) 60%, transparent),
|
||||
color-mix(in oklch, var(--ui-color-primary-900) 40%, transparent)
|
||||
);
|
||||
color: var(--ui-color-primary-200);
|
||||
box-shadow:
|
||||
0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent),
|
||||
0 4px 6px -2px color-mix(in oklch, var(--ui-color-primary-500) 8%, transparent);
|
||||
border: 1px solid color-mix(in oklch, var(--ui-color-primary-700) 40%, transparent);
|
||||
}
|
||||
|
||||
.dark .chip-base:hover {
|
||||
--tw-ring-color: color-mix(in oklch, var(--ui-color-primary-500) 60%, transparent);
|
||||
box-shadow:
|
||||
0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 15%, transparent),
|
||||
0 8px 10px -6px color-mix(in oklch, var(--ui-color-primary-500) 12%, transparent);
|
||||
}
|
||||
|
||||
/* Hide scrollbars for overflow containers */
|
||||
@@ -181,15 +360,61 @@
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
/* Global hover utilities for consistent interactions */
|
||||
.glass-card {
|
||||
@apply rounded-3xl bg-white/80 dark:bg-zinc-900/50 backdrop-blur-xl border border-white/20 dark:border-zinc-800/50 transition-all duration-300;
|
||||
box-shadow: 0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 5%, transparent);
|
||||
}
|
||||
|
||||
.dark .glass-card {
|
||||
box-shadow: 0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent);
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
@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 - using dynamic theme colors */
|
||||
.hover-ring-tint {
|
||||
/* Ring-only hover with subtle background tint; no scale; focus-visible support */
|
||||
@apply transition-colors duration-200 ease-out ring-0 hover:ring-2 hover:ring-primary-500 dark:hover:ring-primary-400 hover:bg-primary-50/60 dark:hover:bg-primary-400/10 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-slate-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 {
|
||||
/* Clean link hover with color shift and underline */
|
||||
@apply transition-colors duration-200 hover:text-primary-600 dark:hover:text-primary-400 hover:underline underline-offset-4 decoration-primary-500/60 dark:decoration-primary-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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -197,23 +422,142 @@
|
||||
|
||||
/* Minimal hover: subtle bg tint, slight shadow, no ring/border change */
|
||||
.hover-minimal {
|
||||
@apply transition-all duration-150 ease-out hover:bg-gray-100/70 dark:hover:bg-white/5 hover:shadow-sm;
|
||||
@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);
|
||||
}
|
||||
|
||||
.btn-modern {
|
||||
@apply inline-flex items-center justify-center px-6 py-3 rounded-2xl font-semibold text-white transition-all duration-300 hover:scale-105;
|
||||
background: linear-gradient(to right, var(--ui-color-primary-600), var(--ui-color-primary-500));
|
||||
box-shadow: 0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 30%, transparent);
|
||||
}
|
||||
|
||||
.btn-modern:hover {
|
||||
background: linear-gradient(to right, var(--ui-color-primary-700), var(--ui-color-primary-600));
|
||||
box-shadow: 0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 40%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
|
||||
/* Minimal outlined button: persistent subtle border and light background; hover handled separately */
|
||||
.btn-outline-minimal {
|
||||
@apply border border-gray-300/60 dark:border-gray-600/50 bg-gray-100/30 dark:bg-white/5;
|
||||
@apply backdrop-blur-sm transition-all duration-300 hover:shadow-lg;
|
||||
border: 1px solid color-mix(in oklch, var(--ui-color-primary-200) 60%, transparent);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
color-mix(in oklch, white 60%, transparent),
|
||||
color-mix(in oklch, var(--ui-color-primary-50) 30%, transparent)
|
||||
);
|
||||
}
|
||||
|
||||
.btn-outline-minimal:hover {
|
||||
box-shadow: 0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent);
|
||||
}
|
||||
|
||||
.dark .btn-outline-minimal {
|
||||
border-color: color-mix(in oklch, var(--ui-color-primary-800) 50%, transparent);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
color-mix(in oklch, white 5%, transparent),
|
||||
color-mix(in oklch, var(--ui-color-primary-950) 20%, transparent)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
|
||||
/* Chip-style icon button inspired by SkillGrid: subtle ring, soft bg, minimal hover */
|
||||
.chip-button {
|
||||
@apply inline-flex items-center justify-center h-10 w-10 rounded-xl ring-1 ring-slate-200/70 dark:ring-slate-700/50 bg-white/70 dark:bg-white/5 text-slate-700 dark:text-slate-200 shadow-sm backdrop-blur-sm transition-colors duration-150 ease-out hover:bg-white/80 dark:hover:bg-white/10;
|
||||
@apply inline-flex items-center justify-center h-12 w-12 rounded-2xl ring-2 backdrop-blur-md transition-all duration-300 ease-out hover:scale-110;
|
||||
--tw-ring-color: color-mix(in oklch, var(--ui-color-primary-400) 55%, transparent);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
color-mix(in oklch, white 70%, transparent),
|
||||
color-mix(in oklch, var(--ui-color-primary-100) 75%, transparent)
|
||||
);
|
||||
color: var(--ui-color-primary-700);
|
||||
box-shadow:
|
||||
0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 15%, transparent),
|
||||
0 4px 6px -2px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent);
|
||||
border: 1px solid color-mix(in oklch, var(--ui-color-primary-300) 35%, transparent);
|
||||
}
|
||||
|
||||
.chip-button:hover {
|
||||
--tw-ring-color: color-mix(in oklch, var(--ui-color-primary-500) 70%, transparent);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
color-mix(in oklch, var(--ui-color-primary-50) 90%, transparent),
|
||||
color-mix(in oklch, var(--ui-color-primary-100) 95%, transparent)
|
||||
);
|
||||
box-shadow:
|
||||
0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 25%, transparent),
|
||||
0 8px 10px -6px color-mix(in oklch, var(--ui-color-primary-500) 20%, transparent);
|
||||
}
|
||||
|
||||
.dark .chip-button {
|
||||
--tw-ring-color: color-mix(in oklch, var(--ui-color-primary-600) 45%, transparent);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
color-mix(in oklch, white 15%, transparent),
|
||||
color-mix(in oklch, var(--ui-color-primary-950) 50%, transparent)
|
||||
);
|
||||
color: var(--ui-color-primary-200);
|
||||
box-shadow:
|
||||
0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 10%, transparent),
|
||||
0 4px 6px -2px color-mix(in oklch, var(--ui-color-primary-500) 8%, transparent);
|
||||
border: 1px solid color-mix(in oklch, var(--ui-color-primary-700) 35%, transparent);
|
||||
}
|
||||
|
||||
.dark .chip-button:hover {
|
||||
--tw-ring-color: color-mix(in oklch, var(--ui-color-primary-500) 60%, transparent);
|
||||
background: linear-gradient(
|
||||
to bottom right,
|
||||
color-mix(in oklch, white 20%, transparent),
|
||||
color-mix(in oklch, var(--ui-color-primary-900) 60%, transparent)
|
||||
);
|
||||
box-shadow:
|
||||
0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 15%, transparent),
|
||||
0 8px 10px -6px color-mix(in oklch, var(--ui-color-primary-500) 12%, transparent);
|
||||
}
|
||||
|
||||
/* GitHub Activity Contribution Graph - Dynamic Primary Color */
|
||||
/* Level 0: No contributions - very neutral/muted color */
|
||||
.contrib-level-0 {
|
||||
background-color: var(--ui-color-neutral-100);
|
||||
}
|
||||
/* Levels 1-4: More contributions = darker/more vibrant primary */
|
||||
.contrib-level-1 {
|
||||
background-color: var(--ui-color-primary-200);
|
||||
}
|
||||
.contrib-level-2 {
|
||||
background-color: var(--ui-color-primary-400);
|
||||
}
|
||||
.contrib-level-3 {
|
||||
background-color: var(--ui-color-primary-600);
|
||||
}
|
||||
.contrib-level-4 {
|
||||
background-color: var(--ui-color-primary-800);
|
||||
}
|
||||
|
||||
/* Dark mode overrides for contribution graph */
|
||||
/* In dark mode: brighter = more contributions (same visual logic as light) */
|
||||
.dark .contrib-level-0 {
|
||||
background-color: var(--ui-color-neutral-800);
|
||||
}
|
||||
.dark .contrib-level-1 {
|
||||
background-color: var(--ui-color-primary-950);
|
||||
}
|
||||
.dark .contrib-level-2 {
|
||||
background-color: var(--ui-color-primary-800);
|
||||
}
|
||||
.dark .contrib-level-3 {
|
||||
background-color: var(--ui-color-primary-600);
|
||||
}
|
||||
.dark .contrib-level-4 {
|
||||
background-color: var(--ui-color-primary-400);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -283,13 +627,11 @@
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
/* Use primary color gradient; adapt in dark mode */
|
||||
background-image: linear-gradient(to right,
|
||||
rgb(99 102 241 / 0.9),
|
||||
/* indigo-500 */
|
||||
rgb(139 92 246 / 0.9)
|
||||
/* violet-500 */
|
||||
);
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
color-mix(in oklch, var(--ui-color-primary-500) 90%, transparent),
|
||||
color-mix(in oklch, var(--ui-color-primary-600) 90%, transparent)
|
||||
);
|
||||
transform-origin: left center;
|
||||
animation: locale-progress-grow 600ms ease-out forwards;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
@@ -3,9 +3,9 @@
|
||||
<!-- Nuxt UI Select-based language picker -->
|
||||
<USelect v-model="model" :items="items" value-key="value" size="sm" color="primary" variant="soft"
|
||||
:highlight="false" arrow :trailing="true" placeholder="Language"
|
||||
class="px-1 w-[64px] sm:w-[76px] rounded-full ring-1 ring-gray-200/70 dark:ring-gray-700/60 backdrop-blur-md shadow-sm h-[25px] hover:ring-primary-500/50 hover:shadow-md transition-all duration-200"
|
||||
class="cursor-pointer px-1 w-[64px] sm:w-[78px] rounded-full ring-1 ring-gray-200/70 dark:ring-gray-700/60 backdrop-blur-md shadow-sm h-[25px] hover:ring-primary-500/50 hover:shadow-md transition-all duration-200"
|
||||
:ui="{
|
||||
base: 'rounded-full',
|
||||
base: 'rounded-full cursor-pointer',
|
||||
trailingIcon: 'text-dimmed group-data-[state=open]:rotate-180 transition-transform duration-200',
|
||||
content: 'min-w-fit scale-fade-in'
|
||||
}" :aria-label="t('nav.languageSelector')">
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<div class="bg-blue-950 backdrop-blur-md hover:cursor-pointer" v-show="open">
|
||||
<div
|
||||
class="plausible-event-name=VueSchoolBanner+click flex h-16 shrink-0 items-center justify-between px-4 text-white"
|
||||
@click="navigate"
|
||||
>
|
||||
<div></div>
|
||||
<div class="hidden lg:block">
|
||||
<img src="/img/vueschool/vueschool.svg" alt="VueSchool Logo" class="h-6" />
|
||||
</div>
|
||||
<div
|
||||
class="hidden bg-gradient-to-r from-amber-400 to-pink-500 bg-clip-text text-lg font-semibold tracking-wide text-transparent sm:inline-block"
|
||||
>
|
||||
New Vue Masterclass
|
||||
</div>
|
||||
<div class="hidden lg:flex lg:gap-x-2">
|
||||
<img src="/img/vueschool/vue-with-hat.svg" alt="VueJS Logo" class="h-6" />
|
||||
<img src="/img/vueschool/pinia.svg" alt="Pinia Logo" class="h-6" />
|
||||
<img src="/img/vueschool/vite.svg" alt="Vite Logo" class="h-6" />
|
||||
<img src="/img/vueschool/vitest.svg" alt="Vitest Logo" class="h-6" />
|
||||
</div>
|
||||
<div class="text-center leading-5">
|
||||
<span
|
||||
class="inline-block bg-gradient-to-r from-emerald-300 to-sky-300 bg-clip-text font-semibold tracking-wide text-transparent"
|
||||
>
|
||||
Vue.js Masterclass 2024 Edition
|
||||
</span>
|
||||
<span class="ml-2 hidden font-semibold sm:inline">LAUNCHED</span>
|
||||
<br />
|
||||
<span class="text-sm text-gray-300 sm:text-base">
|
||||
Code a real world app using the latest Vue.js tech
|
||||
</span>
|
||||
</div>
|
||||
<UButton
|
||||
class="plausible-event-name=VueSchoolBanner+click hidden px-4 font-bold md:inline-flex rounded-full"
|
||||
label="Buy Now"
|
||||
icon="i-tabler-caret-right-filled"
|
||||
variant="solid"
|
||||
trailing
|
||||
@click="navigate"
|
||||
/>
|
||||
<UIcon
|
||||
name="i-ph-x"
|
||||
class="size-8 p-2 hover:opacity-80"
|
||||
@click.stop="open = false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const open = ref(true)
|
||||
const affiliateId = "UILIBPIC"
|
||||
const fullUrl = computed(
|
||||
() => `https://vueschool.io/the-vuejs-3-master-class?friend=${affiliateId}`
|
||||
)
|
||||
|
||||
const navigate = () => {
|
||||
window.open(fullUrl.value, "_blank")
|
||||
}
|
||||
</script>
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<UInput :model-value="modelValue" :placeholder="t('blog.searchPlaceholder')" icon="i-heroicons-magnifying-glass"
|
||||
size="lg" :ui="{ icon: { trailing: { pointer: '' } } }" @update:model-value="handleInput">
|
||||
size="lg" @update:model-value="handleInput">
|
||||
<template v-if="modelValue" #trailing>
|
||||
<UButton color="gray" variant="link" icon="i-heroicons-x-mark-20-solid" :padded="false" @click="clearSearch" />
|
||||
</template>
|
||||
|
||||
@@ -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>
|
||||
@@ -26,6 +26,12 @@ const shouldShowToc = computed(() => {
|
||||
return countLinks(props.toc.links) >= 3
|
||||
})
|
||||
|
||||
const setHashWithoutNavigation = (id: string) => {
|
||||
const url = new URL(window.location.href)
|
||||
url.hash = id
|
||||
window.history.replaceState(window.history.state, '', url.toString())
|
||||
}
|
||||
|
||||
// Smooth scroll to heading with offset for sticky header
|
||||
const scrollToHeading = (id: string) => {
|
||||
const element = document.getElementById(id)
|
||||
@@ -40,11 +46,28 @@ const scrollToHeading = (id: string) => {
|
||||
})
|
||||
|
||||
activeId.value = id
|
||||
setHashWithoutNavigation(id)
|
||||
}
|
||||
}
|
||||
|
||||
// Track active section with IntersectionObserver
|
||||
onMounted(() => {
|
||||
// Handle initial hash (avoid full page navigation / transition)
|
||||
const initialId = window.location.hash.replace(/^#/, '')
|
||||
if (initialId) {
|
||||
setTimeout(() => {
|
||||
const el = document.getElementById(initialId)
|
||||
if (!el) return
|
||||
|
||||
const offset = 100
|
||||
const elementPosition = el.getBoundingClientRect().top + window.pageYOffset
|
||||
const offsetPosition = elementPosition - offset
|
||||
|
||||
window.scrollTo({ top: offsetPosition, behavior: 'auto' })
|
||||
activeId.value = initialId
|
||||
}, 0)
|
||||
}
|
||||
|
||||
const headings = document.querySelectorAll('article h2, article h3, article h4')
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<footer class="py-10">
|
||||
<footer class=" pb-10 sm:pb-12">
|
||||
<UContainer>
|
||||
<div class="flex flex-col items-center gap-4 text-center text-sm text-gray-600 dark:text-gray-400">
|
||||
<ClientOnly>
|
||||
<NuxtImg :src="logoSrc" alt="Mahdium logo" width="64" height="64" class="h-12 w-12" format="png"
|
||||
loading="lazy" />
|
||||
<template #fallback>
|
||||
<NuxtImg src="/favicon/favicon.png" alt="Mahdium logo" width="64" height="64" class="h-12 w-12"
|
||||
format="png" loading="lazy" />
|
||||
<NuxtImg src="/favicon/favicon.png" alt="Mahdium logo" width="64" height="64" class="h-12 w-12" format="png"
|
||||
loading="lazy" />
|
||||
</template>
|
||||
</ClientOnly>
|
||||
<p>© {{ currentYear }}, <span class="font-semibold text-gray-900 dark:text-gray-100">Mahdium</span> -
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
<div class="flex items-center gap-2">
|
||||
<UTooltip :text="t('theme.mode.system')">
|
||||
<UButton :color="isModeActive('system') ? 'primary' : 'neutral'" variant="soft" size="sm" square
|
||||
class="cursor-pointer"
|
||||
:class="isModeActive('system') ? 'ring-1 ring-primary-400/40 bg-primary-500/10 dark:bg-primary-400/10' : ''"
|
||||
icon="i-twemoji-desktop-computer" :aria-label="t('theme.mode.system')"
|
||||
@click="setMode($event, 'system')" />
|
||||
@@ -25,12 +26,14 @@
|
||||
|
||||
<UTooltip :text="t('theme.mode.light')">
|
||||
<UButton :color="isModeActive('light') ? 'primary' : 'neutral'" variant="soft" size="sm" square
|
||||
class="cursor-pointer"
|
||||
:class="isModeActive('light') ? 'ring-1 ring-primary-400/40 bg-primary-500/10 dark:bg-primary-400/10' : ''"
|
||||
icon="i-twemoji-sun" :aria-label="t('theme.mode.light')" @click="setMode($event, 'light')" />
|
||||
</UTooltip>
|
||||
|
||||
<UTooltip :text="t('theme.mode.dark')">
|
||||
<UButton :color="isModeActive('dark') ? 'primary' : 'neutral'" variant="soft" size="sm" square
|
||||
class="cursor-pointer"
|
||||
:class="isModeActive('dark') ? 'ring-1 ring-primary-400/40 bg-primary-500/10 dark:bg-primary-400/10' : ''"
|
||||
icon="i-twemoji-crescent-moon" :aria-label="t('theme.mode.dark')" @click="setMode($event, 'dark')" />
|
||||
</UTooltip>
|
||||
@@ -44,7 +47,7 @@
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<UButton v-for="p in primaryItems" :key="p.key" :color="isPrimaryActive(p.key) ? 'primary' : 'neutral'"
|
||||
variant="soft" size="sm"
|
||||
:class="['justify-start', isPrimaryActive(p.key) ? 'ring-1 ring-primary-400/40 bg-primary-500/10 dark:bg-primary-400/10' : '']"
|
||||
:class="['cursor-pointer justify-start', isPrimaryActive(p.key) ? 'ring-1 ring-primary-400/40 bg-primary-500/10 dark:bg-primary-400/10' : '']"
|
||||
:aria-label="`Primary: ${p.label}`" @click="setPrimary($event, p.key)">
|
||||
<span class="inline-flex items-center gap-2">
|
||||
<span class="size-3 rounded-full" :class="colorClassMap[p.key]" />
|
||||
|
||||
@@ -12,7 +12,8 @@
|
||||
:class="[isActive('hero') ? activeClass : inactiveClass]" variant="soft" square icon="i-twemoji-house"
|
||||
:aria-label="t('nav.home')" @click="goTo('hero')" />
|
||||
</UTooltip>
|
||||
<button type="button" class="hidden lg:inline-flex text-sm font-medium transition-colors duration-200"
|
||||
<button type="button"
|
||||
class="hidden lg:inline-flex cursor-pointer text-sm font-medium transition-colors duration-200"
|
||||
:class="[isActive('hero') ? labelActiveClass : labelInactiveClass]" @click="goTo('hero')">
|
||||
{{ t('nav.home') }}
|
||||
</button>
|
||||
@@ -25,7 +26,8 @@
|
||||
:class="[isActive('skills') ? activeClass : inactiveClass]" variant="soft" square
|
||||
icon="i-twemoji-hammer-and-wrench" :aria-label="t('sections.skills')" @click="goTo('skills')" />
|
||||
</UTooltip>
|
||||
<button type="button" class="hidden lg:inline-flex text-sm font-medium transition-colors duration-200"
|
||||
<button type="button"
|
||||
class="hidden lg:inline-flex cursor-pointer text-sm font-medium transition-colors duration-200"
|
||||
:class="[isActive('skills') ? labelActiveClass : labelInactiveClass]" @click="goTo('skills')">
|
||||
{{ t('sections.skills') }}
|
||||
</button>
|
||||
@@ -38,7 +40,8 @@
|
||||
:class="[isActive('work') ? activeClass : inactiveClass]" variant="soft" square
|
||||
icon="i-twemoji-briefcase" :aria-label="t('sections.work')" @click="goTo('work')" />
|
||||
</UTooltip>
|
||||
<button type="button" class="hidden lg:inline-flex text-sm font-medium transition-colors duration-200"
|
||||
<button type="button"
|
||||
class="hidden lg:inline-flex cursor-pointer text-sm font-medium transition-colors duration-200"
|
||||
:class="[isActive('work') ? labelActiveClass : labelInactiveClass]" @click="goTo('work')">
|
||||
{{ t('sections.work') }}
|
||||
</button>
|
||||
@@ -51,7 +54,8 @@
|
||||
:class="[isActive('projects') ? activeClass : inactiveClass]" variant="soft" square
|
||||
icon="i-twemoji-rocket" :aria-label="t('sections.projects')" @click="goTo('projects')" />
|
||||
</UTooltip>
|
||||
<button type="button" class="hidden lg:inline-flex text-sm font-medium transition-colors duration-200"
|
||||
<button type="button"
|
||||
class="hidden lg:inline-flex cursor-pointer text-sm font-medium transition-colors duration-200"
|
||||
:class="[isActive('projects') ? labelActiveClass : labelInactiveClass]" @click="goTo('projects')">
|
||||
{{ t('sections.projects') }}
|
||||
</button>
|
||||
@@ -60,14 +64,15 @@
|
||||
<!-- Blog -->
|
||||
<div class="flex items-center gap-1.5">
|
||||
<UTooltip :text="t('sections.blog')">
|
||||
<NuxtLink :to="localePath('/blog')">
|
||||
<UButton class="cursor-pointer transition-all duration-200"
|
||||
:class="[isBlogActive ? activeClass : inactiveClass]" variant="soft" square icon="i-twemoji-memo"
|
||||
:aria-label="t('sections.blog')" />
|
||||
</NuxtLink>
|
||||
<NuxtLink :to="localePath('/blog')" class="cursor-pointer">
|
||||
<UButton class="cursor-pointer transition-all duration-200"
|
||||
:class="[isBlogActive ? activeClass : inactiveClass]" variant="soft" square icon="i-twemoji-memo"
|
||||
:aria-label="t('sections.blog')" />
|
||||
</NuxtLink>
|
||||
</UTooltip>
|
||||
<NuxtLink :to="localePath('/blog')">
|
||||
<button type="button" class="hidden lg:inline-flex text-sm font-medium transition-colors duration-200"
|
||||
<NuxtLink :to="localePath('/blog')" class="cursor-pointer">
|
||||
<button type="button"
|
||||
class="hidden lg:inline-flex cursor-pointer text-sm font-medium transition-colors duration-200"
|
||||
:class="[isBlogActive ? labelActiveClass : labelInactiveClass]">
|
||||
{{ t('sections.blog') }}
|
||||
</button>
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<UCard :ui="{
|
||||
base: 'my-6',
|
||||
body: { padding: 'p-4 sm:p-5' },
|
||||
ring: 'ring-2',
|
||||
divide: ''
|
||||
root: 'my-6 ring-2',
|
||||
body: 'p-4 sm:p-5'
|
||||
}" :class="cardClass">
|
||||
<div class="flex items-start gap-3">
|
||||
<UIcon :name="icon" :class="iconClass" class="mt-0.5 h-5 w-5 flex-shrink-0" />
|
||||
|
||||
@@ -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>
|
||||
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<section id="ai-stack" class="py-6 scroll-mt-20">
|
||||
<section id="ai-stack" class="section-spacing scroll-mt-20">
|
||||
<UContainer>
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="section-header flex-nowrap justify-between">
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<UIcon name="twemoji:robot" class="text-2xl" />
|
||||
<h2 class="text-lg font-semibold">{{ t('skills.aiStack') }}</h2>
|
||||
<h2 class="section-title">{{ t('skills.aiStack') }}</h2>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="ms-auto w-full md:w-auto flex flex-row-reverse items-center gap-1 overflow-x-auto no-scrollbar whitespace-nowrap px-1 py-1"
|
||||
class="ms-auto flex flex-row-reverse items-center gap-1 overflow-x-auto no-scrollbar whitespace-nowrap px-1 py-1 min-w-0"
|
||||
role="toolbar" aria-label="AI Stack group filters">
|
||||
<UButton :icon="filterButtonIcon" size="xs" :variant="filterButtonVariant" :color="filterButtonColor"
|
||||
class="filter-toggle rounded-full shrink-0 mx-1"
|
||||
class="filter-toggle cursor-pointer rounded-full shrink-0 mx-1"
|
||||
:class="{ 'is-open': filtersOpen, 'has-selection': hasSelection }" :aria-label="filterButtonLabel"
|
||||
:aria-expanded="hasSelection ? undefined : filtersOpen" aria-controls="ai-group-filter-group"
|
||||
@click="handlePrimaryAction" />
|
||||
@@ -23,7 +23,7 @@
|
||||
<UTooltip :text="opt.label" :arrow="true" :delay-duration="0.5"
|
||||
:content="{ side: 'bottom', sideOffset: 8, collisionPadding: 12 }">
|
||||
<UButton :icon="opt.icon" size="xs" :variant="isSelected(opt.value) ? 'solid' : 'soft'"
|
||||
color="primary" class="rounded-full shrink-0" :aria-pressed="isSelected(opt.value)"
|
||||
color="primary" class="cursor-pointer rounded-full shrink-0" :aria-pressed="isSelected(opt.value)"
|
||||
:aria-label="`Filter by ${opt.label}`" :title="opt.label" @click="toggleGroup(opt.value)" />
|
||||
</UTooltip>
|
||||
</div>
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<section class="py-6">
|
||||
<section class="section-spacing">
|
||||
<UContainer>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="section-header">
|
||||
<UIcon name="i-twemoji-graduation-cap" class="text-2xl" />
|
||||
<h2 class="text-lg font-semibold text-start">{{ t('sections.education') }}</h2>
|
||||
<h2 class="section-title text-start">{{ t('sections.education') }}</h2>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<UCard v-for="(edu, i) in portfolio.education" :key="i"
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<section class="py-6">
|
||||
<section class="section-spacing">
|
||||
<UContainer>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="section-header">
|
||||
<UIcon name="i-twemoji-briefcase" class="text-2xl" />
|
||||
<h2 class="text-lg font-semibold text-start">{{ t('sections.work') }}</h2>
|
||||
<h2 class="section-title text-start">{{ t('sections.work') }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
|
||||
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<section id="github-activity" class="section-spacing scroll-mt-20">
|
||||
<UContainer>
|
||||
<!-- Section Header (consistent with other sections) -->
|
||||
<div class="section-header">
|
||||
<UIcon name="i-twemoji-chart-increasing" class="text-2xl" />
|
||||
<h2 class="section-title">{{ t('sections.githubActivity') }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="flex items-center justify-center py-20">
|
||||
<UIcon name="i-mdi-loading" class="animate-spin text-4xl text-primary-500" />
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div v-else-if="error" class="text-center py-20">
|
||||
<UIcon name="i-mdi-alert-circle" class="text-5xl text-red-500 mb-3" />
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
{{ t('portfolio.githubActivity.error') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
</UAccordion>
|
||||
</UContainer>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
||||
import type { GitHubContributionCalendar, GitHubContributionDay } from '@/types/github'
|
||||
|
||||
const { t } = useI18n()
|
||||
const { fetchContributions } = useGitHubContributions()
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
username: string
|
||||
}
|
||||
|
||||
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 => {
|
||||
if (count === 0) return 'contrib-level-0'
|
||||
if (count <= 3) return 'contrib-level-1'
|
||||
if (count <= 6) return 'contrib-level-2'
|
||||
if (count <= 9) return 'contrib-level-3'
|
||||
return 'contrib-level-4'
|
||||
}
|
||||
|
||||
// Legend classes array for v-for
|
||||
const legendClasses = [
|
||||
'contrib-level-0',
|
||||
'contrib-level-1',
|
||||
'contrib-level-2',
|
||||
'contrib-level-3',
|
||||
'contrib-level-4',
|
||||
]
|
||||
|
||||
// Format date for hover display (full format like "Monday, October 6, 2025")
|
||||
const formatDateFull = (dateStr: string): string => {
|
||||
const date = new Date(dateStr)
|
||||
return date.toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
})
|
||||
}
|
||||
|
||||
// Generate month labels
|
||||
const monthLabels = computed(() => {
|
||||
if (!calendar.value?.weeks) return []
|
||||
|
||||
const totalWeeks = calendar.value.weeks.length
|
||||
const labels: Array<{ name: string; width: number }> = []
|
||||
let currentMonth = -1
|
||||
let startWeek = 0
|
||||
|
||||
calendar.value.weeks.forEach((week, index) => {
|
||||
const firstDay = week.contributionDays[0]
|
||||
if (!firstDay) return
|
||||
|
||||
const date = new Date(firstDay.date)
|
||||
const month = date.getMonth()
|
||||
|
||||
if (month !== currentMonth) {
|
||||
if (currentMonth !== -1) {
|
||||
const monthName = new Date(2024, currentMonth).toLocaleDateString('en-US', { month: 'short' })
|
||||
const weeksInMonth = index - startWeek
|
||||
labels.push({
|
||||
name: monthName,
|
||||
width: (weeksInMonth / totalWeeks) * 100
|
||||
})
|
||||
}
|
||||
currentMonth = month
|
||||
startWeek = index
|
||||
}
|
||||
})
|
||||
|
||||
// Add last month
|
||||
if (currentMonth !== -1) {
|
||||
const monthName = new Date(2024, currentMonth).toLocaleDateString('en-US', { month: 'short' })
|
||||
const weeksInMonth = calendar.value.weeks.length - startWeek
|
||||
labels.push({
|
||||
name: monthName,
|
||||
width: (weeksInMonth / totalWeeks) * 100
|
||||
})
|
||||
}
|
||||
|
||||
return labels
|
||||
})
|
||||
|
||||
// Fetch data on mount
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const data = await fetchContributions(props.username)
|
||||
if (data) {
|
||||
calendar.value = data
|
||||
} else {
|
||||
error.value = true
|
||||
}
|
||||
} catch (e) {
|
||||
error.value = true
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -10,23 +10,45 @@
|
||||
{{ portfolio.profile.summary }}
|
||||
</p>
|
||||
<div v-if="portfolio.profile.location || currentRole"
|
||||
class="mb-6 flex flex-col items-center gap-2 text-sm text-gray-600 dark:text-gray-300 sm:items-start">
|
||||
class="mb-6 flex flex-col items-center gap-3 text-sm text-gray-600 dark:text-gray-300 sm:items-start">
|
||||
<div v-if="portfolio.profile.location" class="flex items-center gap-2">
|
||||
<UIcon name="i-twemoji-round-pushpin" class="text-base text-primary-600 me-1 dark:text-primary-300" />
|
||||
<span class="leading-relaxed">{{ portfolio.profile.location }}</span>
|
||||
</div>
|
||||
<div v-if="currentRole" class="flex items-center gap-1 text-base text-gray-700 dark:text-gray-200">
|
||||
<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">
|
||||
<a v-if="currentRole.companyLink" :href="currentRole.companyLink" target="_blank" rel="noopener"
|
||||
class="hover:underline text-primary-600 dark:text-primary-300">
|
||||
{{ currentRole.company }}
|
||||
</a>
|
||||
<span v-else>{{ currentRole.company }}</span>
|
||||
</span>
|
||||
<div v-if="currentRole"
|
||||
class="flex flex-col sm:flex-row items-center justify-center sm:justify-between w-full gap-2 text-base text-gray-700 dark:text-gray-200 text-center sm:text-left">
|
||||
<div class="flex flex-wrap items-center justify-center sm:justify-start gap-1">
|
||||
<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 company-name">
|
||||
<a v-if="currentRole.companyLink" :href="currentRole.companyLink" target="_blank" rel="noopener"
|
||||
class="hover:underline company-name">
|
||||
{{ currentRole.company }}
|
||||
</a>
|
||||
<span v-else>{{ currentRole.company }}</span>
|
||||
</span>
|
||||
</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
|
||||
resume-button
|
||||
text-white rounded-full
|
||||
transition-all duration-300 hover:scale-105
|
||||
animate-pulse hover:animate-none">
|
||||
<UIcon name="i-heroicons-document-text" class="text-lg" />
|
||||
<span>View Resume</span>
|
||||
<UIcon name="i-heroicons-sparkles" class="text-sm opacity-80" />
|
||||
</NuxtLink>
|
||||
</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
|
||||
resume-button
|
||||
text-white rounded-full
|
||||
transition-all duration-300 hover:scale-105">
|
||||
<UIcon name="i-heroicons-document-text" class="text-base" />
|
||||
<span>View My Resume</span>
|
||||
<UIcon name="i-heroicons-arrow-right" class="text-sm" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center justify-center gap-3 sm:justify-start">
|
||||
<ClientTooltip :text="emailTooltip">
|
||||
@@ -187,3 +209,52 @@ async function copyEmail() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.company-name {
|
||||
color: var(--ui-color-primary-600);
|
||||
}
|
||||
|
||||
.dark .company-name {
|
||||
color: var(--ui-color-primary-300);
|
||||
}
|
||||
|
||||
/* Resume button with primary color gradient */
|
||||
.resume-button {
|
||||
background: linear-gradient(to right,
|
||||
var(--ui-color-primary-600),
|
||||
var(--ui-color-primary-500),
|
||||
var(--ui-color-primary-400));
|
||||
box-shadow: 0 10px 15px -3px color-mix(in oklch, var(--ui-color-primary-500) 25%, transparent);
|
||||
}
|
||||
|
||||
.resume-button:hover {
|
||||
background: linear-gradient(to right,
|
||||
var(--ui-color-primary-700),
|
||||
var(--ui-color-primary-600),
|
||||
var(--ui-color-primary-500));
|
||||
box-shadow: 0 20px 25px -5px color-mix(in oklch, var(--ui-color-primary-500) 40%, transparent);
|
||||
}
|
||||
|
||||
/* 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>
|
||||
|
||||
@@ -1,71 +1,66 @@
|
||||
<template>
|
||||
<section class="py-6">
|
||||
<section class="section-spacing">
|
||||
<UContainer>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="section-header flex-nowrap items-center gap-3 justify-start">
|
||||
<UIcon name="i-twemoji-globe-showing-europe-africa" class="text-2xl" />
|
||||
<h2 class="text-lg font-semibold">{{ t('sections.language') }}</h2>
|
||||
<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',
|
||||
@@ -78,8 +73,25 @@ const items = computed(() => [
|
||||
key: 'ttc',
|
||||
iconType: 'icon' as const,
|
||||
icon: 'i-twemoji-globe-with-meridians',
|
||||
title: t('languageSection.items.ttc.title'),
|
||||
description: t('languageSection.items.ttc.desc'),
|
||||
title: t('languageSection.items.huawei.title'),
|
||||
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>
|
||||
|
||||
@@ -1,79 +1,116 @@
|
||||
<template>
|
||||
<section id="projects" class="py-6 scroll-mt-20">
|
||||
<section id="projects" class="section-spacing scroll-mt-20">
|
||||
<UContainer>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="section-header">
|
||||
<UIcon name="i-twemoji-rocket" class="text-2xl" />
|
||||
<h2 class="text-lg font-semibold text-start">{{ t('sections.projects') }}</h2>
|
||||
<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-6">
|
||||
<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)
|
||||
})
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<section ref="sectionEl" class="py-8" v-if="recs.length > 0">
|
||||
<section ref="sectionEl" class="section-spacing">
|
||||
<UContainer>
|
||||
<div class="flex flex-wrap items-center gap-3 mb-8">
|
||||
<div class="section-header">
|
||||
<!-- <div
|
||||
class="p-2 rounded-lg bg-gradient-to-br from-blue-500/10 to-indigo-500/10 dark:from-blue-400/20 dark:to-indigo-400/20">
|
||||
</div> -->
|
||||
<div class="flex items-center gap-3 flex-1 min-w-0">
|
||||
<UIcon name="i-twemoji-left-speech-bubble" class="text-2xl" />
|
||||
<h2 class="text-2xl font-bold flex items-center gap-2 truncate">
|
||||
<h2 class="section-title flex items-center gap-2 truncate">
|
||||
<span>{{ t('sections.recommendations') }}</span>
|
||||
</h2>
|
||||
</div>
|
||||
@@ -111,7 +111,7 @@ const sectionEl = ref<HTMLElement | null>(null)
|
||||
const hasEntered = ref(false)
|
||||
const reduceMotion = import.meta.client ? usePreferredReducedMotion() : ref<'no-preference'>('no-preference')
|
||||
const carouselUi = {
|
||||
root: 'relative overflow-hidden pb-12 select-none',
|
||||
root: 'relative overflow-hidden select-none',
|
||||
viewport: 'overflow-visible',
|
||||
container: 'py-2 !ms-0 gap-3 ps-3 sm:ps-4 pe-3 sm:pe-4 items-stretch',
|
||||
item: 'basis-full sm:basis-1/2 lg:basis-1/3 flex',
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div
|
||||
class="ms-auto w-full md:w-auto flex flex-row-reverse items-center gap-1 overflow-x-auto no-scrollbar whitespace-nowrap px-1 py-1"
|
||||
class="ms-auto flex flex-row-reverse items-center gap-1 overflow-x-auto no-scrollbar whitespace-nowrap px-1 py-1 min-w-0"
|
||||
role="toolbar" aria-label="Skill filters">
|
||||
<UButton :icon="filterButtonIcon" size="xs" :variant="filterButtonVariant" :color="filterButtonColor"
|
||||
class="filter-toggle rounded-full shrink-0 mx-1"
|
||||
class="filter-toggle cursor-pointer rounded-full shrink-0 mx-1"
|
||||
:class="{ 'is-open': filtersOpen, 'has-selection': hasSelection }" :aria-label="filterButtonLabel"
|
||||
:aria-expanded="hasSelection ? undefined : filtersOpen" aria-controls="skill-filter-group"
|
||||
@click="handlePrimaryAction" />
|
||||
@@ -15,7 +15,7 @@
|
||||
<UTooltip :text="meta(type).label" :arrow="true" :delay-duration="0.5"
|
||||
:content="{ side: 'bottom', sideOffset: 8, collisionPadding: 12 }">
|
||||
<UButton :icon="meta(type).icon" size="xs" :variant="isSelected(type) ? 'solid' : 'soft'" color="primary"
|
||||
class="rounded-full shrink-0" :aria-pressed="isSelected(type)"
|
||||
class="cursor-pointer rounded-full shrink-0" :aria-pressed="isSelected(type)"
|
||||
:aria-label="`Filter by ${meta(type).label}`" :title="meta(type).label" @click="toggle(type)" />
|
||||
</UTooltip>
|
||||
</div>
|
||||
|
||||
@@ -1,59 +1,52 @@
|
||||
<template>
|
||||
<section id="skills" class="py-6 scroll-mt-20">
|
||||
<section id="skills" class="section-spacing scroll-mt-20">
|
||||
<UContainer>
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="section-header flex-nowrap justify-between">
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<UIcon name="i-twemoji-hammer-and-wrench" class="text-2xl" />
|
||||
<h2 class="text-lg font-semibold">{{ t('sections.skills') }}</h2>
|
||||
<h2 class="section-title">{{ t('sections.skills') }}</h2>
|
||||
</div>
|
||||
<SkillFilters v-model="selectedTypes" />
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{{
|
||||
t('skills.expert') }}</h3>
|
||||
</template>
|
||||
<SkillGrid :items="filteredExpert" />
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{{
|
||||
t('skills.proficient') }}</h3>
|
||||
</template>
|
||||
<SkillGrid :items="filteredProficient" />
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{{
|
||||
t('skills.usedBefore') }}</h3>
|
||||
</template>
|
||||
<SkillGrid :items="filteredUsedBefore" />
|
||||
</UCard>
|
||||
|
||||
<UCard v-if="showAiStack" class="md:col-span-3">
|
||||
<template #header>
|
||||
<h3 class="text-sm font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">{{
|
||||
t('skills.aiStack') }}</h3>
|
||||
</template>
|
||||
<SkillGrid :items="aiStack" />
|
||||
</UCard>
|
||||
</div>
|
||||
<UAccordion type="multiple" :unmount-on-hide="false" :items="skillSections" :default-value="openSkillSections"
|
||||
: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>
|
||||
<template #body="{ item }">
|
||||
<SkillGrid :items="sectionItems[item.value as SkillSectionKey] || []" />
|
||||
</template>
|
||||
</UAccordion>
|
||||
</UContainer>
|
||||
</section>
|
||||
</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, aiStack } from '@/data/skills'
|
||||
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
|
||||
const selectedTypes = ref<SkillType[]>([])
|
||||
|
||||
@@ -66,5 +59,29 @@ const filteredExpert = computed(() => filterByType(expert))
|
||||
const filteredProficient = computed(() => filterByType(proficient))
|
||||
const filteredUsedBefore = computed(() => filterByType(usedBefore))
|
||||
|
||||
const showAiStack = false
|
||||
const sectionItems = computed<Record<SkillSectionKey, Tag[]>>(() => ({
|
||||
expert: filteredExpert.value,
|
||||
proficient: filteredProficient.value,
|
||||
usedBefore: filteredUsedBefore.value
|
||||
}))
|
||||
|
||||
const skillSections = computed(() => ([
|
||||
{ label: t('skills.expert'), value: 'expert', icon: 'i-twemoji-military-medal' },
|
||||
{ label: t('skills.proficient'), value: 'proficient', icon: 'i-twemoji-rocket' },
|
||||
{ label: t('skills.usedBefore'), value: 'usedBefore', icon: 'i-twemoji-toolbox' }
|
||||
]))
|
||||
|
||||
const openSkillSections = computed(() => skillSections.value.map(section => section.value))
|
||||
|
||||
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 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 md:hidden',
|
||||
content: 'px-4 pb-4 pt-1 data-[state=closed]:hidden',
|
||||
body: 'pt-1'
|
||||
} as const
|
||||
</script>
|
||||
|
||||
@@ -1,30 +1,36 @@
|
||||
<template>
|
||||
<section class="py-6">
|
||||
<section class="section-spacing">
|
||||
<UContainer>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="section-header flex-nowrap items-center gap-3 justify-start">
|
||||
<UIcon name="i-twemoji-brain" class="text-2xl" />
|
||||
<h2 class="text-lg font-semibold">{{ t('sections.softSkills') }}</h2>
|
||||
<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'
|
||||
@@ -34,7 +40,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' },
|
||||
@@ -48,7 +68,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,
|
||||
@@ -58,4 +77,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>
|
||||
|
||||
@@ -1,38 +1,43 @@
|
||||
<template>
|
||||
<section id="work" class="py-6 scroll-mt-20">
|
||||
<section id="work" class="section-spacing scroll-mt-20">
|
||||
<UContainer>
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="section-header">
|
||||
<UIcon name="i-twemoji-briefcase" class="text-2xl" />
|
||||
<h2 class="text-lg font-semibold">{{ t('sections.work') }}</h2>
|
||||
<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}` : ''}`,
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import type { Skill } from '~/types/resume'
|
||||
|
||||
interface Props {
|
||||
skills: Skill[]
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="mb-12 print:mb-12">
|
||||
<h2
|
||||
class="text-base font-bold text-blue-700 uppercase border-b-2 border-blue-600 pb-2 mb-6 print:mb-6 tracking-wide">
|
||||
Skills & Qualifications
|
||||
</h2>
|
||||
|
||||
<!-- Technical Skills (categorized) -->
|
||||
<div v-if="skills?.length">
|
||||
<div class="space-y-3 print:space-y-3">
|
||||
<div v-for="skill in skills" :key="skill.name" class="text-sm">
|
||||
<span class="font-bold text-gray-900">{{ skill.name }}: </span><span class="text-gray-700">{{
|
||||
skill.keywords.join(', ') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
isPrintMode?: boolean
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const { isGenerating, downloadPdf } = useResumePdf()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton v-if="!isPrintMode" icon="i-heroicons-arrow-down-tray" size="lg" color="primary" :loading="isGenerating"
|
||||
:disabled="isGenerating" class="fixed bottom-6 right-6 shadow-lg no-print z-50" @click="downloadPdf">
|
||||
<span class="hidden sm:inline">Download PDF</span>
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script setup lang="ts">
|
||||
import type { Education } from '~/types/resume'
|
||||
|
||||
interface Props {
|
||||
education: Education[]
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
const { formatDate } = useResumeData()
|
||||
|
||||
function formatDateRange(start: string, end?: string): string {
|
||||
const startFormatted = formatDate(start)
|
||||
const endFormatted = end ? formatDate(end) : 'Present'
|
||||
return `${startFormatted} - ${endFormatted}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="mb-12 print:mb-12">
|
||||
<h2
|
||||
class="text-base font-bold text-blue-700 uppercase border-b-2 border-blue-600 pb-2 mb-6 print:mb-6 tracking-wide">
|
||||
Education
|
||||
</h2>
|
||||
|
||||
<div v-for="edu in education" :key="edu.institution + edu.startDate" class="mb-4 last:mb-0 print:mb-4">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-gray-900">{{ edu.studyType }} in {{ edu.area }}</h3>
|
||||
<p class="text-sm font-medium text-gray-600">{{ edu.institution }}</p>
|
||||
</div>
|
||||
<span class="text-sm text-gray-500 whitespace-nowrap font-medium">
|
||||
{{ formatDateRange(edu.startDate, edu.endDate) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,64 @@
|
||||
<script setup lang="ts">
|
||||
import type { WorkExperience } from '~/types/resume'
|
||||
import { parseMarkdownBold } from '~/composables/useMarkdownText'
|
||||
|
||||
interface Props {
|
||||
work: WorkExperience[]
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const { formatDate } = useResumeData()
|
||||
|
||||
const sortedWork = computed(() => {
|
||||
return [...props.work].sort((a, b) => {
|
||||
const dateA = a.startDate || ''
|
||||
const dateB = b.startDate || ''
|
||||
return dateB.localeCompare(dateA)
|
||||
})
|
||||
})
|
||||
|
||||
function formatDateRange(start: string, end?: string): string {
|
||||
const startFormatted = formatDate(start)
|
||||
const endFormatted = end ? formatDate(end) : 'Present'
|
||||
return `${startFormatted} - ${endFormatted}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="mb-12 print:mb-12">
|
||||
<h2
|
||||
class="text-base font-bold text-blue-700 uppercase border-b-2 border-blue-600 pb-2 mb-6 print:mb-6 tracking-wide">
|
||||
Work Experience
|
||||
</h2>
|
||||
|
||||
<div v-for="job in sortedWork" :key="job.company + job.startDate" class="mb-8 last:mb-0 print:mb-8">
|
||||
<div class="flex justify-between items-start gap-4">
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="text-sm font-bold text-gray-900 break-words hyphens-none">{{ job.position }}</h3>
|
||||
<p class="text-sm font-medium text-gray-600">{{ job.company }}</p>
|
||||
</div>
|
||||
<span class="text-sm text-gray-500 whitespace-nowrap flex-shrink-0 font-medium">
|
||||
{{ formatDateRange(job.startDate, job.endDate) }}
|
||||
</span>
|
||||
</div>
|
||||
<ul class="mt-4 space-y-2.5 print:mt-4 print:space-y-2.5">
|
||||
<li v-for="(highlight, idx) in job.highlights" :key="idx"
|
||||
class="text-sm text-gray-700 pl-4 relative before:content-['•'] before:absolute before:left-0 before:text-gray-500 before:font-bold print:before:text-gray-500 break-words hyphens-none leading-relaxed"
|
||||
v-html="parseMarkdownBold(highlight)" />
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.hyphens-none {
|
||||
hyphens: none;
|
||||
-webkit-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
}
|
||||
|
||||
.break-words {
|
||||
word-break: normal;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<script setup lang="ts">
|
||||
import type { ResumeBasics } from '~/types/resume'
|
||||
|
||||
interface Props {
|
||||
basics: ResumeBasics
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex gap-6 mb-8 print:mb-8 print:pb-2">
|
||||
<!-- Profile Photo (if provided) -->
|
||||
<div v-if="basics.image" class="flex-shrink-0">
|
||||
<img :src="basics.image" :alt="basics.name" class="w-32 h-32 object-cover rounded-full print:w-24 print:h-24" />
|
||||
</div>
|
||||
|
||||
<!-- Name + Contact Info -->
|
||||
<div class="flex-1">
|
||||
<h1 class="text-3xl font-bold text-gray-900 print:text-xl print:mb-0.5">{{ basics.name }}</h1>
|
||||
<p class="text-xl text-gray-600 mt-1 print:text-base print:mt-0">{{ basics.label }}</p>
|
||||
|
||||
<!-- Line 1: Location, Phone, Email, LinkedIn, GitHub -->
|
||||
<div class="mt-3 flex flex-wrap gap-x-4 gap-y-1.5 text-sm text-gray-700 print:mt-2 print:text-xs print:gap-x-4">
|
||||
<!-- Location -->
|
||||
<span class="inline-flex items-center gap-1.5 whitespace-nowrap">
|
||||
<UIcon name="i-heroicons-map-pin" class="text-red-500 flex-shrink-0 w-4 h-4" />
|
||||
{{ basics.location.city }}, {{ basics.location.country }}
|
||||
</span>
|
||||
|
||||
<!-- Phone -->
|
||||
<a :href="`tel:${basics.phone}`"
|
||||
class="inline-flex items-center gap-1.5 hover:text-blue-600 transition-colors whitespace-nowrap">
|
||||
<UIcon name="i-heroicons-phone" class="text-green-600 flex-shrink-0 w-4 h-4" />
|
||||
{{ basics.phone }}
|
||||
</a>
|
||||
|
||||
<!-- Email -->
|
||||
<a :href="`mailto:${basics.email}`"
|
||||
class="inline-flex items-center gap-1.5 hover:text-blue-600 transition-colors whitespace-nowrap">
|
||||
<UIcon name="i-heroicons-envelope" class="text-amber-500 flex-shrink-0 w-4 h-4" />
|
||||
{{ basics.email }}
|
||||
</a>
|
||||
|
||||
<!-- LinkedIn -->
|
||||
<a v-if="basics.profiles?.find(p => p.network === 'LinkedIn')"
|
||||
:href="basics.profiles.find(p => p.network === 'LinkedIn')!.url" target="_blank"
|
||||
class="inline-flex items-center gap-1.5 hover:text-blue-600 transition-colors whitespace-nowrap">
|
||||
<UIcon name="i-mdi-linkedin" class="text-[#0A66C2] flex-shrink-0 w-4 h-4" />
|
||||
LinkedIn
|
||||
</a>
|
||||
|
||||
<!-- GitHub -->
|
||||
<a v-if="basics.profiles?.find(p => p.network === 'GitHub')"
|
||||
:href="basics.profiles.find(p => p.network === 'GitHub')!.url" target="_blank"
|
||||
class="inline-flex items-center gap-1.5 hover:text-blue-600 transition-colors whitespace-nowrap">
|
||||
<UIcon name="i-mdi-github" class="text-gray-800 flex-shrink-0 w-4 h-4" />
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Line 2: Website Only - Larger & Bolder -->
|
||||
<div class="mt-1.5 flex items-center print:mt-1.5">
|
||||
<!-- Website (Portfolio) - Prominent Display -->
|
||||
<a v-if="basics.profiles?.find(p => p.network === 'Portfolio')"
|
||||
:href="basics.profiles.find(p => p.network === 'Portfolio')!.url" target="_blank"
|
||||
class="inline-flex items-center gap-1.5 text-md font-bold text-blue-600 hover:text-blue-700 transition-colors print:text-md print:font-bold">
|
||||
<UIcon name="i-heroicons-globe-alt" class="text-blue-600 flex-shrink-0 w-4 h-4 print:w-4 print:h-4" />
|
||||
Website
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
import type { Language, Certification } from '~/types/resume'
|
||||
|
||||
interface Props {
|
||||
languages?: Language[]
|
||||
certifications?: Certification[]
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="mb-12 print:mb-12">
|
||||
<h2
|
||||
class="text-base font-bold text-blue-700 uppercase border-b-2 border-blue-600 pb-2 mb-6 print:mb-6 tracking-wide">
|
||||
Languages & Certifications
|
||||
</h2>
|
||||
|
||||
<!-- Languages -->
|
||||
<div v-if="languages?.length" class="mb-2 print:mb-2">
|
||||
<span class="text-sm font-bold text-gray-900">Languages: </span>
|
||||
<span class="text-sm text-gray-700">
|
||||
<template v-for="(lang, idx) in languages" :key="lang.language">
|
||||
{{ lang.language }} ({{ lang.fluency }})<template v-if="idx < languages.length - 1">, </template>
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Certifications -->
|
||||
<div v-if="certifications?.length">
|
||||
<span class="text-sm font-bold text-gray-900">Certifications: </span>
|
||||
<span class="text-sm text-gray-700">
|
||||
<template v-for="(cert, idx) in certifications" :key="cert.name">
|
||||
{{ cert.issuer }} - {{ cert.summary }}<template v-if="idx < certifications.length - 1">, </template>
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
const { resume } = useResumeData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="resume-wrapper">
|
||||
<!-- A4 Container -->
|
||||
<div class="resume-container">
|
||||
<!-- Single-column vertical stack -->
|
||||
<div class="resume-content">
|
||||
<!-- Header with Photo + Name + Contact -->
|
||||
<ResumeHeader :basics="resume.basics" />
|
||||
|
||||
<!-- Summary -->
|
||||
<ResumeSummary :summary="resume.basics.summary" />
|
||||
|
||||
<!-- Skills & Qualifications -->
|
||||
<ResumeAdditionalInfo :skills="resume.skills" />
|
||||
|
||||
<!-- Experience -->
|
||||
<ResumeExperience :work="resume.work" />
|
||||
|
||||
<!-- Education -->
|
||||
<ResumeEducation :education="resume.education" />
|
||||
|
||||
<!-- Languages & Certifications -->
|
||||
<ResumeLanguages :languages="resume.languages" :certifications="resume.certificates" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.resume-wrapper {
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 2rem 1rem;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.resume-container {
|
||||
background: white;
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
width: 210mm;
|
||||
max-width: 210mm;
|
||||
}
|
||||
|
||||
.resume-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem !important;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.resume-wrapper {
|
||||
background: white !important;
|
||||
padding: 0 !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.resume-container {
|
||||
width: 210mm !important;
|
||||
max-width: none !important;
|
||||
box-shadow: none !important;
|
||||
border: none !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.resume-content {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
* {
|
||||
print-color-adjust: exact;
|
||||
-webkit-print-color-adjust: exact;
|
||||
hyphens: none !important;
|
||||
-webkit-hyphens: none !important;
|
||||
}
|
||||
|
||||
section {
|
||||
break-inside: avoid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import { parseMarkdownBold } from '~/composables/useMarkdownText'
|
||||
|
||||
interface Props {
|
||||
summary: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const parsedSummary = computed(() => parseMarkdownBold(props.summary))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="mb-12 print:mb-12">
|
||||
<h2
|
||||
class="text-base font-bold text-blue-700 uppercase border-b-2 border-blue-600 pb-2 mb-5 print:mb-5 tracking-wide">
|
||||
Summary
|
||||
</h2>
|
||||
<p class="text-sm text-gray-800 leading-loose print:leading-loose" v-html="parsedSummary" />
|
||||
</section>
|
||||
</template>
|
||||
@@ -0,0 +1,33 @@
|
||||
import type { GitHubApiResponse, GitHubContributionCalendar } from '@/types/github'
|
||||
|
||||
/**
|
||||
* Composable for fetching GitHub contribution calendar data
|
||||
* Based on: https://github.com/yuichkun/github-contribution-graph-example
|
||||
* Uses server-side API to avoid CORS and token exposure issues
|
||||
*/
|
||||
export const useGitHubContributions = () => {
|
||||
const fetchContributions = async (username: string): Promise<GitHubContributionCalendar | null> => {
|
||||
try {
|
||||
// Use our server API endpoint instead of calling GitHub directly
|
||||
const response = await $fetch<GitHubApiResponse>('/api/github/contributions', {
|
||||
params: { username }
|
||||
})
|
||||
|
||||
// Extract contribution calendar from response
|
||||
// Structure: { data: { user: { contributionsCollection: { contributionCalendar: {...} } } } }
|
||||
if (response?.data?.user?.contributionsCollection?.contributionCalendar) {
|
||||
return response.data.user.contributionsCollection.contributionCalendar
|
||||
}
|
||||
|
||||
console.error('Invalid response structure:', response)
|
||||
return null
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch GitHub contributions:', error)
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
fetchContributions
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* Utility function for parsing simple markdown bold syntax (**text**) to HTML
|
||||
* Used in resume components to highlight important keywords
|
||||
* SSR-compatible - works on both server and client
|
||||
*/
|
||||
|
||||
/**
|
||||
* Converts **text** to <strong>text</strong>
|
||||
*/
|
||||
export function parseMarkdownBold(text: string): string {
|
||||
if (!text) return ''
|
||||
return text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
|
||||
}
|
||||
|
||||
/**
|
||||
* Composable wrapper for Vue components
|
||||
*/
|
||||
export function useMarkdownText() {
|
||||
return {
|
||||
parseMarkdownBold,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
/**
|
||||
* Resume Data Composable
|
||||
* Provides reactive access to resume data and helper functions
|
||||
*/
|
||||
|
||||
import { computed } from 'vue'
|
||||
import { resumeData } from '~/data/resume.en'
|
||||
|
||||
export function useResumeData() {
|
||||
// Reactive reference to resume data
|
||||
const resume = computed(() => resumeData)
|
||||
|
||||
function getCurrentMonthYearTag(): string {
|
||||
const now = new Date()
|
||||
const year = now.getFullYear()
|
||||
const monthName = now.toLocaleString('en-US', { month: 'long' })
|
||||
return `${monthName.replace(/\s+/g, '')}_${year}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Format YYYY-MM date string to readable format
|
||||
* @param date - Date string in YYYY-MM format (e.g., "2023-01")
|
||||
* @param locale - Locale for formatting (default: 'en')
|
||||
* @returns Formatted date string (e.g., "Jan 2023")
|
||||
*/
|
||||
function formatDate(date: string, locale: string = 'en'): string {
|
||||
if (!date) return ''
|
||||
|
||||
const [year, month] = date.split('-')
|
||||
const dateObj = new Date(Number(year), Number(month) - 1)
|
||||
|
||||
const monthName = dateObj.toLocaleDateString(locale, { month: 'short' })
|
||||
return `${monthName} ${year}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Get full name from resume data
|
||||
* @returns Full name
|
||||
*/
|
||||
function getFullName(): string {
|
||||
return resumeData.basics.name
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate PDF filename from resume data
|
||||
* Best practice: include a stable date tag so recipients can distinguish versions.
|
||||
* @returns Filename in format "FirstName_LastName_Resume_December_2025.pdf"
|
||||
*/
|
||||
function getPdfFilename(): string {
|
||||
const name = resumeData.basics.name
|
||||
const filename = name.replace(/\s+/g, '_')
|
||||
return `${filename}_Resume_${getCurrentMonthYearTag()}.pdf`
|
||||
}
|
||||
|
||||
return {
|
||||
resume,
|
||||
formatDate,
|
||||
getFullName,
|
||||
getPdfFilename,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* PDF Download Composable
|
||||
* Handles PDF generation with preview in new tab
|
||||
*/
|
||||
|
||||
export function useResumePdf() {
|
||||
const isGenerating = ref(false)
|
||||
const { getPdfFilename } = useResumeData()
|
||||
|
||||
// Open PDF in new tab for preview (user can download from there)
|
||||
async function openPdf() {
|
||||
if (isGenerating.value) return
|
||||
|
||||
isGenerating.value = true
|
||||
|
||||
try {
|
||||
const filename = getPdfFilename()
|
||||
// Opens PDF in browser's built-in viewer
|
||||
window.open(`/api/resume/pdf?filename=${encodeURIComponent(filename)}`, '_blank')
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500))
|
||||
} finally {
|
||||
isGenerating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Force download PDF directly
|
||||
async function downloadPdf() {
|
||||
if (isGenerating.value) return
|
||||
|
||||
isGenerating.value = true
|
||||
|
||||
try {
|
||||
const filename = getPdfFilename()
|
||||
// download=true forces attachment header
|
||||
window.open(`/api/resume/pdf?filename=${encodeURIComponent(filename)}&download=true`, '_blank')
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500))
|
||||
} finally {
|
||||
isGenerating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
isGenerating,
|
||||
openPdf,
|
||||
downloadPdf,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,259 @@
|
||||
/**
|
||||
* Resume Data - Ali Arghyani
|
||||
* Based on RESUME-STANDARDS.md (docs/RESUME-STANDARDS.md)
|
||||
* Optimized for ATS and 2025 best practices
|
||||
* Version: 2.0 - 2-Page Resume (International Remote Positions)
|
||||
*
|
||||
* ⚠️ BEFORE EDITING: Give docs/RESUME-UPDATE-RULES.md to any AI agent
|
||||
*
|
||||
* Quick command for AI:
|
||||
* "Read docs/RESUME-UPDATE-RULES.md and update my resume"
|
||||
*/
|
||||
|
||||
import type { Resume } from '~/types/resume'
|
||||
|
||||
export const resumeData: Resume = {
|
||||
basics: {
|
||||
name: 'Ali Arghyani',
|
||||
label: 'Frontend Developer | Vue.js • Nuxt.js • TypeScript',
|
||||
image: '/img/AliProfile.webp',
|
||||
email: 'aliarghyani@gmail.com',
|
||||
phone: '+98 912 322 0694',
|
||||
url: 'https://aliarghyani.vercel.app',
|
||||
location: {
|
||||
city: 'Tehran',
|
||||
country: 'Iran',
|
||||
},
|
||||
profiles: [
|
||||
{
|
||||
network: 'LinkedIn',
|
||||
url: 'https://linkedin.com/in/aliarghyani',
|
||||
icon: 'i-mdi-linkedin',
|
||||
},
|
||||
{
|
||||
network: 'GitHub',
|
||||
url: 'https://github.com/aliarghyani',
|
||||
icon: 'i-mdi-github',
|
||||
},
|
||||
{
|
||||
network: 'Portfolio',
|
||||
url: 'https://aliarghyani.vercel.app',
|
||||
icon: 'i-mdi-web',
|
||||
},
|
||||
],
|
||||
summary:
|
||||
'Frontend Developer with **3+ years** building high-performance Vue.js/Nuxt applications for international clients. **AI-first engineer** leveraging AI-powered tools & methodologies to accelerate development by up to **2x** while maintaining code quality. Specialized in performance optimization, scalable architecture (SSR, PWA, RBAC), and accessibility. Delivered **8 production applications** with focus on maintainability and distributed team collaboration. Fluent in English (**8+ years** in fully English-speaking environment at Huawei).',
|
||||
},
|
||||
|
||||
work: [
|
||||
{
|
||||
company: 'NexaPortal',
|
||||
position: 'Frontend Developer (Remote)',
|
||||
location: 'Izmir, Turkey',
|
||||
startDate: '2024-12',
|
||||
highlights: [
|
||||
'Developed **5 interconnected applications** for two medical tourism platforms (**Elara Medical** & **Artemis Clinics**): admin panels, patient dashboards, and website with **10+ language** support and PWA capabilities',
|
||||
'Built custom **PDF template editor** with drag-and-drop interface, dynamic variable injection, and multi-page support, enabling non-technical staff to create patient documents without developer intervention',
|
||||
'Engineered enterprise-grade **RBAC system** with deep permission patterns supporting field-level granularity and wildcard permissions across **40+ domain models**',
|
||||
'Developed **dynamic form builder** with **10+ field types** and drag-and-drop arrangement, reducing new form development time by **60%** through schema-based architecture',
|
||||
'Implemented real-time messaging via **Pusher WebSockets** supporting WhatsApp and in-app channels, plus custom **Canvas animations** with physics simulation for premium UX',
|
||||
'Optimized performance through code splitting, lazy loading, and Pinia state management; accelerated development by **2x** using AI-powered tools with **zero critical bugs**',
|
||||
],
|
||||
},
|
||||
{
|
||||
company: 'Freelance',
|
||||
position: 'Frontend Developer (Remote)',
|
||||
location: 'Tehran, Iran',
|
||||
startDate: '2023-09',
|
||||
endDate: '2024-12',
|
||||
highlights: [
|
||||
'Delivered **3 production-grade** web applications for international clients using Vue.js/Nuxt.js, consistently achieving strong performance metrics and high client satisfaction',
|
||||
'Leveraged AI development tools to reduce development time by **40%** across all projects, enabling faster client delivery and **100% on-time** project completion rate',
|
||||
'**Ideh** - Idea evaluation platform with reusable component library reducing development time by **30%** and scalable Vue.js architecture',
|
||||
'**Insho** - Advertising marketplace with advanced dynamic form handling (schema-based architecture), modern backend-frontend structure reducing integration time by 40%, and responsive UI for creator-brand matching',
|
||||
'**BaMashin** - Mobility rental platform with payment integration and responsive UI optimized for mobile/desktop',
|
||||
'Led client communications, translated business requirements into technical specifications, delivered iteratively with clear documentation and transparent progress updates',
|
||||
],
|
||||
},
|
||||
{
|
||||
company: 'Huawei Technologies',
|
||||
position: 'Senior Performance Team Lead',
|
||||
location: 'Tehran, Iran',
|
||||
startDate: '2022-04',
|
||||
endDate: '2023-08',
|
||||
highlights: [
|
||||
'Led team managing performance and availability for **14,500+ network sites** nationwide, ensuring **99.5%+ uptime** and rapid incident response across distributed infrastructure',
|
||||
'Automated Excel reporting workflows using **Python** and **Pandas**, reducing manual report generation time by **70%** and enabling real-time performance insights across **14,500+ sites**',
|
||||
'Established operational standards and best practices; mentored **10 team members** improving team efficiency by **30%** through process optimization and knowledge sharing',
|
||||
'Conducted comprehensive data analysis and KPI monitoring using advanced analytics; identified performance trends and improvement opportunities, reducing network downtime by **22%** year-over-year',
|
||||
'Owned stakeholder communication interface; delivered weekly performance reports and monthly strategic updates to **C-level executives**, translating technical metrics into business impact',
|
||||
'Built strong operational discipline (documentation, monitoring, incident management, quality gates) that directly enhances frontend engineering quality and architectural decision-making',
|
||||
],
|
||||
},
|
||||
{
|
||||
company: 'Huawei Technologies',
|
||||
position: 'Technical & Leadership Roles',
|
||||
location: 'Tehran, Iran',
|
||||
startDate: '2016-06',
|
||||
endDate: '2022-04',
|
||||
highlights: [
|
||||
'**Senior Performance Analyst** (2018-2022): Drove network KPI analysis across 2G/3G/LTE; contributed to audits, process improvements and performance dashboards',
|
||||
'**Assistant Regional Manager** (2018): Managed **~3,000** BTS sites across Tehran Province; coordinated subcontractors and translated technical specs into implementation plans',
|
||||
'**TCHA Team Lead** (2017-2018): Built availability dashboards and drove stakeholder alignment; recognized as **outstanding fresh graduate** at Huawei annual meeting',
|
||||
'**Back Office Operations** (2016-2017): Supported OSS operations, performance checks and reporting; contributed to team efficiency and customer satisfaction',
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
education: [
|
||||
{
|
||||
institution: 'Qom University of Technology',
|
||||
area: 'Telecommunications Engineering',
|
||||
studyType: 'Bachelor of Science',
|
||||
startDate: '2010-09',
|
||||
endDate: '2015-06',
|
||||
courses: [
|
||||
'Software Architecture',
|
||||
'Systems Design',
|
||||
'Network Management',
|
||||
'Digital Signal Processing',
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
skills: [
|
||||
{
|
||||
name: 'Frontend Core',
|
||||
keywords: [
|
||||
'Vue.js',
|
||||
'Nuxt.js',
|
||||
'TypeScript',
|
||||
'JavaScript (ES6+)',
|
||||
'HTML5',
|
||||
'CSS3',
|
||||
'Pinia',
|
||||
'Vuetify',
|
||||
'Tailwind CSS',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'AI-Assisted Development',
|
||||
keywords: [
|
||||
'Cursor AI',
|
||||
'GitHub Copilot',
|
||||
'Codex',
|
||||
'BMad Method',
|
||||
'Claude/ChatGPT',
|
||||
'Prompt Engineering',
|
||||
'AI-Powered Code Review',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Architecture & Performance',
|
||||
keywords: [
|
||||
'SSR (Server-Side Rendering)',
|
||||
'SSG (Static Site Generation)',
|
||||
'PWA (Progressive Web Apps)',
|
||||
'RBAC Systems',
|
||||
'Code Splitting & Lazy Loading',
|
||||
'Performance Optimization',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Development Tools & Workflow',
|
||||
keywords: [
|
||||
'Git/GitHub',
|
||||
'GitHub Actions (CI/CD)',
|
||||
'ESLint/Prettier',
|
||||
'Vite',
|
||||
'VueUse',
|
||||
'REST APIs',
|
||||
'WebSocket',
|
||||
'Agile/Scrum',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Quality & Accessibility',
|
||||
keywords: [
|
||||
'WCAG 2.1 Compliance',
|
||||
'Lighthouse Optimization',
|
||||
'Cypress E2E Testing',
|
||||
'Code Review',
|
||||
'i18n Internationalization',
|
||||
'Responsive Design',
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
languages: [
|
||||
{
|
||||
language: 'Persian',
|
||||
fluency: 'Native',
|
||||
},
|
||||
{
|
||||
language: 'English',
|
||||
fluency: 'Fluent',
|
||||
},
|
||||
],
|
||||
|
||||
certificates: [
|
||||
{
|
||||
name: 'Advanced English Proficiency',
|
||||
date: '2025',
|
||||
issuer: 'Duolingo English Test',
|
||||
url: '',
|
||||
summary: 'Score: 85/100 (Advanced Level)',
|
||||
},
|
||||
],
|
||||
|
||||
projects: [
|
||||
{
|
||||
name: 'Ideh',
|
||||
description:
|
||||
'Idea evaluation & market insights platform with scalable architecture and reusable component library',
|
||||
highlights: [
|
||||
'Component library reduced development time by 30%',
|
||||
'Scalable Vue.js architecture',
|
||||
'Dynamic form generation system',
|
||||
],
|
||||
keywords: ['Vue.js', 'Nuxt.js', 'Component Library'],
|
||||
startDate: '2023-09',
|
||||
endDate: '2024-12',
|
||||
url: 'https://ideh.app',
|
||||
roles: ['Frontend Developer'],
|
||||
type: 'application',
|
||||
},
|
||||
{
|
||||
name: 'Insho',
|
||||
description:
|
||||
'Media & advertising marketplace connecting agencies and creators for campaign collaboration',
|
||||
highlights: [
|
||||
'Advanced dynamic form handling with schema-based architecture enabling complex multi-functional forms with validation, conditional logic, and real-time updates',
|
||||
'Established modern structure between backend and frontend for seamless form data flow, reducing integration time by 40%',
|
||||
'Responsive UI optimized for creator-brand matching with comprehensive listing and proposal management system',
|
||||
],
|
||||
keywords: ['Vue.js', 'Nuxt.js', 'Dynamic Forms', 'Schema-based Architecture', 'Marketplace'],
|
||||
startDate: '2023-09',
|
||||
endDate: '2024-12',
|
||||
url: 'https://insho.app',
|
||||
roles: ['Frontend Developer'],
|
||||
type: 'application',
|
||||
},
|
||||
{
|
||||
name: 'BaMashin',
|
||||
description:
|
||||
'Mobility rental platform (cars, boats, helicopters) with comprehensive booking system and accessible UI',
|
||||
highlights: [
|
||||
'Multi-category rental system',
|
||||
'WCAG 2.1 compliant interface',
|
||||
'Payment integration',
|
||||
],
|
||||
keywords: ['Vue.js', 'TypeScript', 'Responsive Design', 'Accessibility'],
|
||||
startDate: '2023-09',
|
||||
endDate: '2024-12',
|
||||
url: 'https://bamashin.net',
|
||||
roles: ['Frontend Developer'],
|
||||
type: 'application',
|
||||
},
|
||||
],
|
||||
}
|
||||
+10
-3
@@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="layout-default">
|
||||
<TopNav client:only />
|
||||
<slot />
|
||||
<div class="layout-default" :key="layoutKey">
|
||||
<TopNav />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<FooterCopyright />
|
||||
</div>
|
||||
</template>
|
||||
@@ -16,6 +18,11 @@ import FooterCopyright from '@/components/common/FooterCopyright.vue'
|
||||
* Main layout for the application including TopNav and Footer.
|
||||
* This layout is used by default for all pages unless specified otherwise.
|
||||
*/
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
// Force re-render when navigating back from pages with layout: false
|
||||
const layoutKey = computed(() => route.fullPath)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,195 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
const route = useRoute()
|
||||
const { data: page, error } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
|
||||
|
||||
if (error.value) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
message: 'Page not found',
|
||||
fatal: true,
|
||||
})
|
||||
}
|
||||
|
||||
useSeoMeta({
|
||||
title: page.value?.title,
|
||||
description: page.value?.description,
|
||||
ogTitle: page.value?.title,
|
||||
ogDescription: page.value?.description,
|
||||
})
|
||||
|
||||
const { data: relatedArticles } = await useAsyncData(`content:related-articles:${page.value?.title}`, () => queryContent('/articles').where({ categories: { $in: page.value?.categories }, _extension: 'md' }).only(['_path', 'title', 'categories', 'description', 'publishedAt', 'image', 'authors']).sort({ publishedAt: -1 }).limit(3).find())
|
||||
|
||||
const appConfig = useAppConfig()
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UContainer
|
||||
v-if="page"
|
||||
>
|
||||
<UPage>
|
||||
<UPageHeader
|
||||
class="max-w-5xl mx-auto"
|
||||
:title="page.title"
|
||||
:description="page.description"
|
||||
>
|
||||
<template #headline>
|
||||
<!-- Waiting for https://github.com/nuxt/ui-pro/issues/114 -->
|
||||
<!-- <dl>
|
||||
<dt class="sr-only">
|
||||
Categories
|
||||
</dt>
|
||||
<dd> -->
|
||||
<template
|
||||
v-for="(category, index) in page.categories"
|
||||
:key="category"
|
||||
>
|
||||
<ULink
|
||||
:to="`/categories/${category}`"
|
||||
>
|
||||
{{ formatCategory(category) }}
|
||||
</ULink>
|
||||
|
||||
<span v-if="index < page.categories.length - 1">
|
||||
-
|
||||
</span>
|
||||
</template>
|
||||
<!-- </dd>
|
||||
</dl> -->
|
||||
</template>
|
||||
|
||||
<NuxtImg
|
||||
v-if="page.image"
|
||||
:src="page.image.src"
|
||||
:alt="page.image.alt"
|
||||
class="mt-8 w-full object-cover rounded-lg aspect-[16/9]"
|
||||
>
|
||||
<dl class="mt-8 flex justify-between text-stone-700 text-sm">
|
||||
<dt class="sr-only">
|
||||
Author
|
||||
</dt>
|
||||
<dd>
|
||||
<ol class="space-x-4">
|
||||
<li
|
||||
v-for="author in page.authors"
|
||||
:key="author.name"
|
||||
>
|
||||
<ULink
|
||||
:to="author.social"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<UAvatar
|
||||
:src="author.avatar"
|
||||
:alt="author.name"
|
||||
size="sm"
|
||||
/>
|
||||
<span>
|
||||
{{ author.name }}
|
||||
</span>
|
||||
</ULink>
|
||||
</li>
|
||||
</ol>
|
||||
</dd>
|
||||
<dt class="sr-only">
|
||||
Published at
|
||||
</dt>
|
||||
<dd>
|
||||
<time :datetime="page.publishedAt">
|
||||
{{ formatDate(page.publishedAt) }}
|
||||
</time>
|
||||
</dd>
|
||||
</dl>
|
||||
</nuxtimg>
|
||||
</UPageHeader>
|
||||
|
||||
<div class="mt-8 max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-[96px_768px_1fr]">
|
||||
<div class="lg:px-8 flex lg:flex-col lg:items-end gap-2">
|
||||
<UTooltip text="Share on X">
|
||||
<UButton
|
||||
:to="`https://twitter.com/share?text=${page.title}&url=${runtimeConfig.app.name}${page._path}`"
|
||||
target="_blank"
|
||||
icon="i-simple-icons-x"
|
||||
size="sm"
|
||||
color="primary"
|
||||
square
|
||||
variant="ghost"
|
||||
/>
|
||||
</UTooltip>
|
||||
<UTooltip text="Share on Facebook">
|
||||
<UButton
|
||||
:to="`https://www.facebook.com/sharer/sharer.php?u=${runtimeConfig.app.name}${page._path}&t=${page.title}`"
|
||||
target="_blank"
|
||||
icon="i-simple-icons-facebook"
|
||||
size="sm"
|
||||
color="primary"
|
||||
square
|
||||
variant="ghost"
|
||||
/>
|
||||
</UTooltip>
|
||||
<UTooltip text="Share on LinkedIn">
|
||||
<UButton
|
||||
:to="`https://www.linkedin.com/shareArticle?url=${runtimeConfig.app.name}${page._path}&title=${page.title}`"
|
||||
target="_blank"
|
||||
icon="i-simple-icons-linkedin"
|
||||
size="sm"
|
||||
color="primary"
|
||||
square
|
||||
variant="ghost"
|
||||
/>
|
||||
</UTooltip>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 lg:mt-0 w-full">
|
||||
<UPageBody
|
||||
prose
|
||||
:ui="{ wrapper: 'mt-0' }"
|
||||
>
|
||||
<ContentRenderer :value="page" />
|
||||
</UPageBody>
|
||||
</div>
|
||||
|
||||
<div class="row-start-2 lg:row-start-1 lg:col-start-3 lg:px-8 space-y-8">
|
||||
<UButton
|
||||
v-bind="appConfig.page.article.cta"
|
||||
color="primary"
|
||||
size="lg"
|
||||
:ui="{ base: 'w-full justify-center' }"
|
||||
class="hidden lg:inline-flex"
|
||||
/>
|
||||
|
||||
<UDivider />
|
||||
|
||||
<UContentToc
|
||||
:links="page.body?.toc?.links"
|
||||
:ui="{ wrapper: 'top-4', container: { base: 'py-0 pb-3 lg:py-0 lg:pb-8' } }"
|
||||
/>
|
||||
|
||||
<UDivider class="lg:hidden" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section v-if="relatedArticles">
|
||||
<h2 class="text-2xl text-stone-900 font-bold">
|
||||
Related Articles
|
||||
</h2>
|
||||
|
||||
<div class="mt-3 border-b border-stone-200" />
|
||||
|
||||
<UPageGrid class="mt-8">
|
||||
<ArticleCard
|
||||
v-for="article in relatedArticles"
|
||||
:key="article._path"
|
||||
:to="article._path!"
|
||||
:title="article.title!"
|
||||
:description="article.description"
|
||||
:date="article.publishedAt"
|
||||
:image="article.image"
|
||||
:authors="article.authors"
|
||||
/>
|
||||
</UPageGrid>
|
||||
</section>
|
||||
</UPage>
|
||||
</UContainer>
|
||||
</template>
|
||||
@@ -2,17 +2,28 @@
|
||||
const { locale, t } = useI18n()
|
||||
const localePath = useLocalePath()
|
||||
const route = useRoute()
|
||||
const slug = Array.isArray(route.params.slug) ? route.params.slug : [route.params.slug]
|
||||
|
||||
// Fetch current post
|
||||
const { data: post } = await useAsyncData(`blog-post-${slug.join('/')}`, async () => {
|
||||
const posts = await queryCollection('blog')
|
||||
.where('path', '=', `/${locale.value}/blog/${slug.join('/')}`)
|
||||
.first()
|
||||
return posts
|
||||
const slugParts = computed(() => {
|
||||
const raw = route.params.slug
|
||||
const parts = Array.isArray(raw) ? raw : [raw]
|
||||
return parts.filter((p): p is string => typeof p === 'string' && p.length > 0)
|
||||
})
|
||||
|
||||
if (!post.value) {
|
||||
// Fetch current post
|
||||
const { data: post, error: postError } = await useAsyncData(
|
||||
() => `blog-post-${locale.value}-${slugParts.value.join('/')}`,
|
||||
async () => {
|
||||
return await queryCollection('blog')
|
||||
.where('path', '=', `/${locale.value}/blog/${slugParts.value.join('/')}`)
|
||||
.first()
|
||||
},
|
||||
{
|
||||
watch: [locale, slugParts],
|
||||
server: true
|
||||
}
|
||||
)
|
||||
|
||||
if (process.server && (!post.value || postError.value)) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
message: 'Blog post not found',
|
||||
@@ -21,18 +32,25 @@ if (!post.value) {
|
||||
}
|
||||
|
||||
// Fetch all posts for prev/next navigation
|
||||
const { data: allPosts } = await useAsyncData(`blog-posts-nav-${locale.value}`, async () => {
|
||||
const posts = await queryCollection('blog')
|
||||
.where('draft', '<>', true)
|
||||
.order('date', 'DESC')
|
||||
.all()
|
||||
const { data: allPosts } = await useAsyncData(
|
||||
() => `blog-posts-nav-${locale.value}`,
|
||||
async () => {
|
||||
const posts = await queryCollection('blog')
|
||||
.where('draft', '<>', true)
|
||||
.order('date', 'DESC')
|
||||
.all()
|
||||
|
||||
// Filter by locale and posts without draft field
|
||||
return posts.filter((p: any) =>
|
||||
p.path?.startsWith(`/${locale.value}/blog/`) &&
|
||||
(p.draft === false || p.draft === undefined)
|
||||
)
|
||||
})
|
||||
// Filter by locale and posts without draft field
|
||||
return posts.filter((p: any) =>
|
||||
p.path?.startsWith(`/${locale.value}/blog/`) &&
|
||||
(p.draft === false || p.draft === undefined)
|
||||
)
|
||||
},
|
||||
{
|
||||
watch: [locale],
|
||||
server: true
|
||||
}
|
||||
)
|
||||
|
||||
// Calculate adjacent posts
|
||||
const currentIndex = computed(() => {
|
||||
@@ -56,6 +74,8 @@ const siteUrl = 'https://mahdium.ir' // TODO: Move to runtime config
|
||||
// Custom meta tags
|
||||
if (post.value) {
|
||||
const postData = post.value as any
|
||||
const canonicalPath = postData.path ? postData.path.replace(/^\/(en|fa)/, '') : ''
|
||||
const canonicalUrl = canonicalPath ? `${siteUrl}${canonicalPath}` : siteUrl
|
||||
|
||||
useSeoMeta({
|
||||
title: `${postData.title} | ${t('blog.title')}`,
|
||||
@@ -64,7 +84,7 @@ if (post.value) {
|
||||
ogDescription: postData.description,
|
||||
ogImage: postData.image || '/img/blog/default-cover.jpg',
|
||||
ogType: 'article',
|
||||
ogUrl: `${siteUrl}${postData.path}`,
|
||||
ogUrl: canonicalUrl,
|
||||
twitterCard: 'summary_large_image',
|
||||
twitterTitle: postData.title,
|
||||
twitterDescription: postData.description,
|
||||
@@ -77,6 +97,14 @@ if (post.value) {
|
||||
|
||||
// JSON-LD structured data
|
||||
useHead({
|
||||
link: canonicalPath
|
||||
? [
|
||||
{
|
||||
rel: 'canonical',
|
||||
href: canonicalUrl
|
||||
}
|
||||
]
|
||||
: [],
|
||||
script: [
|
||||
{
|
||||
type: 'application/ld+json',
|
||||
@@ -139,17 +167,18 @@ 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.replace(/^\/(en|fa)/, '')}`" />
|
||||
|
||||
<!-- Blog Navigation (Prev/Next) -->
|
||||
<BlogNavigation :prev="prevPost" :next="nextPost" />
|
||||
</div>
|
||||
|
||||
<!-- Sidebar: Table of Contents (Desktop) -->
|
||||
<aside v-if="(post as any).body?.toc?.links?.length" class="hidden lg:block">
|
||||
<UContentToc :links="(post as any).body.toc.links" :title="t('blog.tableOfContents')" color="primary"
|
||||
highlight :ui="{
|
||||
root: 'sticky top-24',
|
||||
container: 'bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800 p-4'
|
||||
}" />
|
||||
<div class="sticky top-24">
|
||||
<BlogTableOfContents :toc="(post as any).body.toc" />
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -29,7 +29,7 @@ const { extractUniqueTags, filterPostsBySearch, filterPostsByTag } = useBlog()
|
||||
|
||||
// Fetch posts using queryCollection (Nuxt Content v3 API)
|
||||
const { data: posts } = await useAsyncData<any[]>(
|
||||
`blog-posts-${locale.value}`,
|
||||
() => `blog-posts-${locale.value}`,
|
||||
async () => {
|
||||
try {
|
||||
// Use queryCollection for Nuxt Content v3
|
||||
|
||||
+3
-1
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="max-w-6xl mx-auto pt-24">
|
||||
<div class="max-w-6xl mx-auto pt-12 md:pt-24">
|
||||
<!-- Above-the-fold content only (improves LCP by reducing initial render work) -->
|
||||
<Hero />
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
<AIStack />
|
||||
<SoftSkills />
|
||||
<LanguageSkills />
|
||||
<GitHubActivity username="aliarghyani" />
|
||||
<WorkExperience />
|
||||
<EducationList />
|
||||
<RecommendationsCarousel />
|
||||
@@ -24,6 +25,7 @@ const Skills = defineAsyncComponent(() => import('@/components/portfolio/Skills.
|
||||
const AIStack = defineAsyncComponent(() => import('@/components/portfolio/AIStack.vue'))
|
||||
const SoftSkills = defineAsyncComponent(() => import('@/components/portfolio/SoftSkills.vue'))
|
||||
const LanguageSkills = defineAsyncComponent(() => import('@/components/portfolio/LanguageSkills.vue'))
|
||||
const GitHubActivity = defineAsyncComponent(() => import('@/components/portfolio/GitHubActivity.vue'))
|
||||
const WorkExperience = defineAsyncComponent(() => import('@/components/portfolio/WorkExperience.vue'))
|
||||
const EducationList = defineAsyncComponent(() => import('@/components/portfolio/EducationList.vue'))
|
||||
const RecommendationsCarousel = defineAsyncComponent(() => import('@/components/portfolio/RecommendationsCarousel.vue'))
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: false,
|
||||
scrollToTop: true
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const isPrintMode = computed(() => route.query.print === 'true')
|
||||
|
||||
useHead({
|
||||
title: 'Resume - Ali Arghyani',
|
||||
meta: [
|
||||
{ name: 'robots', content: 'noindex' }
|
||||
]
|
||||
})
|
||||
|
||||
// Reset scroll position on mount
|
||||
onMounted(() => {
|
||||
window.scrollTo(0, 0)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-white dark:bg-gray-900 print:bg-white">
|
||||
<!-- Back to Home Button -->
|
||||
<NuxtLink v-if="!isPrintMode" to="/" class="fixed top-4 right-4 z-50 inline-flex items-center gap-2 px-4 py-2 text-sm font-medium
|
||||
bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700
|
||||
text-gray-700 dark:text-gray-200 rounded-full shadow-lg
|
||||
transition-all duration-200 hover:scale-105 no-print">
|
||||
<UIcon name="i-heroicons-arrow-left" class="text-base" />
|
||||
<span>Back to Home</span>
|
||||
</NuxtLink>
|
||||
|
||||
<ResumePreview />
|
||||
<ResumeDownloadButton :is-print-mode="isPrintMode" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
export default defineNuxtPlugin(() => {
|
||||
if (import.meta.client) {
|
||||
// Remove promotional banners after mount
|
||||
const removeBanners = () => {
|
||||
// Direct removal of known banner IDs (certificates.dev banner)
|
||||
const directSelectors = [
|
||||
'#bb-banner',
|
||||
'[id*="bb-banner"]',
|
||||
'a[href*="certificates.dev"]',
|
||||
'[class*="bb-campaign"]',
|
||||
'[class*="bb-close"]',
|
||||
]
|
||||
|
||||
directSelectors.forEach((selector) => {
|
||||
document.querySelectorAll(selector).forEach((el) => el.remove())
|
||||
})
|
||||
|
||||
// Target common banner selectors
|
||||
const selectors = [
|
||||
'[class*="VueSchool"]',
|
||||
'[class*="vue-school"]',
|
||||
'[class*="promotional"]',
|
||||
'[class*="Banner"]',
|
||||
'div[class*="bg-blue-950"]', // Common @nuxt/ui banner style
|
||||
'a[href*="vueschool.io"]',
|
||||
]
|
||||
|
||||
selectors.forEach((selector) => {
|
||||
const elements = document.querySelectorAll(selector)
|
||||
elements.forEach((el) => {
|
||||
// Check if this looks like a promotional banner
|
||||
const parent = el.closest('div')
|
||||
if (
|
||||
parent &&
|
||||
(el.textContent?.toLowerCase().includes('certification') ||
|
||||
el.textContent?.toLowerCase().includes('black friday') ||
|
||||
el.textContent?.toLowerCase().includes('cyber monday') ||
|
||||
el.textContent?.toLowerCase().includes('vueschool') ||
|
||||
el.textContent?.toLowerCase().includes('get certified'))
|
||||
) {
|
||||
parent.remove()
|
||||
el.remove()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// Run on mount and watch for dynamic additions
|
||||
onMounted(() => {
|
||||
removeBanners()
|
||||
|
||||
// Use MutationObserver to catch dynamically injected banners
|
||||
const observer = new MutationObserver(() => {
|
||||
removeBanners()
|
||||
})
|
||||
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
})
|
||||
|
||||
// Cleanup on unmount
|
||||
onUnmounted(() => {
|
||||
observer.disconnect()
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* GitHub GraphQL API Types
|
||||
* Based on: https://github.com/yuichkun/github-contribution-graph-example
|
||||
*/
|
||||
|
||||
export interface GitHubContributionDay {
|
||||
date: string
|
||||
contributionCount: number
|
||||
}
|
||||
|
||||
export interface GitHubContributionWeek {
|
||||
contributionDays: GitHubContributionDay[]
|
||||
}
|
||||
|
||||
export interface GitHubContributionCalendar {
|
||||
totalContributions: number
|
||||
weeks: GitHubContributionWeek[]
|
||||
}
|
||||
|
||||
export interface GitHubContributionsCollection {
|
||||
contributionCalendar: GitHubContributionCalendar
|
||||
}
|
||||
|
||||
export interface GitHubUser {
|
||||
contributionsCollection: GitHubContributionsCollection
|
||||
}
|
||||
|
||||
export interface GitHubApiResponse {
|
||||
data: {
|
||||
user: GitHubUser
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
* Resume TypeScript Interfaces
|
||||
* Based on JSON Resume schema (modified)
|
||||
* @see https://jsonresume.org/schema/
|
||||
*/
|
||||
|
||||
export interface ResumeBasics {
|
||||
name: string
|
||||
label: string // Job title
|
||||
email: string
|
||||
phone: string
|
||||
url?: string
|
||||
image?: string // Profile photo URL
|
||||
location: {
|
||||
city: string
|
||||
country: string
|
||||
}
|
||||
profiles: Array<{
|
||||
network: string // LinkedIn, GitHub, etc.
|
||||
url: string
|
||||
icon?: string // Iconify icon name
|
||||
}>
|
||||
summary: string
|
||||
}
|
||||
|
||||
export interface WorkExperience {
|
||||
company: string
|
||||
position: string
|
||||
location?: string // City, Country or Remote
|
||||
startDate: string // YYYY-MM format
|
||||
endDate?: string // YYYY-MM or undefined for "Present"
|
||||
highlights: string[] // Bullet points
|
||||
}
|
||||
|
||||
export interface Education {
|
||||
institution: string
|
||||
area: string // Field of study
|
||||
studyType: string // Degree type
|
||||
startDate: string // YYYY-MM format
|
||||
endDate?: string // YYYY-MM format
|
||||
courses?: string[] // Relevant coursework
|
||||
}
|
||||
|
||||
export interface Skill {
|
||||
name: string // Category name
|
||||
keywords: string[] // Individual skills
|
||||
}
|
||||
|
||||
export interface Language {
|
||||
language: string
|
||||
fluency: string // Native, Fluent, Intermediate, Basic, or custom (e.g., "Fluent (Duolingo 85/100)")
|
||||
}
|
||||
|
||||
export interface Certification {
|
||||
name: string
|
||||
issuer: string
|
||||
date: string // YYYY or YYYY-MM format
|
||||
url?: string // Certificate URL
|
||||
summary?: string // Additional details (e.g., score)
|
||||
}
|
||||
|
||||
export interface Project {
|
||||
name: string
|
||||
description: string
|
||||
highlights?: string[]
|
||||
keywords?: string[]
|
||||
startDate?: string
|
||||
endDate?: string
|
||||
url?: string
|
||||
roles?: string[]
|
||||
type?: string
|
||||
}
|
||||
|
||||
export interface Resume {
|
||||
basics: ResumeBasics
|
||||
work: WorkExperience[]
|
||||
education: Education[]
|
||||
skills: Skill[]
|
||||
languages?: Language[]
|
||||
certificates?: Certification[]
|
||||
projects?: Project[]
|
||||
}
|
||||
Reference in New Issue
Block a user