Portfolio

๐ŸŒŸ BAYISIHU ใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ช / Portfolio

Webใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰้–‹็™บใจใƒŸใƒ‹ใƒ—ใƒญใ‚ฐใƒฉใƒ ๆŠ€่ก“ใฎๅฎŸ่ทตใ‚ทใƒงใƒผใ‚ฑใƒผใ‚นใ€‚

A showcase of my projects in Web Development

(Last Updated: 2025-10-25)


๐ŸŒ ่จ€่ชž้ธๆŠž / Language Selection



๐Ÿ‡ฏ๐Ÿ‡ต Japanese

๐Ÿš€ ใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆๆฆ‚่ฆ

ใ“ใฎใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชใฏใ€ไธปใซWebใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰้–‹็™บๅˆ†้‡ŽใซใŠใ‘ใ‚‹็งใฎๆŠ€่ก“็š„ใชๅฎŸ่ทตใ‚’็ดนไป‹ใ™ใ‚‹ใ‚‚ใฎใงใ€ๅ†…ๅฎนใฏ็ถ™็ถš็š„ใซๆ›ดๆ–ฐใ•ใ‚Œใฆใ„ใพใ™ใ€‚

ใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆๅ ไธป่ฆๆŠ€่ก“ / ็‰นๅพด ใƒชใƒใ‚ธใƒˆใƒช
[ClientAuthE-Shop] localStorage APIใจ navigator ใ‚ชใƒ–ใ‚ธใ‚งใ‚ฏใƒˆใ‚’ๆดป็”จใ—ใฆใ„ใพใ™ใ€‚ ๐Ÿ”— ๅ€‰ๅบซ | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo
[Auto-PlayingImageCarousel] ่‡ชๅ‹•ๅ†็”Ÿๅž‹ใฎ็”ปๅƒใ‚ซใƒซใƒผใ‚ปใƒซใƒปใ‚ณใƒณใƒใƒผใƒใƒณใƒˆ ๐Ÿ”— ๅ€‰ๅบซ | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo
[ClientSideCRUDManager] ๅŸบๆœฌ็š„ใชใƒ‡ใƒผใ‚ฟ็ฎก็†๏ผˆไฝœๆˆใƒป่ชญใฟๅ–ใ‚Šใƒปๅ‰Š้™ค๏ผ‰ใฎใƒ‡ใƒขใƒณใ‚นใƒˆใƒฌใƒผใ‚ทใƒงใƒณใงใ™ ๐Ÿ”— ๅ€‰ๅบซ | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo
[WeatherApplet] 7ๆ—ฅ้–“ๅคฉๆฐ—ไบˆๅ ฑใ€ๅฐ้ขจๆƒ…ๅ ฑใ€‚ ๐Ÿ”— ๅ€‰ๅบซ | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo
[UserOnboardingAccess] ๆจ™ๆบ–็š„ใชๆ–ฐ่ฆใƒฆใƒผใ‚ถใƒผ็™ป้Œฒใƒšใƒผใ‚ธใฎUI ๐Ÿ”— ๅ€‰ๅบซ | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo
[SemanticHTML5Form] ใ‚ขใƒณใ‚ฑใƒผใƒˆใฎ็”ณใ—่พผใฟใƒ•ใ‚ฉใƒผใƒ ใฎUIใƒ‡ใƒข ๐Ÿ”— ๅ€‰ๅบซ | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo
[Mega-MenuPortalStructure] ๅคง่ฆๆจกECใ‚ตใ‚คใƒˆ๏ผˆใ€Œๅฐšๅ“ๅŒฏใ€๏ผ‰ใฎใƒ›ใƒผใƒ ใƒšใƒผใ‚ธ ๐Ÿ”— ๅ€‰ๅบซ | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo
[Data-DrivenListRenderer] Eใƒฉใƒผใƒ‹ใƒณใ‚ฐใ‚ตใ‚คใƒˆใฎใ€ŒๅŽณ้ธใŠใ™ใ™ใ‚ใ€ใ‚ปใ‚ฏใ‚ทใƒงใƒณใฎใ‚ณใƒผใ‚นใ‚ซใƒผใƒ‰ใ‚’ๅ‹•็š„ใซ็”Ÿๆˆ ๐Ÿ”— ๅ€‰ๅบซ | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo
[ImageAccordion] ใƒžใ‚ฆใ‚นใƒ›ใƒใƒผใ€Œใ‚คใƒกใƒผใ‚ธใƒปใ‚ขใ‚ณใƒผใƒ‡ใ‚ฃใ‚ชใƒณใ€ ๐Ÿ”— ๅ€‰ๅบซ | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo
[Hover-BasedTabComponent] ใ‚ฟใƒ–ๅˆ‡ใ‚Šๆ›ฟใˆEใ‚ณใƒžใƒผใ‚นใ‚ตใ‚คใƒˆใฎๅ•†ๅ“ใ‚ซใƒ†ใ‚ดใƒช่กจ็คบ ๐Ÿ”— ๅ€‰ๅบซ | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo
[EphemeralPopupScript] ่‡ชๅ‹•ใง้–‰ใ˜ใ‚‹ๅบƒๅ‘Šใ‚„้€š็Ÿฅใƒใƒƒใƒ—ใ‚ขใƒƒใƒ—ใ€‚ ๐Ÿ”— ๅ€‰ๅบซ | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo
[SmallFeatures] ใใฎไป–ใฎๅฐ่ฆๆจกใชJS/CSSใƒฆใƒผใƒ†ใ‚ฃใƒชใƒ†ใ‚ฃ้›†ใ€‚ ๐Ÿ”— ๅ€‰ๅบซ | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo

๐Ÿ› ๏ธ ๆŠ€่ก“ใ‚นใ‚ฟใƒƒใ‚ฏ

๐Ÿ“‚ ๅฎŸ่กŒๆ–นๆณ•

ใ“ใ‚Œใ‚‰ใฎใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใฏ้™็š„ใชWebใƒšใƒผใ‚ธใงใ™ใ€‚npm ใฎใ‚คใƒณใ‚นใƒˆใƒผใƒซใฏๅฟ…่ฆใ‚ใ‚Šใพใ›ใ‚“ใ€‚

  1. ใƒชใƒใ‚ธใƒˆใƒชใ‚’ใ‚ฏใƒญใƒผใƒณ๏ผš
    git clone [https://github.com/BAYISIHU/Portfolio.git](https://github.com/BAYISIHU/Portfolio.git)
    ```

2.  **ใƒ•ใ‚กใ‚คใƒซใ‚’้–‹ใ๏ผš**
```bash
    cd Portfolio
    # ่ˆˆๅ‘ณใฎใ‚ใ‚‹ใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใƒ•ใ‚ฉใƒซใƒ€ใซ็งปๅ‹•ใ—ใ€
    # .html ใƒ•ใ‚กใ‚คใƒซใ‚’็›ดๆŽฅใƒ–ใƒฉใ‚ฆใ‚ถใง้–‹ใ„ใฆใใ ใ•ใ„ใ€‚

๐Ÿ“„ ใƒฉใ‚คใ‚ปใƒณใ‚น

ใ“ใฎใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใฏ [MIT License] ใฎไธ‹ใงใƒฉใ‚คใ‚ปใƒณใ‚นใ•ใ‚Œใฆใ„ใพใ™ใ€‚่ฉณ็ดฐใฏ LICENSE ใƒ•ใ‚กใ‚คใƒซใ‚’ใ”่ฆงใใ ใ•ใ„ใ€‚

๐Ÿ“ฌ ้€ฃ็ตกๅ…ˆ

๐Ÿ‘ค [่ƒกๅทดไพๆ€ (BAYISIHU)]



๐Ÿ‡ฌ๐Ÿ‡ง English

๐Ÿš€ Portfolio Overview

This portfolio showcases my technical practices primarily in the field of Front-End Web Development and is continuously updated.

| Project Name | Key Technologies / Features | Repository | | :โ€” | :โ€” | :โ€” | | [ClientAuthE-Shop] | Manages user authentication state within the browser. | ๐Ÿ”— Repo | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo | | [Auto-PlayingImageCarousel] | Auto-playing image carousel using JavaScript. | ๐Ÿ”— Repo | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo | | [ClientSideCRUDManager] | Client-side CRUD (Create, Read, Update, Delete) operations. | ๐Ÿ”— Repo | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo | | [WeatherApplet] | WeChat Mini-Program API, 7-day forecast, typhoon tracking. | ๐Ÿ”— Repo | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo | | [UserOnboardingAccess] | Registration/login flow, client-side form validation. | ๐Ÿ”— Repo | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo | | [SemanticHTML5Form] | Complex form validation, timer-based code, Semantic HTML. | ๐Ÿ”— Repo | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo | | [Mega-MenuPortalStructure] | Mega-menu navigation structure for large-scale sites. | ๐Ÿ”— Repo | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo | | [Data-DrivenListRenderer] | Renders an HTML list dynamically from a JS data source. | ๐Ÿ”— Repo | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo | | [ImageAccordion] | Implementation of an image accordion menu. | ๐Ÿ”— Repo | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo | | [Hover-BasedTabComponent] | Tab component that switches on hover. | ๐Ÿ”— Repo | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo | | [EphemeralPopupScript] | An auto-closing advertisement or notification popup. | ๐Ÿ”— Repo | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo | | [SmallFeatures] | A collection of other small JS/CSS utilities. | ๐Ÿ”— Repo | ๐Ÿ‘๏ธโ€๐Ÿ—จ๏ธ Demo |

๐Ÿ› ๏ธ Tech Stack

๐Ÿ“‚ How to Run

These are static projects and do not require npm installation.

  1. Clone the repository:
    git clone [https://github.com/BAYISIHU/Portfolio.git](https://github.com/BAYISIHU/Portfolio.git)
    
  2. Open the files:
    cd Portfolio
    # Navigate to the project folder you are interested in
    # and open the .html file directly in your browser.
    

๐Ÿ“„ License

This project is licensed under the [MIT License]. See the LICENSE file for details.

๐Ÿ“ฌ Contact Me

๐Ÿ‘ค [BAYISIHU (่ƒกๅทดไพๆ€)]