Skip to content

takaneichinose/my-profile

Repository files navigation

My Profile

Description

This is the main repository of my profile home page.

To see the actual distributed program, please visit my homepage from Github Pages: https://takaneichinose.github.io.

This is the repository of the distributed program. https://github.com/takaneichinose/takaneichinose.github.io

The main concept of my homepage is like a game. The UI is like retro game with pixellated images. The messagebox is like a speech dialog which is common in retro RPG game.

You can use the arrow keys of your keyboard, or you click anywhere on the floor to move the character. Although movement of character is meaningless, I just want to show the animation of the character while moving. The movement has also a path-finding algorithm where the character avoids an object with collision through it.

There are few interactable objects in this game.

  1. Files -> To view my resume
  2. Laptop -> To open my blog
  3. Top-right menu -> To open the main menu

Requirements

  1. Text editor (Preferred Visual Studio Code)
  2. Terminal (I use the built-in terminal on Visual Studio Code)

Building the program

For my future reference, below is the way to build the program.

  1. Clone the repository
  2. Install the dependencies using this command: # npm
  3. Build the main program using this command: # npm run build
  4. At the step above, the distributed program will be produced, and dist folder will be generated. The step from here will be optional if you want to run the program on the localhost.
  5. Create a local virtual server using this command: # npm run dev
  6. After building, it can be accessed at http://localhost:5173/.

Resources

  1. PixiJS Rendering engine used for the 'game'
  2. TailwindCSS CSS framework for easy styling
  3. Aseprite Image creation software
  4. Vite Package manager
  5. TypeScript JavaScript transpiler
  6. npm Initial package manager
  7. NodeJS JavaScript used for building
  8. Docker To containerize my project
  9. Nosutaru dot Pixel-art fonts
  10. PICO-8 Secret Palette All PICO-8 palettes and its hidden colours
  11. Visual Studio Code Text editor (IDE) I used for development
  12. Yarn Package manager

Link to my homepage

https://takaneichinose.github.io/