sf-wdi-15 · sioux-stark · Nov 18, 2014 · Nov 18, 2014
diff --git a/sioux-stark.github.io/stark_aboutme/css/style.css b/sioux-stark.github.io/stark_aboutme/css/style.css
@@ -0,0 +1,113 @@
+
+
+/* .. = inside folder, 1em is equal to the current font size. 
+2em means 2 times the size of the current font.  
+they are scalable. id selectors #id class selector .class  */
+
+
+    .pageContainer {
+        width: 85em;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 3em;
+        background: rgba(0,0,0,.3);
+    }
+
+
+        .pageHeaderContainer {
+            display: block;
+            width: 100%;
+            height: 15em;
+         }
+
+
+            .headerTextContainer {
+                display: inline-block;
+                width: 56em;
+                margin-top: 2em;
+                margin-left: 2em;
+                float: left;
+
+            }
+
+            .headerTextContainer h1{
+                    font-size: 36pt;
+                    margin-left: auto;
+                    margin-right: auto;
+                    color:white;
+                    font-family: Arial;  
+                }
+
+
+            .headerImageContainer {
+                display: inline-block;
+                width: 28em;
+                float:right;
+            }
+
+                .headerImageContainer img {
+
+                    height:14em;
+                    width: 14em;
+                    float:right;
+                    margin-top: 2em;
+                    border-radius: 5em;
+                    margin-right: 3em;   
+                }
+                /*cite image*/
+        cite {
+            float:right;
+            margin-right: 8em;
+            margin-left:3em;
+            margin-top: 2em;
+            font-family: Arial;
+            color:white;
+            font-size: 10pt;
+        }
+
+            /*hard code*/
+
+
+        .contentContainer {
+            width:100%;
+            margin-top: 3em;
+
+
+        }
+
+            .contentImageContainer {
+                display: inline-block; 
+                margin: 3em;
+                width: 22em;
+                float: left;
+            }
+
+                .contentImageContainer img{
+
+                    height:20em;
+                    width: 25em;
+                    float: left;
+                }
+
+            /*properties of image*/
+
+            .asideTextContainer {
+
+                width: 25em;
+                margin-left: 15em;
+                margin-right: auto;
+                margin-top:  6em;
+                font-size: 25pt;
+                color:white;
+                font-family: Arial; 
+            }
+            /*properties of text*/
+
+            .contentTextContainer {
+                width: 100%;
+                margin-left: 2em; 
+                font-size: 25pt;
+                color:white;
+                font-family: Arial;
+            }
+
diff --git a/sioux-stark.github.io/stark_aboutme/images/IMG_0529.JPG b/sioux-stark.github.io/stark_aboutme/images/IMG_0529.JPG
diff --git a/sioux-stark.github.io/stark_aboutme/images/IMG_0693.JPG b/sioux-stark.github.io/stark_aboutme/images/IMG_0693.JPG
diff --git a/sioux-stark.github.io/stark_aboutme/images/IMG_0722.JPG b/sioux-stark.github.io/stark_aboutme/images/IMG_0722.JPG
diff --git a/sioux-stark.github.io/stark_aboutme/images/IMG_1172.jpg b/sioux-stark.github.io/stark_aboutme/images/IMG_1172.jpg
diff --git a/sioux-stark.github.io/stark_aboutme/images/IMG_1289.jpg b/sioux-stark.github.io/stark_aboutme/images/IMG_1289.jpg
diff --git a/sioux-stark.github.io/stark_aboutme/images/IMG_1785.JPG b/sioux-stark.github.io/stark_aboutme/images/IMG_1785.JPG
diff --git a/sioux-stark.github.io/stark_aboutme/images/IMG_1785_v2.jpg b/sioux-stark.github.io/stark_aboutme/images/IMG_1785_v2.jpg
diff --git a/sioux-stark.github.io/stark_aboutme/images/Thumbs.db b/sioux-stark.github.io/stark_aboutme/images/Thumbs.db
diff --git a/sioux-stark.github.io/stark_aboutme/images/image.JPG b/sioux-stark.github.io/stark_aboutme/images/image.JPG
diff --git a/sioux-stark.github.io/stark_aboutme/images/image_v2.jpg b/sioux-stark.github.io/stark_aboutme/images/image_v2.jpg
diff --git a/sioux-stark.github.io/stark_aboutme/images/leftPic.png b/sioux-stark.github.io/stark_aboutme/images/leftPic.png
diff --git a/...ark.github.io/stark_aboutme/images/red_wing_blackbird_by_canadianry-d63xmzs.jpg b/...ark.github.io/stark_aboutme/images/red_wing_blackbird_by_canadianry-d63xmzs.jpg
diff --git a/sioux-stark.github.io/stark_aboutme/images/rightPic.png b/sioux-stark.github.io/stark_aboutme/images/rightPic.png
diff --git a/sioux-stark.github.io/stark_aboutme/index.html b/sioux-stark.github.io/stark_aboutme/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <title>About Me</title>
+    <link rel="stylesheet" href="css/style.css" />
+    <!-- link to stylesheet -->
+
+</head>
+
+
+
+<body>
+    <section id="pageContainer" class="pageContainer">
+        <!-- content wrapper, side bar would be in front -->
+          <article id="headerImageContainer" class="headerImageContainer">
+            <!--header container, image in header-->
+            <!--article instead of div, b/c html5, article that belongs to section. 2 common attributes ids and classes, ids need to be unique. manipulate html elements based on css selectors -->
+
+          <img src="images/IMG_1785_v2.JPG" />
+            <!--cite image-->
+          </article>  
+
+          <header id="pageHeaderContainer" class="pageHeaderContainer">
+            <article id="headerTextContainer" class="headerTextContainer">
+                <h1>Sandra Stark - About Me</h1>
+            </article>
+            <!--header container, text container-->
+          <cite> Redwood Forest </cite>
+
+        </header>
+
+         <section id="contentContainer" class="contentContainer">
+            <article id="contentImageContainter" class="contentImageContainer">
+                <img src="images/IMG_0529.JPG" />
+                <!--image of myself on right-->
+
+            </article>
+
+            <aside id="asideTextContainer" class="asideTextContainer">
+                <ul id="aboutMeList" class="aboutMeList">
+                    <li>Born in Wisconsin, live in San Francisco</li>
+                    <li>Education: Maryland Institute, College of Art - Furniture Design, Concentration Video</li>
+                    <li>My Business: Stark Design & Teleprompting</li>
+                    <li>Interests/Loves: Learning, Agriculture and Farming, Staining Wood, Old Barns, Piano Benches & Violin Cases, Fonts, Movement & Dance, Riding Motos in Rwanda, DIY Culture, Code For America, Documentaries & Foreign Films, Yoga Ropes & Back Benders, Inspirational Speeches, My Border Collie Otis, NPR: This American Life & Planet Money, Working In Teams, Ubuntu, And My Five Nieces.   </li>
+                    <!--aside left-->
+
+
+                </ul>
+
+            </aside>
+
+            <p id="contentTextContainer" class="contentTextContainer">
+                I love traveling and culture. I am actually building this in Kuala Lumpur, Malaysia. <br>It's my first time in Asia! My senior thesis artwork can be found at <a href="http://sandystark.net" target="_blank">sandystark</a>
+                <br>
+                The best way to reach me now, is through email, [email protected]
+
+                <!--paragraph, comes after aside-->
+
+            </p>
+
+
+
+        </section>
+
+
+        </section> 
+
+</body>
+<script>
+
+</script>
+</html>
diff --git a/sioux-stark.github.io/stark_aboutme/js/jquery.js b/sioux-stark.github.io/stark_aboutme/js/jquery.js
diff --git a/sioux-stark.github.io/stark_aboutme/js/pictureCarousel.js b/sioux-stark.github.io/stark_aboutme/js/pictureCarousel.js
@@ -0,0 +1,57 @@
+ function pictureSlider() {
+    var index = 0; //Starting picture
+
+    var imageArray = ['IMG_0693.JPG','IMG_1289.jpg','IMG_0722.JPG',];//picture array for carousel
+    var picsCount = 3; //Number of pictures that need to be cycled through
+    /**
+     *The displayPhoto function removes the current photo being displayed
+     *and then replaces with the photo from the array who's index matches
+     *our index variable. var= variable
+     */
+
+    displayPhoto = function() {
+      var imageHeight;
+        $('#currentPhoto').fadeOut(500, function () { //fade out the current picture over the course of 500 milliseconds.
+        $('#currentPhoto').attr('src', 'images/'+ imageArray[index] + '');
+        });
+        //src attribute for image tag, assign file path for image, inside image folder
+         currentImage = $('#currentPhoto');
+        currentImage.load(function() {
+        $('#currentPhoto').fadeIn(400);//fade in the new picture over the course of 500 milliseconds.
+        });
+
+    }
+    //what the display photo is, the animation
+
+
+    $('#rightPic').click(function(){ //when the right arrow is clicked run this function.
+      if (index < picsCount-1) {
+        index++;
+        displayPhoto();
+      } else {
+        index = 0;
+        displayPhoto();
+      }
+    });
+        //picscount=total pictures
+        //index = actual image in array
+        //index is less than picture count - 1, index starts at zero
+        //index++ increment by one
+        //action: display photo
+        //if index the last one than, action go back to first one
+
+    $('#leftPic').click(function(){ //when the left arrow is clicked run this function.
+      if (index == 0) {
+        index = picsCount -1;
+        displayPhoto();
+      } else {
+        index--;
+        displayPhoto();
+      }
+    });
+    //opposite way as the first one
+    //if index is already at zero, we want to diplay last picture
+    //index-- is minus minus, decreasing by one
+    //action diplay photo
+    displayPhoto();
+}