coding-blocks-archives · pallavraj · Jan 14, 2018 · Jan 20, 2018 · Jan 20, 2018 · Jan 20, 2018
diff --git a/README.md b/README.md
@@ -8,6 +8,10 @@
                   --- Add Link of URL in Readme 
 
 ### Projects URL
+ - Sarthak Goel
+    - **[Portfolio](https://practical-mcnulty-daa87a.netlify.com)**
+    - **[Resume](https://nifty-kalam-55c9c2.netlify.com)**
+    - **[ToDoList](https://tender-turing-5ebc3e.netlify.com)**
  - **[Sandeep Ranjan](https://github.com/srsandy/DwarkaWebShowcases/tree/master/Summer2017/Sandeep%20Ranjan/Expenso)**
  - Avani Verma 
        - **[Blogify](http://blogify-version4.bitballoon.com/)**
@@ -17,7 +21,8 @@
     - **[Calculator](http://cashier-suit-45113.bitballoon.com/)**
  - Nupur Baghel
  	  - **[Todolist](http://mercenary-cheetah-86354.bitballoon.com/)**
- 	  - **[PortFolio](http://coordinator-bird-67045.bitballoon.com/)**
+ 	  - **[PortFolio](http://coordinator-bird-67045.bitballoon.com/)**       
+
  - Amartya Biswas
 	  - **[Todolist](http://fireman-florence-78507.bitballoon.com/)**
  	  - **[PortFolio](http://advisor-complexes-28855.bitballoon.com/)**
@@ -54,17 +59,16 @@
     - **[Google Map API Call](http://organist-aaron-32126.bitballoon.com/)**
 
 
-
 ### Winter2018
 
 - Dhruva Bhagdikar
     - **[Resume](http://dhruva.bitballoon.com)**
-    - **[To-do List](http://to-do-list-dhruva.bitballoon.com)*
+    - **[To-do List](http://to-do-list-dhruva.bitballoon.com)**
+    - **[Guardian-API](http://guardian-api.bitballoon.com)**
 
 - Praveen Shah
     - **[Resume](http://competent-morse-c4cea5.bitballoon.com)**
     - **[To-do List](http://upbeat-ritchie-9f6d9b.bitballoon.com)**
-    - **[To-do List](http://to-do-list-dhruva.bitballoon.com)** 
 
 - Nikita Rai
     - **[Animation](http://modest-pasteur-ee6fff.bitballoon.com/)**
@@ -73,4 +77,23 @@
     - **[ToDo List](http://todogithub.bitballoon.com/)**
     - **[Weather API](https://www.bitballoon.com/sites/weatherapigithub)**
 
+- Riya
+    - **[Resume](http://riya-resume-cb.bitballoon.com/)**
+    - **[ToDoList](http://todo-list-riya.bitballoon.com/)**
+    - **[Chat Bot API](http://clever-bot-riya.bitballoon.com/)**
+
+- Saksham Bhalla
+    - **[Animation](http://damping.bitballoon.com/)**
+    - **[Portfolio](http://sakshambhalla.bitballoon.com/)**
+    - **[Resume](http://sakshambhalla.bitballoon.com/resume)**
+    - **[ToDo List](http://saksham-todolist.bitballoon.com/)**
+    - **[University API](http://saksham-univ-finder.bitballoon.com/)**
+- Shruti
+    - **[Resume](http://practical-fermi-48075e.bitballoon.com/)**
+    - **[ToDoList](http://quirky-wright-6cf6dd.bitballoon.com/)**
+    - **[Maths API](http://hardcore-booth-38eb2e.bitballoon.com/)**
+
+### Summer 2018
 
+- Ayush Poddar
+    - **[Portfolio](https://mr-magnificent.github.io/)**
diff --git a/Sarthak Goel/Portfolio/images/arrow.jpg b/Sarthak Goel/Portfolio/images/arrow.jpg
diff --git a/Sarthak Goel/Portfolio/images/cd-arrows.svg b/Sarthak Goel/Portfolio/images/cd-arrows.svg
diff --git a/Sarthak Goel/Portfolio/images/fabian-irsara-92113-unsplash.jpg b/Sarthak Goel/Portfolio/images/fabian-irsara-92113-unsplash.jpg
diff --git a/Sarthak Goel/Portfolio/images/modified.jpg b/Sarthak Goel/Portfolio/images/modified.jpg
diff --git a/Sarthak Goel/Portfolio/images/original.jpg b/Sarthak Goel/Portfolio/images/original.jpg
diff --git a/Sarthak Goel/Portfolio/index.html b/Sarthak Goel/Portfolio/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Sarthak Goel</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <link rel="stylesheet" href="landing_page.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
+
+    <link rel="stylesheet" href="reset.css"> <!-- CSS reset -->
+    <link rel="stylesheet" href="style.css"> <!-- Resource style -->
+    <script src="modernizr.js"></script> <!-- Modernizr -->
+    <script src="landing_page.js"></script>
+  </head>
+  <body>
+
+    <div id="container">
+    <div class="jumbotron">
+      <h1 align="center"> PORTFOLIO </h1>
+    </div>
+    <div id="box">
+      <figure class="cd-image-container">
+        <img src="images/original.jpg" alt="Original Image">
+        <span class="cd-image-label" data-type="original">Who I am</span>
+        <div class="cd-resize-img"> <!-- the resizable image on top -->
+
+        <img src="images/modified.jpg" alt="Modified Image">
+        <span class="cd-image-label" data-type="modified">What I do</span>
+        </div>
+        <span class="cd-handle"></span>
+
+ </figure> <!-- cd-image-container -->
+   </div>
+     <div >
+           <h1 id="result"></h1>
+     </div>
+     <div  >
+       <div id="box2">
+       </div>
+       <div id="box3">
+       </div>
+
+     </div>
+
+   </div>
+
+   <script
+   src="https://code.jquery.com/jquery-3.3.1.js"
+   integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
+   crossorigin="anonymous"></script>
+   <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
+    <script src="main.js"></script> <!-- Resource jQuery -->
+  </body>
+</html>
diff --git a/Sarthak Goel/Portfolio/landing_page.css b/Sarthak Goel/Portfolio/landing_page.css
@@ -0,0 +1,56 @@
+/* #background{
+  position :absolute;
+  width:98%;
+  height:720px;
+} */
+.container{
+  display: flex;
+  flex-wrap: wrap;
+}
+body{
+  background-color: #000033;
+}
+.container{
+  border-radius:20%
+}
+.jumbotron>h1{
+  font-size: 2em;
+}
+#box{
+  position:absolute;
+  z-index: 100;
+  top:180px;
+  left:90px;
+  color:white;
+}
+#result{
+  position:absolute;
+  z-index: 100;
+  top:300px;
+  left:980px;
+  color:white;
+  font-size: 1.5em;
+  /* background-color:#ccccff; */
+    /* border-radius: 10%; */
+    height:70px;
+    padding-top: 25px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+#box2,#box3{
+    position:absolute;
+    z-index: 50;
+    top:400px;
+    left:980px;
+}
+#box3{
+  top: 400px;
+  left:1120px;
+}
+#photo{
+  width:150px;
+  height:150px;
+  border-radius:50%;
+  border: 5px solid white;
+
+}
diff --git a/Sarthak Goel/Portfolio/landing_page.js b/Sarthak Goel/Portfolio/landing_page.js
@@ -0,0 +1,41 @@
+
+var i = 0;
+var txt = 'HI , I AM SARTHAK GOEL!'; /* The text */
+var speed = 200; /* The speed/duration of the effect in milliseconds */
+
+function typeWriter() {
+
+       //audioElement.play();
+  if (i < txt.length) {
+    document.getElementById("result").innerHTML += txt.charAt(i);
+
+      //audioElement.pause();
+    setTimeout(typeWriter, speed);
+      i++;
+  }
+
+
+    if(i==txt.length)
+  {
+
+  var btn=document.createElement('a');
+  btn.className="btn btn-success";
+  btn.href="portfolio.html";
+  btn.id="know";
+  btn.innerHTML="Know More";
+  document.body.appendChild(btn);
+  document.getElementById('box2').appendChild(btn);
+  var btn2=document.createElement('a');
+  btn2.className="btn btn-success";
+  btn2.href="resume.html";
+  btn2.innerHTML="Download Resume";
+  document.body.appendChild(btn2);
+  document.getElementById('box3').appendChild(btn2);
+  i++;
+ }
+}
+setTimeout(typeWriter,1000);
+// function but(){
+//
+// }
+// setTimeout(but,6000);
diff --git a/Sarthak Goel/Portfolio/main.js b/Sarthak Goel/Portfolio/main.js
@@ -0,0 +1,117 @@
+jQuery(document).ready(function($){
+    var dragging = false,
+        scrolling = false,
+        resizing = false;
+    //cache jQuery objects
+    var imageComparisonContainers = $('.cd-image-container');
+    //check if the .cd-image-container is in the viewport
+    //if yes, animate it
+    checkPosition(imageComparisonContainers);
+    $(window).on('scroll', function(){
+        if( !scrolling) {
+            scrolling =  true;
+            ( !window.requestAnimationFrame )
+                ? setTimeout(function(){checkPosition(imageComparisonContainers);}, 100)
+                : requestAnimationFrame(function(){checkPosition(imageComparisonContainers);});
+        }
+    });
+
+    //make the .cd-handle element draggable and modify .cd-resize-img width according to its position
+    imageComparisonContainers.each(function(){
+        var actual = $(this);
+        drags(actual.find('.cd-handle'), actual.find('.cd-resize-img'), actual, actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-image-label[data-type="modified"]'));
+    });
+
+    //upadate images label visibility
+    $(window).on('resize', function(){
+        if( !resizing) {
+            resizing =  true;
+            ( !window.requestAnimationFrame )
+                ? setTimeout(function(){checkLabel(imageComparisonContainers);}, 100)
+                : requestAnimationFrame(function(){checkLabel(imageComparisonContainers);});
+        }
+    });
+
+    function checkPosition(container) {
+        container.each(function(){
+            var actualContainer = $(this);
+            if( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) {
+                actualContainer.addClass('is-visible');
+            }
+        });
+
+        scrolling = false;
+    }
+
+    function checkLabel(container) {
+        container.each(function(){
+            var actual = $(this);
+            updateLabel(actual.find('.cd-image-label[data-type="modified"]'), actual.find('.cd-resize-img'), 'left');
+            updateLabel(actual.find('.cd-image-label[data-type="original"]'), actual.find('.cd-resize-img'), 'right');
+        });
+
+        resizing = false;
+    }
+
+    //draggable funtionality - credits to http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
+    function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {
+        dragElement.on("mousedown vmousedown", function(e) {
+            dragElement.addClass('draggable');
+            resizeElement.addClass('resizable');
+
+            var dragWidth = dragElement.outerWidth(),
+                xPosition = dragElement.offset().left + dragWidth - e.pageX,
+                containerOffset = container.offset().left,
+                containerWidth = container.outerWidth(),
+                minLeft = containerOffset + 10,
+                maxLeft = containerOffset + containerWidth - dragWidth - 10;
+
+            dragElement.parents().on("mousemove vmousemove", function(e) {
+                if( !dragging) {
+                    dragging =  true;
+                    ( !window.requestAnimationFrame )
+                        ? setTimeout(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);}, 100)
+                        : requestAnimationFrame(function(){animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement);});
+                }
+            }).on("mouseup vmouseup", function(e){
+                dragElement.removeClass('draggable');
+                resizeElement.removeClass('resizable');
+            });
+            e.preventDefault();
+        }).on("mouseup vmouseup", function(e) {
+            dragElement.removeClass('draggable');
+            resizeElement.removeClass('resizable');
+        });
+    }
+
+    function animateDraggedHandle(e, xPosition, dragWidth, minLeft, maxLeft, containerOffset, containerWidth, resizeElement, labelContainer, labelResizeElement) {
+        var leftValue = e.pageX + xPosition - dragWidth;
+        //constrain the draggable element to move inside his container
+        if(leftValue < minLeft ) {
+            leftValue = minLeft;
+        } else if ( leftValue > maxLeft) {
+            leftValue = maxLeft;
+        }
+
+        var widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';
+
+        $('.draggable').css('left', widthValue).on("mouseup vmouseup", function() {
+            $(this).removeClass('draggable');
+            resizeElement.removeClass('resizable');
+        });
+
+        $('.resizable').css('width', widthValue);
+
+        updateLabel(labelResizeElement, resizeElement, 'left');
+        updateLabel(labelContainer, resizeElement, 'right');
+        dragging =  false;
+    }
+
+    function updateLabel(label, resizeElement, position) {
+        if(position == 'left') {
+            ( label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;
+        } else {
+            ( label.offset().left > resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ;
+        }
+    }
+});