-
-
-
- about
-
-
- i started as a creative working across media & advertising industry after my professional
- communication studies at rmit university vietnam.
-
as an editor and copywriter, my work revolved around generating ideas and producing multimedia
- artifacts across digital platforms.
-
then i further explored the changing landscape driven by platforms by studying
- digital communication at qut, queensland, australia.
- here i expand my work with research, data analysis & visualisation.
-
currently i'm an data analyst working for a digital agency focusing on government digital
- services. based in brisbane, australia.
-
i also explore & do other things - illustration, collage, and photography.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- everything is a matter of information exchange.
- from data, message, and idea comes information, knowledge, and action.
- a stint in advertising taught me everything we read, listen, and watch is persuasion.
- this doesn't necessarily involve understanding and accountability.
-
what i strive for is resonating, thoughtful, and hopefully critical work.
- that is, better communication through research, data analysis and information design.
-
-
- what i aim to do
-
-
-
-
-
-
-
- creative
-
-
-
-
-
-
-
- loud people, loud internet
-
-
illustration
-
-
-
-
-
- object of the year
-
-
visual collage
-
-
-
-
-
- seeing through writing
-
-
illustration
-
-
-
-
-
- the internet is www-eird
-
-
illustration
-
-
-
-
-
-
-
- work
-
-
-
-
-
- things i do
-
-
-
-
-
-
coding
-
r, python, javascript
-
-
-
-
visualisation
-
r, tableau, d3
-
-
-
-
visual
-
collage and illustration
-
-
-
-
photography
-
35mm film
-
-
-
-
web design
-
in-progress
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-card.mount("#card-element");
-
-// handle real-time validation errors from the card element
-card.addEventListener("change", function (event) {
- if (event.error) {
- displayError.textContent = event.error.message;
- } else {
- displayError.textContent = "";
- }
-});
-
-// handle form submission
-const form = document.getElementById("payment-form");
-const errorElement = document.getElementById("card-errors");
-
-form.addEventListener("submit", function (event) {
- event.preventDefault();
-
- //here we lock the form
- form.classList.add("processing");
- stripe.createToken(card).then(function (result) {
- if (result.error) {
- // here we unlock the form again if there's an error
- form.classList.remove("processing");
- // set the error text to the the error message
- errorElement.textContent = result.error.message;
- } else {
- // now we take over to handle sending the token to our server
- stripeTokenHandler(result.token);
- }
- });
-});
-
-function stripeTokenHandler(token) {
- // here we handle and make our actual payment
- // 1. make a variable for our token, name and email
- // const stripe_token = token.id
- const nameEl = document.querySelector("#name");
- const emailEl = document.querySelector("#email");
- // 2. we are going to grab form action url from the form
- const backendUrl = form.getAttribute("action");
- // 3. send the data off to the url using fetch
- // we use fetch to POST to our url vs GET
- fetch(backendUrl, {
- method: "POST",
- // tell it we send across json data
- headers: {
- "Content-Type": "application/json",
- },
- // here we send the data across
- // 4. need to make sure the data is ready/secure to be sent over
- body: JSON.stringify({
- order: {
- stripe_token: token.id,
- // grab the value from the name and email element
- name: nameEl.value,
- email: emailEl.value,
- },
- }),
- })
- // with fetch we get back our response which we turn into json
- .then((response) => response.json())
- // then we get it back as data to do stuff with
- .then((data) => {
- // here we check we actually get an order back then do something with it
- if (data.order) {
- const order = data.order;
- // ${order.name}
- // $(order.email)
- // tell the users the payment is successful
- form.querySelector(".form-title").textContent = "Payment successful!";
- form.querySelector(
- ".form-fields"
- ).textContent = `Thank you ${order.name},
- your payment was successful and we have sent an email to ${order.email} `;
- form.classList.remove("processing");
- }
- })
- // if there is an error, we can do something as well
- .catch((error) => {
- form.classList.remove("processing");
- // tell users there was an error
- errorElement.textContent = `There was an error with payment
- , please try again or contact us at`;
- });
-}
-
-/* smoothing scrolling */
-const anchors = document.querySelectorAll("a");
-
-// loop over them
-anchors.forEach((anchor) => {
- // listen for clicks on each one
- anchor.addEventListener("click", (event) => {
- // grab the hred attribute
- const href = anchor.getAttribute("href");
- // if the href starts with a #
- if (href.charAt(0) === "#") {
- // stop the default action
- event.preventDefault();
- // find the element the href points to and scroll it into view
- document.querySelector(href).scrollIntoView({
- behavior: "smooth",
- });
- }
- });
-});