{"slug": "16-redesigning-my-portfolio-website", "title": "16 Redesigning my Portfolio Website", "summary": "A developer redesigned their portfolio website by migrating the AI chatbot from OpenAI to Hugging Face, switching the database from MongoDB to Neon PostgreSQL, and implementing streaming responses for a ChatGPT-like user experience. The project now uses the Qwen/Qwen3-4B model via the Nebius provider and features a robust fallback system with vector search and text matching.", "body_md": "Published on Aug 18, 2025\n\nI have installed Cursor on my laptop this weekend, and I am amazed at how much it speeds up my coding. I have a new debugging buddy!!\n\nThis week, I have made several updates to the Portfolio website.\n\nIn my previous post, I shared the excitement of implementing a chatbot based on ChatGPT for my portfolio website. The initial experience was promising - I successfully created content embeddings and integrated them with OpenAI's API. However, as many developers know, relying on a single service provider can lead to unexpected roadblocks.\n\nWhen my OpenAI account encountered issues, I faced a critical decision: abandon the chat functionality or find an alternative solution. I chose the latter, embarking on a journey that would transform my portfolio's AI capabilities and teach me valuable lessons about building robust, fallback-ready systems.\n\nThe transition from OpenAI to Hugging Face wasn't just a simple API swap - it was a complete architectural evolution. Here's what I learned:\n\n**1. Model Selection Complexity** Finding the right model on Hugging Face proved more challenging than expected. After testing several options:\n\n`microsoft/DialoGPT-medium`\n\n- No inference provider available\n\n`gpt2`\n\nand `distilgpt2`\n\n- Limited conversational capabilities\n\n`Qwen/Qwen3-4B`\n\n- Perfect fit with the `nebius`\n\nprovider\n\n**2. Database Architecture Evolution** The migration also prompted a database upgrade from MongoDB to Neon PostgreSQL. This wasn't just about changing providers - it was about building a more scalable, production-ready foundation for my portfolio.\n\n**Streaming Responses for Better UX** One of the most significant improvements was implementing streaming text responses. Instead of waiting for complete AI responses, users now see text appear word-by-word, creating a ChatGPT-like experience:\n\n``` js\n// Streaming implementation with word-by-word appearance\nconst stream = new ReadableStream({\n  start(controller) {\n    const encoder = new TextEncoder();\n    const words = response.split(' ');\n\n    words.forEach((word, index) => {\n      setTimeout(() => {\n        controller.enqueue(encoder.encode(word + ' '));\n        if (index === words.length - 1) {\n          controller.close();\n        }\n      }, index * 100);\n    });\n  }\n});\n```\n\n**Robust Fallback System** I implemented a multi-layered fallback approach:\n\n**Vector Search**: Primary method using Pinecone embeddings\n\n**Text Search**: Fallback to simple text matching\n\n**Intelligent Responses**: Pre-built responses for common queries\n\n**Input Focus Management** Users can now have continuous conversations without losing focus:\n\n``` js\nuseEffect(() => {\n  if (inputRef.current) {\n    inputRef.current.focus();\n  }\n}, [messages]);\n```\n\n**Response Filtering** Hidden internal AI processing tags for cleaner output:\n\n``` js\nconst cleanResponse = response.replace(/<think>.*?<\\/think>/gs, '');\n```\n\n**Database Optimization**\n\nMigrated from MongoDB to Neon PostgreSQL\n\nUpdated Prisma schema for better type safety\n\nImplemented proper ID handling for vector search\n\n**API Efficiency**\n\nReduced response times with streaming\n\nImplemented proper error handling\n\nAdded comprehensive logging for debugging\n\n**Always Have a Plan B**: Building fallback systems from the start saves time and maintains user experience\n\n**Open Source is Powerful**: Hugging Face provides enterprise-grade AI capabilities without vendor lock-in\n\n**User Experience Matters**: Small details like input focus and streaming responses significantly improve perceived performance\n\n**Database Architecture**: Choosing the right database from the start prevents migration headaches later\n\nThe chat functionality is now fully operational with:\n\n✅ Hugging Face AI integration via Nebius\n\n✅ Streaming text responses\n\n✅ PostgreSQL database backend\n\n✅ Robust error handling\n\n✅ Clean, professional UI\n\n**Next Steps:**\n\nImplement user analytics for chat interactions\n\nAdd conversation history persistence\n\nExplore multi-language support\n\nIntegrate with more AI models for specialized responses\n\nThis migration taught me that technical challenges often lead to better solutions. What started as a simple API replacement evolved into a more robust, scalable, and user-friendly chat system. The journey from OpenAI to Hugging Face wasn't just about solving a problem - it was about building something better.\n\nFor developers facing similar challenges, remember: every obstacle is an opportunity to improve your architecture and learn new technologies. The result is often a more resilient and feature-rich application.\n\n**Technical Stack Used:**\n\nNext.js 15.0.0\n\nHugging Face Inference API\n\nNeon PostgreSQL\n\nPrisma ORM\n\nPinecone Vector Database\n\nTailwind CSS\n\nTypeScript\n\n**Resources:**\n\nThis blog post captures the technical journey, challenges faced, and solutions implemented while maintaining the professional tone and technical depth that your readers expect. It also provides valuable insights for other developers who might face similar migration challenges.", "url": "https://wpnews.pro/news/16-redesigning-my-portfolio-website", "canonical_source": "https://dev.to/codenificient/16-redesigning-my-portfolio-website-1ee6", "published_at": "2026-07-28 03:50:42+00:00", "updated_at": "2026-07-28 04:05:20.499287+00:00", "lang": "en", "topics": ["artificial-intelligence", "large-language-models", "developer-tools", "ai-infrastructure"], "entities": ["OpenAI", "Hugging Face", "Neon PostgreSQL", "MongoDB", "Pinecone", "Nebius", "Cursor", "Qwen"], "alternates": {"html": "https://wpnews.pro/news/16-redesigning-my-portfolio-website", "markdown": "https://wpnews.pro/news/16-redesigning-my-portfolio-website.md", "text": "https://wpnews.pro/news/16-redesigning-my-portfolio-website.txt", "jsonld": "https://wpnews.pro/news/16-redesigning-my-portfolio-website.jsonld"}}