JIAN: A Cognitive AI Interface Portfolio

Don't just read my portfolio—talk to it. An interactive AI interface where you can explore my skills and projects through a terminal or a direct conversation.

Comment

Inspiration

The traditional developer portfolio is a static, one-way resume—a passive list of skills and projects. I was inspired by a simple question: What if a portfolio could talk back? What if, instead of just reading about my skills as an AI Engineer, you could experience them firsthand?

My goal was to transform the portfolio from a document into a destination. I wanted to create an immersive, interactive experience that was not only informative but also memorable and engaging. The "Cognitive AI Interface" theme was born from this desire to build a project that is, in itself, the ultimate demonstration of my capabilities in design, frontend development, and AI integration.

What it does (Features implemented)

"JIAN" is a fully interactive portfolio experience with two distinct, seamlessly integrated modes:

  • Dual-Mode Interface: Users can start in a power-user-friendly terminal or switch at any time to a rich graphical user interface (GUI) for a more visual exploration.

  • Interactive Terminal: A fully functional command-line interface supports a range of commands (help, about, skills, projects, contacts, dashboard, timeline), command history (up/down arrows), and --gui flags that act as shortcuts to specific visual pages.

  • AI-Powered Chatbot: "JIAN" is an integrated AI assistant powered by the OpenAI API. It's context-aware of my resume, projects, and skills, capable of answering natural language questions like "Tell me more about the Staff Tracking project."

  • Immersive FUI Design: The entire interface is built with a consistent futuristic theme, featuring a boot sequence, hexagonal navigation, subtle UI sound effects, and animations that enhance the feeling of operating a high-tech system.

  • Comprehensive Portfolio Sections: All required sections are implemented with a thematic twist:

    • Projects: An interactive "Simulation Archives" with animated pop-out modals for detailed analysis.
    • Skills: A visual "Core Modules" dashboard showing the tech stack and its application across projects.
    • Contact: A themed "Comms Channel" for a professional and unique way to connect.
    • Home (Dashboard): The central hub of the interface, presenting a high-level "Cognitive Status" report. It features a themed Identity Profile with my core mission, and a dynamic Competency Radar Chart that visually maps my key skill areas.

Custom elements or animations

A high degree of polish was a primary goal. The project is filled with custom animations and interactive elements to create an immersive experience:

  • Boot Sequence & Flash Transition: On first visit, the site plays a typing animation of a system boot sequence, culminating in a bright flash of light that transitions the user into the main terminal interface.
  • Hexagonal FUI Navigation: The GUI navigation is a set of six-sided cells with icon-based links. On hover, they glow, and a text label smoothly slides out, accompanied by a subtle sound effect.
  • Animated Timeline: As the user scrolls, a glowing vertical line "draws" its way down the page, and each event node pulses into view when it becomes visible, thanks to the IntersectionObserver API.
  • Project Modal Animation: Clicking a project card triggers a satisfying "deploy" sound effect as the modal smoothly scales and fades into view, presenting a detailed analysis.
  • Skills Modal Animation: The 'Skills' page consists of core capabilities, skills, and projects, which are interconnected. For example, when a core capability such as AI/ML is selected, the related skills and projects will be enlarged and highlighted, while the unrelated skills will be blurred and reduced in size.
  • AI Chatbot UI: The chatbot features an AI "typing indicator" to provide user feedback, and new messages fade in gracefully, with the message list automatically scrolling to the bottom.

How we built it (Tech stack used)

The entire user interface was built with Nuxt.js 3 (Vue.js) for its powerful server-side rendering capabilities and excellent developer experience. Tailwind CSS was used for rapid, utility-first styling, allowing for the creation of the complex and consistent FUI design. OpenAI API has been used for the AI Chatbot. The Nuxt.js frontend is deployed on Vercel for seamless, continuous deployment from the Git repository.

  • Note: Since I set a hard limit on the OpenAPI key, when accessing the website, the AI ​​chatbot may not be able to be used after the budget has reached the hard limit.

Challenges we ran into

  1. Designing a Seamless Dual Interface: The biggest UX challenge was making the Terminal and GUI modes feel like two sides of the same coin, not separate websites. I solved this by implementing --gui flags as power-user shortcuts and a persistent "Visual Mode" button, ensuring a clear and logical path between the two modes for all user types.

  2. Performant Animations: Creating a visually rich interface with numerous animations (boot sequence, timeline, modals) without degrading performance was a challenge. I relied heavily on hardware-accelerated CSS transitions, opacity and transform properties.

Accomplishments that we're proud of

  • Delivering a True "Experience": I'm most proud of creating a project that is more than just a portfolio—it's an interactive experience with a consistent, immersive theme. Every element, from the boot sequence to the sound effects, serves the central concept.

  • Functional AI Integration: The chatbot isn't a gimmick. It's a genuinely useful tool that is context-aware of my professional data, demonstrating a practical, end-to-end implementation of a modern AI stack.

  • A High Level of Polish: The attention to detail in the animations, transitions, and user feedback (like the AI typing indicator and interactive sounds) is something I'm very proud of. It shows a commitment to not just building things that work, but building things that feel good to use.

What we learned

  • The Power of Thematic Design: A strong theme is an incredible tool. It guided every decision, from the choice of a monospace font to the wording in the contact section, resulting in a cohesive and memorable final product.

  • Advanced Frontend Techniques: This project was a deep dive into creating performant, animation-heavy interfaces. I gained significant experience with the complex CSS transitions with Tailwind's JIT compiler and managing application state in a reactive framework like Nuxt.

What's next for JIAN: A Cognitive AI Interface Portfolio

While this project was built for the hackathon, the "JIAN" interface is a platform with exciting potential for future enhancements:

  • Deeper AI Context: I plan to integrate a vector database (like Supabase pg_vector) to implement a RAG (Retrieval-Augmented Generation) pipeline. This would allow the AI to pull information from my detailed project documents and articles, providing much richer and more accurate answers.

  • Terminal Enhancements: Adding more commands, auto-completion for commands, and perhaps even a small text-based game as an Easter egg to reward curious users.

  • Greater Interactivity: Making the visual dashboards more interactive, such as allowing users to click on a skill to filter the projects list, or clicking a timeline event to see related projects.

Built With

Share this project:

Updates