diff --git a/SSG-TEST-GUIDE.md b/SSG-TEST-GUIDE.md deleted file mode 100644 index 5b94b8f..0000000 --- a/SSG-TEST-GUIDE.md +++ /dev/null @@ -1,149 +0,0 @@ -# راهنمای تست SSG (Static Site Generation) - -## چطور بفهمیم SSG درست کار می‌کنه؟ - -### 1. بررسی فایل‌های تولید شده - -اول بررسی کن که فایل‌های HTML واقعاً تولید شدن: - -```bash -# بررسی ساختار فایل‌ها -ls .output/public/blog -ls .output/public/fa/blog - -# باید این فایل‌ها رو ببینی: -# - index.html (صفحه لیست بلاگ) -# - getting-started-with-nuxt-content/index.html -# - nuxt-ui-components/index.html -# - typescript-best-practices/index.html -``` - -### 2. اجرای Preview Server - -```bash -pnpm preview -``` - -این command یک static file server ساده راه‌اندازی می‌کنه که فقط فایل‌های HTML رو serve می‌کنه (بدون Node.js server). - -### 3. تست‌های اصلی برای تأیید SSG - -#### ✅ تست 1: بررسی HTML Source - -1. مرورگر رو باز کن و برو به: `http://localhost:3000/blog` -2. کلیک راست کن و "View Page Source" یا `Ctrl+U` بزن -3. **چیزی که باید ببینی:** - - تمام محتوای HTML از قبل موجود هست (نه فقط `
`) - - تگ‌های `` برای SEO - - محتوای کامل پست‌های بلاگ در HTML - - **اگه فقط یک div خالی دیدی = SSG کار نکرده ❌** - - **اگه محتوای کامل دیدی = SSG موفق ✅** - -#### ✅ تست 2: بررسی Network با اینترنت قطع - -1. مرورگر رو باز کن -2. DevTools رو باز کن (`F12`) -3. به تب Network برو -4. صفحه رو Refresh کن -5. **چیزی که باید ببینی:** - - فقط یک request برای `index.html` (نه API call برای fetch کردن پست‌ها) - - فایل HTML حجم زیادی داره (چون محتوا توش هست) - - **اگه API call دیدی = SSR یا CSR هست، نه SSG ❌** - - **اگه فقط HTML دیدی = SSG موفق ✅** - -#### ✅ تست 3: Disable JavaScript - -1. DevTools رو باز کن (`F12`) -2. `Ctrl+Shift+P` بزن (Command Palette) -3. تایپ کن: "Disable JavaScript" -4. صفحه رو Refresh کن -5. **چیزی که باید ببینی:** - - محتوای بلاگ همچنان نمایش داده میشه - - فقط interactive features کار نمی‌کنن (مثل navigation) - - **اگه صفحه خالی شد = SSG نیست ❌** - - **اگه محتوا نمایش داده شد = SSG موفق ✅** - -#### ✅ تست 4: بررسی سرعت بارگذاری - -1. DevTools > Network > Throttling رو روی "Fast 3G" بذار -2. صفحه رو Refresh کن -3. **چیزی که باید ببینی:** - - محتوا خیلی سریع نمایش داده میشه (حتی با اینترنت کند) - - Time to First Contentful Paint (FCP) کمتر از 1 ثانیه - - **SSG = محتوا فوری نمایش داده میشه ✅** - - **SSR/CSR = باید منتظر بمونی تا محتوا load بشه ❌** - -#### ✅ تست 5: بررسی Sitemap - -```bash -# بررسی sitemap -curl http://localhost:3000/sitemap_index.xml -# یا در مرورگر: -# http://localhost:3000/sitemap_index.xml -``` - -باید لیست تمام URLهای بلاگ رو ببینی. - -### 4. مقایسه SSG با SSR/CSR - -| ویژگی | SSG (Static) | SSR (Server) | CSR (Client) | -|-------|-------------|--------------|--------------| -| HTML در source | ✅ کامل | ✅ کامل | ❌ خالی | -| نیاز به Node.js | ❌ نه | ✅ بله | ❌ نه | -| API Calls | ❌ نه | ✅ بله | ✅ بله | -| سرعت | ⚡ خیلی سریع | 🚀 سریع | 🐌 کند | -| SEO | ✅ عالی | ✅ عالی | ⚠️ ضعیف | -| هزینه Hosting | 💰 ارزان | 💰💰 گران | 💰 ارزان | - -### 5. تست با curl (بدون مرورگر) - -```bash -# دریافت HTML خام -curl http://localhost:3000/blog/getting-started-with-nuxt-content - -# اگه محتوای کامل HTML رو دیدی = SSG موفق ✅ -# اگه فقط یک div خالی دیدی = SSG کار نکرده ❌ -``` - -### 6. بررسی فایل HTML مستقیماً - -```bash -# باز کردن فایل HTML در مرورگر -start .output/public/blog/getting-started-with-nuxt-content/index.html - -# یا در VSCode: -code .output/public/blog/getting-started-with-nuxt-content/index.html -``` - -باید تمام محتوای پست رو در HTML ببینی. - -## 🎯 نتیجه‌گیری - -**SSG موفق است اگر:** -- ✅ فایل‌های HTML با محتوای کامل تولید شدن -- ✅ View Source محتوای کامل رو نشون میده -- ✅ بدون JavaScript هم محتوا نمایش داده میشه -- ✅ هیچ API call برای fetch کردن محتوا نیست -- ✅ سرعت بارگذاری خیلی سریعه -- ✅ Sitemap تولید شده - -**SSG کار نکرده اگر:** -- ❌ View Source فقط یک div خالی نشون میده -- ❌ API call برای fetch کردن پست‌ها وجود داره -- ❌ بدون JavaScript صفحه خالی میشه -- ❌ محتوا با تأخیر load میشه - -## 🚀 Deploy - -وقتی مطمئن شدی SSG درست کار می‌کنه، می‌تونی deploy کنی: - -```bash -# فولدر .output/public رو به هر static hosting آپلود کن: -# - Vercel -# - Netlify -# - Cloudflare Pages -# - GitHub Pages -# - AWS S3 + CloudFront -``` - -هیچ Node.js server لازم نیست! فقط فایل‌های استاتیک. diff --git a/app/components/resume/ResumeHeader.vue b/app/components/resume/ResumeHeader.vue index a1c5b37..7cf3d6c 100644 --- a/app/components/resume/ResumeHeader.vue +++ b/app/components/resume/ResumeHeader.vue @@ -9,7 +9,7 @@ defineProps() diff --git a/app/components/resume/ResumePreview.vue b/app/components/resume/ResumePreview.vue index 07308cd..407fd9d 100644 --- a/app/components/resume/ResumePreview.vue +++ b/app/components/resume/ResumePreview.vue @@ -35,14 +35,15 @@ const { resume } = useResumeData() background: #f3f4f6; display: flex; justify-content: center; - padding: 1rem; + 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; - width: 100%; } .resume-content { diff --git a/app/data/resume.en.ts b/app/data/resume.en.ts index 5a557a6..64b0b60 100644 --- a/app/data/resume.en.ts +++ b/app/data/resume.en.ts @@ -42,7 +42,7 @@ export const resumeData: Resume = { }, ], summary: - 'Frontend Developer with **3+ years** building high-performance Vue.js/Nuxt applications for international clients. **AI-first engineer** leveraging **Cursor**, **GitHub Copilot**, and AI-powered tools & methodologies to accelerate development by up to **50%** while maintaining code quality. Specialized in performance optimization, scalable architecture (SSR, PWA, RBAC), and accessibility. Delivered **4+ production applications** with focus on maintainability and distributed team collaboration. Fluent in English (**6+ years** in fully English-speaking environment at Huawei).', + '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: [ @@ -52,12 +52,12 @@ export const resumeData: Resume = { location: 'Izmir, Turkey', startDate: '2024-12', highlights: [ - 'Architected **two medical tourism platforms** (**Elara Medical** & **Artemis Clinics**) serving international patients across **10+ languages** with real-time scheduling via WebSocket, multi-language support (3 languages), and PWA capabilities for offline access', - 'Accelerated feature development by **50%** using **Cursor** and other tools for component generation and real-time debugging, while maintaining **zero critical bugs** through AI-assisted code review and automated testing', - 'Optimized application performance through code splitting, lazy loading, and Pinia state management restructuring, significantly reducing bundle size and improving initial load time', - 'Engineered **RBAC** (Role-Based Access Control) system with role-based permissions, multi-tenant architecture supporting **3 languages** (English, Persian, Turkish), and PWA features enabling offline functionality across mobile and desktop devices', - 'Established code quality standards with ESLint and implementing CI/CD automation with **GitHub Actions** to ensure stable releases', - 'Demonstrated **product-minded engineering** by collaborating directly with CEO on product strategy and frontend architecture, ensuring technical decisions aligned with business goals', + '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**', ], }, { @@ -67,12 +67,11 @@ export const resumeData: Resume = { startDate: '2023-09', endDate: '2024-12', highlights: [ - 'Delivered **4+ 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 (**Cursor** and **GitHub Copilot**) to reduce development time by **40%** across **6 projects**, enabling faster client delivery and **100% on-time** project completion rate', + '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 responsive UI, matching engine for campaign collaboration, and comprehensive listing/proposal flows', + '**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', - 'Additional Projects: **2 custom B2B SaaS** applications with real-time collaboration, analytics dashboards, and third-party API integrations', 'Led client communications, translated business requirements into technical specifications, delivered iteratively with clear documentation and transparent progress updates', ], }, @@ -84,8 +83,8 @@ export const resumeData: Resume = { 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', - 'Leveraged **AI-powered analytics** tools for pattern recognition in network performance data, identifying optimization opportunities **50% faster** than manual analysis methods', - 'Established operational standards and best practices; mentored **5 team members** improving team efficiency by **30%** through process optimization and knowledge sharing', + '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', @@ -99,8 +98,8 @@ export const resumeData: Resume = { 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', + '**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', ], }, @@ -142,10 +141,11 @@ export const resumeData: Resume = { keywords: [ 'Cursor AI', 'GitHub Copilot', + 'Codex', + 'BMad Method', 'Claude/ChatGPT', 'Prompt Engineering', 'AI-Powered Code Review', - 'AI Workflow Integration', ], }, { @@ -228,11 +228,11 @@ export const resumeData: Resume = { description: 'Media & advertising marketplace connecting agencies and creators for campaign collaboration', highlights: [ - 'Responsive UI optimized for creator-brand matching', - 'Comprehensive listing and proposal management system', - 'Modern Vue.js architecture with clean, maintainable code', + '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', 'Responsive Design', 'Marketplace'], + keywords: ['Vue.js', 'Nuxt.js', 'Dynamic Forms', 'Schema-based Architecture', 'Marketplace'], startDate: '2023-09', endDate: '2024-12', url: 'https://insho.app', diff --git a/linkedin-post-draft.md b/linkedin-post-draft.md new file mode 100644 index 0000000..8c3a193 --- /dev/null +++ b/linkedin-post-draft.md @@ -0,0 +1,87 @@ +# پست لینکدین - نسخه نهایی + +قبلاً: هر بار که می‌خواستم رزومه‌ام رو آپدیت کنم، ۳-۴ ساعت وقت می‌برد. + +الان: ۱۵ دقیقه. + +چی تغییر کرد؟ رزومه‌ام رو تبدیل به کد کردم. + +--- + +**مشکل اینجا بود:** + +ابزارهای رزومه‌ساز یا پولی بودن، یا محدودیت داشتن. رایگانی‌ها هم اون چیزی که می‌خواستم نبود. ChatGPT هم پیشنهاداش خیلی جنریک بود. + +به عنوان یه فرانت‌اند دولوپر، با خودم گفتم: چرا با رزومه‌ام مثل کدهام رفتار نکنم؟ + +--- + +**چند تا چیز دیگه هم بود که اذیتم می‌کرد:** + +اول اینکه، ۷۵٪ رزومه‌ها توسط سیستم‌های ATS (Applicant Tracking System - همون نرم‌افزارهایی که شرکت‌ها برای غربال رزومه استفاده می‌کنن) رد می‌شن قبل از اینکه یه انسان ببینتشون. یعنی هرچقدر هم خوب بنویسی، اگه فرمتش درست نباشه یا کلمات کلیدی مناسب نداشته باشی، کسی نمی‌بینتش. + +دوم اینکه، ابزارهای آنلاین دیتاتو قفل می‌کنن. نمی‌تونی export کنی، نمی‌تونی کنترل کامل داشته باشی. + +سوم، همیشه باید رزومه رو با پورتفولیو sync کنی. یه پروژه جدید اضافه می‌کنی، باید بری رزومه رو هم آپدیت کنی. یه سردرد دائمی. + +--- + +**پس تصمیم گرفتم یه سیستم بسازم که رزومه‌ام مستقیم توی پورتفولیوم باشه.** + +رزومه‌ام الان یه فایل TypeScript هست که توی همون codebase پورتفولیوم زندگی می‌کنه. + +```typescript +// رزومه به صورت داده تمیز و typed +export const resumeData: Resume = { + basics: { ... }, + work: [ ... ], + skills: [ ... ] +} +``` + +خیلی مقاله، ویدیو، و منابع مختلف رو بررسی کردم. از ابزارهای مختلف هم برای تحقیق استفاده کردم تا نکات مهم رو جمع‌آوری کنم - چیزایی که واقعاً تو بهینه‌سازی ATS و نوشتن رزومه حرفه‌ای مهمن. در نهایت همه‌شو توی یه فایل استاندارد ریختم که هر موقع بخوام آپدیت کنم، بدونم چطور باید بنویسم. + +حالا وقتی پورتفولیو رو آپدیت می‌کنم، **AI مقایسه می‌کنه** و بهم می‌گه: +- "هی، یه پروژه جدید اضافه کردی. می‌خوای توی رزومه هم بیاد؟" +- "این skill رو توی ۳ تا پروژه استفاده کردی، ولی توی رزومه نیست." +- "این جمله رو می‌تونی بهتر بنویسی - اینجوری ATS-friendly تر میشه." + +**من تصمیم می‌گیرم.** AI فقط آگاه می‌کنه و پیشنهاد می‌ده بر اساس استانداردهایی که تعریف کردم. مثل یه دستیار که کارها رو راحت‌تر می‌کنه، نه اینکه خودش بی‌دقت همه‌شو بنویسه. + +--- + +**چرا این کار می‌کنه؟** + +**دیتا مال خودمه.** هیچ پلتفرمی نمی‌تونه قفلش کنه. می‌خوام export کنم، می‌کنم. می‌خوام تغییر بدم، می‌دم. + +**هر تغییر track میشه.** مثل کد. می‌تونم ببینم دو ماه پیش چی نوشته بودم، برگردم عقب اگه لازم شد. + +**خطاها رو زودتر می‌بینم.** چون TypeScript هست، اگه یه چیزی اشتباه باشه، قبل از publish بهم می‌گه. + +**آپدیت کردنش راحته.** AI بهم می‌گه کجاها تغییر کرده، چی می‌تونم اضافه کنم، و چطور بنویسم. ولی تصمیم نهایی با منه. + +--- + +**چی یاد گرفتم؟** + +بهینه‌سازی ATS جادو نیست. فقط باید چند تا قانون ساده رو دنبال کنی. مثلاً از کلمات کلیدی درست استفاده کنی، فرمت ساده باشه، و از عکس و جدول استفاده نکنی. + +AI ابزار خوبیه، ولی باید بهش استاندارد بدی. وقتی فقط بگی "رزومه‌ام رو بنویس"، یه مشت حرف کلیشه‌ای می‌ده. ولی وقتی بهش بگی "بر اساس این استانداردها پیشنهاد بده"، خیلی بهتر کار می‌کنه. + +وقتی به رزومه مثل یه product نگاه کنی - یعنی تحقیق کنی، استاندارد تعریف کنی، مستندسازی کنی - نتیجه خیلی بهتر میشه. + +--- + +**برای شما:** + +می‌دونم خیلیا با همین مشکلات دست و پنجه نرم می‌کنن. برای همین کل سیستم رو open source کردم. + +اگه دولوپری و با آپدیت رزومه مشکل داری، می‌تونی از این approach استفاده کنی. همه چیز مستند شده - از استانداردهای ATS گرفته تا اینکه چطور AI رو به کار بگیری که پیشنهادات بدرد بخور بده. + +--- + +🔗 ببینش اینجا: https://github.com/aliarghyani/nuxt-portfolio + +سوال داری؟ تجربه مشابهی داشتی؟ کامنت بذار - خوشحال می‌شم بشنوم! + +#FrontendDevelopment #CareerDevelopment #OpenSource #Resume #TypeScript #VueJS #NuxtJS diff --git a/test-ssg.md b/test-ssg.md deleted file mode 100644 index 530d218..0000000 --- a/test-ssg.md +++ /dev/null @@ -1,40 +0,0 @@ -# تست SSG بلاگ - -## مراحل تست: - -### 1. Build کن: -```bash -npm run generate -``` - -### 2. چک کن فایل‌های HTML ساخته شدن: -```bash -dir .output\public\blog -dir .output\public\fa\blog -``` - -### 3. محتوای یه فایل رو ببین: -```bash -type .output\public\blog\getting-started-with-nuxt-content\index.html -``` - -اگه محتوای کامل پست رو توی HTML دیدی = SSG کار می‌کنه ✅ - -### 4. سرور static رو اجرا کن: -```bash -npx serve .output\public -``` - -بعد مستقیماً برو روی یه پست بلاگ - باید بدون هیچ loading نشون بده. - ---- - -## چیزایی که باید توی HTML ببینی: - -✅ عنوان پست -✅ محتوای کامل -✅ تگ‌ها -✅ تاریخ -✅ Meta tags برای SEO - -اگه این‌ها رو دیدی، یعنی SSG درست کار می‌کنه!