____    .-------.        _______   .---.  .---..-./') ,---.  ,---.   .-''-.
     .'  __ '. |  _ _   \      /   __  \  |   |  |_ _|\ .-.')|   /  |   | .'_ _   \
    /   '  \  \| ( ' )  |     | ,_/  \__) |   |  ( ' )/ '-' \|  |   |  .'/ ( ' )   '
    |___|  /  ||(_ o _) /   ,-./  )       |   '-(_{;}_)'-''"'|  | _ |  |. (_ o _)  |
       _.-'   || (_,_).' __ \  '_ '')     |      (_,_) .---. |  _( )_  ||  (_,_)___|
    .'   _    ||  |\ \  |  | > (_)  )  __ | _ _--.   | |   | \ (_ o._) /'  \   .---.
    |  _( )_  ||  | \ ''   /(  .  .-'_/  )|( ' ) |   | |   |  \ (_,_) /  \  '-'    /
    \ (_ o _) /|  |  \    /  '-''-'     / (_{;}_)|   | |   |   \     /    \       /
     '.(_,_).' ''-'   ''-'     '._____.'  '(_,_) '---' '---'    '---'      ''-..-'
    
      

    archive.bernard.wang
    Version 1.3, Updated 05/08/18
    by Bernard Wang <Xxbern3rdxX@hotmail.com>

    Contents

    About

           .........
         .'------.' |
        | .-----. | |
        | |     | | |
        | |     | | |;.
        |*`-----'.|.' `;
        `---------' .;'
      .''''////////;'
     / ######### /;/
    / ######### //
    `-----------'
          

    Since I first dove into web development in 2013, my personal site has been an important way for me to learn new technologies, experiment with different ideas, and work on a fun project. Over the years, I have revisited the design and content of my site several times. This archive serves as a record of those redesigns.

    In a way, this is also a silly way to track my progress as a developer and designer. Have fun!

    Sites

    [a] V4 - Hibiscus

          
    ╔═════════════════════════╗
    ║                         ║
    ║ ⌂                       ║
    ║ ░░░     ░░░░░░░░░░      ║
    ║ ░░░     ░░▓▓▓▓▓░░░░     ║
    ║         ▓▓▓░░░░         ║
    ║                         ║
    ║         ░░░             ║
    ║                         ║
    ║                         ║
    ║         ▓▓              ║
    ║     ░░░ ░░░░░░ ░░░░░░   ║
    ║         ░░░░░░ ░░░░░    ║
    ╚═════════════════════════╝
    
        

    Visit Site

    Date: 2017 - Present
    Technologies: Vue.js, Webpack, Pug, Tachyons

    I started this redesign with the goal to show off my technical skills and build the first iteration of my portfolio site. That semester at school I really enjoyed working in React, so I took the opportunity to learn something similar, Vue.js. I used the vue-loader starter which included Webpack, Pug, Tachyons, autoprefixer and a bunch of other dev goodies I had never used before. While designing the site, I relied heavily on a responsive grid system and bright colorful highlight colors.

    [b] V3 - Stars

          
    ╔═════════════════════════╗
    ║ ∙    ∙        ∙ ∙  ∙    ║
    ║       ∙            ∙   ∙║
    ║   ∙ ∙   ∙     ∙         ║
    ║            ∙    ∙    ∙  ║
    ║∙        ▓▓▓▓▓▓▓▓  ∙     ║
    ║    ∙    ∙░░░░░░       ∙ ║
    ║     ∙    ░░░░░░ ∙       ║
    ║        ∙  ░░░░   ∙      ║
    ║  ∙    ░░ ░░░ ░░∙░░░∙ ∙  ║
    ║ ∙    ∙                  ║
    ║        ∙     ∙    ∙     ║
    ║∙ ∙   ∙      ∙          ∙║
    ╚═════════════════════════╝
    
        

    Visit Site

    Date: 2015 - 2017
    Technologies: HTML, SCSS, Gulp.js, D3.js

    The initial version of this site was built at the 2015 Boilermake hackathon at Purdue University. The hackathon had issues with the internet from the very beginning, so rather than work on a real hackathon project I started messing with some D3.js examples, eventually creating a starry sky visual that I adapted into a simple website. Aside from the fact that D3 was entirely unnecessary for this visualization and that the site was not at all performant, I had a lot of fun playing with the dynamically generated star effect.

    [c] V2 - Paper

          
    ╔═════════════════════════╗
    ║                         ║
    ║                         ║
    ║     ┌──────┬──────┐     ║
    ║     │▓▓▓   │░░░░░ │     ║
    ║     │      │░░░░  │     ║
    ║     │      │░░    │     ║
    ║     │      │      │     ║
    ║     │░     │      │     ║
    ║     │░░    │░░░░  │     ║
    ║     └──────┴──────┘     ║
    ║                         ║
    ║                         ║
    ╚═════════════════════════╝
    
        

    Visit Site

    Date: 2014
    Technologies: HTML, SCSS, JQuery

    I'm not sure exactly how I got the idea for this site, but it was both impractical and unnecessary. I wanted the text to be entirely print, so I went through the trouble of printing text on a notebook, taking pictures of the notebook, and then using those images as my site. Of course, I knew it would be impossible to update the text without retaking images, and it would be much much easier to just code a few lines of HTML, but this idea was far more novel and fun. I was just getting interested into web development but it seemed I didn't want to write a website with code.

    [d] V1 - Bubble

          
    ╔═════════════════════════╗
    ║                         ║
    ║                         ║
    ║                         ║
    ║           ░░░           ║
    ║          ░▓▓▓░          ║
    ║         ░▓▓▓▓▓░         ║
    ║          ░▓▓▓░          ║
    ║           ░░░           ║
    ║                         ║
    ║                         ║
    ║                         ║
    ║                         ║
    ╚═════════════════════════╝
    
        

    Visit Site

    Date: 2013
    Technologies: HTML, CSS, ALOT of JQuery

    This was the first website I had ever coded in my life and it is also so embarrassing that I was considering deleting the code forever. Instead, I did exact opposite and now everyone can see my amazing adventures with JQUERY.ANIMATE(). I don't have much to say about the ridiculous concept behind this site, but I will say I have certainly come a long way.

    Credits

    You made it!


    I hope you had a good laugh looking through the evolution of my personal site.

    Thank you to all the wonderful people who I have learned from, hacked with, and who have supported me throughout my web development journey.

    ♥♥♥