Redesign blog portfolio with modern tech stack #6
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Complete redesign from Docusaurus to Astro framework. Features: - Modern Astro 4.x with TypeScript - TailwindCSS 3.x custom theme - Dark mode with smooth transitions - SEO optimized with OG tags - RSS feed Pages: - Homepage with hero and featured sections - Blog with EN/VI language filtering - Blog posts with TOC and comments - Projects showcase - Contact page - Custom 404 Built with Astro + TailwindCSS
- Migrated 2nd blog post (stop-using-requirements.mdx) - Added comprehensive BLOG_MIGRATION_STATUS.md guide - Includes templates and scripts for remaining 8 posts - Progress: 2/10 blog posts complete (20%)
- Fix theme localStorage type issue - Fix BlogPostLayout type annotations - Fix blog index null checks - Fix Intl.DateTimeFormat typo - Fix MDX syntax error in stop-using-requirements post - ✅ All type checks passing - ✅ Build successful (7 pages generated) Tested: npm run build completes successfully
Major improvements to portfolio based on user feedback: Homepage Redesign: - Implement modern 2025 design trends with split-screen hero layout - Add animated gradient background with floating orbs - Enlarge profile image (w-80) with glow effect - Add "Available for hire" status indicator with pulsing green dot - Improve typography hierarchy (text-7xl headings) - Enhance CTAs with primary/secondary button styles - Add animated scroll indicator at bottom - Redesign about section with better bento grid layout Projects Updates: - Update luyencode.net project with accurate details (76 followers, 1000+ exercises) - Add Behivest project (finance blog with calculators, Astro + TailwindCSS) - Add Beli5 project (ELI5 programming education platform, 4 languages) - Add "View More Projects" button linking to projects.behitek.com - Update project ordering (luyencode, Behivest, Beli5, hoc-bash) Bug Fixes: - Fix image path: copy /images/img/me.jpeg to /images/me.jpeg - Fix TypeScript hint: unused variable in social links map Build Status: - ✅ 0 errors, 0 warnings, 0 hints - ✅ 7 pages generated successfully - ✅ All TypeScript checks pass
Complete blog post migration (10/10 posts total): New Posts Migrated: - flux-lora.mdx (2024-11-17, AI/ML) - Fine-tuning Flux.1-dev LoRA - python-313-free-threaded.mdx (2024-10-10, Python) - GIL disabled mode - opensource-github-copilot.mdx (2024-10-08, Tutorial) - Continue.dev setup - rag-in-production.mdx (2024-07-18, AI/ML) - RAG best practices - beam-search.mdx (2024-04-01, AI/ML) - Beam search algorithm (Vietnamese content) - python-decorator.mdx (2024-03-09, Python, VI) - Python decorators tutorial - bert-finetuned.mdx (2022-12-11, AI/ML) - BERT sentence pair classification - selenium-capture-http-request.mdx (2022-11-19, Tutorial) - Selenium Wire Migration Details: - Converted all Docusaurus frontmatter to Astro content collection format - Updated image paths from /img/blog to /images/blog - Removed <!--truncate--> tags - Fixed MDX syntax issues (LaTeX formulas converted to plain text) - Added language tags (en/vi) for bilingual support - Preserved all code blocks, examples, and formatting Build Status: - ✅ 15 pages generated successfully (10 blog posts + 5 static pages) - ✅ 0 errors, 0 warnings, 23 hints (internal Astro hints only) - ✅ All TypeScript checks pass - ✅ All MDX content renders correctly Previously Completed: - inverted-hyde.mdx (sample post) - stop-using-requirements.mdx (Python dependency management) 🎉 Blog migration is now 100% complete (10/10 posts)!
Removed projects: - ai-assistant.json - hoc-bash.json - inverted-hyde.json Kept projects: - lcoj.json (Luyencode - LCOJ platform) - behivest.json (Finance blog) - beli5.json (Programming education platform)
Improvements: - Install simple-icons package for official brand SVG icons - Create SocialIcon component with proper brand logos - Replace emojis (📧💼🐙🐦) with official SVG icons: - GitHub: Official GitHub logo - LinkedIn: Official LinkedIn logo (manual SVG) - X/Twitter: Official X logo - Email: Gmail icon Updated components: - Footer.astro - Social links in footer - index.astro - Social icons on homepage - contact.astro - Social cards on contact page - constants.ts - Icon names instead of emojis Icon sizes: - Footer: w-4 h-4 - Homepage: w-6 h-6 - Contact page: w-10 h-10 Build: ✅ 0 errors, 0 warnings, 0 hints
Replace emoji (🐙) with official GitHub brand icon in ProjectCard component Changes: - Import SocialIcon component - Replace 🐙 emoji with <SocialIcon name="github" class="w-4 h-4" /> - Consistent with other social icon updates All project cards now display the official GitHub logo Build: ✅ 0 errors, 0 warnings, 0 hints
Tech Stack Improvements: - Reorganized skills into 6 categories for better organization - AI/ML: Agentic AI, LLMs, NLP, RAG, Document Retrieval, Language Modeling, Deep Learning, Machine Learning - Languages: Python, Java, JavaScript, C++, Bash - Backend/APIs: FastAPI, REST APIs, RESTful WebServices - Databases: MySQL, Redis, NoSQL, PostgreSQL - DevOps/Tools: Docker, Git, Linux, DevOps - Data & Engineering: Data Engineering, Data Mining, Web Crawling, Algorithms - Updated homepage to display categorized tech stack with section headings - Total: 30+ skills from LinkedIn profile (comprehensive coverage) Blog Image Fix: - Fixed 404 errors for all blog post images - Moved images from /images/img/blog/ to /images/blog/ to match MDX paths - Cleaned up unused images in /images/img/ directory (old docs, duplicate profile pics) - All 25 blog images now correctly accessible Build Status: - ✅ Build successful: 15 pages, 0 errors, 0 warnings - ✅ TypeScript checks pass - ✅ Dev server running on http://localhost:4322/ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Changed tagline from "A drop in the AI ocean" to "Turning AI research into reality" - More action-oriented and confident positioning - Better reflects journey from research (JAIST) to production systems - Emphasizes practical impact of AI work 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
i18n Configuration: - Configured Astro i18n routing with 'en' (default) and 'vi' locales - Set prefixDefaultLocale: false (English URLs without /en prefix) - Updated tsconfig.json to add @i18n/* path alias Translation Files: - Created comprehensive translation files for English (en.ts) and Vietnamese (vi.ts) - Organized translations by page/section: nav, home, projects, contact, blog, footer, common - Vietnamese translations provided for all UI elements Components: - Created LanguageSwitcher component with toggle button (EN ⇄ VI) - Shows current language with globe icon - Preserves current path when switching languages - Integrated into Navbar (desktop & mobile) BaseLayout Updates: - Added dynamic lang attribute based on URL locale - Supports proper HTML lang tags for SEO and accessibility Build Status: - ✅ Dev server running successfully on http://localhost:4321/ - ✅ No errors, pages load correctly - ✅ TypeScript paths configured correctly Next Steps: - Update individual pages to use translation strings - Implement localized routing for all pages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Navigation & Footer Translations: - Updated Navbar to use dynamic translations based on current locale - Updated Footer to use translation strings for all text - Navigation links (Blog, Projects, Contact) now display in correct language - Footer copyright and "Built with" text fully translated Vietnamese Page Routes: - Created /vi/* routes for Vietnamese language versions - Copied main pages to /vi/ directory (index, projects, contact, blog) - Pages automatically detect locale from URL path - Vietnamese routes fully functional How It Works: - English: / (no prefix) - Vietnamese: /vi/* - Language switcher in navbar toggles between EN and VI - Preserves current path when switching (e.g., /projects ↔ /vi/projects) - Nav and Footer automatically display in correct language Current Status: - ✅ i18n infrastructure complete - ✅ Language switcher working in navbar - ✅ Nav and Footer fully translated - ✅ Vietnamese routes functional - 🔄 Page content still needs translation (homepage, projects, contact, blog) Test URLs: - English: http://localhost:4321/ - Vietnamese: http://localhost:4321/vi/ - Click EN/VI button in navbar to switch languages Next: Update page content to use translation strings 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Fully Translated Pages: - ✅ Homepage (/) - Hero section with welcome, greeting, role, tagline - CTA buttons (View My Work, Get in Touch) - Stats section (Followers, Repositories, Years Exp, Available for hire) - About section with bio, education, tech stack - Featured Projects section - Latest Articles section - Final CTA section - ✅ Contact Page (/contact) - Page title and subtitle - "Get in Touch" section - Quick Info (Location, Role, Education) - Interests tags - Response Time section - Collaboration CTA Vietnamese Routes Working: - /vi/ (homepage in Vietnamese) - /vi/contact (contact page in Vietnamese) - /vi/projects (projects page - uses existing content) - /vi/blog (blog listing - uses existing content) How to Use: 1. Visit http://localhost:4321/ (English) 2. Click "EN" button in navbar 3. Switched to /vi/ (Vietnamese) 4. All text automatically displays in Vietnamese 5. Navigation preserved when switching languages Build Status: - ✅ 19 pages built successfully - ✅ 0 errors, 1 minor warning (unused import) - ✅ All Vietnamese routes functional - ✅ Language switcher working perfectly Remaining Work: - Projects and blog pages still use English content (Vietnamese routes exist but content not translated yet) - These pages can be translated later if needed 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Issue Fixed:
- Navigation links were hardcoded to English routes (/blog, /projects, /contact)
- When on Vietnamese page (/vi/), clicking nav links would switch back to English
- Language context was not preserved when navigating between pages
Solution:
- Updated Navbar to use getLocalizedPath() for all navigation links
- Updated Footer "Discover" section to use localized paths
- Updated all internal links on homepage (CTA buttons, View All links)
- Logo now links to correct language homepage (/ or /vi/)
How It Works:
- getLocalizedPath('/projects', 'en') → '/projects'
- getLocalizedPath('/projects', 'vi') → '/vi/projects'
- Language stays consistent when navigating through the site
Example Flow:
1. User on /vi/ (Vietnamese homepage)
2. Clicks "Dự Án" in navbar
3. Goes to /vi/projects (stays in Vietnamese) ✅
4. Previously went to /projects (switched to English) ❌
All Links Updated:
- ✅ Navbar: Blog, Projects, Contact, Logo
- ✅ Footer: Blog, Projects, Contact
- ✅ Homepage: All CTA buttons, View My Work, Get in Touch, View All Projects, View All Articles
- ✅ Mobile menu: All navigation links
Build Status:
- ✅ 19 pages built successfully
- ✅ 0 errors, 1 minor warning (unused import)
- ✅ All routes functional
Testing:
1. Visit http://localhost:4321/vi/
2. Click "Dự Án" → Goes to /vi/projects ✅
3. Click "Blog" → Goes to /vi/blog ✅
4. Click "Liên Hệ" → Goes to /vi/contact ✅
5. Language context preserved throughout navigation!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Translation Files Updated: - Added missing translation keys for Projects page - allProjects, viewMore, emptyState, viewAll - All category filters translated (Product → Sản Phẩm, etc.) - Added missing translation keys for Blog page - allPosts, featured, readArticle, emptyState, clearFilters - English/Vietnamese language filter labels Projects Page (/projects and /vi/projects): - ✅ Page title and subtitle fully translated - ✅ "All Projects" button translated - ✅ Category filters: Product, Research, Tutorial, Tool, Fun all translated - ✅ "View More Projects" button translated - ✅ Empty state message translated - ✅ "View all projects" link translated Blog Page (/blog and /vi/blog): - ✅ Page title and subtitle fully translated - ✅ "All Posts" header translated - ✅ "📌 FEATURED" badge translated to "📌 NỔI BẬT" - ✅ "Read Article" button translated to "Đọc Bài Viết" - ✅ Language filters: "🇺🇸 English" and "🇻🇳 Vietnamese" translated - ✅ "min read" → "phút đọc" - ✅ Empty state and "Clear filters" translated Vietnamese Translations: - Projects: "Dự Án", "Tất Cả Dự Án", "Xem Thêm Dự Án" - Blog: "Tất Cả Bài Viết", "NỔI BẬT", "Đọc Bài Viết", "phút đọc" - Filters: "Sản Phẩm", "Nghiên Cứu", "Hướng Dẫn", "Công Cụ", "Giải Trí" Build Status: - ✅ 19 pages built successfully - ✅ 0 errors, 1 minor warning (unused import) - ✅ All Vietnamese routes functional Testing: 1. Visit /vi/projects → All text in Vietnamese ✅ 2. Visit /vi/blog → All text in Vietnamese ✅ 3. Filter buttons work and maintain language context ✅ 4. Navigation between pages preserves language ✅ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
hieunv3vmo
deleted the
claude/redesign-portfolio-astro-011CV47FNfGfB9d9QbCWS9t9
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.