Personal Projects
As I continue my journey as a designer, I often ask myself what the end goal is. I'd say in the long-term, I want to be able to tell stories through my creative works. I've always been enamoured by all types of forms of visual media - books, comics, art, movies, games, music - I want to do everything even if it takes me my entire lifetime. I see so many incredible designers who have taken such care to amplify their talent with skills and knowledge to weave stunning stories together - in ways that are so uniquely theirs. That's what I want in the long term - to design such that no one else in the world could do it the same way.
So then... what's the 5-year-plan? For now, my short term goals are to learn, practice, improve, and absorb everything I can from the world and designers around me. For now, I want to know which tools I already have and improve my skills for when I can eventually create more complex design projects.
Poetry Book: 400&1
‘400&1’ is a poetry book I wrote in 2015 for a high school French project, consisting of 8 short poems paired with digital illustrations. Inspired by a handful of charming astronomical facts and phenomena, this was my take on the oft-told tale of the Sun and Moon as lovers in passing.
This was created before any of my formal education in graphic design, and as such the layouts and typography could certainly be improved. However, this project holds a lot of meaning to me as it was one of my first true experiences with graphic design and what I’d probably upsell now as ‘multimedia storytelling.’
I remember so distinctly the care I put into planning each page - thinking through the flow of all the poems and the ways by which I could use the background illustrations to enhance the atmosphere of each poem. I recall pixel-pushing individual lines of text to match the curves of the illustrations, as my family computer at home didn’t have any proper design software.
Even after I'd completed the book itself, there was the testing I did to figure out how to orient the pages together for printing. I remember meticulously assembling the book, the care with which I cut and glued the pages together, and the sheer excitement of seeing the work I’d done come together.
This was created before any of my formal education in graphic design, and as such the layouts and typography could certainly be improved. However, this project holds a lot of meaning to me as it was one of my first true experiences with graphic design and what I’d probably upsell now as ‘multimedia storytelling.’
I remember so distinctly the care I put into planning each page - thinking through the flow of all the poems and the ways by which I could use the background illustrations to enhance the atmosphere of each poem. I recall pixel-pushing individual lines of text to match the curves of the illustrations, as my family computer at home didn’t have any proper design software.
Even after I'd completed the book itself, there was the testing I did to figure out how to orient the pages together for printing. I remember meticulously assembling the book, the care with which I cut and glued the pages together, and the sheer excitement of seeing the work I’d done come together.
Web Development: Wiltedhearts
For this project, I developed a responsive website for a fictional art collective using HTML, CSS, and JavaScript. The artwork displayed is all my own (though none of it was specifically made for this project).
The phrase ‘Wiltedhearts’ had been stuck in my mind for quite some time, and early on I considered it a potential title for a revised portfolio website. However, I knew that this would be a bit too dramatic for that purpose so I shifted the project to be a website for an art collective. This allowed me to indulge myself in that sort of ‘romantic melancholy’ storytelling while still testing HTML, CSS, and JS components for a potential portfolio site.
I had learned a lot from the previous iteration of my site and I knew I’d want this website to better express my personality, so I began experimenting with colours and more fun/retro font choices. I also knew to take a more modular approach with coding, and utilized the native CSS Grid which would allow me to easily add, remove, or re-order components to change the content of the site. Within media queries, I used CSS Grids to set up the initial responsiveness for two states, where the main content div elements would stack for mobile. Then I arranged the internal content using CSS Grid or Flexbox, and adjusted CSS classes for different breakpoints, as needed for fonts, images, etc.
Lastly, I incorporated a few interaction points using JavaScript, particularly the swapping of gallery images and a lightbox/modal. While my draft version was functional, it used two separate functions for the arrows and the ‘preview’ images so I completely reworked the JS code to consolidate these functions.
The phrase ‘Wiltedhearts’ had been stuck in my mind for quite some time, and early on I considered it a potential title for a revised portfolio website. However, I knew that this would be a bit too dramatic for that purpose so I shifted the project to be a website for an art collective. This allowed me to indulge myself in that sort of ‘romantic melancholy’ storytelling while still testing HTML, CSS, and JS components for a potential portfolio site.
I had learned a lot from the previous iteration of my site and I knew I’d want this website to better express my personality, so I began experimenting with colours and more fun/retro font choices. I also knew to take a more modular approach with coding, and utilized the native CSS Grid which would allow me to easily add, remove, or re-order components to change the content of the site. Within media queries, I used CSS Grids to set up the initial responsiveness for two states, where the main content div elements would stack for mobile. Then I arranged the internal content using CSS Grid or Flexbox, and adjusted CSS classes for different breakpoints, as needed for fonts, images, etc.
Lastly, I incorporated a few interaction points using JavaScript, particularly the swapping of gallery images and a lightbox/modal. While my draft version was functional, it used two separate functions for the arrows and the ‘preview’ images so I completely reworked the JS code to consolidate these functions.
Mobile version
function gallery(itemNum, switchTo){
const imageSources = [
imageSources1 = [
"./img/dreamer.png",
"./img/dreamer_det1.png",
"./img/dreamer_det2.png",
"./img/dreamer_det3.png"
],
imageSources2 = [
"./img/lovelorn.png",
"./img/lovelorn_det1.png",
"./img/lovelorn_det2.png",
"./img/lovelorn_det3.png"
],
imageSources3 = [
"./img/echoingcorridors.png",
"./img/echoingcorridors_det1.png",
"./img/echoingcorridors_det2.png",
"./img/echoingcorridors_det3.png"
],
imageSources4 = [
"./img/bolt.png",
"./img/bolt_det1.png",
"./img/bolt_det2.png",
"./img/bolt_det3.png"
],
imageSources5 = [
"./img/returnhome.png",
"./img/returnhome_det1.png",
"./img/returnhome_det2.png",
"./img/returnhome_det3.png"
],
imageSources6 = [
"./img/garden.png",
"./img/garden_det1.png",
"./img/garden_det2.png",
"./img/garden_det3.png"
]
];
const currentImageSet = imageSources[itemNum-1];
// console.log(previewSources);
var currentImage = document.querySelector(".image"+ itemNum);
var currentState = null;
var currentPreview = null;
for(let i=0;i< currentImageSet.length;i++){
const currentImgSrc = currentImageSet[i];
if(currentImage.src.match(currentImgSrc)){
currentState = i;
}
}
// console.log(currentState);
if(switchTo==="prev"){
currentState--;
} else if(switchTo==="next"){
currentState++;
} else if(switchTo!=="prev" || switchTo !== "next"){
currentState = switchTo;
}
if(currentState>currentImageSet.length-1) currentState = 0;
if(currentState<0) currentState = currentImageSet.length-1;
console.log(currentImageSet);
currentImage.src = currentImageSet[currentState];
console.log(currentImage.src);
const previewSources = document.querySelectorAll(".preview"+ itemNum + " > .preview-image");
console.log(previewSources);
currentPreview = previewSources[currentState];
// console.log(currentPreview);
currentPreview.classList.add("active-preview");
for(let i=0;i<previewSources.length;i++){
if(previewSources[i] !== currentPreview) previewSources[i].classList.remove("active-preview");
}
}Revised JS code
