A website for my digital self for the digital era. It really reflects who I am and my colorful personality! :)
This is the third time I have redesigned my website in nearly a year.
- Just about everything!
- A sidebar following design trends everywhere.
- It's not just flat, it's dynamic flat.
- Pop culture everywhere. (Spoiler alert!)
- An even lower bandwidth footprint, placing the site under 500KB* with the heavy use of CSS3 and lack of images.
- In fact, the only image used on my site is a vector avatar. I used icon fonts for everything else.
- Hosted on GitHub Pages and protected with Cloudflare instead of hosting off a Raspberry Pi.
- This results in up to 95% faster load times for people as far as Europe.
- Jade and Sass replacing PHP and LESS.
- A CSS3 Framework built from the ground up by myself instead of Bootstrap. Seriously, though!
- Removed the backend and switched to Google Forms because there really isn't a point for one.
This should pretty much explain everything:
If you're using a slightly outdated version Internet Explorer, a derped speedster will prompt you to upgrade for face the consequences of a derped site on a derped browser that won't be getting security updates anytime soon. ;)
It's "bold with a sense of sweetness." It's not boring, it's splashy and dynamic and playful more importantly, trendy!!
On an unrelated note, you should check out flatvsrealism.com.
It's pretty awesome. Nothing more to say here.
As I quickly discovered, jQuery's $(window).scroll method took up more than half of the rendering time (seen in yellow.) It's very inefficient and causes severe lagging whenever a user tries to scroll.
I was better off setting up scroll timeout that only calls $(window).scroll only immediately after the user has finished scrolling. The site will not feel as responsive for those who tend to keep their finger on the mousepad, but it's a tradeoff I had to make. As a result, my site renders on average about 60-85 frames per second.
I have also made iframes not load until it is visible in the viewport, saving the user lots of unnecessary bandwidth.
One of the limitations with hosting on GitHub is that it doesn't support PHP and because of that there really isn't a backend (but I have found creative ways to working around that!) The backend will be remotely run with OpenShift... eventually.
Oh wait, GitHub pages supports Jekyll and Octopress! I will definitely be implementing this in the near future!
https://equinox-ttfm.rhcloud.com/ - Node.js for modified HackerChat demo and possibly some other side projects.
https://solstice-ttfm.rhcloud.com/ - PHP sever for handling the guestbook and contact forms.
https://journal.victorlourng.com/ - PHP sever for running a self-built content management system.
Try the Konami code and get my Chrome Extension here. It even works on mobile - just tap twice instead of "AB".
Click the Back to Top button in the bottom-right corner and see what happens.
Click the "Add to Cart" button in the browser and click "Checkout" to donate some Bitcoin via Coinbase!
Try finding allusions to One Direction, The Hitchhiker's Guide, My Little Pony, AKB48, Chicago: The Musical, 256^2, among other.
The content of the site is under a [http://creativecommons.org/licenses/by/2.0/](Attribution 2.0 Generic License). This includes jade, html, svg, and this readme.md file.
The code itself, however, is license under the MIT License. This includes the sass, scss, css, coffeescript, and javascript.
(Or maybe I should switch everything over to the MIT license. Open an issue and let me know what you think!)
Feel free to copy and paste whatever you need the as long as you attribute me and not rehost my site as-it-is.
Kudos to the open source developers who have put hard work into the various libraries and code snippets used on my site.
Company logos, of course, belong to their respective company. Be sure to read the credits for more sources.
I launched VictorLourng.com in February 2012 with a highly skeumorphic design and a huge 3D slideshow written in jQuery. Only five months later would my design be outdated with the introduction of iOS7 and when the movement towards flat design really picked up.
It wasn't until I installed Google Analytics in August 2013 that I discovered that my site took over 71 seconds to load for average user because of lots of @2x graphics and my plethora of unnecessary webfonts.
In September 2013, I redesigned my site with something simple, but it never really got finished.
The current design was created early January 2014 and unveiled right before MHacks with lots of positive feedback.
Kudos to my friends at Precise Servers for the domain name! Maybe I should redesign their site...
- Before iframes and external resources, of course.
Wow... nice website. If anybody deserves to be at MHACKS it's definitely you. I'm really glad that you made it!
forget the 15 year old thang, Victor you are so legit! his work is unf*cking real
I saw his website. It's absolutely phenomenal...definitely beats anything I've made and I'm almost twice his age!
Your website is sickk! :D
Just wanted to say that your site is gorgeous. Awesome job
dude victor this site is coming along so nicely. so dope. (omfg it literally harlem shakes.)
if there was a nobel prize for CSS hacking, i'd nominate you
Now that you've read all this, go sign my semi-secret guestbook: click my name at the top of the page, type in your name, and hit the enter key. 😄