Streaming live at 10am (PST)

Follow my journey to finally finishing my portfolio site


#1

I'm trying to get this done before I mingle with other designers at Future Insights Live.

My current progress: https://webflow.com/design/pxlgk?preview=5e188767f3663c200fbc57459450f84c

If you any questions or critiques, let me know.

I'm using this opportunity to help inspire you all to do what I'm doing. Which is basically diving in head first with the thought of "how the F am I going to do this?!" and then thinking, "(shrug) I'm just gonna do it and learn as I go."


EDIT : added more Iron Man type stuff using SVG, CSS3 Perspective, custom jQuery, and Webflow IX.

http://pxlgk.webflow.com/


#2

I like the space background, how about some nice slide in panels, maybe 4-6 that come left and right, like a spaceship panel... with translucent backgrounds and that highlighted green effect on certain text... like old school buck rodgers, but made with css smile And... if you are learning, I am learning too smile It is all about the idea to make something good smile


#3

updated the top and bottom HUD graphics and added right side HUD thingies after looking at more inspiration:

still need to put a percentage preloader while the cog is spinning. The background video is 5 megs =X. Also thinking of making all the HUD elements parallax as if you're really looking inside of a futuristic space helmet.


#4

The site looks awesome !! Love what you are doing with it....


#5

added Wheatly to the right side and a fake HUD Nav that moves based on your mouse.


#6

Add a "press pixel to start" or something. It took me a while to find that I should click that little pixel. Beside that I don't like the HUD color. It doesn't give that "space feeling" at all... And since the video doesn't fit the whole screen I can see the white/black stripes at the bottom of the page. The whole concept is amazing, I have to admit. The idea and the code behind it is fantastic. But you should really work on that UI. The menu also is not that prominent as it should. With the background (which I'd love to know how you did) it just disappear visually.

Good luck with portfolio smile You're on a good way smile


#7

do you know how to stretch an HTML5 Video to full screen? I don't mind if its not scaled to ratio of the video. I tried making the video a GIF, it came out to be 750+ megs =(

EDIT: Never mind. Found the answer: http://www.codesynthesis.co.uk/blog/demo/html5video

I've noticed most people like to use light blue. For me, I want to be different. Like Rinzler.


#8

Hey PixelGeek, looking super rad man. 10 points for Wheatley.

Some minor suggestions to possibly make it more awesome:

That orange with the orange video is kind of washing out (I think that's what bartekkustra is referring to). I'd say if you want to keep the Tron feel, I'd go for more contrast and consider, if possible, adding a subtle outer stroke to the orange keylines. You can see the outer lines in your picture of Rinzler. Or pick a video with less orange tones so yours pops more. I'd also consider changing the gray panels to black and give them some opacity. Let the video bleed through as it does in the new Halo HUD.

Nothing is solid color the pic above. You'll see that in Iron Man also. Translucency is the jam right now. Save 100% for your dominant elements you want the user to play with.

Keep going with this. Great concept. Love to see where it ends up.


#9

ahh thanks! =) Did a quick opacity set to 60% on the top and bottom.


#10

Ah! That makes total sense. I've changed the video to something more blue. Thanks to you and @bartekkustra for that suggestion.

My co-worker just gave me this same suggestion. =D


#11

Its coming together slowly but surely =)

  • New mouse cursor
  • Left nav now works
  • Content panels have been added
  • Refined the top and bottom HUD graphics

Whats next?

making everything parallax =D !!!!!

Relevant video below:


#12

added:

  • about section
  • parallax'd background video
  • webm video formats for Wheatly and Space videos because I learned that Firefox doesn't like MP4. =\

next up:

  • drop in the rest of the content
  • give an option to turn off all content so you can just stare into space
  • give an option to turn on sci-fi ambient music
  • (?) headtracking so it really feels like you're in a space helmet
  • make it responsive

Wishes:

  • Connect my website to an Oculus Rift
  • Get a free ticket from Sir Richard Branson to ride on Virgin Galactic

relevant video:


#13

Looking really good PixelGeek. I showed it to a coworker and he dug it too. He was wondering though if you need to have the 'click the pixel' screen at all and I'm wondering the same thing. Why not just load up the site right away?

Anyway, can't wait to see more. I'll be back to check out the new additions.

Also, more parallax! It looks sweet when the mouse moves. I bet you could knock it up a few notches to really give it even more of a helmet feel.


#14

not sure what else should be in the background for more parallax'n. I don't want the experience to be TOO messy.


Added:

  • Work, Skills, and Contact panel content. (Still need to put in past work things in the Work panel)
  • Faster switching of content panels
  • "Scrolljacking". Scrolling now rotates through the content panels.

#15

http://pxlgk.webflow.com/

UPDATES!

  • Fully responsive!
  • Added functions for swiping left and right
  • Added a small button on the right that fades out the content and lets you view the stars go by. (i love this feature because it gets kind of hypnotic.)
  • Removed video for screens smaller than 991px wide and replaced with still shot of the video
  • Changed the preloader animation. (I wasn't 'feeling' it)
  • Still need to add a logo. (I'm not much of a graphic artist, but I'm learning)
  • Still need to add past projects i'm proud of into the work section

Should I add music with a toggle?


Lessons learned:

Webkit Needs translateZ(1deg)

when you're playing around with CSS3 3D translates and transforms, anchor tags will only be clickable for 50% of their widths. On iPads you will only see that 50% of the content. You can fix this with a translateZ(1deg).


HTML5 Video formats

Chrome is cool with MP4
Firefox prefers WebM
iPad doesn't autoplay videos


Media Query Webflow Interactions

You can make copies of elements and have them do different interactions or no interactions at all


Special Easings

If you want to do special easings outside of Webflow IX tool, you'll need to bring it in yourself. I found the answer here:


Other thoughts

  • What if codeanywhere.com and Webflow had a baby? The ability to save JS files and such directly in the cloud would be awesome.
  • More CSS3 in Webflow would be awesome.
  • I got so many layers. wish i could collapse them.
  • Wish I could SHIFT+CLICK multiple layers and apply a single class to
    them all

If you have any questions on how i did this, just ask! =D


#16

as usual, you are my hero smile nice job


#17

not trying to be a hero. Just a kid playing in a virtual playground. =)


#18

Ok smile It is pretty cool though, I really like that viewport and the stars bg video... It is fun to see what people can create with Webflow smile Playing in the playground is fun ! smile


#19

http://pxlgk.webflow.com/

AND 99% done!!! Can someone help QA this for me pls? I need second set of eyes on it. thanks in advance =D

ADDED

  • two easter eggs
  • MY LOGO/BADGE!!!

#20

http://pxlgk.webflow.com/

99.999999999999999 (repeating, of course) done.

lots of refinements. too many to list.