Project Collection
Welcome to my expanded portfolio!
Currently a work in progress, but feel free to poke around! Here you can find a more in-depth collection of my best works. Depending on what I'm seeking at the moment, they'll be arranged in a certain manner. If you're really interested in my journey, you can find my archive here (or above in the navbar) and really track the evolution of my work.
Freelance & Contractor Projects
Below you'll find freelance or contract projects I have contributed to. Click on each thumbnail to learn more!
If you like what you see and would like to find out more information about my rates and current discounts, please send me a message with the form below (located here for convenience) with the subject line 'Freelance' and I'll get back to you as soon as I can!
AVID Professional Learning guide
Deployed site here, and github repository here.
Created under contract with AVID Center, this is a tool allowing educators, school administrators, school board members, etc. to identify which AVID Programs are most suited for their school and situation.
As a front-end developer on this team of 5, my role was to take the designs and mock-ups created by the UI/UX team and create a web application using Vue.js and Nuxt.js.
The back-end API was created and maintained using C# and .NET, as well as utilizing Azure tables. Data was consumed on the front-end through JSON and simple querying.
Collaborated with the following people: Louis Coleman (Github, LinkedIn)
Created under contract with AVID Center, this is a tool allowing educators, school administrators, school board members, etc. to identify which AVID Programs are most suited for their school and situation.
As a front-end developer on this team of 5, my role was to take the designs and mock-ups created by the UI/UX team and create a web application using Vue.js and Nuxt.js.
The back-end API was created and maintained using C# and .NET, as well as utilizing Azure tables. Data was consumed on the front-end through JSON and simple querying.
Louis Coleman (Github, LinkedIn)
Epic PTEpic Physical Therapy
Deployed site here, and github repository here.
One of my first freelance projects, EPIC Physical Therapy was seeking a complete overhaul of their website. At the time, their website was poorly maintained and in a state of disarray with outdated information and poorly laid out.
My solution and proposal was to create a modern, mobile-responsive, and sleek site. Addressing client concerns was the forefront of my approach, and I led an agile-style process of weekly client meetings and demos.
I brought in several former students to collaborate with and create a team environment conducive to learning and applying skills taught in the bootcamp.
Collaborated with the following people: Louis Coleman (Github, LinkedIn)
Megan Bryan (Github, LinkedIn)
Ankush Challa (Github, LinkedIn)
Jessilin Lugo (Github, LinkedIn)
David Johnson (Github, LinkedIn)
Tara Brichetto (Github, LinkedIn)
One of my first freelance projects, EPIC Physical Therapy was seeking a complete overhaul of their website. At the time, their website was poorly maintained and in a state of disarray with outdated information and poorly laid out.
My solution and proposal was to create a modern, mobile-responsive, and sleek site. Addressing client concerns was the forefront of my approach, and I led an agile-style process of weekly client meetings and demos.
I brought in several former students to collaborate with and create a team environment conducive to learning and applying skills taught in the bootcamp.
Louis Coleman (Github, LinkedIn)
Megan Bryan (Github, LinkedIn)
Ankush Challa (Github, LinkedIn)
Jessilin Lugo (Github, LinkedIn)
David Johnson (Github, LinkedIn)
Tara Brichetto (Github, LinkedIn)
AVID Professional Learning guide
Deployed site here. Unfortunately, the repository cannot be shared at this time.
Created under contract with AVID Center, this is a tool allowing educators, school administrators, school board members, etc. to identify which AVID Programs are most suited for their school and situation.
As a front-end developer on this team of 5, my role was to take the designs and mock-ups created by the UI/UX team and create a web application using Vue.js and Nuxt.js.
The back-end API was created and maintained using C# and .NET, as well as utilizing Azure tables. Data was consumed on the front-end through JSON and simple querying.
Collaborated with the following people: Louis Coleman (Github, LinkedIn)
Created under contract with AVID Center, this is a tool allowing educators, school administrators, school board members, etc. to identify which AVID Programs are most suited for their school and situation.
As a front-end developer on this team of 5, my role was to take the designs and mock-ups created by the UI/UX team and create a web application using Vue.js and Nuxt.js.
The back-end API was created and maintained using C# and .NET, as well as utilizing Azure tables. Data was consumed on the front-end through JSON and simple querying.
Louis Coleman (Github, LinkedIn)
Epic Physical Therapy
Deployed site here, and github repository here.
One of my first freelance projects, EPIC Physical Therapy was seeking a complete overhaul of their website. At the time, their website was poorly maintained and in a state of disarray with outdated information and poorly laid out.
My solution and proposal was to create a modern, mobile-responsive, and sleek site. Addressing client concerns was the forefront of my approach, and I led an agile-style process of weekly client meetings and demos.
I brought in several former students to collaborate with and create a team environment conducive to learning and applying skills taught in the bootcamp.
Collaborated with the following people: Louis Coleman (Github, LinkedIn)
Megan Bryan (Github, LinkedIn)
Ankush Challa (Github, LinkedIn)
Jessilin Lugo (Github, LinkedIn)
David Johnson (Github, LinkedIn)
Tara Brichetto (Github, LinkedIn)
One of my first freelance projects, EPIC Physical Therapy was seeking a complete overhaul of their website. At the time, their website was poorly maintained and in a state of disarray with outdated information and poorly laid out.
My solution and proposal was to create a modern, mobile-responsive, and sleek site. Addressing client concerns was the forefront of my approach, and I led an agile-style process of weekly client meetings and demos.
I brought in several former students to collaborate with and create a team environment conducive to learning and applying skills taught in the bootcamp.
Louis Coleman (Github, LinkedIn)
Megan Bryan (Github, LinkedIn)
Ankush Challa (Github, LinkedIn)
Jessilin Lugo (Github, LinkedIn)
David Johnson (Github, LinkedIn)
Tara Brichetto (Github, LinkedIn)
Personal Projects
Here are some personal projects I have created just for fun, click each one to learn more! For these personal projects, the code repositories will all be public on my github.
Reaction TestA fun way to test your reaction... or scare your friends
Deployed site here, and github repository here.
This mini-project is a quick exercise and demonstration of using Vue.js, as well as me practicing JavaScript timers. I was inspired by one of my friends sending me a link to a site that would test my reaction speed, useful for online gaming. However, I was (wrongfully) worried that it would be a jump scare. Once I determined it was legitimate, I thought it would be a fun idea to create a similar version that actually IS a jump scare.
Feel free to send the link to your friends (or enemies) to get their hearts racing for a little bit! If you enter 'charizard' as the password, you will bypass the jumpscare and be able to complete the reaction test without worrying about the jump scare.
I used scoped styling for each .vue component, which helped me practice my vanilla CSS.
This mini-project is a quick exercise and demonstration of using Vue.js, as well as me practicing JavaScript timers. I was inspired by one of my friends sending me a link to a site that would test my reaction speed, useful for online gaming. However, I was (wrongfully) worried that it would be a jump scare. Once I determined it was legitimate, I thought it would be a fun idea to create a similar version that actually IS a jump scare.
Feel free to send the link to your friends (or enemies) to get their hearts racing for a little bit! If you enter 'charizard' as the password, you will bypass the jumpscare and be able to complete the reaction test without worrying about the jump scare.
I used scoped styling for each .vue component, which helped me practice my vanilla CSS.
This portfolio! ... although, it IS a little meta.
Deployed site here, and github repository here.
This portfolio is built in React.js, and features a lot of different components.
Dark mode was created from scratch before tailwind incorporated it
lots of refactoring to get components done
This portfolio is built in React.js, and features a lot of different components.
Dark mode was created from scratch before tailwind incorporated it
lots of refactoring to get components done
A fun way to test your reaction... or scare your friends
Deployed site here, and github repository here.
This mini-project is a quick exercise and demonstration of using Vue.js, as well as me practicing JavaScript timers. I was inspired by one of my friends sending me a link to a site that would test my reaction speed, useful for online gaming. However, I was (wrongfully) worried that it would be a jump scare. Once I determined it was legitimate, I thought it would be a fun idea to create a similar version that actually IS a jump scare.
Feel free to send the link to your friends (or enemies) to get their hearts racing for a little bit! If you enter 'charizard' as the password, you will bypass the jumpscare and be able to complete the reaction test without worrying about the jump scare.
I used scoped styling for each .vue component, which helped me practice my vanilla CSS.
This mini-project is a quick exercise and demonstration of using Vue.js, as well as me practicing JavaScript timers. I was inspired by one of my friends sending me a link to a site that would test my reaction speed, useful for online gaming. However, I was (wrongfully) worried that it would be a jump scare. Once I determined it was legitimate, I thought it would be a fun idea to create a similar version that actually IS a jump scare.
Feel free to send the link to your friends (or enemies) to get their hearts racing for a little bit! If you enter 'charizard' as the password, you will bypass the jumpscare and be able to complete the reaction test without worrying about the jump scare.
I used scoped styling for each .vue component, which helped me practice my vanilla CSS.
Bootcamp Projects
Here is a collection of my best projects from the coding bootcamp. I personally find it super exciting to track my progress, from my first assignment to my final project. Click each one to learn more! You can find my github here.
RocketList: an open-ended forum for quick answers, featuring live chat!
Deployed site here, and github repository here.
The final project of the bootcamp, RocketList combines a React frontend with a GraphQL and Apollo backend, with a live chat feature through Socket.io.This app won both the award for Best Functionality and the People's Choice Award.
Coined as a combination of the best parts of Reddit, Yahoo Answers, and Craigslist, registered users can create posts, respond to existing posts, and even join a live chatroom specific to the post at hand. This open-endedness connects people seeking services, advice, or general thoughts/reactions from the internet. A chat feature was introduced to decrease the likelihood of off-topic replies to a post, with users urged to summarize the happenings in a chat.
Styling was done primarily through Tailwind CSS, with loading animations coming from react-spinners as an npm package. Other features and packages used include popper.js, query-string, and react-emoji. I served as part of the frontend team, handling requests and focusing on mobile layout/optimization. I also was responsible for the custom rocket animation in the logo.
Collaborated with the following people: Louis Coleman (Github, LinkedIn)
Rory Jacobs (Github, LinkedIn)
Paul Lee (Github, LinkedIn)
Marlon Jones (Github)
The final project of the bootcamp, RocketList combines a React frontend with a GraphQL and Apollo backend, with a live chat feature through Socket.io.This app won both the award for Best Functionality and the People's Choice Award.
Coined as a combination of the best parts of Reddit, Yahoo Answers, and Craigslist, registered users can create posts, respond to existing posts, and even join a live chatroom specific to the post at hand. This open-endedness connects people seeking services, advice, or general thoughts/reactions from the internet. A chat feature was introduced to decrease the likelihood of off-topic replies to a post, with users urged to summarize the happenings in a chat.
Styling was done primarily through Tailwind CSS, with loading animations coming from react-spinners as an npm package. Other features and packages used include popper.js, query-string, and react-emoji. I served as part of the frontend team, handling requests and focusing on mobile layout/optimization. I also was responsible for the custom rocket animation in the logo.
Louis Coleman (Github, LinkedIn)
Rory Jacobs (Github, LinkedIn)
Paul Lee (Github, LinkedIn)
Marlon Jones (Github)
To-GatherTo-Gather, where you can plan events with friends, family, and get together!
Deployed site here, and github repository here.
This app was the second project in the coding bootcamp
It contains full CRUD
functionality for events, tasks, and costs. Users can sign up
for a new account, create and plan events, and invite others
(via email) to collaborate with them in planning the event. It
features a countdown timer that ticks towards the event start
date and time. Tasks and costs can be created and assigned to
different collaborators, allowing for full transparency in the
event planning process.
The CSS framework used was Foundation CSS, and a MySQL-backed
database hosts all aspects of storage. Passwords are encrypted
on creation and login through the npm package bcrypt, and emails
are sent with node mailer. Other technologies used include
sequelize, twilio, generate-password, JAWSDB, and
random-username-generator. HTML was conditionally rendered with
handlebars, and individual events are rendered on cards via
handlebars partials. I was part of the front-end team, dealing
with collecting information in the forms, handlebars rendering,
and other front-end javascript.
Collaborated with the following people: Zac Stowell (Github, LinkedIn)
Yuri Oliveira (Github)
Misha Gringauze (Github)
This app was the second project in the coding bootcamp
It contains full CRUD functionality for events, tasks, and costs. Users can sign up for a new account, create and plan events, and invite others (via email) to collaborate with them in planning the event. It features a countdown timer that ticks towards the event start date and time. Tasks and costs can be created and assigned to different collaborators, allowing for full transparency in the event planning process.
The CSS framework used was Foundation CSS, and a MySQL-backed database hosts all aspects of storage. Passwords are encrypted on creation and login through the npm package bcrypt, and emails are sent with node mailer. Other technologies used include sequelize, twilio, generate-password, JAWSDB, and random-username-generator. HTML was conditionally rendered with handlebars, and individual events are rendered on cards via handlebars partials. I was part of the front-end team, dealing with collecting information in the forms, handlebars rendering, and other front-end javascript.
Zac Stowell (Github, LinkedIn)
Yuri Oliveira (Github)
Misha Gringauze (Github)
PokeGoDexPokéGoDex: a one-stop application to figure out if your
favorite Pokémon from the main games is available in the hit
mobile game Pokémon GO!
Deployed site here, and github repository here.
This frontend application largely combined two external APIs that
allows users to cross-reference which Pokémon are in the
mobile app Pokémon GO.
Users can search for Pokémon by their names, types, or
generation, since there are over 800 of them now, and then check to
see if they are available in the mobile game with a click of a
button.
The CSS framework used was Bulma CSS, with a web animations API used
for the spinning Pokéball logo. I was a full-stack developer
in this project, getting involved with backend logic for performance
issues, setting up the search functions, as well as desgining the
cards that get populated with Pokémon information. Also
featured heavily in the code was jQuery, and using ajax for our
requests.
Collaborated with the following people: Louis Coleman (Github, LinkedIn)
Paul Lee (Github, LinkedIn)
Marlon Jones (Github)
This frontend application largely combined two external APIs that allows users to cross-reference which Pokémon are in the mobile app Pokémon GO.
Users can search for Pokémon by their names, types, or generation, since there are over 800 of them now, and then check to see if they are available in the mobile game with a click of a button.
The CSS framework used was Bulma CSS, with a web animations API used for the spinning Pokéball logo. I was a full-stack developer in this project, getting involved with backend logic for performance issues, setting up the search functions, as well as desgining the cards that get populated with Pokémon information. Also featured heavily in the code was jQuery, and using ajax for our requests.
Louis Coleman (Github, LinkedIn)
Paul Lee (Github, LinkedIn)
Marlon Jones (Github)
RocketList: an open-ended forum for quick answers, featuring live chat!
Deployed site here, and github repository here.
The final project of the bootcamp, RocketList combines a React frontend with a GraphQL and Apollo backend, with a live chat feature through Socket.io.This app won both the award for Best Functionality and the People's Choice Award.
Coined as a combination of the best parts of Reddit, Yahoo Answers, and Craigslist, registered users can create posts, respond to existing posts, and even join a live chatroom specific to the post at hand. This open-endedness connects people seeking services, advice, or general thoughts/reactions from the internet. A chat feature was introduced to decrease the likelihood of off-topic replies to a post, with users urged to summarize the happenings in a chat.
Styling was done primarily through Tailwind CSS, with loading animations coming from react-spinners as an npm package. Other features and packages used include popper.js, query-string, and react-emoji. I served as part of the frontend team, handling requests and focusing on mobile layout/optimization. I also was responsible for the custom rocket animation in the logo.
Collaborated with the following people: Louis Coleman (Github, LinkedIn)
Rory Jacobs (Github, LinkedIn)
Paul Lee (Github, LinkedIn)
Marlon Jones (Github)
The final project of the bootcamp, RocketList combines a React frontend with a GraphQL and Apollo backend, with a live chat feature through Socket.io.This app won both the award for Best Functionality and the People's Choice Award.
Coined as a combination of the best parts of Reddit, Yahoo Answers, and Craigslist, registered users can create posts, respond to existing posts, and even join a live chatroom specific to the post at hand. This open-endedness connects people seeking services, advice, or general thoughts/reactions from the internet. A chat feature was introduced to decrease the likelihood of off-topic replies to a post, with users urged to summarize the happenings in a chat.
Styling was done primarily through Tailwind CSS, with loading animations coming from react-spinners as an npm package. Other features and packages used include popper.js, query-string, and react-emoji. I served as part of the frontend team, handling requests and focusing on mobile layout/optimization. I also was responsible for the custom rocket animation in the logo.
Louis Coleman (Github, LinkedIn)
Rory Jacobs (Github, LinkedIn)
Paul Lee (Github, LinkedIn)
Marlon Jones (Github)
To-Gather, where you can plan events with friends, family, and get together!
Deployed site here, and github repository here.
This app was the second project in the coding bootcamp
It contains full CRUD
functionality for events, tasks, and costs. Users can sign up
for a new account, create and plan events, and invite others
(via email) to collaborate with them in planning the event. It
features a countdown timer that ticks towards the event start
date and time. Tasks and costs can be created and assigned to
different collaborators, allowing for full transparency in the
event planning process.
The CSS framework used was Foundation CSS, and a MySQL-backed
database hosts all aspects of storage. Passwords are encrypted
on creation and login through the npm package bcrypt, and emails
are sent with node mailer. Other technologies used include
sequelize, twilio, generate-password, JAWSDB, and
random-username-generator. HTML was conditionally rendered with
handlebars, and individual events are rendered on cards via
handlebars partials. I was part of the front-end team, dealing
with collecting information in the forms, handlebars rendering,
and other front-end javascript.
Collaborated with the following people: Zac Stowell (Github, LinkedIn)
Yuri Oliveira (Github)
Misha Gringauze (Github)
This app was the second project in the coding bootcamp
It contains full CRUD functionality for events, tasks, and costs. Users can sign up for a new account, create and plan events, and invite others (via email) to collaborate with them in planning the event. It features a countdown timer that ticks towards the event start date and time. Tasks and costs can be created and assigned to different collaborators, allowing for full transparency in the event planning process.
The CSS framework used was Foundation CSS, and a MySQL-backed database hosts all aspects of storage. Passwords are encrypted on creation and login through the npm package bcrypt, and emails are sent with node mailer. Other technologies used include sequelize, twilio, generate-password, JAWSDB, and random-username-generator. HTML was conditionally rendered with handlebars, and individual events are rendered on cards via handlebars partials. I was part of the front-end team, dealing with collecting information in the forms, handlebars rendering, and other front-end javascript.
Zac Stowell (Github, LinkedIn)
Yuri Oliveira (Github)
Misha Gringauze (Github)
PokéGoDex: a one-stop application to figure out if your
favorite Pokémon from the main games is available in the hit
mobile game Pokémon GO!
Deployed site here, and github repository here.
This frontend application largely combined two external APIs that
allows users to cross-reference which Pokémon are in the
mobile app Pokémon GO.
Users can search for Pokémon by their names, types, or
generation, since there are over 800 of them now, and then check to
see if they are available in the mobile game with a click of a
button.
The CSS framework used was Bulma CSS, with a web animations API used
for the spinning Pokéball logo. I was a full-stack developer
in this project, getting involved with backend logic for performance
issues, setting up the search functions, as well as desgining the
cards that get populated with Pokémon information. Also
featured heavily in the code was jQuery, and using ajax for our
requests.
Collaborated with the following people: Louis Coleman (Github, LinkedIn)
Paul Lee (Github, LinkedIn)
Marlon Jones (Github)
This frontend application largely combined two external APIs that allows users to cross-reference which Pokémon are in the mobile app Pokémon GO.
Users can search for Pokémon by their names, types, or generation, since there are over 800 of them now, and then check to see if they are available in the mobile game with a click of a button.
The CSS framework used was Bulma CSS, with a web animations API used for the spinning Pokéball logo. I was a full-stack developer in this project, getting involved with backend logic for performance issues, setting up the search functions, as well as desgining the cards that get populated with Pokémon information. Also featured heavily in the code was jQuery, and using ajax for our requests.
Louis Coleman (Github, LinkedIn)
Paul Lee (Github, LinkedIn)
Marlon Jones (Github)
Contact me!
Have any questions? Want to collaborate together? Secretly dying to know my favorite song? Hit me up! Send me an email (or use the nifty little form below!) and I'll get back to you as soon as I can!
You can find also find me on LinkedIn here, and my email is dioncleung@gmail.com.
Powered by React, Axios, NodeMailer, React Anchor Link Smooth Scroll, and React Router Dom. Styled with Tailwind CSS.