Nyaomaru Portfolio features an interactive 'Run Away From Work' game that combines a side-scrolling jump mechanic and an innovative terminal interface for user Q&A. Built with Remix, React, and TypeScript, it showcases responsive design and feature-sliced architecture, making it both fun and user-friendly.
Nyaomaru Portfolio showcases the engaging "Run Away From Work" game, a side-scrolling jump adventure that invites players to navigate obstacles, defeat bosses, and seek the ultimate reward of the true ending. Gameplay is accessible via this link.
Game Overview
The portfolio is constructed using Remix, React, and TypeScript, following the principles of Feature-Sliced Design (FSD) for scalable architecture. Its notable features include:
- Side-scrolling Jump Game: An immersive gaming experience with various obstacles and levels, providing an engaging challenge for players.
- Interactive Terminal: A terminal-styled interface allowing users to query profile-related information through an AI-powered backend by accessing the
/api/askendpoint. - Responsive Design: Optimized for both desktop and mobile devices, ensuring a seamless user experience across platforms.
Game Controls
Control the action with simple commands:
| Action | Description |
|---|---|
| Space / Click | Jump |
| Tap | Jump |
| Double Jump | Jump again while in the air |
Terminal Functionality
The interactive terminal feature enriches the user engagement by:
- Sending user inputs to the AI via the
/api/askendpoint. - Providing contextually relevant and AI-generated responses, enhancing interaction dynamics.
Technical Specifications
The project leverages a robust tech stack:
- Framework: Remix - A full-stack React framework to streamline development.
- Styling: Tailwind CSS - A utility-first CSS framework ensuring individualized styling options.
- UI Components: shadcn/ui - Offers beautiful, accessible components to enhance the interface.
- AI Integration: Combines LangChain with OpenAI API for intelligent responses.
- Package Management: pnpm - A fast package manager that optimizes disk space.
Project Structure
The organization of the codebase is intuitively divided into distinct folders:
app/ Remix app entry/routes
features/ Domain features (including jump-game)
pages/ Route-level page modules
widgets/ Composite UI components (header, terminal)
shared/ Shared UI/libs/constants/api
public/ Static assets
Contribution and Acknowledgments
Contributions are welcomed, with detailed guides available for those interested in participating. Special thanks go to:
- Remix for the exceptional framework.
- shadcn/ui and Tailwind CSS for providing high-quality components and styling solutions.
Explore the Nyaomaru Portfolio to experience the engaging game and its innovative features firsthand.
No comments yet.
Sign in to be the first to comment.