{ }
.jhun{}
Official website of a professional web development studio.
.jhun{} is the official corporate website of jhun, a professional web development studio. It showcases the company's portfolio, blog content, technology expertise, and services while enabling direct client contact. Full English and Turkish localization is provided via next-intl with seamless runtime language switching. A dual-engine AI chatbot powered by Anthropic Claude SDK and Google Generative AI uses a two-tier response system: pre-written keyword matches for instant responses, falling back to a live AI model when no match is found. The site features dark/light theme support, a hero section with particle effects, an aurora background, and a typing animation. The portfolio page presents detailed project showcases with technology tags and descriptions. SEO is handled with dynamic Open Graph meta tags and a configured robots.txt. The admin panel supports blog, project, and technology management backed by Cloudinary image uploads. Rich animations are powered by GSAP and Framer Motion, complemented by 25+ custom UI effects including Aurora, Vortex, Sparkles, Meteors, Magnetic Button, and 3D Card. A CV is available in both HTML and PDF formats in English and Turkish. A chatbot stats panel and typing indicator further enrich the user experience. Built with Next.js App Router, TypeScript, MongoDB, and Mongoose.
Technologies Used
teknolojiler.tsx
<div class="project-info">
<p>
This project was developed using the best tools modern web technologies offer. Each technology was carefully selected to maximize performance, security, and user experience. During development, the focus was on component-based architecture, reusable code, and optimized rendering performance.
</p>
<p>
The user interface was designed to provide a clean yet impactful visual experience. The design system is built on principles of consistency, readability, and accessibility. Modern CSS frameworks and utility tools were used to provide a strong styling foundation.
</p>
<p>
On the frontend, powerful technologies like React and Next.js provided great advantages in terms of fast load times and SEO optimization. Additionally, Tailwind CSS accelerated the design process and made development more flexible.
</p>
<p>
As a result, this technology stack forms a modern and sustainable infrastructure that supports not only today’s needs but also future scalability goals.
</p>
<p>
The project also delivers a seamless experience across all devices thanks to responsive design and a mobile-first approach. Every aspect of the design was optimized for usability and accessibility, ensuring smooth user interactions.
</p>
<p>
Performance optimizations were implemented to minimize page load times, including efficient media and image handling. This approach improves user experience while providing a solid foundation for SEO and overall site performance._
</p>
</div>
Next.js
Frontend
React
Frontend
TypeScript
Language
MongoDB
Database
Mongoose
Database
Tailwind CSS
Frontend
Vercel
DevOps
Problem
Needed a bilingual portfolio/blog platform where visitors could get instant, accurate answers about background, projects, and experience without waiting on manual email replies.
Solution
I built a two-tier AI chatbot (keyword-matched instant replies falling back to Anthropic Claude/Google Gemini for open-ended questions), full next-intl TR/EN localization with runtime switching, and an admin panel (blog/project/technology management via Cloudinary) on Next.js App Router + MongoDB/Mongoose.
Challenges
- Balancing chatbot latency/cost against answer quality — routing common questions to instant keyword replies while reserving the LLM call for genuinely open-ended ones.
- Keeping animation-heavy UI (GSAP/Framer Motion, 25+ custom effects) performant across both themes and locales without layout shift.
Results
- The AI assistant answers CV/project/experience questions in real time instead of requiring a form-and-wait contact flow.
- Runtime TR/EN switching and a downloadable CV (HTML + PDF, both languages) removed friction for both Turkish and international visitors.
Lessons Learned
A hybrid keyword-first, LLM-fallback design turned out to be the right default for any chatbot with a mostly-predictable question set — cheaper, faster, and more predictable than routing everything through an LLM.
Let's talk about the engineering behind this
If you'd like to discuss the architecture decisions, the tech stack, or a similar technical problem, I'm happy to talk.
Get in Touch