Portfolio

Web Application

Rainy Days

• GitLab: https://gitlab.com/yokolet/rainy-days
• GitHub: https://github.com/yokolet/rainy-days
• Live: https://blogging-in-rainy-days.onrender.com/
• Multi-user, microblog application by Ruby on Rails and Vue.js, revised version of Rainy Day Blog
• OAuth2 Authorization Code Flow or PKCE(Proof Key for Code Exchange) by Google, GitHub and GitLab for a user authentication
• GraphQL API for blog posts and comments
  • (backend) GraphQL Ruby, (frontend) Vue Apollo
• Technologies on the backend
  • Rails 8, PostgreSQL, RSpec, Vite Ruby, nested comments
• Technologies on the frontend
  • Vue.js 3, Composition API, Vite, Bun, TypeScript, Vue Router, Pinia, Tailwind CSS, Responsive Design, Light/Dark mode
• GitLab CI/CD
• Docker

Action Cable Tic-Tac-Toe

• GitLab: https://gitlab.com/yokolet/action-cable-tictactoe
• GitHub: https://github.com/yokolet/action-cable-tictactoe
• Live: https://action-cable-tictactoe-2fbbd874419e.herokuapp.com/
• Multi-player, multi-board, realtime Tic-Tac-Toe game application
• Ruby on Rails, Action Cable (WebSocket), RSpec, Rails low-level caching
• Vue 3, Pinia, TypeScript, Vite, Tailwind CSS
• Other technologies: Responsive Design, Bun, Vue Router, VueUse, Google Fonts
• GitLab CI/CD

Option Selector

• GitLab: https://gitlab.com/yokolet/option-selector
• GitHub: https://github.com/yokolet/option-selector
• Live: https://yokolet.gitlab.io/option-selector/
• A complicated nested state update example. A single option change affects other options’ state.
• Vue3, TypeScript, Vite, Tailwind CSS
• Other technologies: Vitest, Pinia, Vue Router, Responsive Design, Light/Dark mode
• GitLab CI/CD

Tailwind Website Projects

• GitLab: https://gitlab.com/yokolet/tailwind-website-projects
• GitHub: https://github.com/yokolet/tailwind-website-projects
• Live: https://yokolet.gitlab.io/tailwind-website-projects/
• Six static websites for Tailwind CSS study
• Vue 3, TypeScript, Vite, Tailwind CSS
• Other technologies: Bun, Vue Router, VueUse, Google Fonts, Responsive Design
• GitLab CI/CD

Rainy Day Blog

• GitLab: https://gitlab.com/yokolet/rainy-day-blog
• GitHub: https://github.com/yokolet/rainy-day-blog
• Blog site web application by Ruby on Rails with Vue 3
• OAuth2 PKCE (Authorization Code Flow with Proof Key for Code Exchange) for a user authentication
• GraphQL for a blog post API
  • (backend) GraphQL Ruby, (frontend) Vue Apollo
• Others on the backend
  • PostgreSQL, Redis, RSpec, Vite Ruby
• Others on the frontend
  • Vite, Bun, Composition API, Vue Router, Pinia, Tailwind CSS, Daisy UI

Transcript App

• Web App: https://github.com/yokolet/transcript-web
• Transcript engine: https://github.com/yokolet/transcript
• Created a transcript engine for English to Japanese Katakana
  • Idea of text to speech, English word to Japanese sound notation
• Created a web application to use transcript engine
• GraphQL, Python, Flask

textblog

• https://github.com/yokolet/textblog
• Microblog web application which accepts only texts
• Facebook OAuth authentication to write blog
  • Just reading posts doesn’t require authentication
• Ruby on Rails, GraphQL, React/Redux, OAuth, PostgreSQL

C++

Snake Game

• https://github.com/yokolet/sdl-snake
• Snake Game by C++
  • Two snakes - one manual, another auto
  • Toxic food appears randomly

Traffic simulation

• https://github.com/yokolet/traffic-simulation
• Traffic simulation
• Thread management

Machine Learning

Becoming Jane by Deep Learning

• https://github.com/yokolet/DeepLearning/tree/master/Jane
• NLP
• Designed and trained the NLP model using Jane Austen’s novels as a training data.
• Generated sentences which might look like Jane Austen.

Small deep learning projects

• https://github.com/yokolet/DeepLearning
• CNN, DCGAN, RL, RNN etc.