Hello, welcome to

Wakana's

PORTFOLIO

FRONT-END / WEB DEVELOPER

laptop-image
phone-image
desktop-image

A LITTLE
ABOUT ME

Hi there! I’m a web developer with a Certificate IV in Information Technology from the Canberra Institute of Technology. I’ve gained knowledge in a wide range of web and application development technologies, such as front-end website development, database management, and system development using object-oriented languages.

I worked as a civil engineering consultant in Japan after graduating with a Bachelor’s degree in Civil Engineering, and I decided to pursue a new career in web application and software development in Australia.
Please don’t hesitate to contact me if you’re looking for a developer!

contact
Photo

QUALIFICATIONS

- CertificateVI Information Technology, Canberra Institute of Technoligy, Australia (2024)

⎼ CertificateIII Information Technology, Canberra Institute of Technoligy, Australia (2022)

⎼ Bachelor of Engineering (Civil), University of the Ryukyus, Japan (2019)

Photo

SKILLS

I LOVE
CREATING
THE WORLD

Top Skills

  • - HTML
  • - CSS
  • - JavaScript
    ( React,
    Next.js,
    TypeScript )

Technologies

  • - PHP
  • - Python
  • - Java
  • - Oracle SQL
  • - PL/SQL
  • - C++
  • - C#

Tools

  • - Wordpress
  • - Apache
  • - MySQL
  • - Oracle SQL Developer
  • - Visual Studio Code
  • - Git/GitHub
  • - Microsoft suite

Languages

  • English
  • Japanese

Other

  • - ArcGIS
  • - AutoCAD
  • - Revit

MY WORK

1. Personal Home Page

Technology Used

- HTML, CSS and React.js

Purpose

- To showcase my skills and projects to potential employers and clients.

Design

- Designed using Canva.
See design File

Code Link

- You can see the code for this page on my Github.

CSS Features

Gradient colour and Hover Effects

- Used to create a modern-looking website and enhance the user experience.

Example
Example

Responsive Design

- Designed to be suitable for both desktop and mobile devices.

homeScreen_imagehomeScreen_image2

JavaScript / React Features

Navigation Icon

- Mobile users can open and close the main menu by clicking the hamburger icons.

- Utilised state to manage interactions in the main navigation menu and sub-navigation in the footer, allowing the correct icon to display dynamically.

menu_imagemenuCode_image

Project Cards

- Read and iterate through JavaScript objects to dynamically display project data.

projectCode_image
projectCard

Contact Form

- Created using Web3Forms.

- Implemented validation and sanitisation to enhance form security.

contactForm_imagesanitisationCode_image

2. Startup Landing Page

Technology Used

- HTML, Tailwind.CSS, Next.js and TypeScript

contactForm_image

Purpose

- This project was created to practice using modern front-end technologies.

Code link

- See the live page

- See the code on my Github.

Design

- Based on a design from a tutorial video, with enhancements made to component code and the addition of a dark mode feature.

- Utilised React icon, CSS animations, and Tailwind CSS buttons from devdojo.com

- Mobile-first design approach

Features

- Mobile responsive layout
- User-friendly navigation menu
- Dark mode toggle button
- Animation effects
- Scroll-to-top button
- Reusable text component
- Card components for client reviews and pricing

See more detailsmoreDetailButton

3. Library System

Technology Used

- HTML, CSS (Bootstrap), PHP and MySQL

Purpose

- This system was created as part of my coursework. It is designed for library management and includes a login page styled with Bootstrap.

Code link

- View the live page

- View the source code on my Github.

Design

- The design was created using Figma.
- View sitemap and storyboard (click)
- View prototype image (click)

prototype_image2

Features

Login Page

- Only an authorlised user can log in to the system.

Database Interaction

- Authorised users can Create, Read, Update and Delete book data from the library databse.

search_imageedit_image
login_imagesearch_image

Security Features

CSRF Token

- Set a CSRF token to prevent malicious requests from third-party websites.

csrfToken_image

SQL Injection Prevention

- Used prepared statements and parameter binding to prevent SQL injection.

sqlInjection_image

Password Hashing & Verification

- Encrypted passwords stored in the database and used password_verify() to securely compare hashed passwords.

encryptedData_image

XSS Prevention

- Escape error messages using htmlspecialchars() to prevent cross-site scripting.

xssCode_image

Security Features

CSRF Token

- Set a CSRF token to prevent malicious requests from third-party websites.

limitAttempts_image

Lesson Learned

- It was my first time creating a login feature with a database on a rental server. I researched and implemented the security measures listed above, but I recognize the importance of continuously learning and improving best practices.

Project Library

C# event management system projects
C# event management system projects

This is an event management system built with C# that I created as part of my course assignment. It allows users to register contestant information and view the list of contestants in each category.

See More
Python library system projects
Python library system projects

This is a library system project built with Python. It allows us to manage book information from an external file. I created this as part of my course assignment.

See More
JAVA dog management system projects
JAVA dog management system projects

This program is written in JAVA that allows dog breeders to store their dogs' information. I created this as part of my course assignment.

See More

CONTACT FORM

Have you got a question?
Please send me a message.

Get in touch

  • Linkedin
  • Github

@2025 Wakana Gushi. All Rights Resereved