Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/monambike/project-hanabi-web

A personal project of a web application made primarily for testing and strengthen my habilities with programming and languages.
https://github.com/monambike/project-hanabi-web

ajax chat chatroom css customizable-ui english html japanese javascript jquery multilingual mysqli personal-website php portuguese spanish sql web

Last synced: 2 days ago
JSON representation

A personal project of a web application made primarily for testing and strengthen my habilities with programming and languages.

Awesome Lists containing this project

README 

        
Static Badge Static Badge



![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)

![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)

![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white)

![PHP](https://img.shields.io/badge/php-%23777BB4.svg?style=for-the-badge&logo=php&logoColor=white)

![MySQL](https://img.shields.io/badge/mysql-%2300f.svg?style=for-the-badge&logo=mysql&logoColor=white)



# PROJECT HANABI



Note: If you want to download it and test in your machine. The site won't work if you don't get the database and build it by complete properly.



You can find the database repository [here](https://github.com/monambike/project-hanabi-database/).



## CHOOSE LANGUAGE

| [PORTUGUÊS](#PORTUGUÊS---VOLTAR-AO-TOPO) | [ENGLISH](#ENGLISH---GO-TO-THE-TOP) | [ESPAÑOL](#ESPAÑOL---IR-AL-INICIO) | [日本語](#日本語---トップに戻る) |

|-|-|-|-|



## PORTUGUÊS - [(VOLTAR AO TOPO)](#PROJECT-HANABI)



### Principais Objetivos:



O Projeto Hanabi é um projeto pessoal que consiste em um site que tem como principal objetivo reforçar os meus conhecimentos em:



- Linguagens script e de programação tais como HTML, CSS, Javascript, PHP e Banco de Dados;

- Idiomas: português (minha língua nativa), inglês, japonês e espanhol.



### Explicação:



É um projeto que irá acompanhar o meu progresso em diversas coisas de diversas áreas da minha vida ao mesmo tempo. Sejam conhecimentos adquiridos por meios próprios ou por conta de alguma instituição, como o SENAI, que foi muito influente na forma com a qual eu vejo programação e o português hoje.



O site vai permanecer em desenvolvimento por um longo período de tempo, pois é algo pessoal e que considero não só uma coisa não só importante para que eu possa ver o meu avanço de um ângulo melhor, mas também, é um projeto que está sendo divertido de se desenvolver.



### Créditos:



### Gostaria de agradecer:



Ao **Gabriel Nava** por ter desenvolvido um modelo simples, porém ótimo de chat usando ajax. 

[Veja: como criar chat usando ajax.](https://code.tutsplus.com/tutorials/how-to-create-a-simple-web-based-chat-application--net-5931)



Ao **Lacobus** e **hugocsl** que responderam a minha pergunta no StackOverflow.

[Veja: minha pergunta.](https://pt.stackoverflow.com/questions/459170/como-não-permitir-o-usuário-de-criar-html-usando-input-text)



E é claro, a minha amiga **Ado** por ter me oferecido tanto suporte durante o desenvolvimento desse projeto :) (muito obrigado, fofinha!).



## ENGLISH - [(GO TO THE TOP)](#PROJECT-HANABI)



### Main Objectives:



The Project Hanabi is a personal project that consists in a site that has the objective of reinforce my knowledges in:



- Script language and programming such as HTML, CSS, Javascript, PHP and Database;

- Languages: portuguese (my native language), english, japanese and spanish.



### Explanation:



It's a project that will follow my progress in many things of many areas of my life at same time. They can be knowledgements acquired by myself or something else, like SENAI, that was very important to construct my vision about programming and portuguese as well.



The site will stay in development for a long period of time, because is something personal and that I consider not only important for me see my progress, but it's a project that's being funny to develop.



### Credits:



### I would like to thanks:



To **Gabriel Nava** for having developed a simple model but great of chat using ajax. 

[See: how to create chat using ajax.](https://code.tutsplus.com/tutorials/how-to-create-a-simple-web-based-chat-application--net-5931)



To **Lacobus** and **hugocsl** that answered my question on StackOverflow.

[See: my question.](https://pt.stackoverflow.com/questions/459170/como-não-permitir-o-usuário-de-criar-html-usando-input-text)



And of course, my friend **Ado** that offered to me a lot of support during the development of this project :) (muito obrigado, fofinha!).



## ESPAÑOL - [(IR AL INICIO)](#PROJECT-HANABI)



### Objetivos Principales:



El Proyecto Hanabi es un proyecto personal que consiste en un sitio que pretende reforzar mis conocimientos en:



- Lenguaje script y programación como HTML, CSS, Javascript, PHP y Banco de datos;

- Idiomas: portugués (my lengua nativa), inglés, japonés y español.



### Explicación



Este es un proyecto que va a seguir mi progreso en muchas cosas de muchas áreas de mi vida al mismo tiempo. Esos pueden ser conocimientos adquiridos por mí mismo u otra cosa como SENAI, que fue muy importante para construir mi visión sobre programación y portugués también.



El sitio va a quedarse en desarrollo por un largo periodo de tiempo, porque es algo personal que yo considero no solamente importante para que yo pueda ver my progreso, pero es un proyecto que tiene sido divertido de desarrollar.



### Créditos:



### Me gustaría agradecer:



A **Gabriel Nava** por haber tenido desarrollado una simple modelo de chat usando ajax.

[Mira: como crear un chat usando ajax.](https://code.tutsplus.com/tutorials/how-to-create-a-simple-web-based-chat-application--net-5931)



A **Lacobus** y **hugocsl** por haber tenido respondido mi pregunta in StackOverflow.

[Mira: mi pregunta.](https://pt.stackoverflow.com/questions/459170/como-não-permitir-o-usuário-de-criar-html-usando-input-text)



Y claro, mi amiga **Ado** que ofereció mucho suporte durante el desarrollar de este proyecto :) (muito obrigado, fofinha!).



## 日本語 - [(トップに戻る)](#PROJECT-HANABI)



# WEBSITE IMAGES



![Captura de tela 2023-05-29 211425](https://github.com/monambike/project-hanabi-web/assets/35270174/be541760-22e6-4375-96f9-389eb4260cfd)



## Home Page



![Captura de tela 2023-05-29 210509](https://github.com/monambike/project-hanabi-web/assets/35270174/bd8521e8-b888-4a77-ab30-501645054aa1)

![Captura de tela 2023-05-29 210526](https://github.com/monambike/project-hanabi-web/assets/35270174/25aa8370-3055-4b6b-9134-e520bf5754c9)



## Game Page



![Captura de tela 2023-05-29 210542](https://github.com/monambike/project-hanabi-web/assets/35270174/c509df79-3990-4b27-b532-09e38d470417)

![Captura de tela 2023-05-29 210551](https://github.com/monambike/project-hanabi-web/assets/35270174/f42bed6a-799a-4b0e-90db-8acf9b400601)



## Art Page



![Captura de tela 2023-05-29 210648](https://github.com/monambike/project-hanabi-web/assets/35270174/9f8e53eb-bdb6-49c5-97c4-6e2d846595e4)

![Captura de tela 2023-05-29 210700](https://github.com/monambike/project-hanabi-web/assets/35270174/7949f23c-0a38-4baf-a598-dae0d1e7b99b)

![Captura de tela 2023-05-29 210638](https://github.com/monambike/project-hanabi-web/assets/35270174/e345a3f2-5a80-4513-a285-f31db9137b97)



## About Page



![Captura de tela 2023-05-29 210718](https://github.com/monambike/project-hanabi-web/assets/35270174/b93a75cd-8d8d-47d9-8ab7-5cde2601a3d8)

![Captura de tela 2023-05-29 210732](https://github.com/monambike/project-hanabi-web/assets/35270174/0e4c8de7-25cd-41d7-bf08-351b0859fbdc)



## Profile Page



![Captura de tela 2023-05-29 211127](https://github.com/monambike/project-hanabi-web/assets/35270174/47332863-6759-464d-9330-bb08e4e6e300)

![Captura de tela 2023-05-29 211148](https://github.com/monambike/project-hanabi-web/assets/35270174/69e6f726-5618-4967-81cb-ce90e3c33093)

![Captura de tela 2023-05-29 211209](https://github.com/monambike/project-hanabi-web/assets/35270174/c153d343-8869-4321-bdeb-7b437e5ed3cc)

![Captura de tela 2023-05-29 211105](https://github.com/monambike/project-hanabi-web/assets/35270174/1c8e37c8-47a2-414d-ac34-a0ab4d371e60)

![Captura de tela 2023-05-29 211120](https://github.com/monambike/project-hanabi-web/assets/35270174/f8c09afe-caff-4a27-a433-d8adf09aa09b)



### Profile Search



![Captura de tela 2023-05-29 211329](https://github.com/monambike/project-hanabi-web/assets/35270174/1abeac08-8b12-40dc-92cd-84185e190992)

![Captura de tela 2023-05-29 211312](https://github.com/monambike/project-hanabi-web/assets/35270174/907a1f00-a078-4abc-b870-964b2a7a01d3)

![Captura de tela 2023-05-29 211229](https://github.com/monambike/project-hanabi-web/assets/35270174/b8b70cb0-9550-42a3-ad67-595e910f7427)

![Captura de tela 2023-05-29 211048](https://github.com/monambike/project-hanabi-web/assets/35270174/d16534dc-ba11-434f-8178-6b14b5f34b20)



### Profile Login and Signup



![Captura de tela 2023-05-29 210952](https://github.com/monambike/project-hanabi-web/assets/35270174/c11d1810-60fb-41fd-9475-f3c2ac489fb9)

![Captura de tela 2023-05-29 211038](https://github.com/monambike/project-hanabi-web/assets/35270174/2cd4e45c-a5cf-4295-b5c1-1e49d5fb5910)

![Captura de tela 2023-05-29 210744](https://github.com/monambike/project-hanabi-web/assets/35270174/901bd759-7003-42e5-8540-d9962369ff09)



# Contact



You can find me on likedin by here [linkedin.com/in/monambike/](https://www.linkedin.com/in/monambike/). If you want to see videos about my work you can check my YouTube channel [youtube.com/@monambike_portfolio](https://www.youtube.com/@monambike_portfolio) and if you want to see my artworks you can check at my instagram [instagram.com/monambike_portfolio](https://www.instagram.com/monambike_portfolio).



# License



The license for this repository is available [here](LICENSE). Please refer to the provided link for detailed information regarding the terms and conditions governing the use of this project.