diff --git a/BLOG_MIGRATION_STATUS.md b/BLOG_MIGRATION_STATUS.md deleted file mode 100644 index fe8e9ba..0000000 --- a/BLOG_MIGRATION_STATUS.md +++ /dev/null @@ -1,203 +0,0 @@ -# Blog Post Migration Status - -## βœ… Completed (2/10) -1. βœ… **inverted-hyde.mdx** - Migrated (sample) -2. βœ… **stop-using-requirements.mdx** - Migrated - -## πŸ“ Remaining Blog Posts (8/10) - -### Post Details for Migration - -#### 1. flux-lora.md -- **Title**: Fine-tuning Flux.1-dev LoRA on yourself -- **Date**: 2024-11-17 -- **Category**: AI/ML -- **Language**: en -- **Tags**: ["Flux", "LoRA", "Text to Image"] -- **Image**: /images/blog/flux-lora.png - -#### 2. python-313-free-threaded.md -- **Title**: Free Threaded Mode in Python3.13 (GIL disabled) -- **Date**: 2024-10-10 -- **Category**: Python -- **Language**: en -- **Tags**: ["Python", "GIL"] -- **Image**: /images/blog/python-313.png - -#### 3. opensource-github-copilot.md -- **Title**: Open-source AI code assistant Setup Guide -- **Date**: 2024-10-08 -- **Category**: Tutorial -- **Language**: en -- **Tags**: ["Tool", "VSCode", "LLM"] -- **Image**: /images/blog/continue-dev.png - -#### 4. rag-in-production.md -- **Title**: RAG In Production - Best Practices Notes -- **Date**: 2024-07-18 -- **Category**: AI/ML -- **Language**: en -- **Tags**: ["RAG", "LLM", "production", "best-practices"] -- **Image**: /images/blog/rag-in-production.png - -#### 5. beam-search.md -- **Title**: Beam search algorithm -- **Date**: 2024-04-01 -- **Category**: AI/ML -- **Language**: en -- **Tags**: ["algorithm", "beam-search", "NLP"] -- **Image**: /images/blog/beam-search.webp - -#### 6. python-decorator.md -- **Title**: Python Decorator -- **Date**: 2024-03-09 -- **Category**: Python -- **Language**: vi (Vietnamese) -- **Tags**: ["python", "decorator", "tutorial"] -- **Image**: /images/blog/python-decorator.jpeg - -#### 7. bert-finetuned.md -- **Title**: Fine-tuning BERT for the Sentence Pair Classification Task -- **Date**: 2022-12-11 -- **Category**: AI/ML -- **Language**: en -- **Tags**: ["BERT", "NLP", "fine-tuning", "classification"] -- **Image**: /images/blog/sentence-pair-classification.jpeg - -#### 8. selenium-capture-http-request.md -- **Title**: Capture HTTP request with Selenium like DevTools -- **Date**: 2022-11-19 -- **Category**: Tutorial -- **Language**: en -- **Tags**: ["Selenium", "HTTP", "DevTools", "testing"] -- **Image**: /images/blog/selenium-wire.png - ---- - -## πŸ”§ Migration Template - -For each post, use this format: - -```markdown ---- -title: "[TITLE FROM ABOVE]" -description: "[DESCRIPTION FROM OLD POST]" -date: [DATE FROM ABOVE] -author: "Hieu Nguyen" -language: "[en or vi]" -category: "[CATEGORY FROM ABOVE]" -tags: [TAGS FROM ABOVE] -image: "[IMAGE FROM ABOVE]" -draft: false ---- - -[CONTENT - Remove frontmatter, remove , fix image paths] -``` - ---- - -## πŸ“‹ Quick Migration Steps - -### For Each Post: - -1. **Read the original post**: - ```bash - cat /home/user/behitek.github.io/blog/2024-11-17-flux-lora.md - ``` - -2. **Extract content** (skip frontmatter lines 1-8, remove truncate tag): - ```bash - sed '1,8d' blog/FILE.md | sed 's|||g' | sed 's|/img/blog|/images/blog|g' - ``` - -3. **Create new MDX file** in: - ``` - /home/user/behitek.github.io/new-site/src/content/blog/[slug].mdx - ``` - -4. **Add proper frontmatter** using template above - -5. **Paste content** below frontmatter - ---- - -## πŸš€ Bulk Migration Script - -You can also use this command to help with extraction: - -```bash -#!/bin/bash -cd /home/user/behitek.github.io - -# For each remaining post -for file in \ - "blog/2024-11-17-flux-lora.md:flux-lora:2024-11-17:en:AI/ML" \ - "blog/2024-10-10-python-313-free-threaded.md:python-313-free-threaded:2024-10-10:en:Python" \ - "blog/2024-10-08-opensource-github-copilot.md:opensource-github-copilot:2024-10-08:en:Tutorial" \ - "blog/2024-07-18-rag-in-production.md:rag-in-production:2024-07-18:en:AI/ML" \ - "blog/2024-04-01-beam-search.md:beam-search:2024-04-01:en:AI/ML" \ - "blog/2024-03-09-python-decorator.md:python-decorator:2024-03-09:vi:Python" \ - "blog/2022-12-11-bert-finetuned.md:bert-finetuned:2022-12-11:en:AI/ML" \ - "blog/2022-11-19-selenium-capture-http-request.md:selenium-capture-http-request:2022-11-19:en:Tutorial" -do - IFS=':' read -r filepath slug date lang category <<< "$file" - echo "Processing: $filepath" - - # Extract title - title=$(grep "^title:" "$filepath" | sed 's/title: //' | sed 's/"//g') - - # Extract description - desc=$(grep "^description:" "$filepath" | sed 's/description: //' | sed 's/"//g') - - # Extract tags - tags=$(grep "^tags:" "$filepath" | sed 's/tags: \[//' | sed 's/\]//') - - # Extract image - image=$(grep "^image:" "$filepath" | sed 's/image: //' | sed 's|/img/blog|/images/blog|') - - echo "Title: $title" - echo "Slug: $slug" - echo "Date: $date" - echo "---" -done -``` - ---- - -## ⏱️ Estimated Time - -- Per post migration: ~3-5 minutes -- Total for 8 posts: ~30-40 minutes -- Testing: ~10 minutes -- **Total: ~50 minutes** - ---- - -## βœ… After Migration Checklist - -1. [ ] All 10 blog posts migrated -2. [ ] Test locally: `cd new-site && npm run dev` -3. [ ] Verify all posts show up on /blog -4. [ ] Check language badges (EN/VI) display correctly -5. [ ] Test filtering by language and category -6. [ ] Verify images load correctly -7. [ ] Check Vietnamese post (python-decorator) displays properly -8. [ ] Test dark mode on all posts -9. [ ] Commit and push all changes -10. [ ] Create summary document - ---- - -## 🎯 Next Actions - -1. **Complete blog migration** (8 posts remaining) -2. **Optional: Add code copy buttons** (30 min) -3. **Configure Giscus** (10 min - requires GitHub Discussions setup) -4. **Final testing** (20 min) -5. **Deploy!** πŸš€ - ---- - -**Current Progress: 20% Complete (2/10 posts migrated)** - -**Note**: The site is already functional with 1 sample post. The remaining posts are just content migration - no code changes needed! diff --git a/CURRENT_STATUS.md b/CURRENT_STATUS.md deleted file mode 100644 index c6847b0..0000000 --- a/CURRENT_STATUS.md +++ /dev/null @@ -1,277 +0,0 @@ -# πŸŽ‰ Portfolio Redesign - Current Status - -**Last Updated**: 2025-11-12 -**Branch**: `claude/redesign-portfolio-astro-011CV47FNfGfB9d9QbCWS9t9` -**Overall Progress**: 85% Complete ✨ - ---- - -## βœ… What's DONE (Ready to Use!) - -### πŸ—οΈ **Complete Infrastructure** (100%) -- βœ… Astro 4.x project with TypeScript -- βœ… TailwindCSS 3.x with custom emerald theme -- βœ… Content Collections (type-safe) -- βœ… Dark mode with localStorage -- βœ… SEO optimization (OG tags, Twitter cards) -- βœ… RSS feed (/rss.xml) -- βœ… GitHub Actions deployment -- βœ… Mobile-first responsive design - -### πŸ“„ **All 6 Pages Built** (100%) -1. βœ… Homepage - Hero, bento grid, featured projects -2. βœ… Blog Listing - Language/category filtering -3. βœ… Blog Post Template - TOC, progress bar, comments -4. βœ… Projects - Category filtering -5. βœ… Contact - Social links, info cards -6. βœ… 404 - Custom error page - -### 🧩 **All 9 Components** (100%) -- βœ… Navbar (glass morphism, mobile menu) -- βœ… Footer (social links) -- βœ… ThemeToggle (dark/light) -- βœ… LanguageBadge (πŸ‡ΊπŸ‡Έ EN / πŸ‡»πŸ‡³ VI) -- βœ… BlogCard, ProjectCard -- βœ… TableOfContents (auto-generated) -- βœ… Giscus (comments - needs config) -- βœ… SEO (complete meta tags) - -### πŸ“ **Content** (25% - Site works with current content!) -- βœ… 4 projects configured (LCOJ, Inverted HyDE, hoc-bash, AI Assistant) -- βœ… 2 blog posts migrated: - 1. **inverted-hyde.mdx** (sample) - 2. **stop-using-requirements.mdx** (just added!) -- βœ… All static assets (images, favicon, CNAME) - -### πŸ“š **Documentation** (100%) -- βœ… **README.md** - Quick start guide -- βœ… **MIGRATION_GUIDE.md** - Detailed migration steps -- βœ… **PROJECT_SUMMARY.md** - Complete overview -- βœ… **BLOG_MIGRATION_STATUS.md** - Blog migration guide (NEW!) -- βœ… **CURRENT_STATUS.md** - This file! - ---- - -## 🎯 What's LEFT (Optional Content Migration) - -### πŸ“ **Blog Posts** (20% complete - 2/10 migrated) - -**βœ… Migrated (2):** -1. inverted-hyde.mdx -2. stop-using-requirements.mdx - -**πŸ“‹ Remaining (8) - Ready to Migrate:** - -All details in `BLOG_MIGRATION_STATUS.md` with: -- Exact titles, dates, categories -- Migration templates -- Bulk migration scripts -- Estimated time: 30-40 minutes total - -**Posts:** -3. flux-lora.md (AI/ML, 2024-11-17) -4. python-313-free-threaded.md (Python, 2024-10-10) -5. opensource-github-copilot.md (Tutorial, 2024-10-08) -6. rag-in-production.md (AI/ML, 2024-07-18) -7. beam-search.md (AI/ML, 2024-04-01) -8. python-decorator.md (Python, 2024-03-09) - **Vietnamese** -9. bert-finetuned.md (AI/ML, 2022-12-11) -10. selenium-capture-http-request.md (Tutorial, 2022-11-19) - -### πŸ”§ **Optional Enhancements** - -1. **Giscus Configuration** (10 minutes) - - Enable GitHub Discussions in repo - - Get repo/category IDs from https://giscus.app - - Update `src/components/Giscus.astro` (lines 28-29) - -2. **Code Copy Buttons** (30 minutes - Optional) - - Add copy-to-clipboard for code blocks - - Toast notification on copy - -3. **Pagefind Search** (1 hour - Optional) - - Install @astrojs/pagefind - - Add search to navbar - ---- - -## πŸš€ SITE IS READY TO TEST! - -The site is **fully functional** right now with 2 blog posts. You can: - -### Test Locally Right Now: - -```bash -# Navigate to new site -cd /home/user/behitek.github.io/new-site - -# Install dependencies -npm install - -# Start dev server -npm run dev - -# Visit: http://localhost:4321 -``` - -### What You'll See: -- ✨ Beautiful homepage with your profile -- πŸ“ Blog page with 2 posts (working filters!) -- πŸš€ Projects page with 4 projects -- πŸ’¬ Contact page with social links -- πŸŒ™ Perfect dark mode -- πŸ“± Fully responsive mobile design - ---- - -## πŸ“Š Performance Metrics - -### Before (Docusaurus): -- JS Bundle: ~200 KB -- Build Time: 8-10 seconds -- Load Time: 2-3 seconds -- Lighthouse: 85-90 - -### After (Astro - Current): -- JS Bundle: ~5-10 KB (**95% smaller!** πŸš€) -- Build Time: 2-3 seconds (**70% faster!** ⚑) -- Load Time: <1 second (**3x faster!** πŸ’¨) -- Lighthouse: 95-100 (target) (**Better scores!** πŸ“ˆ) - ---- - -## 🎨 Design Highlights - -Your new site features: -- 🎨 **Glass morphism** navbar with backdrop blur -- 🏷️ **Language badges** for EN/VI posts -- πŸ“Š **Category system** with color coding -- πŸ“ˆ **Reading progress bar** on blog posts -- πŸ—‚οΈ **Auto-generated TOC** with active sections -- πŸŒ™ **Smooth dark mode** with persistence -- πŸ“± **Perfect mobile** experience -- β™Ώ **WCAG 2.1 AA** accessible - ---- - -## πŸ“ Project Structure - -``` -/home/user/behitek.github.io/ -β”œβ”€β”€ new-site/ ← YOUR NEW SITE (all code here!) -β”‚ β”œβ”€β”€ src/ -β”‚ β”‚ β”œβ”€β”€ components/ ← 9 reusable components -β”‚ β”‚ β”œβ”€β”€ layouts/ ← 2 layout templates -β”‚ β”‚ β”œβ”€β”€ pages/ ← 6 pages (all routes) -β”‚ β”‚ β”œβ”€β”€ content/ ← Blog posts + projects -β”‚ β”‚ β”‚ β”œβ”€β”€ blog/ ← 2 posts (MDX format) -β”‚ β”‚ β”‚ └── projects/ ← 4 projects (JSON) -β”‚ β”‚ β”œβ”€β”€ styles/ ← Global CSS + Tailwind -β”‚ β”‚ └── utils/ ← Helper functions -β”‚ β”œβ”€β”€ public/ ← Static assets (images, etc.) -β”‚ β”œβ”€β”€ README.md ← Quick start guide -β”‚ β”œβ”€β”€ MIGRATION_GUIDE.md ← Detailed migration steps -β”‚ β”œβ”€β”€ PROJECT_SUMMARY.md ← Complete overview -β”‚ β”œβ”€β”€ BLOG_MIGRATION_STATUS.md ← Blog migration guide -β”‚ └── CURRENT_STATUS.md ← You are here! -β”‚ -└── blog/ ← OLD BLOG POSTS (8 remaining) - └── *.md ← To be migrated -``` - ---- - -## 🎯 Next Steps - Three Options - -### Option 1: Test Site NOW (Recommended! 5 minutes) -```bash -cd /home/user/behitek.github.io/new-site -npm install -npm run dev -# Open browser: http://localhost:4321 -``` -**Perfect for**: Seeing your new site in action immediately! - -### Option 2: Migrate Remaining Posts (30-40 minutes) -Follow `BLOG_MIGRATION_STATUS.md` to migrate 8 remaining posts -**Perfect for**: Completing the content migration before launch - -### Option 3: Deploy As-Is (10 minutes) -The site works with 2 posts - deploy now, migrate content later -**Perfect for**: Getting online quickly, content migration can happen after - ---- - -## πŸ’‘ Important Notes - -### ✨ The Site Works NOW! -- All pages are functional -- Navigation works perfectly -- Dark mode toggles smoothly -- Filtering on blog/projects works -- 2 blog posts are live and render beautifully -- All images load correctly - -### πŸ“ Content Migration is Separate -- The 8 remaining blog posts are **content-only** -- No code changes needed -- Site functionality won't change -- Can be done gradually (1 post at a time) -- Or all at once using the guide - -### πŸš€ You Can Deploy Anytime -- Current state is production-ready -- Add more posts anytime after deployment -- Just commit and push to update - ---- - -## πŸŽ‰ Achievement Unlocked! - -You now have a **modern, blazing-fast portfolio** featuring: - -βœ… 95% smaller JavaScript bundle -βœ… 3x faster load times -βœ… Beautiful modern UI with dark mode -βœ… Perfect mobile experience -βœ… SEO optimized -βœ… Production-ready architecture -βœ… Type-safe content collections -βœ… Comprehensive documentation - -**Total Development**: -- **93 files** created -- **~3,000 lines** of code written -- **Weeks of work** completed -- **All best practices** implemented - ---- - -## πŸ“ž Quick Links - -- **Test Locally**: `cd new-site && npm install && npm run dev` -- **Migration Guide**: See `BLOG_MIGRATION_STATUS.md` -- **Full Docs**: See `README.md` and `MIGRATION_GUIDE.md` -- **Project Overview**: See `PROJECT_SUMMARY.md` - ---- - -## πŸ™ Final Note - -Your portfolio redesign is **85% complete** and **100% functional**! - -The remaining 15% is just content migration (blog posts), which is: -- βœ… Well-documented with templates -- βœ… Can be done gradually -- βœ… Doesn't block deployment -- βœ… Takes ~30-40 minutes total - -**You can test the site right now and see it in action!** πŸš€ - ---- - -**Questions?** Check the documentation files! -**Ready to launch?** Follow the deployment guide in `MIGRATION_GUIDE.md`! -**Want to see it?** Run `npm run dev` in the new-site directory! - -**Built with ❀️ using Astro 4.x + TailwindCSS 3.x + TypeScript** diff --git a/MIGRATION_GUIDE.md b/MIGRATION_GUIDE.md deleted file mode 100644 index 42ad7ad..0000000 --- a/MIGRATION_GUIDE.md +++ /dev/null @@ -1,291 +0,0 @@ -# Migration Guide: Docusaurus β†’ Astro - -## βœ… Completed - -### 1. Project Setup -- βœ… Astro 4.x with TypeScript initialized -- βœ… TailwindCSS configured with custom emerald green theme -- βœ… Project structure created (components, layouts, pages, content collections) -- βœ… Content collections configured for blog and projects - -### 2. Core Features -- βœ… Dark mode toggle with localStorage persistence -- βœ… SEO component with OpenGraph and Twitter cards -- βœ… Responsive navbar with mobile menu -- βœ… Footer with social links -- βœ… RSS feed generation - -### 3. Pages Built -- βœ… Homepage with hero, bento grid about section, featured projects -- βœ… Blog listing with language and category filtering -- βœ… Blog post template with TOC, reading progress bar, share buttons -- βœ… Projects page with category filtering -- βœ… Contact page with social links and info cards -- βœ… Custom 404 page - -### 4. Components -- βœ… ThemeToggle - Dark/light mode switcher -- βœ… LanguageBadge - EN/VI indicators -- βœ… BlogCard - Blog post preview cards -- βœ… ProjectCard - Project showcase cards -- βœ… TableOfContents - Auto-generated TOC with active section highlighting -- βœ… Giscus - GitHub Discussions-based comments -- βœ… SEO - Complete meta tags - -### 5. Static Assets -- βœ… Images copied from /static/img β†’ /public/images -- βœ… Favicon copied -- βœ… CNAME file for custom domain -- βœ… .nojekyll for GitHub Pages - -## πŸ“ Remaining Tasks - -### 1. Blog Posts Migration (10 posts) -Need to convert from Docusaurus format to Astro MDX format: - -**Old format (Docusaurus):** -```markdown ---- -title: "Post Title" -authors: hieunv -tags: [tag1, tag2] -description: Description text -image: /img/blog/image.jpg -comments: true ---- - -Content... - -More content... -``` - -**New format (Astro):** -```markdown ---- -title: "Post Title" -description: Description text -date: 2025-09-07 -author: "Hieu Nguyen" -language: "en" # or "vi" -category: "AI/ML" # AI/ML, Python, Tutorial, Data -tags: ["tag1", "tag2"] -image: "/images/blog/image.jpg" -draft: false ---- - -Content... -``` - -**Posts to migrate:** -1. 2025-09-07-inverted-hyde.md β†’ inverted-hyde.mdx (EN, AI/ML) -2. 2025-08-31-stop-using-requirements.md β†’ stop-using-requirements.mdx (EN, Python) -3. 2024-11-17-flux-lora.md β†’ flux-lora.mdx (EN, AI/ML) -4. 2024-10-10-python-313-free-threaded.md β†’ python-313-free-threaded.mdx (EN, Python) -5. 2024-10-08-opensource-github-copilot.md β†’ opensource-github-copilot.mdx (EN, Tutorial) -6. 2024-07-18-rag-in-production.md β†’ rag-in-production.mdx (EN, AI/ML) -7. 2024-04-01-beam-search.md β†’ beam-search.mdx (EN, AI/ML) -8. 2024-03-09-python-decorator.md β†’ python-decorator.mdx (VI, Python) -9. 2022-12-11-bert-finetuned.md β†’ bert-finetuned.mdx (EN, AI/ML) -10. 2022-11-19-selenium-capture-http-request.md β†’ selenium-capture-http-request.mdx (EN, Tutorial) - -**Migration steps:** -1. Copy content from /blog/*.md to /new-site/src/content/blog/*.mdx -2. Update frontmatter format -3. Fix image paths: /img/blog β†’ /images/blog -4. Remove tags -5. Update internal links -6. Test rendering - -### 2. Code Copy Buttons -Add copy-to-clipboard functionality to code blocks: -- Create CodeBlock.astro component with copy button -- Inject via rehype plugin or client-side script -- Show toast notification on copy - -### 3. Giscus Configuration -Update in /new-site/src/components/Giscus.astro: -- Visit https://giscus.app -- Configure with your repo: behitek/behitek.github.io -- Get repo ID and category ID -- Enable GitHub Discussions in repo settings -- Replace placeholders in Giscus.astro - -### 4. GitHub Actions Deployment -Create /new-site/.github/workflows/deploy.yml: -```yaml -name: Deploy to GitHub Pages - -on: - push: - branches: [main] - workflow_dispatch: - -permissions: - contents: read - pages: write - id-token: write - -jobs: - build: - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v4 - - - name: Setup Node - uses: actions/setup-node@v4 - with: - node-version: '20' - - - name: Install dependencies - run: npm ci - - - name: Build - run: npm run build - - - name: Upload artifact - uses: actions/upload-pages-artifact@v3 - with: - path: ./dist - - deploy: - needs: build - runs-on: ubuntu-latest - environment: - name: github-pages - url: ${{ steps.deployment.outputs.page_url }} - steps: - - name: Deploy to GitHub Pages - id: deployment - uses: actions/deploy-pages@v4 -``` - -### 5. Final Testing -- [ ] Test homepage in light/dark mode -- [ ] Test blog filtering (language and category) -- [ ] Test blog post rendering with TOC -- [ ] Test dark mode toggle persistence -- [ ] Test mobile responsiveness -- [ ] Test all internal links -- [ ] Verify images load correctly -- [ ] Test RSS feed (/rss.xml) -- [ ] Check Lighthouse scores (target: 95+) -- [ ] Verify CNAME and custom domain - -## πŸš€ Deployment Steps - -### Option 1: Replace Current Site -```bash -# 1. Backup current site -git checkout main -git branch backup-docusaurus - -# 2. Merge new site -git checkout claude/redesign-portfolio-astro-* -cd new-site -npm install -npm run build -# Test locally: npm run preview - -# 3. Move files to root -cd .. -rm -rf docs blog src static *.js *.json *.config.* (keep .git!) -mv new-site/* . -mv new-site/.* . (hidden files) -rm -rf new-site - -# 4. Commit and push -git add -A -git commit -m "feat: migrate to Astro from Docusaurus" -git push - -# 5. Configure GitHub Pages -# Go to repo Settings β†’ Pages -# Source: GitHub Actions (not branch) -``` - -### Option 2: Deploy to New Branch -```bash -# Keep old site on 'main', new site on 'astro-main' -git checkout -b astro-main -cd new-site -npm install -npm run build - -# Move files to root (same as above) -# Push to astro-main -git push -u origin astro-main - -# Update GitHub Pages to deploy from astro-main -``` - -## πŸ“Š Comparison: Before vs After - -| Feature | Docusaurus | Astro | Improvement | -|---------|------------|-------|-------------| -| Build time | ~8-10s | ~2-3s | 70% faster | -| Bundle size | ~200KB JS | ~5-10KB JS | 95% smaller | -| Lighthouse | 85-90 | 95-100 | Better scores | -| Languages | React only | Any framework | More flexible | -| i18n | Built-in | Manual (simplified) | Simpler for our use case | -| Dark mode | Docusaurus theme | Custom Tailwind | Full control | - -## 🎨 Design Highlights - -### Color Palette -- Primary: Emerald Green (#10B981) -- Accent: Cyan (#06B6D4) -- Purple: AI/ML category (#8B5CF6) -- Responsive dark mode with Tailwind - -### Features -- Glass morphism navbar -- Bento grid layout for About section -- Language badges (πŸ‡ΊπŸ‡Έ EN / πŸ‡»πŸ‡³ VI) -- Category badges (color-coded) -- Reading progress bar -- Auto-generated table of contents -- Smooth page transitions -- Mobile-first responsive design - -### Performance Optimizations -- Minimal JavaScript (Astro islands architecture) -- Optimized images (Astro Image) -- No jQuery or heavy frameworks -- Fast TTI (Time to Interactive) -- SEO-friendly static HTML - -## πŸ’‘ Tips - -1. **Test thoroughly** before deploying to main -2. **Keep backup** of old site (backup-docusaurus branch) -3. **Update Giscus** configuration before launch -4. **Migrate posts** carefully, test each one -5. **Check all links** after deployment -6. **Monitor analytics** after launch to catch issues - -## πŸ“š Resources - -- Astro Docs: https://docs.astro.build -- TailwindCSS: https://tailwindcss.com/docs -- Giscus Setup: https://giscus.app -- GitHub Pages: https://docs.github.com/en/pages - -## πŸ› Known Issues / TODO - -- [ ] Giscus repo/category IDs need to be configured -- [ ] Code copy buttons not implemented yet -- [ ] Search (Pagefind) not installed (optional) -- [ ] Newsletter signup not implemented (optional) -- [ ] Blog posts not migrated yet (manual task) - -## πŸŽ‰ Result - -A blazing-fast, modern portfolio with: -- ⚑ 3-5x faster load times -- 🎨 Beautiful, custom design -- πŸ“± Perfect mobile experience -- πŸŒ™ Smooth dark mode -- πŸ” Easy content discovery -- 🌐 Simple EN/VI language support -- πŸ“ˆ Better SEO and social sharing diff --git a/PROJECT_SUMMARY.md b/PROJECT_SUMMARY.md deleted file mode 100644 index 2c8fe06..0000000 --- a/PROJECT_SUMMARY.md +++ /dev/null @@ -1,349 +0,0 @@ -# πŸš€ Project Complete: Astro Portfolio Redesign - -## βœ… What's Been Built - -### πŸ—οΈ Infrastructure (100%) -- βœ… Astro 4.x project with TypeScript -- βœ… TailwindCSS 3.x with custom emerald green theme -- βœ… Content Collections (type-safe blog & projects) -- βœ… Dark mode with localStorage persistence -- βœ… SEO components (OpenGraph, Twitter cards) -- βœ… RSS feed generation -- βœ… GitHub Actions deployment workflow -- βœ… Responsive mobile-first design - -### πŸ“„ Pages (100%) -- βœ… **Homepage** - Hero, bento grid about, featured projects, CTA -- βœ… **Blog Listing** - Language/category filtering, featured post -- βœ… **Blog Post Template** - TOC, progress bar, comments, share buttons -- βœ… **Projects** - Category filtering, tech stack tags -- βœ… **Contact** - Social links, info cards, CTA -- βœ… **404** - Custom error page with search - -### 🧩 Components (100%) -- βœ… Navbar (glass morphism, mobile menu) -- βœ… Footer (social links, sitemap) -- βœ… ThemeToggle (dark/light mode) -- βœ… LanguageBadge (πŸ‡ΊπŸ‡Έ EN / πŸ‡»πŸ‡³ VI) -- βœ… BlogCard (post preview) -- βœ… ProjectCard (project showcase) -- βœ… TableOfContents (auto-generated, active section) -- βœ… Giscus (GitHub Discussions comments) -- βœ… SEO (complete meta tags) - -### πŸ“ Content (Partial) -- βœ… 4 projects configured (LCOJ, Inverted HyDE, hoc-bash, AI Assistant) -- βœ… 1 blog post migrated (Inverted HyDE - sample) -- βœ… All static assets migrated (images, favicon, CNAME) -- ⚠️ 9 blog posts remaining to migrate - -### πŸ“š Documentation (100%) -- βœ… Comprehensive README.md -- βœ… Detailed MIGRATION_GUIDE.md -- βœ… Code comments and TypeScript types - ---- - -## πŸ“Š Performance vs Docusaurus - -| Metric | Docusaurus | Astro | Improvement | -|--------|------------|-------|-------------| -| **JS Bundle** | ~200 KB | ~5-10 KB | **95% smaller** | -| **Build Time** | 8-10s | 2-3s | **70% faster** | -| **Load Time** | 2-3s | <1s | **3x faster** | -| **Lighthouse** | 85-90 | 95-100 (target) | **Better scores** | - ---- - -## 🎨 Design Highlights - -### Visual Design -- **Color**: Emerald green (#10B981) primary, cyan accent, purple for AI/ML -- **Typography**: Inter for headings, system fonts for body -- **Layout**: Bento grid, card system, glass morphism -- **Animations**: Fade-in, slide-up, hover effects -- **Dark Mode**: Full support with smooth transitions - -### UX Features -- **Language Badges**: Clear EN/VI indicators on posts -- **Category System**: Color-coded badges (AI/ML, Python, Tutorial, Data) -- **Reading Progress**: Visual bar shows scroll progress -- **Table of Contents**: Auto-generated with active section highlighting -- **Smart Filtering**: Client-side filtering for blog and projects -- **Responsive**: Mobile-first, works on all devices - ---- - -## πŸ“Œ What's Left To Do - -### πŸ”΄ Critical (Required for Launch) - -1. **Migrate Remaining Blog Posts** (9 posts) - - Location: `/blog/*.md` β†’ `/new-site/src/content/blog/*.mdx` - - Estimated time: 1-2 hours - - See MIGRATION_GUIDE.md for steps - -2. **Configure Giscus** - - Enable GitHub Discussions in repo settings - - Get repo ID and category ID from https://giscus.app - - Update `/new-site/src/components/Giscus.astro` - - Estimated time: 10 minutes - -3. **Test Before Deploy** - - Run `cd new-site && npm install` - - Run `npm run dev` to test locally - - Test all pages, dark mode, mobile view - - Verify images load correctly - - Estimated time: 30 minutes - -### 🟑 Optional (Nice to Have) - -4. **Code Copy Buttons** - - Add copy-to-clipboard for code blocks - - Show toast notification on copy - - Estimated time: 30 minutes - -5. **Pagefind Search** (Optional) - - Install @astrojs/pagefind - - Add search component to navbar - - Estimated time: 1 hour - -6. **Newsletter** (Optional) - - Add email signup form - - Integrate with Mailchimp/ConvertKit - - Estimated time: 1-2 hours - ---- - -## πŸš€ Deployment Instructions - -### Option 1: Test Locally First (Recommended) - -```bash -# Navigate to new site -cd new-site - -# Install dependencies -npm install - -# Start dev server -npm run dev - -# Visit http://localhost:4321 -# Test all features - -# Build for production -npm run build - -# Preview production build -npm run preview -``` - -### Option 2: Deploy to Separate Branch - -```bash -# Current location: /home/user/behitek.github.io/new-site - -# Create new deployment branch -cd .. -git checkout -b astro-preview -cp -r new-site/* . -git add -A -git commit -m "test: preview Astro site" -git push -u origin astro-preview - -# View at: https://behitek.github.io (once GitHub Actions runs) -``` - -### Option 3: Replace Main Site - -```bash -# ⚠️ WARNING: This replaces your current site! -# Only do this after thorough testing - -# 1. Backup current site -git checkout main -git branch backup-docusaurus-2025-11-12 - -# 2. Merge new site -git checkout claude/redesign-portfolio-astro-011CV47FNfGfB9d9QbCWS9t9 -cd .. -rm -rf docs blog src static *.js *.json *.config.* (keep .git and .github!) -cp -r new-site/* . -cp -r new-site/.* . -rm -rf new-site - -# 3. Install and test -npm install -npm run build -npm run preview - -# 4. Deploy -git add -A -git commit -m "feat: deploy Astro redesign to production" -git push origin main - -# 5. Configure GitHub Pages -# Go to repo Settings β†’ Pages -# Source: GitHub Actions (not branch) -``` - ---- - -## πŸ“‹ Migration Checklist - -### Before Deployment -- [ ] Migrate all 9 remaining blog posts -- [ ] Configure Giscus (repo ID, category ID) -- [ ] Update Google Tag Manager ID if needed -- [ ] Test locally with `npm run dev` -- [ ] Test dark mode works correctly -- [ ] Test mobile responsiveness -- [ ] Verify all images load -- [ ] Check internal links work -- [ ] Test blog filtering (language + category) -- [ ] Test project filtering - -### After Deployment -- [ ] Verify custom domain (behitek.com) works -- [ ] Check GitHub Pages deployment status -- [ ] Test RSS feed (/rss.xml) -- [ ] Monitor Lighthouse scores -- [ ] Check Google Search Console -- [ ] Test Giscus comments -- [ ] Share on social media (test OG images) - ---- - -## 🎯 Quick Start Guide - -Want to get up and running immediately? Follow these steps: - -```bash -# 1. Navigate to new site -cd /home/user/behitek.github.io/new-site - -# 2. Install dependencies (will install Astro, TailwindCSS, etc.) -npm install - -# 3. Start development server -npm run dev - -# 4. Open browser to http://localhost:4321 - -# 5. Make changes and see them live reload! -``` - -**What you'll see:** -- Homepage with your profile and featured work -- Blog page (with 1 sample post - Inverted HyDE) -- Projects page (with 4 projects) -- Contact page -- All with dark mode working! - ---- - -## πŸ› Common Issues & Solutions - -### Issue: Images not loading -**Solution**: Check that image paths use `/images/img/...` not `/img/...` - -### Issue: Dark mode not persisting -**Solution**: Check browser localStorage, clear cache and reload - -### Issue: Blog post not showing -**Solution**: Verify frontmatter has all required fields (title, date, description, language, category) - -### Issue: Build errors -**Solution**: Run `npm run astro check` to see TypeScript errors - -### Issue: Port 4321 already in use -**Solution**: Kill existing process or use `npm run dev -- --port 3000` - ---- - -## πŸ“ž Next Steps - -### Immediate (Today) -1. **Test the site locally** - ```bash - cd new-site && npm install && npm run dev - ``` - -2. **Review the design** - - Check if colors/layout match your vision - - Test dark mode - - Verify mobile responsiveness - -3. **Decide on deployment strategy** - - Test on separate branch first? (Recommended) - - Or deploy directly to main? - -### This Week -4. **Migrate remaining blog posts** - - Use MIGRATION_GUIDE.md as reference - - Update frontmatter format - - Fix image paths - -5. **Configure Giscus** - - Set up GitHub Discussions - - Get IDs and update component - -6. **Deploy to production** - - Choose deployment option - - Monitor and verify - -### Optional Enhancements -7. Add code copy buttons -8. Install Pagefind search -9. Set up newsletter -10. Add more projects - ---- - -## πŸŽ‰ What You've Got - -A **production-ready, modern portfolio** with: - -βœ… Lightning-fast performance (3-5x faster than Docusaurus) -βœ… Beautiful, professional design -βœ… Perfect mobile experience -βœ… Smooth dark mode -βœ… SEO optimized -βœ… Easy content management -βœ… Bilingual support (EN/VI) -βœ… Modern tech stack (Astro + TailwindCSS) - -**Total Lines of Code**: ~3,000 -**Files Created**: 93 -**Time Saved**: Weeks of development work - ---- - -## πŸ“ Notes - -- All code is commented and TypeScript-typed -- Design system is extensible and consistent -- Performance optimizations are built-in -- Accessibility (A11y) best practices followed -- SEO best practices implemented - ---- - -## πŸ™ Thank You! - -This redesign provides a solid foundation for your portfolio going forward. The site is: -- Faster -- More maintainable -- Better designed -- More professional -- Future-proof - -**Questions?** Check the README.md or MIGRATION_GUIDE.md files! - -**Ready to launch?** Follow the deployment instructions above! - ---- - -**Built with ❀️ and AI** -*Astro 4.x + TailwindCSS 3.x + TypeScript* diff --git a/public/images/blog/continue-dev.png b/public/images/blog/continue-dev.png index 5c1df87..08748d7 100644 Binary files a/public/images/blog/continue-dev.png and b/public/images/blog/continue-dev.png differ diff --git a/public/images/blog/continue-ext.png b/public/images/blog/continue-ext.png index e267d67..1dd6977 100644 Binary files a/public/images/blog/continue-ext.png and b/public/images/blog/continue-ext.png differ diff --git a/public/images/blog/flux-caption.png b/public/images/blog/flux-caption.png index 0776659..13fb214 100644 Binary files a/public/images/blog/flux-caption.png and b/public/images/blog/flux-caption.png differ diff --git a/public/images/blog/flux-dataset.png b/public/images/blog/flux-dataset.png index 4b789f9..87fd577 100644 Binary files a/public/images/blog/flux-dataset.png and b/public/images/blog/flux-dataset.png differ diff --git a/public/images/blog/flux-lora.png b/public/images/blog/flux-lora.png index 3955339..aad4a54 100644 Binary files a/public/images/blog/flux-lora.png and b/public/images/blog/flux-lora.png differ diff --git a/public/images/blog/flux-sample-0.png b/public/images/blog/flux-sample-0.png index 769946f..a25059e 100644 Binary files a/public/images/blog/flux-sample-0.png and b/public/images/blog/flux-sample-0.png differ diff --git a/public/images/blog/flux-sample-2.png b/public/images/blog/flux-sample-2.png index b500538..c1207b1 100644 Binary files a/public/images/blog/flux-sample-2.png and b/public/images/blog/flux-sample-2.png differ diff --git a/public/images/blog/python313-no-gil.png b/public/images/blog/python313-no-gil.png index 1351a59..091e682 100644 Binary files a/public/images/blog/python313-no-gil.png and b/public/images/blog/python313-no-gil.png differ diff --git a/public/images/blog/stop-using-requirements.jpg b/public/images/blog/stop-using-requirements.jpg index 4c020b9..e004b5f 100644 Binary files a/public/images/blog/stop-using-requirements.jpg and b/public/images/blog/stop-using-requirements.jpg differ diff --git a/public/images/project/behivest-blog.png b/public/images/project/behivest-blog.png index 42c9dce..3cd72ab 100644 Binary files a/public/images/project/behivest-blog.png and b/public/images/project/behivest-blog.png differ diff --git a/public/images/project/behivest-funs.png b/public/images/project/behivest-funs.png index 9dba2d9..fea9d2b 100644 Binary files a/public/images/project/behivest-funs.png and b/public/images/project/behivest-funs.png differ diff --git a/public/images/project/behivest-home.png b/public/images/project/behivest-home.png index b9783ac..1aa4501 100644 Binary files a/public/images/project/behivest-home.png and b/public/images/project/behivest-home.png differ diff --git a/public/images/project/behivest-tools.png b/public/images/project/behivest-tools.png index 657015a..411bc3e 100644 Binary files a/public/images/project/behivest-tools.png and b/public/images/project/behivest-tools.png differ diff --git a/public/images/project/beli5-blog.png b/public/images/project/beli5-blog.png index 2c62706..9c2aee2 100644 Binary files a/public/images/project/beli5-blog.png and b/public/images/project/beli5-blog.png differ diff --git a/public/images/project/beli5-feedback.png b/public/images/project/beli5-feedback.png index 39617e7..60a2a2a 100644 Binary files a/public/images/project/beli5-feedback.png and b/public/images/project/beli5-feedback.png differ diff --git a/public/images/project/beli5-home.png b/public/images/project/beli5-home.png index fed0ab0..fe51486 100644 Binary files a/public/images/project/beli5-home.png and b/public/images/project/beli5-home.png differ diff --git a/public/images/project/beli5-tuts.png b/public/images/project/beli5-tuts.png index dd028c9..474b84b 100644 Binary files a/public/images/project/beli5-tuts.png and b/public/images/project/beli5-tuts.png differ diff --git a/public/images/project/lcoj-contest-ranking.png b/public/images/project/lcoj-contest-ranking.png index cfdd179..590337e 100644 Binary files a/public/images/project/lcoj-contest-ranking.png and b/public/images/project/lcoj-contest-ranking.png differ diff --git a/public/images/project/lcoj-contest.png b/public/images/project/lcoj-contest.png index 9206fa0..ff3f459 100644 Binary files a/public/images/project/lcoj-contest.png and b/public/images/project/lcoj-contest.png differ diff --git a/public/images/project/lcoj-home.png b/public/images/project/lcoj-home.png index ae868e4..8e7a369 100644 Binary files a/public/images/project/lcoj-home.png and b/public/images/project/lcoj-home.png differ diff --git a/public/images/project/lcoj-problem.png b/public/images/project/lcoj-problem.png index 3ee4bab..c80e6d6 100644 Binary files a/public/images/project/lcoj-problem.png and b/public/images/project/lcoj-problem.png differ diff --git a/public/images/project/lcoj-ranking-global.png b/public/images/project/lcoj-ranking-global.png index 40c4d98..f81ed6f 100644 Binary files a/public/images/project/lcoj-ranking-global.png and b/public/images/project/lcoj-ranking-global.png differ diff --git a/public/images/project/lcoj-stats.png b/public/images/project/lcoj-stats.png index dd00e68..c5c565f 100644 Binary files a/public/images/project/lcoj-stats.png and b/public/images/project/lcoj-stats.png differ diff --git a/public/images/project/lcoj-submission.png b/public/images/project/lcoj-submission.png index 8215f3d..cfde95d 100644 Binary files a/public/images/project/lcoj-submission.png and b/public/images/project/lcoj-submission.png differ diff --git a/public/images/project/linguistai-home.png b/public/images/project/linguistai-home.png new file mode 100644 index 0000000..2708768 Binary files /dev/null and b/public/images/project/linguistai-home.png differ diff --git a/public/images/project/linguistai-reading.png b/public/images/project/linguistai-reading.png new file mode 100644 index 0000000..fdbfe3b Binary files /dev/null and b/public/images/project/linguistai-reading.png differ diff --git a/public/images/project/linguistai-result.png b/public/images/project/linguistai-result.png new file mode 100644 index 0000000..3f7a0bd Binary files /dev/null and b/public/images/project/linguistai-result.png differ diff --git a/public/images/project/linguistai-speaking.png b/public/images/project/linguistai-speaking.png new file mode 100644 index 0000000..c5bfee2 Binary files /dev/null and b/public/images/project/linguistai-speaking.png differ diff --git a/public/images/project/linguistai-writting.png b/public/images/project/linguistai-writting.png new file mode 100644 index 0000000..a2603c1 Binary files /dev/null and b/public/images/project/linguistai-writting.png differ diff --git a/public/images/project/nexusai-chat.png b/public/images/project/nexusai-chat.png new file mode 100644 index 0000000..bb1fd2f Binary files /dev/null and b/public/images/project/nexusai-chat.png differ diff --git a/public/images/project/nexusai-dashboard.png b/public/images/project/nexusai-dashboard.png new file mode 100644 index 0000000..7025dc5 Binary files /dev/null and b/public/images/project/nexusai-dashboard.png differ diff --git a/public/images/project/nexusai-home.png b/public/images/project/nexusai-home.png new file mode 100644 index 0000000..fe00a26 Binary files /dev/null and b/public/images/project/nexusai-home.png differ diff --git a/public/images/project/nexusai-search.png b/public/images/project/nexusai-search.png new file mode 100644 index 0000000..cdb5bd0 Binary files /dev/null and b/public/images/project/nexusai-search.png differ diff --git a/src/content/projects/behivest.json b/src/content/projects/behivest.json index c44ac5c..a3f4caa 100644 --- a/src/content/projects/behivest.json +++ b/src/content/projects/behivest.json @@ -20,6 +20,6 @@ "website": "https://behitek.com/behivest", "github": "https://github.com/behitek/behivest" }, - "featured": true, - "order": 2 + "featured": false, + "order": 4 } diff --git a/src/content/projects/beli5.json b/src/content/projects/beli5.json index bc6291c..9027cf8 100644 --- a/src/content/projects/beli5.json +++ b/src/content/projects/beli5.json @@ -19,6 +19,6 @@ "website": "https://behitek.com/beli5", "github": "https://github.com/behitek/beli5" }, - "featured": true, - "order": 3 + "featured": false, + "order": 5 } diff --git a/src/content/projects/lcoj.json b/src/content/projects/lcoj.json index 6a0c30f..287b537 100644 --- a/src/content/projects/lcoj.json +++ b/src/content/projects/lcoj.json @@ -24,5 +24,5 @@ "github": "https://github.com/luyencode" }, "featured": true, - "order": 1 + "order": 3 } diff --git a/src/content/projects/linguistai.json b/src/content/projects/linguistai.json new file mode 100644 index 0000000..f11df83 --- /dev/null +++ b/src/content/projects/linguistai.json @@ -0,0 +1,26 @@ +{ + "id": "linguistai", + "title": "LinguistAI", + "description": "A comprehensive English proficiency assessment platform powered by AI. Features adaptive reading tests with LLM-generated questions, speech-to-text evaluation for speaking tests using Whisper, and detailed AI feedback on writing. Provides personalized insights on grammar, vocabulary, fluency, and coherence across all skills.", + "category": "Product", + "tech": [ + "Python", + "FastAPI", + "OpenAI GPT-4", + "Anthropic Claude", + "Whisper API", + "LangGraph", + "React" + ], + "images": [ + "/images/project/linguistai-home.png", + "/images/project/linguistai-reading.png", + "/images/project/linguistai-speaking.png", + "/images/project/linguistai-writting.png", + "/images/project/linguistai-result.png" + ], + "links": { + }, + "featured": true, + "order": 2 +} diff --git a/src/content/projects/nexusai.json b/src/content/projects/nexusai.json new file mode 100644 index 0000000..2d5e354 --- /dev/null +++ b/src/content/projects/nexusai.json @@ -0,0 +1,25 @@ +{ + "id": "nexusai", + "title": "NexusAI", + "description": "An intelligent retrieval-augmented generation system that processes and queries across multiple content types including text documents, images, and videos. Features custom vector embeddings, hybrid search, and LLM-powered re-ranking for precise multimodal information retrieval.", + "category": "Product", + "tech": [ + "Python", + "FastAPI", + "OpenAI GPT-4V", + "LangGraph", + "ChromaDB", + "PyMuPDF", + "Whisper API" + ], + "images": [ + "/images/project/nexusai-home.png", + "/images/project/nexusai-dashboard.png", + "/images/project/nexusai-search.png", + "/images/project/nexusai-chat.png" + ], + "links": { + }, + "featured": true, + "order": 1 +}