Web Development

This is e-commerce website for "Kokeshi Arts" which sells/rents instuments. 

I'm in charge of re-design/develop the website to optimize pages. I've proposed the improvement measures such as meta title/description and planning new contents from the past customer's inquiries.


#### Duration
2 months

#### Action Items of DRI
Development of frontend, design

#### Achievements
- 200% increase of number of impressions – the number of emerges in the search result compared to the past 90 days
- 40% increase of number of clicks compared to the past 90 days
- 30% increase of the average number of monthly inquiries compared to before renewal

#### Used Technologies
Wix, Google Search Console

[Visit Website (Only Japanese)](https://www.shop.kokeshi-arts.biz/)

特殊管楽器ECサイトの改修

I have chosen the image with the music performer with powerful eyes as the first view on the top page to convey the client's message – "Music is Yours. Give you that instrument."

Top Page

This page introduces why the shop can sell a reasonably priced high-performance instrument. I have planned the content to explain why the user can purchase/lend the product at a reasonable price to the website visitors.

About Brand

Product Collection Page

Thumbnail - Kokeshi

Kokeshi Arts - Instrument EC Site

This site was developed for expression my work. I have developed this portfolio page with JAMstack style that uses React, Next.js and Headless CMS. Also when the visitor submits a query to the contact form, SendGrid API notifies me the submission query through email.

#### Duration
- Basic Process: 3 weeks
- Applying i18n: 5 weeks

#### Used Technologies
HTML, CSS(Bootstrap), JavaScript (React, Next.js), Netlify, Vercel, Vercel Custom Function, SendGrid API

[Github](https://github.com/yasmro/portfolio-v5)

ポートフォリオサイト (2020)

Top page

Works page

Own Portfolio 2020

Own Portfolio Site version 2020

This is official website of National Institute of Technology, Nara College Band which I have belonged to. I'm in charge of frontend development and its design, and also I have developed it with Vue.js. This color scheme is the same as the marching costume which has been used since this band is founded because I'm impressed with the supervisor's episode regarding the marching costume.

#### Duration
5 months

#### Action Items of DRI
Development of frontend, design

#### Used Technologies
HTML, CSS(Vuetify), JavaScript (Vue.js)

[Visit Website](https://nitncwind.org/)

奈良高専吹奏楽部公式Webサイト

Concerts List

Concert Detail Page

History of Concours

Brass Band Official Website

This application provides the task management system. You can create the account with email and password. And also, you can issue and manage tasks.

#### Duration
1 week

#### Used Technologies
HTML, CSS (Element UI), JavaScript (ReactJS), Firebase Authentication, Firestore, Firebase Hosting

[Visit Website](https://react-todo2021-crud.web.app)

[Github](https://github.com/yasmro/react-firebase-todo)

タスク管理システム

Home Dashboard

Login Authentication

Task List

Show Task

Edit Task

Detail Task - Confirmation Dialog

Task Manager

This application converts sound file into the text. You can search by keywords and confirm whether the sound file contains each keyword or not.

#### Duration
1 week

#### Used Technologies
HTML, CSS(Bootstrap5), JavaScript (ReactJS, ExpressJS), IBM Watson Speech to Text (to convert sound file)

[Captures](https://github.com/yasmro/speech-to-text/tree/main/test_capture)

[Github](https://github.com/yasmro/speech-to-text)


音声認識アプリケーション

Voice Recognition Result

Voice Recognition

This site provides management of income/outcome of cash. This application provides the practicality and usability to users. The frontend was written in ReactJS and backend was written in Python Django Restframework. I'm taking down integrating backend with frontend.

*Note: As of now, I deploy the site to Firebase hosting, and I'm using local storage as database.

#### Duration
- Frontend: 8 hours
- Backend: Taking down creating backend and combining with frontend as of now

#### Used Technologies
HTML, CSS(UIkit), JavaScript (jQuery and ReactJS), Python (Django Restframework)

[Visit Website](https://yasumaro-test.web.app)

[Github(Frontend)](https://github.com/yasmro/household-frontend)

[Github(Backend)](https://github.com/yasmro/household-backend)

家計簿アプリ

Dashboard Page

Create Record Form

Edit Record

Delete Record - Confirmation

Delete Record - Successful Notification

Household Expenses

This site is the weather forcast information fetched from OpenWeatherMap. The front-end Javascript was written in ReactJS in order to output of learning ReactJS as well as the portfolio.

#### Duration
16 hours

#### Used Technologies
HTML, CSS(Bootstrap4), JavaScript (ReactJS), OpenWeatherMap API (to fetch weather information)

[Visit Website](https://yasmro.github.io/weatherappreact/)

[Github](https://github.com/yasmro/weatherappreact)

お天気アプリ

Weather Forecast

Weather App

This site provides the cocktail's information such as thumbnail, ingredients, instruction and so on. Drink datas are fetched from CocktailDB API.

#### Used Technologies
HTML, CSS(Bootstrap4), JavaScript (ReactJS), CocktailDB API (to fetch drink information)

#### Duration
12 hours

[Visit Website](https://yasmro.github.io/cocktailappreact/)

[Github](https://github.com/yasmro/cocktailappreact)

カクテルDB

Cocktail Detail Page

Cocktail Search Page

Cocktail App

This application is "Tic-Tac-Toe" Game which each player aims creating one line.

#### Features
##### I. Computer Player with Three Levels
I developed the computer player (AI) feature to battle with. The AI has three levels and they behave the following strategy for each level.

- Lv.1: Place a piece in order from the cell "1". 
- Lv.2: Place a piece at random.
- Lv.3: In case either player ready to make a line with one more piece, AI will place a piece at the cell to make a line in order to provide AI's winning or prevent the player's winning.

##### II. Save Battle Results with Local Storage
You can save and confirm the battle results (e.g. 8 Games 6 Wins) with local storage. Also, you can reset the battle results with reset feature.

#### Duration
6 Hours

#### Used Technologies
HTML, CSS, JavaScript, Netlify

[Github](https://github.com/yasmro/tic-tac-toe)

[Visit Website](https://tictactoe-yasmro.netlify.app/)

三目並べゲーム

Game UI

Tic-Tac-Toe

Tic-Tac-Toe Game

I developed the JAMStack E-commerce site with Shopify's Storefront API.

#### Used Technologies
HTML, CSS(Tailwind), JavaScript (React, Next.js), Vercel, Shopify, Shopify Storefront

[Visit Website](https://next-shopify-example.vercel.app/)

[Github](https://github.com/yasmro/next-shopify-example)

JAMStack ECサイト

Store Page

Product Detail Page

Checkout Page (Using Shopify's page)

JAMStack EC-Site

Experienced since 2009 and took 20+ awards on Japanese calligraphy concours before. Also, I'm selling the Shodo art works as NFT.

#### Links
- [Instagram](https://www.instagram.com/yasmro1226/)
- [NFT Art - Opensea](https://opensea.io/Yasmro_Yu_Ohno)

書道

Beauty II

Sakura Kakushi

Night Dew

Business Card

Smell in the rainy season

Dusk – Minatomirai

404 - Not Found

紅に染まるまで雨に打たれて...

Be Drenched In The Rain Until Painted Crimson

New Year's Greeting 2020

"New" Year's Greeting 2021

破 - Beat

New Year's Greeting 2022

New Year's Greeting 2023 – Rabbit

New Year's Greeting 2024 – Rayquaza's Roar

Shodo

Hardware Product

Barrier Detector provides detecting obstructs on road to prevent injuring for blindness pedestrians. I designed the detection range of obstructs with mathematics such as trigonometric function and 3D-polar-coordinates (r, theta, phi–coordinates) based on pedestrian’s walk-characteristics (e.g. walk speed, visible angular range) with caluculation.

#### Project Duration
4 months(Sep 2017 – Jan 2018)

#### Action Items of DRI
Project Management, Coding with Arduino, Designing the range of detection

#### Used Technologies
Arduino, Frizing, Tera Term, Fusion360, Mathematics(3D-polar-coordinates)

Works

Choose Categories