Final Site!

not 100% happy about it but here is my final website!

 

Screen Shot 2015-06-10 at 2.12.56 PM

http://web.pdx.edu/~gsong/342/firstaidkit/index.html

Advertisements

Self Evaluation and Final Project

http://web.pdx.edu/~twojahn/342/Knives/index.html

(click the CHEF’S knife, *far right*)

Screen Shot 2015-06-10 at 12.35.13 PM

Even though this project was one of the most challenging for me, and even though it really didn’t turn out how I planned, I’m really proud of it. Not because it looks or works amazingly, but because I feel like I really did trouble shoot the majority of it on my own.

The biggest bummer for me is the fact that it’s incredible UNresponsive. in fact, it’s the antithesis of responsive. The browser needs to be sized to the exact width of the page, or it will be off. (pro-tip, use the image at the bottom as a reference for the width of the browser.)

The other big issue I had was triggering animations. I really had no way of doing that because I couldn’t get waypoint to work. So 90% of the animations are only triggered by the page loading.

I’m most proud of the final “cutting” transition. I looked for a plug-in for a while before just deciding to figure it out on my own. And I did! It took a super long time, and I wish I had more of it, but I was able to do exactly what I had envisioned, and I think it looks good.

For the most part though, I think the overall vibe and aesthetic are pretty darn successful.

CSS Framework Practice/P2 Self Reflection/P2 DeLorean

Screen Shot 2015-06-10 at 1.34.15 PM

http://web.pdx.edu/~prosales/342/delorean/index.html

CSS Framework Practice

Screen Shot 2015-06-14 at 10.29.57 AM

http://web.pdx.edu/~prosales/342/cssframework/index.html

P2 Self Reflection

Project two was challenging for me because of the product I chose to create my site about. I think I had a hard time wrapping my mind around how to communicate the concept of the DeLorean time machine in a way that looked like this car could be a real thing. If I had to do it over again I would have chosen a product that I could was more straight forward and therefore I could focus my efforts on explaining how it works and other essentials to the site. Live and learn I suppose.

I found the voice over of Doc Brown to be humorous and reminded me for a moment that making this site could be fun and playful as well. I wasn’t sure how to do this at the time but I figured it out and will take that as a small victory during the building of this site. I also like the imagery I choose to put in the site I felt it worked really well in showing off this amazing vehicle. The photo gallery I used I felt worked to show a lot of pictures if someone were into that sort of thing.

If I had more time I would have found a better way to explain how the car worked. I would use some different plugins or animations perhaps to make that experience better for the user. My type and color choice seemed appropriate at the time but I might try to take a few more chances next time. Overall I’m okay with what transpired and will learn from this going forward.

Useless Website

Screen Shot 2015-06-10 at 12.36.20 PM

This term has been really weird for me. I pretty much lost my interest in school, which resulted in me completely slacking off (eh, nothing new there) and starting projects a day or two before they were due.

So, with that being said, this project was more fun than the last one. I got to experiment with jquery, suffer with jquery, rethink my life with jquery, and then completely stop messing around with it once it did what I wanted it to. I had a lot of stuff that I wanted to do to my website, but my knowledge of coding completely held me back. I really wanted the website to be a lot more interactive than it really was, but holy crap SVGs completely screwed everything up! The suckers for starters don’t want to take a class name, thanks SVGs.

But other than that I am happy with it. It’s a cute interactive website that it just fun to click back and forth.

Chris Lopez Project 2 Self Evaluation

Screen Shot 2015-06-10 at 12.06.44 PM

Project 2 started off smooth for me, I went with a simple design and a product that already had solid branding so that I could focus on the code. The HTML and CSS went very smoothly for me, it wasn’t until I started using plugins that my progress came to a screeching halt. Applying the pagepiling.js plugin made my life easy, at first. I realized I could have saved some time by applying this plugin from the beginning instead of trying to vertically and horizontally centering the content in each of my sections as well as setting sections to the correct height for multiple device sizes. After setting up this plugin I tried many times, using different methods to have a navigation system that shows which section is active. I’m still playing with this part. I tried animating content on my site using a feature called “callbacks” that is built into the plugin, but the documentation is poor and I could not figure it out, though the examples make it look so easy. Trying to use waypoints to trigger the animations would not work unless I set the section to be scrollable, which is easy to do with the pagepiling.js plugin, however optimizing the height for different screen sizes proved very difficult.

I used Pure for a responsive framework and found only some features working and not the others, for example I made my grid layout with pure but the responsiveness does not work. I saw that one is supposed to add a serperate pure responsive stylesheet. I did that and that did not work either.