https://hl3e213works.cargo.site hannah's playground Wed, 06 Dec 2023 01:11:03 +0000 https://hl3e213works.cargo.site en https://hl3e213works.cargo.site/Page-1 Fri, 17 Nov 2023 19:58:17 +0000 hannah's playground https://hl3e213works.cargo.site/Page-1 01 moodify ! completed Your browser does not support the video tag. DATE:&nbsp; APRIL 2023TOOLS: HTML, CSS, JS [p5js + vanilla] LINK: moodify overviewwhat is it? a website that generates a random song based on 3 different genres when a certain hand gesture is shown to the camera(powered by teachable machine) intent i created a new interface for the initial p5js&nbsp;sketch with a focus in both usability and design design for the new interface, i want to focus on making the experience more user friendly and clean by following the style of a more professional website style. i want to utilize design choices like colors and composition that allow for easy legibility and an overall seamless experience. right now, my inspiration for the design is derived from the cyber y2k aesthetic, with smooth, metallic tones. build <img width="1316" height="794" width_o="1316" height_o="794" data-src="https://freight.cargo.site/t/original/i/4eb3a4cbbe60b02c233a7856fdf9fc4fd915fd42b755d0a4c510f4b95cb4b705/moodify-thumbnail.png" data-mid="197196026" border="0" src="https://freight.cargo.site/w/1000/i/4eb3a4cbbe60b02c233a7856fdf9fc4fd915fd42b755d0a4c510f4b95cb4b705/moodify-thumbnail.png" /> <img width="1324" height="800" width_o="1324" height_o="800" data-src="https://freight.cargo.site/t/original/i/67bcb7937d1006ad194187d5c860a7898338dce60aac5f20c45a3b63a3a03c65/Screen-Shot-2023-11-17-at-4.27.17-PM.png" data-mid="197201347" border="0" src="https://freight.cargo.site/w/1000/i/67bcb7937d1006ad194187d5c860a7898338dce60aac5f20c45a3b63a3a03c65/Screen-Shot-2023-11-17-at-4.27.17-PM.png" /> <img width="1322" height="806" width_o="1322" height_o="806" data-src="https://freight.cargo.site/t/original/i/8a0936f69d4948327475db677f67f90337bf5af81ca4ec103500a776e74bc2f3/Screen-Shot-2023-11-17-at-4.27.33-PM.png" data-mid="197201349" border="0" src="https://freight.cargo.site/w/1000/i/8a0936f69d4948327475db677f67f90337bf5af81ca4ec103500a776e74bc2f3/Screen-Shot-2023-11-17-at-4.27.33-PM.png" /> <img width="1318" height="802" width_o="1318" height_o="802" data-src="https://freight.cargo.site/t/original/i/b61cf7247011511775f0e8aebdf2a0f86e53a618c4e954f1152b069b47dd61d7/Screen-Shot-2023-11-17-at-4.26.42-PM.png" data-mid="197201344" border="0" src="https://freight.cargo.site/w/1000/i/b61cf7247011511775f0e8aebdf2a0f86e53a618c4e954f1152b069b47dd61d7/Screen-Shot-2023-11-17-at-4.26.42-PM.png" /> <img width="1318" height="796" width_o="1318" height_o="796" data-src="https://freight.cargo.site/t/original/i/71638183ae828b1d351c12f2847c4e9ddab3b3fc2ccb98dace1c41f02b82bb8d/Screen-Shot-2023-11-17-at-4.26.51-PM.png" data-mid="197201345" border="0" src="https://freight.cargo.site/w/1000/i/71638183ae828b1d351c12f2847c4e9ddab3b3fc2ccb98dace1c41f02b82bb8d/Screen-Shot-2023-11-17-at-4.26.51-PM.png" /> <img width="1324" height="800" width_o="1324" height_o="800" data-src="https://freight.cargo.site/t/original/i/4821b3b9358cc03bdc675cddafd8f929278208d1d662eff1413765dea1cad67d/Screen-Shot-2023-11-17-at-4.27.02-PM.png" data-mid="197201346" border="0" src="https://freight.cargo.site/w/1000/i/4821b3b9358cc03bdc675cddafd8f929278208d1d662eff1413765dea1cad67d/Screen-Shot-2023-11-17-at-4.27.02-PM.png" /> <img width="1324" height="752" width_o="1324" height_o="752" data-src="https://freight.cargo.site/t/original/i/e073b7ddd7767519906720a58a588c07433d53bc45b5efec36a46b18dd5a5da7/Screen-Shot-2023-11-17-at-4.27.25-PM.png" data-mid="197201348" border="0" src="https://freight.cargo.site/w/1000/i/e073b7ddd7767519906720a58a588c07433d53bc45b5efec36a46b18dd5a5da7/Screen-Shot-2023-11-17-at-4.27.25-PM.png" /> <img width="1320" height="798" width_o="1320" height_o="798" data-src="https://freight.cargo.site/t/original/i/4b56b9b6bfb79207550b8ed5cceb03ff887b15a15609db5b3d905f812d0339c7/Screen-Shot-2023-11-17-at-4.26.30-PM.png" data-mid="197201343" border="0" src="https://freight.cargo.site/w/1000/i/4b56b9b6bfb79207550b8ed5cceb03ff887b15a15609db5b3d905f812d0339c7/Screen-Shot-2023-11-17-at-4.26.30-PM.png" /> <img width="1328" height="742" width_o="1328" height_o="742" data-src="https://freight.cargo.site/t/original/i/c0f4b48385056f2dd2e22ddbce68f4890fd69cb6890c7019d99f90a1d90fa451/Screen-Shot-2023-11-17-at-4.26.18-PM.png" data-mid="197201342" border="0" src="https://freight.cargo.site/w/1000/i/c0f4b48385056f2dd2e22ddbce68f4890fd69cb6890c7019d99f90a1d90fa451/Screen-Shot-2023-11-17-at-4.26.18-PM.png" /> <img width="1328" height="800" width_o="1328" height_o="800" data-src="https://freight.cargo.site/t/original/i/508159f4c09284a7fa776fdbb6387d555a798a1340ecbbad991755037089ef22/Screen-Shot-2023-11-17-at-4.25.59-PM.png" data-mid="197201341" border="0" src="https://freight.cargo.site/w/1000/i/508159f4c09284a7fa776fdbb6387d555a798a1340ecbbad991755037089ef22/Screen-Shot-2023-11-17-at-4.25.59-PM.png" /> reflection design i used figma to create the website design, and i had a lot of fun playing around! initially, the design i had in mind emulated spotify, with the black + green color scheme and the same widgets. however, i ended up dropping the idea because i wanted to create something more original / personal to me. i am glad i decided to change my idea because i think it works better with the concept of my project. build at first, i struggled a bit trying to figure out how to translate my design on figma into code. i never really used html/css extensively before, so trying to learn and incorporate it into my ideas was a bit daunting at first. however, the learning curve happened quite fast for me luckily, so i was able to get the hang of it in time. i also struggled with figuring out how to implement my p5js sketch into the site, since directly embedding it did not provide the user experience i was hoping for. i ended up copy and pasting my p5js sketch code into a js file and tweaking my code directly on the vscode interface to fit the website design! i also made a lot of silly mistakes throughout the process, which slowed down my process quite a bit (spent more than half my time troubleshooting ＞﹏＜). for example, the javascript i implemented into the faq page would not work for the longest time and i could not figure out what went wrong. however, after a kindred spirit on stack overflow mentioned to check the script tag in the html file, i realized i linked 2 separate js files with the same code into the html sheet! conclusion i am proud of myself for being able to debug most of the issues i had as well as creating a functioning site despite my limited experience in html/css! i realized that i really enjoy this kind of work and would love to continue this journey of website creating in the future as both a hobby and even a career! https://hl3e213works.cargo.site/Page-2 Fri, 17 Nov 2023 22:59:03 +0000 hannah's playground https://hl3e213works.cargo.site/Page-2 02 divine divination completed Your browser does not support the video tag. DATE: APRIL 2023TOOLS: HTML, CSS, JS [rita + vanilla] LINK: divine divination https://hl3e213works.cargo.site/Page-3 Mon, 20 Nov 2023 19:44:41 +0000 hannah's playground https://hl3e213works.cargo.site/Page-3 03 web based response completed Your browser does not support the video tag. DATE: SEPTEMBER 2023TOOLS: HTML, CSS, JS [vanilla] LINK: web based response overviewwhat is it? a web based composition responding to louise drulhe’s critical atlas of the internet&nbsp; intent to create a new piece that takes a pre-existing web piece as inspiration and a starting point. design to start off the process, i took notes about drulhe’s work, noting my thoughts, interesting parts, and cool imagery. for the layout, i wanted to retain the general integrity of the original piece, and so i decided to incorporate some of the images used in the work. i was inspired by how the piece talks about the internet and it’s relation to the physical world; it reminded me of the earth and its relation to greater space, and so i felt drawn to design my response in a somewhat galactic theme.&nbsp; build <img width="2880" height="1606" width_o="2880" height_o="1606" data-src="https://freight.cargo.site/t/original/i/095cda7447167046711253e00b84ace73b6bc9d56fdfda4c3c2338925964a104/web-based-response.png" data-mid="197424285" border="0" src="https://freight.cargo.site/w/1000/i/095cda7447167046711253e00b84ace73b6bc9d56fdfda4c3c2338925964a104/web-based-response.png" /> <img width="2878" height="1612" width_o="2878" height_o="1612" data-src="https://freight.cargo.site/t/original/i/54940d76be843327b97a7f8307a25f182ec4f68668fca7ec17a6f7f3901b2883/Screen-Shot-2023-11-20-at-2.42.29-PM.png" data-mid="197424252" border="0" src="https://freight.cargo.site/w/1000/i/54940d76be843327b97a7f8307a25f182ec4f68668fca7ec17a6f7f3901b2883/Screen-Shot-2023-11-20-at-2.42.29-PM.png" /> <img width="2880" height="1612" width_o="2880" height_o="1612" data-src="https://freight.cargo.site/t/original/i/2424b06ed31e94f34d0b21bd904e7d9a0c3176cfc605cbd85173e51767f7c317/Screen-Shot-2023-11-20-at-2.57.18-PM.png" data-mid="197424253" border="0" src="https://freight.cargo.site/w/1000/i/2424b06ed31e94f34d0b21bd904e7d9a0c3176cfc605cbd85173e51767f7c317/Screen-Shot-2023-11-20-at-2.57.18-PM.png" /> <img width="2876" height="1620" width_o="2876" height_o="1620" data-src="https://freight.cargo.site/t/original/i/58ac791f5bbbbfd556554411d9ea2f1851c39f8e96f09725041892f4b5db8b24/Screen-Shot-2023-11-20-at-2.57.46-PM.png" data-mid="197424254" border="0" src="https://freight.cargo.site/w/1000/i/58ac791f5bbbbfd556554411d9ea2f1851c39f8e96f09725041892f4b5db8b24/Screen-Shot-2023-11-20-at-2.57.46-PM.png" /> <img width="2876" height="1626" width_o="2876" height_o="1626" data-src="https://freight.cargo.site/t/original/i/9f23c6ab0db81d25239dbb2d8537368666b969e41b26718b0fc8e19dde401039/Screen-Shot-2023-11-20-at-2.58.12-PM.png" data-mid="197424256" border="0" src="https://freight.cargo.site/w/1000/i/9f23c6ab0db81d25239dbb2d8537368666b969e41b26718b0fc8e19dde401039/Screen-Shot-2023-11-20-at-2.58.12-PM.png" /> <img width="2880" height="1620" width_o="2880" height_o="1620" data-src="https://freight.cargo.site/t/original/i/8cf914bbb4efa482905ecbcd46dc8529de132f34a26ecdb16cf64882908d0823/Screen-Shot-2023-11-20-at-2.58.32-PM.png" data-mid="197424257" border="0" src="https://freight.cargo.site/w/1000/i/8cf914bbb4efa482905ecbcd46dc8529de132f34a26ecdb16cf64882908d0823/Screen-Shot-2023-11-20-at-2.58.32-PM.png" /> <img width="2880" height="1618" width_o="2880" height_o="1618" data-src="https://freight.cargo.site/t/original/i/bc436204a337dde846f5a0a3d88e9e0302ced62281a4402292cd9d6814df2861/Screen-Shot-2023-11-20-at-2.58.43-PM.png" data-mid="197424258" border="0" src="https://freight.cargo.site/w/1000/i/bc436204a337dde846f5a0a3d88e9e0302ced62281a4402292cd9d6814df2861/Screen-Shot-2023-11-20-at-2.58.43-PM.png" /> <img width="2880" height="1616" width_o="2880" height_o="1616" data-src="https://freight.cargo.site/t/original/i/bb3a683dabb6759f9882a2df27c355661bfd93f5af94d820e7a5928c2acdbbb1/Screen-Shot-2023-11-20-at-2.58.56-PM.png" data-mid="197424259" border="0" src="https://freight.cargo.site/w/1000/i/bb3a683dabb6759f9882a2df27c355661bfd93f5af94d820e7a5928c2acdbbb1/Screen-Shot-2023-11-20-at-2.58.56-PM.png" /> reflection designi found that coming up with the visual design for this piece was a pretty enjoyable experience overall! there were some constraints that had me thinking for a bit, such as the site having to be contained within a single page. but other than that, i think laying out the visual design went quite smoothly partly due to having a pre-existing work as a starting point for inspiration.&nbsp; buildthe building process was pretty alright! i would not say it was 100% smooth, but i did not run into too many roadblocks either. one thing i did ponder about was the navigation of the site. first, i intended to use parallax scrolling, but i decided to just do regular scrolling but integrate a “table of content”-esque navigation bar so the user can get to each section faster if they wish. i decided to change my idea due to not wanting too much similarity between mine and drulhe’s work. figuring out how to make this navigation tool work was a bit of a challenge, but i ultimately decided to use put each section into a nav id and make links directing each number to the assigned section. conclusion overall, i am glad with how the final product came out! the general integrity of the original work is there, but i also believe i was able to let my identity as an artist peak through! i also learned a lot about designing within constraints and bouncing off of pre-existing ideas.&nbsp; https://hl3e213works.cargo.site/Page-4 Sun, 19 Nov 2023 02:03:59 +0000 hannah's playground https://hl3e213works.cargo.site/Page-4 04 physical-network-trace completed Your browser does not support the video tag. DATE: SEPTEMBER 2023TOOLS: HTML, CSS, JS [vanilla] LINK: physical-network-trace overviewwhat is it? a web based collage of different locations based on the traces ip addresses from nyc to tongji university in shanghai intent to visualize the route of a network request between a client and server in a way that is interactive and serves to portray different locations design for the layout, i was inspired by the form of a receipt, where information of a singular product is portrayed side by side and then the culmination of the order is listed at the bottom. the tracing of a network also seems similar to creating a travel itinerary, and so i wanted to follow that spirit in creating the design for this work. build <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/cd29f5ac59ab87594f9ee9354bc62954d0e0b52b2e10f9a6acdbf4a078acb600/study-txt.png" data-mid="197268444" border="0" src="https://freight.cargo.site/w/1000/i/cd29f5ac59ab87594f9ee9354bc62954d0e0b52b2e10f9a6acdbf4a078acb600/study-txt.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/7e92eaaf4af0bcedc1706896248d44af054d17f9475ad72bcdd94e497447a7eb/blank.png" data-mid="197268445" border="0" src="https://freight.cargo.site/w/1000/i/7e92eaaf4af0bcedc1706896248d44af054d17f9475ad72bcdd94e497447a7eb/blank.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/2e07a21071938cbeb582338d0abdad478538c42a54f4103b1e8f4fb04d03c20e/nyc.png" data-mid="197268448" border="0" src="https://freight.cargo.site/w/1000/i/2e07a21071938cbeb582338d0abdad478538c42a54f4103b1e8f4fb04d03c20e/nyc.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/12f749baed14a69a54728e65d0fa1d2088d8341d6e3e16518cf5ee787ecd7455/london.png" data-mid="197268447" border="0" src="https://freight.cargo.site/w/1000/i/12f749baed14a69a54728e65d0fa1d2088d8341d6e3e16518cf5ee787ecd7455/london.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/d852037f5c80e3505b6407854e248cb1b503fd1e4b6618ceffc4c676b6b65a90/shenzhen.png" data-mid="197268450" border="0" src="https://freight.cargo.site/w/1000/i/d852037f5c80e3505b6407854e248cb1b503fd1e4b6618ceffc4c676b6b65a90/shenzhen.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/a79c60a0b74dd5ae4bb53368d729711e9ebb2a12ec40b41cf18baa1060a38f33/shanghai.png" data-mid="197268449" border="0" src="https://freight.cargo.site/w/1000/i/a79c60a0b74dd5ae4bb53368d729711e9ebb2a12ec40b41cf18baa1060a38f33/shanghai.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/342a1bfae4d534d26e579eaf970ed6456d6a36bde765e5ba4dcb11550bbad08d/fushun.png" data-mid="197268446" border="0" src="https://freight.cargo.site/w/1000/i/342a1bfae4d534d26e579eaf970ed6456d6a36bde765e5ba4dcb11550bbad08d/fushun.png" /> reflection design i initially started off with a different idea, which was creating a linear map stretched across the screen, but while scrolling on pinterest as per my usual routine, i found a few images (in the moodboard of the figma file) that sort of sparked inspiration in me to change up my idea. having familiarity with figma now, it was pretty simple creating the assets and putting together the vision i had in mind. i did have some issues with deciding how the music file should be laid out, making a lot of tweaks throughout the design process, but overall, i am glad with the solution i ended up with!&nbsp; buildintegrating the flexboxes to fit the design i created was a bit of a challenge at first, due to not having too much familiarity with it, but the more i practiced, the more comfortable i became and so i am proud to say that i am now quite comfortable with utalizing flexboxes! in addition, creating the javascript event in which when each ip address is pressed, it displays the assigned asset and then gets removed when pressed again, was a challenge as well. i went through a few iterations on my approach to this, but i ended up going with using event handlers. and well, formatting the other elements and whatnot was quite repetitive but also very relaxing and fun!&nbsp; &nbsp; conclusion i am proud of myself for being able to debug the issues i had as well as being able to materialize my vision into a reality! i also learned what network traces were and so that was really exciting! https://hl3e213works.cargo.site/Page-5 Mon, 20 Nov 2023 02:12:44 +0000 hannah's playground https://hl3e213works.cargo.site/Page-5 05 deeply nested object completed Your browser does not support the video tag. DATE: OCTOBER 2023 TOOLS: HTML, CSS, JS [p5js + vanilla] LINK: deeply nested object overviewwhat is it? a web based composition visualizing data i’ve collected over the span of a week intent to track my relationship with trichotillomania (hair pulling disorder) on a day to day basis. some parameters i included were time, amount, and emotions design for the layout, i wanted to retain the essence of the subject matter, which is hair, so i decided to make the background a bunch of hairs. i also found inspiration in how the hairs i pull end up falling on the floor, and so i wanted to integrate that into the design as well build <img width="2866" height="1622" width_o="2866" height_o="1622" data-src="https://freight.cargo.site/t/original/i/f33f2de37fe302611b4cfac9ac55ff3fabd8326c2137f8d12f45981c00bbd734/Screen-Shot-2023-11-19-at-9.19.06-PM.png" data-mid="197342416" border="0" src="https://freight.cargo.site/w/1000/i/f33f2de37fe302611b4cfac9ac55ff3fabd8326c2137f8d12f45981c00bbd734/Screen-Shot-2023-11-19-at-9.19.06-PM.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/670d00de205d801e10046a1897f4cd1ae737f8e21fe590c3fdcdc6e2afe7e10d/Screen-Shot-2023-10-30-at-10.30.39-PM.png" data-mid="197342456" border="0" src="https://freight.cargo.site/w/1000/i/670d00de205d801e10046a1897f4cd1ae737f8e21fe590c3fdcdc6e2afe7e10d/Screen-Shot-2023-10-30-at-10.30.39-PM.png" /> <img width="2856" height="1570" width_o="2856" height_o="1570" data-src="https://freight.cargo.site/t/original/i/fc0dc9b5761066e3f23703b5c02dab07cafd6cb05ae7089270eff54b28c76abb/deeply-nested-object-img.png" data-mid="197342491" border="0" src="https://freight.cargo.site/w/1000/i/fc0dc9b5761066e3f23703b5c02dab07cafd6cb05ae7089270eff54b28c76abb/deeply-nested-object-img.png" /> reflection designi found that coming up with the visual design for this piece quite simple due to having a big passion and familiarity with the concept!&nbsp; buildwhile coming up with the design was a fast&nbsp; process, developing it was a different story...&nbsp; &nbsp;i ran into a few roadblocks throughout the process. for starters,&nbsp;with trying to execute the whole falling background, i first created the animation on p5js, using an old icon i made as the placeholder image. however, i encountered some issues with rendering the sketch onto the html page in a seamless manner, but after playing around with the viewport sizing and z-indexes, i was able to solve this issue. another issue i ran into was the hover function displaying the DOM injected data. i initially thought about using css properties to get this done, but seeing as it was not working, i decided to use event handlers and functions to make this feature work. my functions are quite repetitive, so i do want to come back to the code and clean it up a bit in the future! conclusion while there are some things i would have liked to achieved (making the red hairs freeze in place alongside the data container when hovered), i am still proud of the final product, especially since there was a time limit of 1 week. i was able to learn about using javascript to inject data into the DOM as well as implement it into this piece so that was very exciting and rewarding! this project has allowed me to really inspect the relationship i have with this disorder, and so the experience was quite enlightening and i am grateful for that. https://hl3e213works.cargo.site/Page-6 Sat, 02 Dec 2023 03:38:35 +0000 hannah's playground https://hl3e213works.cargo.site/Page-6 06 portfolio website in progress Your browser does not support the video tag. DATE: JULY 2023 -TOOLS: HTML, CSS, JS [vanilla] LINK: portfolio website overviewwhat is it? a hand coded website showcasing my past, present, and future projects/works [in progress] intent to have all my work archived in a space i can call my own instead of using a cms like this one teehee &gt;,&gt; design i was inspired by bauhaus principles for color and simplicity, as well as the minimalist and almost unfinished look of wireframes. i went through a few iteration of how i wanted the details to come together, as seen in the figma file. the logo at the sidebar also doubles as a pull out navigation bar when pressed, and this logo i designed on procreate! the shape is reminiscent of a flower, and it is an ode to my name, which means flower in japanese. for the chinese characters,the first one (一) is pronounced as “yi” in chinese, and the second one (花) is pronounced as “hana” in japanese. however, when those two words are combined in each respective language, it forms my korean name pronunciation wise (yi-ha-na).i also created a tentative design for how the site would look like on mobile devices, but that is still something i need to further flesh out. build <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/efc647c2051cee26df19167780bd04e237c0dafce15b814ea0b24bc544bc9ce6/Screenshot-2023-12-05-at-7.07.26PM.png" data-mid="198682931" border="0" src="https://freight.cargo.site/w/1000/i/efc647c2051cee26df19167780bd04e237c0dafce15b814ea0b24bc544bc9ce6/Screenshot-2023-12-05-at-7.07.26PM.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/794bb257ed4b97239b2c60cf90a2959e2576d016b49bedd20754f72ea3f65d88/Screenshot-2023-12-05-at-7.06.50PM.png" data-mid="198682929" border="0" src="https://freight.cargo.site/w/1000/i/794bb257ed4b97239b2c60cf90a2959e2576d016b49bedd20754f72ea3f65d88/Screenshot-2023-12-05-at-7.06.50PM.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/bf0fde96b929d403dced6ea24295d54a17862cf9d3301f2059c3ddd5753cc1f2/Screenshot-2023-12-05-at-7.08.07PM.png" data-mid="198682933" border="0" src="https://freight.cargo.site/w/1000/i/bf0fde96b929d403dced6ea24295d54a17862cf9d3301f2059c3ddd5753cc1f2/Screenshot-2023-12-05-at-7.08.07PM.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/f705a5439469fd089888d6f6365054da341d252d537399d5a02351405247587f/Screenshot-2023-12-05-at-7.07.40PM.png" data-mid="198682932" border="0" src="https://freight.cargo.site/w/1000/i/f705a5439469fd089888d6f6365054da341d252d537399d5a02351405247587f/Screenshot-2023-12-05-at-7.07.40PM.png" /> reflection designi did ponder for some time about how i would exhibit my artist identity through the visual of the site, from the general framework to the small details and everything in between. i went through a few iterations of what kind of visual style to follow, but i ended up turning to basic color and minimalist principles. I also received some feedback regarding type hierarchy and accessibility, and so making the changes and stuff was very helpful and useful for future projects. buildwhile coming up with the design was a fast&nbsp; process, developing it was a different story...&nbsp; &nbsp;i ran into a few roadblocks throughout the process. i did have a head start since i began working on it in the middle of the summer, but i have not touched it since and my ideas in terms of the layout and such have changed since then. throughout these past few weeks, i encountered quite a few roadblocks with debugging code issues dealing with functionality, most notably the side menu feature. figuring out the logistics behind the necessary javascript and then trying to apply that into my own vision was quite the hassle. although it still is not perfect, i am glad about the progress and am looking forward to dissecting it further. in addition, i underwent a few iterations of how i wanted the content of the works pages to be laid out, and then trying to use the newly learned concept of flexbox to materialize said idea. i definitely struggled with using flexbox at first, since it was a concept i just learned, but working on this project enabled myself to become more comfortable with it and now i think i have a better grasp of flexbox. conclusion overall, i am happy with the appearance and functionality of the website so far given the constraints of time and knowledge. an aspect of the site I am particularly proud of is the initial page where the user clicks through the elements before scrolling is enabled. Is it impractical? maybe. But i think it adds fun interactivity and also the process behind executing this feature makes me feel more accomplished about this feature. i am very glad we were given this opportunity to work on something that is practical and necessary for showcasing our identities as artists and makers. as of now, i plan on continuing to work on building the site, adding more features and cleaning up the design a bit more. but i definitely will use this site in the future to host the evidence of my artistic endeavors and send out to job applications while also using it to portray myself to others as part of my identity. i truly had a lot of fun working on this project and it has further increased my already big interest in the world of programming and web design! https://hl3e213works.cargo.site/Page-7 Wed, 06 Dec 2023 01:11:03 +0000 hannah's playground https://hl3e213works.cargo.site/Page-7 07 rock, paper, scissors, SHOOT! completed Your browser does not support the video tag. DATE: DEC 2023TOOLS: HTML, CSS, JS [node + vanilla] LINK: rock-paper scissor-SHOOT! overviewwhat is it? an online game where the user and computer play each other in a match of rock, paper, scissors. intent to use a classmate’s created API and integrate it into a website. design i was inspired by retro arcade games and wanted to sort of integrate that spirit into the digitization of a usually physical game through shape and lines. i also was thinking about how to visualize the rock, paper, and scissor and so felt that having it simple and clean would fit the concept best. i designed these components on figma using the vector tools. the main premise of this work was about integrating the API my class partner created, and so the design process revolved around that.&nbsp; build <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/5fb6c29a28ade1f4cc7e388fb8a4848cced84d2356acd075fd9bb5c61b9fea14/Screenshot-2023-12-04-at-9.35.03PM.png" data-mid="198688406" border="0" src="https://freight.cargo.site/w/1000/i/5fb6c29a28ade1f4cc7e388fb8a4848cced84d2356acd075fd9bb5c61b9fea14/Screenshot-2023-12-04-at-9.35.03PM.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/38184a8e0938429cc494c5100d6e0f9656cc35fc1cbee3c0da61655f4f7cf283/Screenshot-2023-12-04-at-9.36.18PM.png" data-mid="198688407" border="0" src="https://freight.cargo.site/w/1000/i/38184a8e0938429cc494c5100d6e0f9656cc35fc1cbee3c0da61655f4f7cf283/Screenshot-2023-12-04-at-9.36.18PM.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/ccd26b4be3dc5316ba78231c8eeb49265ac86492e60995f10b3723bd1ee49e26/Screenshot-2023-12-04-at-10.27.01PM.png" data-mid="198688413" border="0" src="https://freight.cargo.site/w/1000/i/ccd26b4be3dc5316ba78231c8eeb49265ac86492e60995f10b3723bd1ee49e26/Screenshot-2023-12-04-at-10.27.01PM.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/1d0a06d124ec1bc60ffdc2badcd9b4ad2f0a5452b805e2db3c0cab8da90524e4/Screenshot-2023-12-04-at-9.59.18PM.png" data-mid="198688408" border="0" src="https://freight.cargo.site/w/1000/i/1d0a06d124ec1bc60ffdc2badcd9b4ad2f0a5452b805e2db3c0cab8da90524e4/Screenshot-2023-12-04-at-9.59.18PM.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/7c544099fc4ffc7091b2cb43a55cda839df07cff667e42a54abbc2cd5f8349a7/Screenshot-2023-12-04-at-10.26.50PM.png" data-mid="198688412" border="0" src="https://freight.cargo.site/w/1000/i/7c544099fc4ffc7091b2cb43a55cda839df07cff667e42a54abbc2cd5f8349a7/Screenshot-2023-12-04-at-10.26.50PM.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/d7f37491cc126598c201f140a0331677ffca3fb54fc2f642c60b1dca6acfd5c0/Screenshot-2023-12-04-at-10.19.58PM.png" data-mid="198688411" border="0" src="https://freight.cargo.site/w/1000/i/d7f37491cc126598c201f140a0331677ffca3fb54fc2f642c60b1dca6acfd5c0/Screenshot-2023-12-04-at-10.19.58PM.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/b5e865028239314de176410ccf12104d72f6906d60acd5f3ff97645120ed1f53/Screenshot-2023-12-04-at-10.09.14PM.png" data-mid="198688410" border="0" src="https://freight.cargo.site/w/1000/i/b5e865028239314de176410ccf12104d72f6906d60acd5f3ff97645120ed1f53/Screenshot-2023-12-04-at-10.09.14PM.png" /> <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/b5e865028239314de176410ccf12104d72f6906d60acd5f3ff97645120ed1f53/Screenshot-2023-12-04-at-10.09.14PM.png" data-mid="198688410" border="0" src="https://freight.cargo.site/w/1000/i/b5e865028239314de176410ccf12104d72f6906d60acd5f3ff97645120ed1f53/Screenshot-2023-12-04-at-10.09.14PM.png" /> reflection designi had a bit of a time constraint for this piece, so the design process was quite rushed. however, i am glad that the ideas flowed smoothly and i was able to create the design pretty fast so that i can devote more time into the building portion.&nbsp; buildthe process of building was a bit more of a challenge. while laying out the html and css went smoothly, integrating the API was quite the hassle. this was a topic i had only recently learned, and so i had a hard time figuring out the technicalties and such. however, after a lot of searching, iterating, and debugging with my professor, i was able to integrate it smoothly and pull the data.&nbsp; conclusion overall, i am happy with the final product of the site, especially in the context of the time limits. this site, from the design to the final product, took roughly a day. while i wish i had more time to invest in order to make the site more complex, i am proud of myself for being able to work around the limitations and create something tangible. i also learned a lot throughout the process in terms of technical skills and working under pressure, so it was a rewarding experience.&nbsp; https://hl3e213works.cargo.site/Overview Fri, 17 Nov 2023 19:58:18 +0000 hannah's playground https://hl3e213works.cargo.site/Overview <img width="1316" height="794" width_o="1316" height_o="794" data-src="https://freight.cargo.site/t/original/i/25c96367c6ce136352ed85f3f7366f52762c2540739ad5cf8d6767516afd82a6/moodify-thumbnail.png" data-mid="197202906" border="0" src="https://freight.cargo.site/w/1000/i/25c96367c6ce136352ed85f3f7366f52762c2540739ad5cf8d6767516afd82a6/moodify-thumbnail.png" /> 01 moodify ! a web-based site that recommends a song based on the user’s provided hand gesture read more 04/2023 ︎ <img width="2868" height="1622" width_o="2868" height_o="1622" data-src="https://freight.cargo.site/t/original/i/00a4592262b6e83c36021c6b318498f96f018c42ea93ded512022d6b7680e29f/divine-divination-img.png" data-mid="197268466" border="0" src="https://freight.cargo.site/w/1000/i/00a4592262b6e83c36021c6b318498f96f018c42ea93ded512022d6b7680e29f/divine-divination-img.png" /> 02 divine divination a virtual divination ritual utilizing the concept of bloodletting as a means of divination read more 04/2023 ︎ <img width="2878" height="1612" width_o="2878" height_o="1612" data-src="https://freight.cargo.site/t/original/i/ebe35d95cc5cd498a604934b42852f740f86450fb63368d6f1e6e1e59ffcfd9c/Screen-Shot-2023-11-20-at-2.42.29-PM.png" data-mid="197422339" border="0" src="https://freight.cargo.site/w/1000/i/ebe35d95cc5cd498a604934b42852f740f86450fb63368d6f1e6e1e59ffcfd9c/Screen-Shot-2023-11-20-at-2.42.29-PM.png" /> 03 web based response a web-based response to louisé drulhe’s&nbsp;critical atlas of the internet read more 09/2023 ︎ <img width="2868" height="1617" width_o="2868" height_o="1617" data-src="https://freight.cargo.site/t/original/i/4473eb0186cdc7f255bd449181de4f2f809cfed2ccb3172e7258dc0ff86bf317/blank.png" data-mid="197208436" border="0" src="https://freight.cargo.site/w/1000/i/4473eb0186cdc7f255bd449181de4f2f809cfed2ccb3172e7258dc0ff86bf317/blank.png" /> 04 physical-network-trace a web-based media piece that represents + responds to a network trace read more 10/2023 ︎ <img width="2856" height="1570" width_o="2856" height_o="1570" data-src="https://freight.cargo.site/t/original/i/f04bf567e1866b97ef090c841e576012bc96e37479a06239a8a585cfa82af666/deeply-nested-object-img.png" data-mid="197342126" border="0" src="https://freight.cargo.site/w/1000/i/f04bf567e1866b97ef090c841e576012bc96e37479a06239a8a585cfa82af666/deeply-nested-object-img.png" /> 05 deeply nested object a web-based media piece that displays compiled data over a 1 week timeframe read more 11/2023 ︎ <img width="2876" height="1630" width_o="2876" height_o="1630" data-src="https://freight.cargo.site/t/original/i/aa648be4fe76ad0ff4cbe830dbf7091c7b93e478e2617818b1131b808de523b9/portfolio-website-pic.png" data-mid="198380291" border="0" src="https://freight.cargo.site/w/1000/i/aa648be4fe76ad0ff4cbe830dbf7091c7b93e478e2617818b1131b808de523b9/portfolio-website-pic.png" /> 06 portfolio website a hand coded website showcasing my past, present, and future endeavors [in progress] read more 07/2023 - ︎ <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/f123209ea2f8cce48f1fa67be74b34145cae1f18e1066968cecb0b40ce71f4a7/Screenshot-2023-12-05-at-8.04.18PM.png" data-mid="198685856" border="0" src="https://freight.cargo.site/w/1000/i/f123209ea2f8cce48f1fa67be74b34145cae1f18e1066968cecb0b40ce71f4a7/Screenshot-2023-12-05-at-8.04.18PM.png" /> 07 rock, paper, scissors, SHOOT a game of rock, paper, scissors against the computerread more 12/2023 ︎ <img width="2880" height="1660" width_o="2880" height_o="1660" data-src="https://freight.cargo.site/t/original/i/cbee2a1986acd6bfafe83b482abbc4f3cea4b208a7f058f19a5ea0de087c5b81/cover-img.png" data-mid="208123132" border="0" src="https://freight.cargo.site/w/1000/i/cbee2a1986acd6bfafe83b482abbc4f3cea4b208a7f058f19a5ea0de087c5b81/cover-img.png" /> 08 books from me&nbsp;︎︎︎ you a site that recommends nyt bestsellers based on date and genre!read more 03/2024 ︎ <img width="2880" height="1726" width_o="2880" height_o="1726" data-src="https://freight.cargo.site/t/original/i/d041b7d710d74a58e24fb0c52b8290f36276a922c03e76ef4f20918dd68e516c/Screenshot-2024-08-03-at-12.24.05PM.png" data-mid="215755028" border="0" src="https://freight.cargo.site/w/1000/i/d041b7d710d74a58e24fb0c52b8290f36276a922c03e76ef4f20918dd68e516c/Screenshot-2024-08-03-at-12.24.05PM.png" /> 09 scent as narrative write a story, receive a personalized perfume recommendation with scent notes! read more05/2024 ︎ <img width="1500" height="1125" width_o="1500" height_o="1125" data-src="https://freight.cargo.site/t/original/i/fb879cde93ee0c63d82ed06adf2ba7bcff08b292319ba19977e22d2acf5df281/Mockup.png" data-mid="217480949" border="0" src="https://freight.cargo.site/w/1000/i/fb879cde93ee0c63d82ed06adf2ba7bcff08b292319ba19977e22d2acf5df281/Mockup.png" /> 10 stucook a prospective mobile app centering university students that fights food waste, saves money, and nurtures community within the student body ! read more07/2024-08/2024 ︎ <img width="1500" height="1125" width_o="1500" height_o="1125" data-src="https://freight.cargo.site/t/original/i/f61f24a1f5a71ea3cf0f0dfd139b90e0b33c2d8a7d569e918d4bfd6639cd7136/Mas9-Assignment-Aug-23.png" data-mid="217481190" border="0" src="https://freight.cargo.site/w/1000/i/f61f24a1f5a71ea3cf0f0dfd139b90e0b33c2d8a7d569e918d4bfd6639cd7136/Mas9-Assignment-Aug-23.png" /> 11 mas9 website design website redesigns commisioned by Mas9 ! read more08/2024 ︎