Hi, I'm James and here is a collection of my works and projects during my stay at Avion School.

(Checkout my new portfolio website [WIP] here.)

Man on a mountain
"One Step At A Time"

Webdev Good Practice

A web development good practice that is most important to me right now as newbie learning the ins and outs of the field.

chess pieces

Chess Layout Using Flexbox

Supposed to be a chess layout only demonstrating the application of CSS flexbox but I went ahead and added some extra features like piece movements (no rules yet), move logs, game sounds, and a reset button; This is also my very first responsive page

Two guys playing a board game

TicTacToe

A simple tictactoe game I made using vanilla javascript

coins

Bank App

An app designed for the use of a bank clerk managing multiple bank accounts; Uses local storage for caching, supports night mode, has create account feature, basic log-in/log-out, and basic log-in details validation; Uses anime.js and chart.js

Letter envelope

HTML Semantics Exercise

An exercise on the proper use of HTML tags to give more semantic meaning to webpage elements

Elon Musk

Tribute Page

A tribute page I made featuring Elon Musk; Made a custom auto-scrolling image gallery, a static timeline, animated cards, and back-to-top button; Used CSS and vanilla javascript for animations

pawn with a crown

Improved Responsive Chess Layout Using Grid

Also supposed to be a chess layout only demonstrating the application of CSS grid; An improved version of the previous chess layout as it now has a chess engine derived from H.G. Müllers' Micro-Max

Poker Cards

An exercise on javascript logic; From a deck of cards, user can shuffle, sort, deal cards, and classify a hand; Uses anime.js for added animation

Guy taking a survey

Survey Form

A survey form I made for Avion School; Features CSS and vanilla javascript animation, robust input validation, and design that goes with the current Avion School theme

wireframe

Landing Page

My take on a product landing page (although my chosen product is a service being offered by a hypothetical web design company)

4 dice jugggle

Pig Game

My version of the Pig Game with a 3D dice for rolling animation

female fashion model

Frontend Final Project

An online shop made using Paymongo API; Uses HTML, EJS, CSS, and vanilla javascript for the frontend; I went on and added a backend server using Node.js + Express web server, and MongoDB Atlas for database; Used mobile first design approach and I haven't finished the media queries yet so kindly enjoy it in mobile view for now

  • Facebook
  • LinkedIn
  • Email
  • Github

© Untitled. James Villanueva