This is the full developer documentation for Roland ZHU Portfolio # About me By Roland ZHU ## Me Hello I’m Roland ZHU, I’m 26 years old, I’m a full-stack developper. ## Socials * [Github](https://github.com/TheMysteryz) * [Linkedin](https://www.linkedin.com/in/zhuroland) ### [Contact me](/contact) # Contact me By Roland ZHU Firstname\* Lastname\* Email\* Phone Message\* Send # Astro Starter Kit: Basics > Get started with Astro in seconds. By Astro Get started with Astro in seconds. Create a new Astro project ```sh npm create astro@latest -- --template basics ``` [](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics) [](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics) [](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json) > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!  ## 🚀 Project Structure Inside of your Astro project, you’ll see the following folders and files: * public/ * favicon.svg * src/ * components/ * Card.astro * layouts/ * Layout.astro * pages/ * index.astro * package.json Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. There’s nothing special about `src/components/`, but that’s where we like to put any Astro/React/Vue/Svelte/Preact components. Any static assets, like images, can be placed in the `public/` directory. ## 🧞 Commands All commands are run from the root of the project, from a terminal: | Command | Action | | ------------------------- | ------------------------------------------------ | | `npm install` | Installs dependencies | | `npm run dev` | Starts local dev server at `localhost:4321` | | `npm run build` | Build your production site to `./dist/` | | `npm run preview` | Preview your build locally, before deploying | | `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | | `npm run astro -- --help` | Get help using the Astro CLI | ## 👀 Want to learn more? Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat). # Starlight Starter Kit: Basics > Get started with Starlight in seconds. By Astro Get started with Starlight in seconds. [](https://starlight.astro.build) Create a new Starlight project ```sh npm create astro@latest -- --template starlight ``` [](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics) [](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics) [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics\&project-name=my-starlight-docs\&repository-name=my-starlight-docs) > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! ## 🚀 Project Structure Inside of your Astro + Starlight project, you’ll see the following folders and files: * public/ * … * src/ * assets/ * … * content/ * docs/ * … * config.ts * env.d.ts * astro.config.mjs * package.json * tsconfig.json Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name. Images can be added to `src/assets/` and embedded in Markdown with a relative link. Static assets, like favicons, can be placed in the `public/` directory. ## 🧞 Commands All commands are run from the root of the project, from a terminal: | Command | Action | | ------------------------- | ------------------------------------------------ | | `npm install` | Installs dependencies | | `npm run dev` | Starts local dev server at `localhost:4321` | | `npm run build` | Build your production site to `./dist/` | | `npm run preview` | Preview your build locally, before deploying | | `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | | `npm run astro -- --help` | Get help using the Astro CLI | ## 👀 Want to learn more? Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat). # Games By Roland ZHU This is a list of games I’ve made or worked on. [Sokoban](/games/sokoban)  A puzzle game where the player pushes boxes around a grid to reach the target positions. Made with **HTML, CSS, JavaScript** [Sokoban Level Maker](/games/sokoban/maker)  Create your own Sokoban levels with this interactive level maker. Design custom puzzles by placing walls, boxes, targets, and more. Export your level code to add to the game. (If you made a particularly good level, please share it with me by using the **contact form**!) Made with **HTML, CSS, JavaScript** [Light Tiles Off](/games/light-tiles-off)  A game where the player toggles tiles to turn off all the lights on the grid. Made with **HTML, CSS, JavaScript** [Light Tiles Off Level Maker](/games/light-tiles-off/maker)  Create your own levels for Light Tiles Off with this interactive level maker. Design custom puzzles by toggling tiles on the grid. Made with **HTML, CSS, JavaScript** > Some of the levels are from the **original game** and [Sokoban: levels](https://borgar.net/programs/sokoban/#Intro). And others are **made by me**. If you have any questions or you want to share your level, feel free to [contact me](/contact). # My group projects By Roland ZHU [KRYP Ticket](https://kryp-ticket.vercel.app) A ticket system made for student, to help each other. Made with **Next.js** Worked on with [Khai](https://www.linkedin.com/in/nguyen-khai-phan) FlowVerse Automate the evaluation of candidate soft skills efficiently using AI. Made with **Next.js, Hono** Worked on with Group Crep'Way A website for a restaurant that sells crepes, waffles, and drinks. It has 3 parts: the **client**, the **admin**, and the **API**. * The client can order food and drinks. * The admin can manage the menu and the orders. * The API is used by the client and the admin. Made with **Next.js, Elysia** Worked on with Group # My personal projects By Roland ZHU [Chinese Dico](https://chinese-dico.vercel.app)  A Chinese - French dictionary Made with **Next.js** [Light tiles off](https://light-tiles-off.vercel.app)  Just a game, have fun! Made with **Next.js** # My school projects By Roland ZHU Hyrule Castle A game on terminal, we need to beat the enemie to get on the next floor. There’s many characters with different abilities Made with **Typescript** Free GG A mobile application that lists all free games using the [FreeToGame API](https://www.freetogame.com/api-doc). Made with **Expo** # Overview TeamZBL is a group of developers who are passionate about creating innovative and impactful software solutions. We work on various projects, ranging from web applications to mobile apps, with a focus on quality and user experience. We’ve made the chatbot you can find on this website, and we are always looking for new challenges and opportunities to grow our skills and knowledge. ## Team Members The team consists of: * [Khai](https://www.linkedin.com/in/nguyen-khai-phan) : A talented developer with a knack for creating engaging user interfaces and experiences. * **Roland ZHU**: The creator of this website, who also contributes to various projects within the team. # Projects By TeamZBL Chatbot An intelligent conversational AI powered by large language models, designed with a modular architecture for seamless integration across multiple platforms and websites. Made with **React, Bun** Worked on with [Khai](https://www.linkedin.com/in/nguyen-khai-phan) [ColorGuessr](https://colorguessr.teamzbl.com) A fun and interactive game that challenges players to guess colors based on various clues. Made with **React, Vite** Made by [Khai](https://www.linkedin.com/in/nguyen-khai-phan)