This project showcases my personal portfolio built with Next.js, featuring an AI-powered chatbot with knowledge graph integration. It demonstrates my journey in modern web development while leveraging my extensive background in AI technologies, now including vector-based search and intelligent conversation capabilities.
🚀 Live Demo: https://daniel-wong-portfolio.vercel.app/
🤖 AI Chat: https://daniel-wong-portfolio.vercel.app/chat
Enhanced chat interface with knowledge graph-powered responses and suggested questions
- Knowledge Graph Integration: Neo4j-powered knowledge graph for intelligent context-aware responses
- Vector-Based Search: Advanced search capabilities across projects, skills, and experiences
- Gemini LLM Integration: Google's Gemini AI for natural language understanding and generation
- Suggested Questions: Dynamic question suggestions based on portfolio content
- Real-time Chat: Interactive chat interface with typing indicators and timestamps
- Contextual Responses: Personalized answers about professional background, projects, and skills
- Next.js Framework: Utilizes the latest web technologies for a responsive and dynamic user experience
- Floating Navigation Bar: A visually appealing and functional navigation bar that remains accessible when users scroll up, meanwhile hides on scroll, thanks to Aceternity UI
- Error Monitoring: Integrated Sentry for real-time error tracking and performance monitoring. User can provide any feedback/bug with the built-in screenshot functionality to the web developer (i.e. ME!)
- Magical Button: A absolute stunning, animated button inspired by tailwindcss buttons. It enhances user interaction and showcases advanced CSS and JavaScript techniques
- Neo4j: Graph database for knowledge representation and vector search
- Google Gemini AI: Large language model for natural language processing
- Neo4j Driver: TypeScript integration with Neo4j database
- Knowledge Graph Architecture: Custom-built entity relationship mapping
- Next.js 14 with App Router / React 18
- TypeScript: Type-safe development
- Tailwind CSS: Utility-first styling
- Aceternity UI: Modern UI components
- Framer Motion: Smooth animations and interactions
- Lucide React: Beautiful icons
- TSX: TypeScript execution for build scripts
- Sentry: Error monitoring and performance tracking
- Vercel: Deployment platform
- Dotenv: Environment variable management
- Node.js 18+ and npm
- Neo4j Database (local or Neo4j Aura cloud instance)
- Google Gemini API Key from Google AI Studio
-
Clone the repository
git clone https://github.com/your-username/next-portfolio.git cd next-portfolio -
Install dependencies
npm install
-
Set up environment variables Create a
.env.localfile in the root directory:# Neo4j Configuration NEO4J_URI=neo4j+s://your-instance.databases.neo4j.io NEO4J_USERNAME=neo4j NEO4J_PASSWORD=your-password # Gemini API Configuration GEMINI_API_KEY=your-gemini-api-key
-
Set up the knowledge graph
npm run setup-kg
-
Start the development server
npm run dev
-
Visit the application
- Portfolio:
http://localhost:3000 - AI Chat:
http://localhost:3000/chat
- Portfolio:
npm run dev: Start development servernpm run build: Build for productionnpm run start: Start production servernpm run setup-kg: Initialize Neo4j knowledge graphnpm run lint: Run ESLint
This project is deployed on Vercel with automatic deployments from the main branch. The Neo4j Aura database and Gemini API integrate seamlessly with the serverless environment.
The AI chatbot uses a sophisticated Neo4j knowledge graph with the following node types:
- Person: Professional profile information
- Project: Development projects with technologies and descriptions
- Skill: Technical skills with proficiency levels
- Experience: Work history and achievements
- Education: Academic background
- Technology: Programming languages and tools
- User Input: Question processed through the chat interface
- Context Extraction: Keywords extracted and mapped to graph entities
- Graph Query: Neo4j queries retrieve relevant nodes and relationships
- AI Processing: Gemini AI generates contextual responses using graph data
- Response Delivery: Structured response with suggested follow-up questions
- Interactive 3D Character: Development of a 3D avatar for the AI chatbot
- Real-time Animations: Lip-sync and gesture animations during conversations
- Personality Integration: Avatar reactions based on conversation context
- Technologies: Three.js, React Three Fiber, Blender for 3D modeling
- Advanced NLP: Improved entity extraction and intent recognition
- Multi-modal Responses: Integration of images, code snippets, and diagrams
- Conversation Memory: Persistent chat history and context retention
- Voice Integration: Speech-to-text and text-to-speech capabilities
- Chat Analytics: User interaction patterns and popular topics
- Performance Metrics: Response time and accuracy measurements
- Knowledge Graph Expansion: Automated content updates and relationship discovery
This portfolio showcases:
- AI Integration: Real-world application of LLMs and knowledge graphs
- Full-Stack Development: End-to-end TypeScript/React application development
- Database Design: Graph database architecture and query optimization
- Modern Web Technologies: Next.js 14, server-side rendering, and API routes
- DevOps & Deployment: Automated deployment pipelines and environment management
This project represents my professional portfolio and learning journey. While it's primarily a personal showcase, I'm open to discussions about:
- AI/ML integration techniques
- Knowledge graph optimization
- Modern web development best practices
- Collaboration on similar projects
Daniel Wong
📧 Email: chuenlik@hotmail.com
💼 LinkedIn: Professional Profile
🤖 Try the AI Chat: Chat with my AI assistant
This portfolio combines my expertise in AI technologies with modern web development, creating an innovative showcase of skills and projects. The AI chatbot represents a practical application of knowledge graphs and large language models in a real-world scenario.