added live cv

css3.css

@@ -16,8 +16,15 @@ html, body {
     box-pack: center;
     box-align: center;
 }
-
+#film_scene {
+	border:1px solid silver;
+	background:#FFF;
+    width: 479px;
+    text-align: center;
+    margin: auto;
+}
 #footer-boxes { 
+    margin-top: 10px;
     -moz-column-count: 2;
     -moz-column-gap: 10px;
     -webkit-column-count: 2;

index.html

@@ -4,24 +4,133 @@
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 	<meta charset="UTF-8">
 	<title>Félix López Luis - CV</title>
-	<meta name="viewport" content="width=device-width">
-		<link rel="stylesheet" href="css3.css">
+    <meta name="viewport" content="width=device-width">
+<script src="sprite.js" type="text/javascript"></script>
+<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
+<script src="state-machine.min.js" type="text/javascript"></script>
+
+    <link rel="stylesheet" href="css3.css">
     </head>
+<script>
+    var texts=  ["Hi!, I'm Felix Lopez", "I'm a developer", 
+    "that's why my drawings are so bad :)",
+    "what you're watching it's my live CV",
+    "ok, ok, it's the begining of what",
+    "it'll be my live CV",
+    "Next step are levels and movement",
+    "Thanks!"];
+var currentText = 0;
+var timeLastText = 0;
+$(document).ready(function(){
+    var canvas = document.getElementById("canvas");  
+    var ctx = canvas.getContext("2d");  
+    var sprite;
+    var smashed_glass;
+    var fsm = StateMachine.create({
+      initial: 'introduction',
+      events: [
+        { name: 'play', from: 'introduction', to: 'start_speaking' },
+        { name: 'break', from: 'start_speaking', to: 'break_screen' },
+        { name: 'quit', from: 'break_screen', to: 'broken_screen' }
+      ],
+
+      callbacks: {
+
+        onenterintroduction: function() { },
+        onleaveintroduction: function() {
+            var img = new Image();
+            img.src = 'stick2.png';
+            sprite = new Sprite(img, {
+                walk: { x:0, y:0, frames: 3, duration: 200, height:112, width:41},
+                hit: { x:0, y:112, frames: 6, duration: 100, height:112, width:41, 
+                    finish: function() {
+                        fsm.quit();
+                    }
+                }
+            });
+            sprite.setAnimation('walk');
+            timeLastText = new Date().getTime();
+        },
+        onenterbreak_screen: function () {
+            sprite.setAnimation('hit');
+            smashed_glass = new Image();
+            smashed_glass.src = 'smashed.png';
+
+        }
+      }
+    });
+    function drawIntroduction() {  
+     ctx.fillStyle = "rgb(200,0,0)";  
+     ctx.fillRect (10, 10, 55, 50);  
+
+     ctx.fillStyle = "rgba(0, 0, 200, 0.5)";  
+     ctx.fillRect (30, 30, 55, 50);  
+    }
+    function paint() {
+        ctx.clearRect(0, 0, 479, 319);
+        switch (fsm.current) {
+            case 'introduction':
+                drawIntroduction();
+            break;
+            case 'start_speaking':
+            case 'break_screen':
+            case 'broken_screen':
+                sprite.draw(ctx, 20,  319 - sprite.getHeight());
+                ctx.fillStyle = '#000';
+                ctx.textBaseline = 'middle';
+                ctx.font = "normal 24px sans-serif";
+                ctx.fillText(texts[currentText], 20, 120);
+                if (fsm.current == 'broken_screen') {
+                     ctx.drawImage(smashed_glass, 0, 319 - smashed_glass.height);
+                }
+            break;
+        }
+    }
+
+    var lastTime = new Date().getTime();
+    setInterval(function() {
+        var now = new Date().getTime();
+        switch (fsm.current) {
+            case 'introduction':
+            if (now - lastTime > 3000) {
+                fsm.play();
+            }
+            break;
+            case 'start_speaking':
+                if (sprite.nextFrame(now)) {
+                    if (now - timeLastText > 2000) {
+                        timeLastText = now;
+                        if (currentText == texts.length -1) {
+                            fsm.break();
+                        } else {
+                            currentText++;
+                        }
+                    }
+                }
+            break;
+            case 'break_screen':
+                sprite.nextFrame(now);
+            break;
+        }
+        paint();
+    }, 50);
+
+});
+</script>
 
     <body class="center">
         <div>
-        <header>
-            Félix López Luis 
-            </header><section>
+        <section>
+        <div id="film_scene"><canvas id="canvas" width="479" height="319"></canvas></div>
 			<div id="footer-boxes" class="group">
 				<a class="footer-box" id="developer" href="#">
 					<h5>Developer</h5>
 					<p>I've been working as a Developer for 9 years</p>
 				</a>
 				<a class="footer-box" id="management" href="#">
                     <h5>Management</h5>
-					<p>Since my first job I've had managment tasks and responsabilities</p>
+					<p>Since my first job I've had management tasks and responsabilities</p>
 				</a>
 			        </div>
         </div>
-</body></html>
+</body></html>