https://github.com/takaneichinose/my-profile

Main repository for my profile
https://github.com/takaneichinose/my-profile

aseprite css game homepage html javascript nodejs pico-8 pixel-art pixi pixijs react react-pixi reactjs retro tailwind tailwindcss typescript vite vitejs

Last synced: about 5 hours ago
JSON representation

Main repository for my profile

• Host: GitHub
• URL: https://github.com/takaneichinose/my-profile
• Owner: takaneichinose
• Created: 2021-07-23T09:09:13.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-10-02T15:08:51.000Z (about 1 year ago)
• Last Synced: 2023-10-02T19:40:40.359Z (about 1 year ago)
• Topics: aseprite, css, game, homepage, html, javascript, nodejs, pico-8, pixel-art, pixi, pixijs, react, react-pixi, reactjs, retro, tailwind, tailwindcss, typescript, vite, vitejs
• Language: TypeScript
• Homepage: https://takaneichinose.github.io
• Size: 5.03 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://takaneichinose.github.io).

This is the repository of the distributed program. [https://github.com/takaneichinose/takaneichinose.github.io](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

1. Laptop -> To open my blog

1. Top-right menu -> To open the main menu

## Requirements

1. Text editor (Preferred Visual Studio Code)

1. 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

1. Install the dependencies using this command:

   `# npm`

1. Build the main program using this command:

   `# npm run build`

1. 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.

1. Create a local virtual server using this command:

   `# npm run dev`

1. After building, it can be accessed at [http://localhost:5173/](http://localhost:5173/).

## Resources

1. [PixiJS](https://pixijs.com/) Rendering engine used for the 'game'

1. [TailwindCSS](https://tailwindcss.com/) CSS framework for easy styling

1. [Aseprite](https://www.aseprite.org/) Image creation software

1. [Vite](https://vitejs.dev/) Package manager

1. [TypeScript](https://www.typescriptlang.org/) JavaScript transpiler

1. [npm](https://www.npmjs.com/) Initial package manager

1. [NodeJS](https://nodejs.org/en/) JavaScript used for building

1. [Docker](https://www.docker.com/) To containerize my project

1. [Nosutaru dot](https://free-fonts.jp/nosutaru-dot/) Pixel-art fonts

1. [PICO-8 Secret Palette](https://lospec.com/palette-list/pico-8-secret-palette) All PICO-8 palettes and its hidden colours

1. [Visual Studio Code](https://code.visualstudio.com/) Text editor (IDE) I used for development

1. [Yarn](https://yarnpkg.com/) Package manager

## Link to my homepage

[https://takaneichinose.github.io/](https://takaneichinose.github.io/)