- Name Card
-
Name Card
[Re-Hosted] Original Version of my Name Card Website
CodePen Version - Xiaofan Self Introduction Color Update
-
Self Introduction Color Update
[Re-Hosted] I tried redesigning my website using a darker color on my palette as the background and highlight all the text content, I think it turns out working pretty well!
CodePen Version -
Color Palette Reference
[Re-Hosted] This is the link to my personal color update assignment which I used to update my self-introduction page.
CodePen Version -
Color Contrast Survey
[Re-Hosted] Color Contrast Survey
CodePen Version -
Figma Color Palette Design
This is the link to my figma page of my color update.
- Xiaofan Color Update For Shinwon
-
Color Update Work for Shinwon Cheong
I really liked Shinwon's website layout! I tried using a similar approach to recolor her website using colors on her color palette, and I think the colors match her embedded comic book nicely!
-
Shinwon Cheong's Color Palette
This is Shinwon's color palette that I used to update colors on her self introduction website
- Xiaofan Self Link Update
-
Xiaofan's Self-Introduction link update
[Re-Hosted] I changed both the navigation bar links to within the same website as well as contact information links
CodePen Version -
Xiaofan's Original Link Summary Page
[Re-Hosted] Xiaofan's Original Link Summary Page
CodePen Version - Xiaofan Link Update for Classmates
-
Link Update for Anthony
Link Update for Anthony
-
Link Update for Shinwon
Link Update for Shinwon
-
Link Update for Tawni
Link Update for Tawni
-
Link Update for Joey
Link Update for Joey
-
Link Update for Alejandra
Link Update for Alejandra
- Xiaofan Font Updates
-
Xiaofan's Self-Introduction Font update
I wanted my website to deliver a more relaxing and causal feeling to make it match my personality, and I feel like my previous font choices look too serious, therefore I chose a rather rounded font called Autour One as my primary font. I also updated my name text with my new secondary font choice which also help give a more casual feeling.
- Web Graphics Production
-
Xiaofan's Essential Web Graphics Production - Logo
[Re-Hosted] CodePen Version
-
Xiaofan's Essential Web Graphics Production - Nature
[Re-Hosted] CodePen Version
-
Xiaofan's Essential Web Graphics Production - Web Image
[Re-Hosted] CodePen Version
-
Xiaofan's Interactive web graphics production
[Re-Hosted] In this assignment, I made 3 gifs with different looping and background, also made an interactive composite that changes opacity when you hover and toggle opacity when you click
CodePen Version - One Page Scroller Assignment Links
-
Xiaofan's Name Card One Page Scroller Version
Xiaofan's Name Card One Page Scroller Version
-
Xiaofan's Image Hosting One Page Scroller Version
Xiaofan's Image Hosting One Page Scroller Version
-
Xiaofan's Inspiring Artist One Page Scroller Introduction
Xiaofan's Inspiring Artist One Page Scroller Introduction
