-
-
Save GeoWebDevCom/7ce0ffdd1ad48e8159943ddec102bbd0 to your computer and use it in GitHub Desktop.
Portfolio - Anonymous
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
| <meta charset="utf-8"> | |
| <title>portfolio</title> | |
| <link rel="stylesheet" href="styles.css" /> | |
| <link href="https://fonts.googleapis.com/css?family=Baloo|Berkshire+Swash|Bitter:700|Josefin+Sans:300|Roboto:400,700" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div id="nav"> | |
| <div class="initials transition">JD</div> | |
| <div id="menu-container" class="transition height0"> | |
| <div id="menu-container-triangle"></div> | |
| <ul class="transition"> | |
| <li class="transition" data-anchor="about-me"> | |
| About | |
| <div class="nav-triangle transition"></div> | |
| </li> | |
| <li class="transition" data-anchor="edu"> | |
| Education | |
| <div class="nav-triangle transition"></div> | |
| </li> | |
| <li class="transition" data-anchor="skills"> | |
| Skills | |
| <div class="nav-triangle transition"></div> | |
| </li> | |
| <li class="transition" data-anchor="projects"> | |
| Projects | |
| <div class="nav-triangle transition"></div> | |
| </li> | |
| <li class="transition" data-anchor="contact"> | |
| Contact | |
| <div class="nav-triangle transition"></div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div id="header"> | |
| <div id="header-content"> | |
| <div class="header2" id="greeting-text-div"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="17vw" id="greeting" fill="white"><text x="50%" y="50%" text-anchor="middle" alignment-baseline="middle" id="hello-text"><tspan>Hello</tspan><tspan id="iam-text"></tspan></text></svg> | |
| </div> | |
| <div class="header1 initial-hide"><span class="translucent-white-color">{[</span> Jaskaran <span class="translucent-white-color">]}</span></div> | |
| <div class="header2 initial-hide" id="header-desc">I like to <span id="design-text"></span> <span id="and-text">and</span> <span id="and-text-mask">and</span> <span id="code-text"></span></div> | |
| <img src="https://s16.postimg.io/cbmht0fqd/skip.png" id="skip-button" /> | |
| </div> | |
| </div> | |
| <div id="header-space"></div> | |
| <div id="wrapper"> | |
| <div id="wrapper-handle"> | |
| <div id="about-desc" class="">Welcome to my Portfolio</div> | |
| <div id="semi-desc-marquee"> | |
| Geek | Pizza | Tacos | Night Owl | Nerd | OOP | Developer | Designer | Android | Horror Movies | Reading | Animes | Peanut Butter | Game of Thrones | The Big Bang Theory | Linux | Humor | Hash Browns | Gaming | |
| </div> | |
| </div> | |
| <div id="about-me" class="section-div"> | |
| <div class="header4">ABOUT ME</div> | |
| <div id="about-me-info"> | |
| A man really likes technology. The man has passion for developing programs using Java, HTML, CSS, Javascript and PHP. Additionally, the man is a minimalist who loves writing beautiful, efficient and elegant code. He also knows how to work with databases using SQL and is also expeirenced with linux. That man is <strong>me</strong>. Want someone to have around while eating pizza and have a nerdy talk? You got the guy... | |
| </div> | |
| </div> | |
| <div id="edu" class="section-div"> | |
| <div class="header4">EDUCATION</div> | |
| <div class="edu-school"> | |
| <div class="edu-info"> | |
| <div class="edu-course-name"> | |
| <div>Some Computer Dark Magic</div> | |
| <div>Hogwards, outta nowhere.</div> | |
| </div> | |
| <div class="edu-school-time">2015 - Present</div> | |
| </div> | |
| <div class="edu-grades-container"> | |
| <div class="edu-course"> | |
| <div class="edu-progress"> | |
| <div class="edu-course-grade" data-number="0.89">A</div> | |
| <canvas class="edu-course-canvas" width="58" height="58"></canvas> | |
| </div> | |
| <div class="edu-course-desc"> | |
| Business Softwares | |
| <div class="edu-course-underline"></div> | |
| </div> | |
| </div> | |
| <div class="edu-course"> | |
| <div class="edu-progress"> | |
| <div class="edu-course-grade" data-number="1">A+</div> | |
| <canvas class="edu-course-canvas" width="58" height="58"></canvas> | |
| </div> | |
| <div class="edu-course-desc"> | |
| Buhahaha | |
| <div class="edu-course-underline"></div> | |
| </div> | |
| </div> | |
| <div class="edu-course"> | |
| <div class="edu-progress"> | |
| <div class="edu-course-grade" data-number="0.89">A</div> | |
| <canvas class="edu-course-canvas" width="58" height="58"></canvas> | |
| </div> | |
| <div class="edu-course-desc"> | |
| Buhahaha - 2 | |
| <div class="edu-course-underline"></div> | |
| </div> | |
| </div> | |
| <div class="edu-course"> | |
| <div class="edu-progress"> | |
| <div class="edu-course-grade" data-number="1">A+</div> | |
| <canvas class="edu-course-canvas" width="58" height="58"></canvas> | |
| </div> | |
| <div class="edu-course-desc"> | |
| Some Designing | |
| <div class="edu-course-underline"></div> | |
| </div> | |
| </div> | |
| <div class="edu-course"> | |
| <div class="edu-progress"> | |
| <div class="edu-course-grade" data-number="0.89">A</div> | |
| <canvas class="edu-course-canvas" width="58" height="58"></canvas> | |
| </div> | |
| <div class="edu-course-desc"> | |
| Some more designing maybe? | |
| <div class="edu-course-underline"></div> | |
| </div> | |
| </div> | |
| <div class="edu-course"> | |
| <div class="edu-progress"> | |
| <div class="edu-course-grade" data-number="0.89">A</div> | |
| <canvas class="edu-course-canvas" width="58" height="58"></canvas> | |
| </div> | |
| <div class="edu-course-desc"> | |
| Dunno. | |
| <div class="edu-course-underline"></div> | |
| </div> | |
| </div> | |
| <div class="edu-course"> | |
| <div class="edu-progress"> | |
| <div class="edu-course-grade" data-number="0.79">B+</div> | |
| <canvas class="edu-course-canvas" width="58" height="58"></canvas> | |
| </div> | |
| <div class="edu-course-desc"> | |
| Mathematics for Computing | |
| <div class="edu-course-underline"></div> | |
| </div> | |
| </div> | |
| <div class="edu-course"> | |
| <div class="edu-progress"> | |
| <div class="edu-course-grade" data-number="1">A+</div> | |
| <canvas class="edu-course-canvas" width="58" height="58"></canvas> | |
| </div> | |
| <div class="edu-course-desc"> | |
| Object Oriented Programming 1 - JAVA | |
| <div class="edu-course-underline"></div> | |
| </div> | |
| </div> | |
| <div class="edu-course"> | |
| <div class="edu-progress"> | |
| <div class="edu-course-grade" data-number="1">A+</div> | |
| <canvas class="edu-course-canvas" width="58" height="58"></canvas> | |
| </div> | |
| <div class="edu-course-desc"> | |
| Object Oriented Programming 2 - JAVA | |
| <div class="edu-course-underline"></div> | |
| </div> | |
| </div> | |
| <div class="edu-course"> | |
| <div class="edu-progress"> | |
| <div class="edu-course-grade" data-number="1">A+</div> | |
| <canvas class="edu-course-canvas" width="58" height="58"></canvas> | |
| </div> | |
| <div class="edu-course-desc"> | |
| Problem Solving/Programming Logic | |
| <div class="edu-course-underline"></div> | |
| </div> | |
| </div> | |
| <div class="edu-course"> | |
| <div class="edu-progress"> | |
| <div class="edu-course-grade" data-number="1">A+</div> | |
| <canvas class="edu-course-canvas" width="58" height="58"></canvas> | |
| </div> | |
| <div class="edu-course-desc"> | |
| Web Development | |
| <div class="edu-course-underline"></div> | |
| </div> | |
| </div> | |
| <div class="edu-course"> | |
| <div class="edu-progress"> | |
| <div class="edu-course-grade" data-number="1">A+</div> | |
| <canvas class="edu-course-canvas" width="58" height="58"></canvas> | |
| </div> | |
| <div class="edu-course-desc"> | |
| Web Programming | |
| <div class="edu-course-underline"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="edu-gpa-divider"></div> | |
| <div id="gpa">GPA: 3.96</div> | |
| </div> | |
| </div> | |
| <hr class="section-divider" /> | |
| <div id="skills" class="section-div"> | |
| <div id="skills-text" class="header4">SKILLS</div> | |
| <div id="skill-dist"></div> | |
| <hr class="skill-dist-line skill-dist-line0" /> | |
| <hr class="skill-dist-line skill-dist-line1" /> | |
| <hr class="skill-dist-line skill-dist-line2" /> | |
| <hr class="skill-dist-line skill-dist-line3" /> | |
| <hr class="skill-dist-line skill-dist-line4" /> | |
| <div id="skills-content"> | |
| <div class="skill-divider"></div> | |
| <div class="skill-desc header2"><span class="skill-desc-title">Programming Languages</span></div> | |
| <div class="skill-progress"><span class="header3 skill-title">Java</span><div class="skill-progressbar progress-java transition" data-progress="90"></div></div> | |
| <div class="skill-progress"><span class="header3 skill-title">HTML/CSS</span><div class="skill-progressbar progress-html" data-progress="90"></div></div> | |
| <div class="skill-progress"><span class="header3 skill-title">Javascript/JQuery</span><div class="skill-progressbar progress-javascript" data-progress="85"></div></div> | |
| <div class="skill-progress"><span class="header3 skill-title">PHP</span><div class="skill-progressbar progress-php" data-progress="40"></div></div> | |
| <div class="skill-progress"><span class="header3 skill-title">SQL</span><div class="skill-progressbar progress-sql" data-progress="65"></div></div> | |
| <!---------------------------------------------------------> | |
| <div class="skill-divider"></div> | |
| <div class="skill-desc header2"><span class="skill-desc-title">Additional Skills</span></div> | |
| <div class="skill-progress skill-white"><span class="header3 skill-title gray-color">Photoshop</span><div class="skill-progressbar skill-progressbar-white progress-photoshop" data-progress="95"></div></div> | |
| <div class="skill-progress skill-white"><span class="header3 skill-title gray-color">Visio</span><div class="skill-progressbar skill-progressbar-white progress-visio" data-progress="85"></div></div> | |
| <div class="skill-progress skill-white"><span class="header3 skill-title gray-color">Word/Powerpoint</span><div class="skill-progressbar skill-progressbar-white progress-powerpoint" data-progress="95"></div></div> | |
| <!---------------------------------------------------------> | |
| <div class="skill-divider"></div> | |
| <div class="skill-desc header2"><span class="skill-desc-title">Attributes</span></div> | |
| <div class="skill-progress skill-gray"><span class="header3 skill-title">Reliable</span><div class="skill-progressbar skill-progressbar-gray progress-reliable" data-progress="95"></div></div> | |
| <div class="skill-progress skill-gray"><span class="header3 skill-title">Multitasking</span><div class="skill-progressbar skill-progressbar-gray progress-multitask" data-progress="90"></div></div> | |
| <div class="skill-progress skill-gray"><span class="header3 skill-title">Leadership</span><div class="skill-progressbar skill-progressbar-gray progress-leadership" data-progress="90"></div></div> <!---------------------------------------------------------> | |
| <div class="skill-extra"> | |
| <div class="header2 skill-extra-title">Extra Interests</div> | |
| <div class="skill-extra-item">Linux</div> | |
| <div class="skill-extra-item">Android Embedded</div> | |
| <div class="skill-extra-item">Spring Framework (Java)</div> | |
| <div class="skill-extra-item">JDBC</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="projects" class="section-div"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="transparent" id="projects-text-svg"> | |
| <circle id="cir1" cx="50%" cy="50%" r="40%" stroke="white" stroke-width="5"></circle> | |
| <circle id="cir2" cx="50%" cy="50%" r="40%" fill="black" fill-opacity="0.4"></circle> | |
| <text x="50%" y="50%" text-anchor="middle" alignment-baseline="text-after-edge" id="projects-text" fill="white">PROJECTS</text> | |
| <text x="50%" y="50%" text-anchor="middle" alignment-baseline="text-before-edge" id="projects-tagline-text">Some recent decents.</text> | |
| </svg><br /> | |
| <div id="projects-scroller" class="transition"> | |
| <button class="carousel-scroll-button stick-left"><<</button> | |
| <button class="carousel-scroll-button stick-right">>></button> | |
| <div id="projects-carousel"> | |
| <div id="projects-carousel-viewport"> | |
| <div id="projects-carousel-container" class="transition"> | |
| <div class="carousel-img-holder"><img src="https://s16.postimg.io/7n6hxtqjp/project_mario.png" class="carousel-img-width transition" /></div> | |
| <div class="carousel-img-holder"><img src="https://s16.postimg.io/k337rkjvp/project_mysql.png" class="carousel-img-width-alt transition" /></div> | |
| <div class="carousel-img-holder"><img src="https://s16.postimg.io/und5a5odh/project_falling_robots.png" class="carousel-img-width-alt transition" /></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="project-desc"> | |
| <span class="project-name project-attr">Super Mario</span> | |
| <div class="project-attr-div"><span class="project-attr-text">Language: </span><span class="project-attr"></span></div> | |
| <div class="project-attr-div"><span class="project-attr-text">Technologies: </span><span class="project-attr"></span></div> | |
| <div class="project-attr-div project-attr"></div> | |
| </div> | |
| </div> | |
| <div id="contact" class="section-div"> | |
| <div id="contact-text" class="header4">Contact Me</div> | |
| <form id="contact-form-container"> | |
| <label for="contact-name" class="contact-label" id="contact-name-label">Name</label> | |
| <input id="contact-name" class="contact-form" placeholder="Name" /> | |
| <label for="contact-phone" class="contact-label" id="contact-phone-label">Phone</label> | |
| <input id="contact-phone" class="contact-form" placeholder="Phone" /> | |
| <label for="contact-email" class="contact-label" id="contact-email-label">E-Mail</label> | |
| <input id="contact-email" class="contact-form" placeholder="E-Mail" /> | |
| <label for="contact-message" class="contact-label" id="contact-message-label">Message</label> | |
| <textarea id="contact-message" class="contact-form" placeholder="Message"></textarea> | |
| <button type="submit">Send</button> | |
| </form> | |
| <div id="profiles-text">PROFILES</div> | |
| <div class="profile-img-container"><a href="http://stackoverflow.com/users/4948426/jaskaranbir-singh"><img src="http://imgh.us/so_2.svg" class="profile-img" /></a></div> | |
| <div class="profile-img-container"><a href="#"><img src="http://imgh.us/github_5.svg" class="profile-img" /></a></div> | |
| </div> | |
| <div id="site-info"> | |
| Designed by Jaskaran | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| var isMobileDevice; | |
| var $window = $(window); | |
| var windowHeight = $window.height(); | |
| var $navBar = $('#nav'); | |
| var $navBarList = $navBar.find('ul'); | |
| var $navBarItem = $navBar.find('li'); | |
| var $menuContainer = $('#menu-container'); | |
| var $navTriangles = $('.nav-triangle'); | |
| var $initials = $('.initials'); | |
| var $projectDesc = $('#project-desc'); | |
| var canvases = [].slice.call(document.getElementsByClassName('edu-course-canvas')); | |
| var canvasScale = canvases[0].width; | |
| var canvasCenter = canvasScale / 2; | |
| var completeRadian = Math.PI * 2; | |
| var carouselOffset = 0; | |
| var projectDescOffset = 0; | |
| $window.on('beforeunload', function () { | |
| $window.scrollTop(0); | |
| }); | |
| (function () { | |
| $('#greeting').hide().fadeIn(2000).delay(100).animate({ | |
| 'font-size': '3vh', | |
| 'margin-top': '0', | |
| 'height': '10vh' | |
| }, 1000, function () { | |
| $('#greeting').css({ | |
| 'position': 'relative', | |
| 'left': '0', | |
| 'top': '50%', | |
| '-webkit-transform': 'translate(0; -50%)', | |
| 'transform': 'translate(0, -50%)' | |
| }); | |
| $('#iam-text').append(', I am').hide().delay(300).fadeIn(1000); | |
| }); | |
| $('.skill-dist-line').height($('#skills-content').height() - $('.skill-extra').height() + $('.skill-progress').height()); | |
| setNav(); | |
| isMobileDevice = $window.width() < 700 || $window.height() < 600; | |
| if ($initials.height() !== $initials.width()) $initials.width($initials.height()); | |
| setTimeout(function () { | |
| $('#design-text').css('border-right', '2px solid white'); | |
| "Design".split('').forEach(function (y, i) { | |
| setTimeout(function () { | |
| $('#design-text').append(y); | |
| }, i * 100); | |
| }); | |
| }, 6400); | |
| setTimeout(function () { | |
| $('#design-text').css('border-right', 'none'); | |
| $('#and-text-mask').show(); | |
| $('#and-text').show().animate({ | |
| 'width': '1.9em' | |
| }); | |
| }, 7000); | |
| var $codeText = $('#code-text'); | |
| setTimeout(function () { | |
| "Code".split('').forEach(function (y, i) { | |
| setTimeout(function () { | |
| $codeText.append('<span style = "background-color: white; color: black">' + y + '</span>'); | |
| if (i > 0) $codeText.children('span').eq(i - 1).css({ | |
| 'background-color': 'transparent', | |
| 'color': 'white' | |
| }); | |
| }, i * 100); | |
| }); | |
| setTimeout(function () { | |
| $codeText.children('span').eq(3).css({ | |
| 'background-color': 'transparent', | |
| 'color': 'white' | |
| }); | |
| }, 410); | |
| }, 7400); | |
| $('#skip-button').click(function () { | |
| $('#header-space').dequeue(); | |
| }); | |
| $('#header-space').delay(8500).animate({ | |
| 'height': '50vh' | |
| }, 1400, function () { | |
| $navBarList.css('margin-top', '0'); | |
| $initials.css('top', '0'); | |
| $('body').css('overflow', 'auto'); | |
| $('#skip-button').remove(); | |
| projectDescOffset = $projectDesc.offset().top + $projectDesc.height() / 2; | |
| setTimeout(function () { | |
| $('#about-desc').addClass('fadeout'); | |
| setTimeout(function () { | |
| $('#about-desc').text('I make and screw with stuff.').removeClass('fadeout').addClass('fadein'); | |
| }, 2000); | |
| }, 1000); | |
| $window.scrollTop(1); | |
| $('#projects-scroller').height($('#projects-carousel').find('img').eq(0).outerHeight()); | |
| }); | |
| var $projectsText = $('#projects-text'); | |
| var $projectsTagLine = $('#projects-tagline-text'); | |
| if ($projectsText.offset().top + $projectsText.height() > $projectsTagLine.offset().top + $projectsTagLine.height()) | |
| $projectsTagLine.attr('y', '55.6%'); | |
| setWindowScrollEvents(); | |
| setWindowResizeEvents(); | |
| })(); | |
| function setWindowScrollEvents() { | |
| var $header = $('#header-content'); | |
| var projectDescFixed = false; | |
| var hasScrolled = false; | |
| var scrollPoint = 0; | |
| var bottomScroll = 0; | |
| $window.scroll(function () { | |
| scrollPoint = $window.scrollTop(); | |
| var scrollOpacity = scrollPoint / 350; | |
| if (scrollOpacity < 1.1) $header.css({ | |
| 'opacity': 1 - scrollOpacity, | |
| '-webkit-transform': 'scale(' + (1 - scrollPoint / 1100) + ')', | |
| 'transform': 'scale(' + (1 - scrollPoint / 1100) + ')', | |
| 'margin-top': $header.css('margin-top') + scrollPoint / 8 + 'px' | |
| }); | |
| hasScrolled = true; | |
| }); | |
| var $sectionDivs = $('.section-div'); | |
| var $wrapper = $('#wrapper'); | |
| var $projects = $('#projects'); | |
| var changeNavColor = false; | |
| var eduAnimDone = false; | |
| var skillAnimDone = false; | |
| var projectsAnimDone = false; | |
| var scrollAnimsDone = false; | |
| var lastScrollPoint = 0; | |
| setInterval(function () { | |
| if (!hasScrolled) return; | |
| hasScrolled = false; | |
| if (scrollPoint < $wrapper.offset().top) { | |
| $navBar.removeClass('nav-alt-color'); | |
| $initials.removeClass('initials-alt'); | |
| changeNavColor = true; | |
| } | |
| else if (changeNavColor) { | |
| $navBar.addClass('nav-alt-color'); | |
| $initials.addClass('initials-alt'); | |
| changeNavColor = false; | |
| } | |
| if (!scrollAnimsDone) { | |
| if (!eduAnimDone) doEducationAnimation(bottomScroll); | |
| else if (!skillAnimDone) doSkillAnimation(bottomScroll); | |
| else if (!projectsAnimDone) doProjectsAnimation(bottomScroll); | |
| } | |
| var scrollDelta = scrollPoint - lastScrollPoint; | |
| if (scrollDelta > 20) { | |
| $navBar.css('top', '-80px'); | |
| $navBarList.css('margin-top', '-80px'); | |
| } | |
| else if (scrollDelta < -0) { | |
| $navBar.css('top', '0'); | |
| $navBarList.css('margin-top', '0'); | |
| } | |
| lastScrollPoint = scrollPoint; | |
| bottomScroll = scrollPoint + windowHeight; | |
| if (!isMobileDevice) { | |
| if (!projectDescFixed && bottomScroll > projectDescOffset && bottomScroll < projectDescOffset + $projectDesc.height() / 2) { | |
| $projectDesc.addClass('project-desc-fixed'); | |
| $projects.addClass('bottom-padding'); | |
| projectDescFixed = true; | |
| } | |
| else if (projectDescFixed && bottomScroll > projectDescOffset + $projectDesc.height() / 1.3 || bottomScroll < projectDescOffset - $projectDesc.height() / 2) { | |
| $projectDesc.removeClass('project-desc-fixed'); | |
| $projects.removeClass('bottom-padding'); | |
| projectDescFixed = false; | |
| } | |
| } | |
| $sectionDivs.each(function (i, e) { | |
| var $e = $(e); | |
| var topOffset = $e.offset().top; | |
| if (scrollPoint + windowHeight / 2 >= topOffset - 100 && scrollPoint + windowHeight / 2 < topOffset + $e.height()) { | |
| $navBarItem.eq(i).css('border-bottom-color', 'white'); | |
| if (!isMobileDevice) | |
| $navTriangles.eq(i).css('opacity', '1'); | |
| } | |
| else { | |
| $navBarItem.eq(i).css('border-bottom-color', 'transparent'); | |
| if (!isMobileDevice) | |
| $navTriangles.eq(i).css('opacity', '0'); | |
| } | |
| $menuContainer.addClass('height0'); | |
| }); | |
| }, 250); | |
| var $eduCourseGrade = $('.edu-course-grade'); | |
| var canvasIndexOffset = 0; | |
| var canvasesCount = canvases.length; | |
| function doEducationAnimation(bottomScroll) { | |
| while (canvasIndexOffset < canvasesCount && bottomScroll > $(canvases[0]).offset().top) | |
| (function () { | |
| var context = canvases[0].getContext('2d'); | |
| var end = $eduCourseGrade.eq(canvasIndexOffset).data('number') + 0.01; | |
| var cur = 0; | |
| var accel = 0.001; | |
| context.lineWidth = 8; | |
| (function animate(curr, stop) { | |
| context.clearRect(0, 0, canvasScale, canvasScale); | |
| context.strokeStyle = 'rgba(0,0,0,0.15)'; | |
| context.beginPath(); | |
| context.arc(canvasCenter, canvasCenter, 25, 0, curr * completeRadian, true); | |
| context.stroke(); | |
| context.closePath(); | |
| context.strokeStyle = '#ED5446'; | |
| context.beginPath(); | |
| context.arc(canvasCenter, canvasCenter, 25, 0, curr * completeRadian, false); | |
| context.stroke(); | |
| context.closePath(); | |
| if (stop) return; | |
| requestAnimationFrame(function () { | |
| return cur <= end ? animate(cur) : animate(end, true); | |
| }); | |
| cur += accel; | |
| accel += 0.002; | |
| })(); | |
| canvasIndexOffset++; | |
| canvases.splice(0, 1); | |
| if (canvasIndexOffset === canvasesCount) eduAnimDone = true; | |
| })(); | |
| } | |
| function doSkillAnimation(bottomScroll) { | |
| $('.skill-progressbar').each(function (i, e) { | |
| if (bottomScroll <= $(e).offset().top) return; | |
| $(e).addClass('width' + $(e).data('progress')); | |
| if (i === 10) skillAnimDone = true; | |
| }); | |
| } | |
| function doProjectsAnimation(bottomScroll) { | |
| if (bottomScroll > $('#projects-text-svg').offset().top + $('#projects-text-svg').outerWidth() / 1.5) { | |
| $('#cir1').addClass('stroke-circle'); | |
| $('#cir2').addClass('pop-circle'); | |
| $('#projects-text').addClass('text-outline'); | |
| $('#projects-tagline-text').addClass('semi-text-fadein'); | |
| projectsAnimDone = true; | |
| scrollAnimsDone = true; | |
| } | |
| } | |
| } | |
| function setWindowResizeEvents() { | |
| $window.on('resize', function () { | |
| $('.skill-dist-line').height($('#skills-content').height() - $('.skill-extra').height() + $('.skill-progress').height()); | |
| setTimeout(function () { | |
| $('#projects-scroller').height($('#projects-carousel img').eq(-carouselOffset).outerHeight()); | |
| setTimeout(function () { | |
| projectDescOffset = $projectDesc.offset().top + $projectDesc.height() / 2; | |
| }, 600); | |
| }, 800); | |
| if ($initials.height() != $initials.width()) $initials.width($initials.height()); | |
| isMobileDevice = $window.width() < 700 || $window.height() < 600; | |
| windowHeight = $window.height(); | |
| }); | |
| } | |
| function setNav() { | |
| var navbarHeight = $navBar.height(); | |
| $navBarItem.each(function (i, e) { | |
| $(e).on('click', function () { | |
| $('html, body').animate({ | |
| scrollTop: $('#' + $(e).data('anchor')).offset().top - navbarHeight | |
| }, 1000); | |
| }); | |
| }); | |
| $initials.on('click', function () { | |
| $menuContainer.toggleClass('height0'); | |
| }); | |
| setEducation(); | |
| } | |
| function setEducation() { | |
| canvases.forEach(function (e) { | |
| var context = e.getContext('2d'); | |
| context.lineWidth = 8; | |
| context.beginPath(); | |
| context.strokeStyle = 'rgba(0,0,0,0.15)'; | |
| context.arc(canvasCenter, canvasCenter, 25, 0, completeRadian); | |
| context.stroke(); | |
| context.closePath(); | |
| }); | |
| setProjects(); | |
| } | |
| function setProjects() { | |
| var $projectAttr = $('.project-attr'); | |
| var $projectAttrDiv = $('.project-attr-div, .project-name'); | |
| var $leftScrollButton = $('.carousel-scroll-button.stick-left'); | |
| var $rightScrollButton = $('.carousel-scroll-button.stick-right'); | |
| var $carouselContainer = $('#projects-carousel-container'); | |
| var $carouselContChild = $carouselContainer.children(); | |
| $leftScrollButton.text('> |').css('letter-spacing', '-1vh'); | |
| var projectInfo = [[['Super Mario'], ['Java'], ['JavaFX'], ['A simple clone of first level of the classic NES Super Mario Bros with some added flavour of Dragon Ball Z anime. Made using pure JavaFX.']], [['MySQL-GUI'], ['Java'], ['Spring Framework | JDBC | Maven | Swing'], ['A basic MySQL GUI created in java. Allows few functions such as dynamically adding/removing data, tables and databases along with ability to modify the existing data.']], [['Falling Robots'], ['Java'], ['Becker Robots'], ['A simple java game created using basic multi-threading in which robots fall from top to bottom and player has to catch them.']]]; | |
| function updateProjectInfo() { | |
| $projectAttr.each(function (i) { | |
| return fadeTransformText($projectAttr.eq(i), projectInfo[-carouselOffset][i]); | |
| }); | |
| function fadeTransformText($element, text) { | |
| $projectAttrDiv.removeClass('fadein-fast').addClass('fadeout-fast'); | |
| setTimeout(function () { | |
| $element.text(text); | |
| $projectAttrDiv.removeClass('fadeout-fast').addClass('fadein-fast'); | |
| }, 500); | |
| } | |
| } | |
| updateProjectInfo(); | |
| $('.stick-left').click(function () { | |
| switch (++carouselOffset) { | |
| case 0: | |
| setTimeout(function () { | |
| $leftScrollButton.text('> |').css('letter-spacing', '-1vh'); | |
| }, 800); break; | |
| case 1: | |
| carouselOffset = -2; | |
| setTimeout(function () { | |
| $rightScrollButton.text('| <').css('letter-spacing', '-1vh'); | |
| }, 800); | |
| default: | |
| setTimeout(function () { | |
| $leftScrollButton.text('<<').css('letter-spacing', '-1.5vh'); | |
| }, 800); | |
| } | |
| updateProjectInfo(); | |
| $rightScrollButton.text('>>').css('letter-spacing', '-1.5vh'); | |
| $carouselContainer.css({ | |
| '-webkit-transform': 'translateX(' + 33.33 * carouselOffset + '%)', | |
| 'transform': 'translateX(' + 33.33 * carouselOffset + '%)' | |
| }); | |
| $carouselContChild.eq(carouselOffset === -2 ? 0 : -carouselOffset + 1).children().eq(0).addClass('carousel-img-width-alt'); | |
| $carouselContChild.eq(-carouselOffset).children().eq(0).removeClass('carousel-img-width-alt').addClass('carousel-img-width'); | |
| }); | |
| $('.stick-right').click(function () { | |
| switch (--carouselOffset) { | |
| case -2: | |
| setTimeout(function () { | |
| $rightScrollButton.text('| <').css('letter-spacing', '-1vh'); | |
| }, 800); break; | |
| case -3: | |
| carouselOffset = 0; | |
| setTimeout(function () { | |
| $leftScrollButton.text('> |').css('letter-spacing', '-1vh'); | |
| }, 800); | |
| default: | |
| setTimeout(function () { | |
| $rightScrollButton.text('>>').css('letter-spacing', '-1.5vh'); | |
| }, 800); | |
| }; | |
| updateProjectInfo(); | |
| $leftScrollButton.text('<<').css('letter-spacing', '-1.5vh'); | |
| $carouselContainer.css({ | |
| '-webkit-transform': 'translateX(' + 33.33 * carouselOffset + '%)', | |
| 'transform': 'translateX(' + 33.33 * carouselOffset + '%)' | |
| }); | |
| $carouselContChild.eq(-carouselOffset - 1).children().eq(0).addClass('carousel-img-width-alt'); | |
| $carouselContChild.eq(-carouselOffset).children().eq(0).removeClass('carousel-img-width-alt').addClass('carousel-img-width'); | |
| }); | |
| setContact(); | |
| } | |
| function setContact() { | |
| ['name', 'phone', 'email', 'message'].forEach(function (e) { | |
| return $('#contact-' + e).on('input', function () { | |
| return $('#contact-' + e + '-label').toggleClass('fadein-bottom', !!$('#contact-' + e).val()); | |
| }); | |
| }); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-image: url('https://s13.postimg.org/5ikkin9t3/body_bg.png'); | |
| background-repeat: repeat; | |
| background-attachment: fixed; | |
| padding: 0; | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| #nav { | |
| position: fixed; | |
| display: table; | |
| background-color: transparent; | |
| width: 100%; | |
| height: 6vh; | |
| z-index: 2; | |
| overflow: hidden; | |
| -webkit-transition: top 150ms; | |
| transition: top 150ms; | |
| } | |
| .nav-alt-color { | |
| background-color: black !important; | |
| } | |
| .transition { | |
| -webkit-transition: all 0.7s cubic-bezier(0.65, 0.04, 0.96, 0.84); | |
| transition: all 0.7s cubic-bezier(0.65, 0.04, 0.96, 0.84); | |
| } | |
| .initial-hide { | |
| opacity: 0; | |
| } | |
| .initials { | |
| display: table-cell; | |
| position: relative; | |
| width: 6vh; | |
| height: 100%; | |
| z-index: 3; | |
| top: -6vh; | |
| text-align: center; | |
| vertical-align: middle; | |
| font-size: 2.4vh; | |
| background-color: transparent; | |
| color: white; | |
| font-family: bitter; | |
| } | |
| .initials-alt { | |
| background-color: #ED5446 !important; | |
| color: black; | |
| } | |
| #nav ul { | |
| display: table; | |
| position: fixed; | |
| border-collapse: separate; | |
| border-spacing: 2vw 0; | |
| top: 1.3vh; | |
| right: 0; | |
| margin: 0; | |
| z-index: 3; | |
| margin-top: -6vh; | |
| -webkit-transition: width 0.7s cubic-bezier(0.65, 0.04, 0.96, 0.84); | |
| transition: width 0.7s cubic-bezier(0.65, 0.04, 0.96, 0.84); | |
| } | |
| #nav li { | |
| display: table-cell; | |
| text-align: center; | |
| top: 0; | |
| padding-bottom: 0.6vh; | |
| height: 4vh; | |
| list-style: none; | |
| font-size: 2.4vh; | |
| color: white; | |
| font-family: 'Josefin Sans'; | |
| border-bottom: 0.3vh solid transparent; | |
| cursor: pointer; | |
| } | |
| #nav li:hover { | |
| border-bottom-color: rgb(237, 84, 70) !important; | |
| } | |
| .nav-triangle { | |
| display: block; | |
| position: relative; | |
| top: 0.85vh; | |
| left: 50%; | |
| -webkit-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| width: 0; | |
| border-style: solid; | |
| border-color: white transparent; | |
| border-width: 0 1vh 1vh 1vh; | |
| opacity: 0; | |
| } | |
| .nav-selected { | |
| border-bottom: 0.3vh; | |
| } | |
| #header { | |
| position: fixed; | |
| width: 100vw; | |
| height: 50vh; | |
| } | |
| #header-content { | |
| position: absolute; | |
| text-align: center; | |
| vertical-align: middle; | |
| color: white; | |
| width: 100vw; | |
| height: inherit; | |
| line-height: 10vh; | |
| } | |
| #header-space { | |
| position: relative; | |
| height: 100vh; | |
| background-attachment: fixed; | |
| z-index: -2; | |
| opacity: 0; | |
| } | |
| .header1 { | |
| font-family: baloo; | |
| font-size: 10vw; | |
| text-shadow: 0.7vh 0.7vh rgba(0,0,0, 0.3); | |
| } | |
| .header2 { | |
| font-family: bitter; | |
| font-size: 3vh; | |
| } | |
| .header3 { | |
| font-family: 'Roboto'; | |
| font-size: 16px; | |
| font-weight: bold; | |
| } | |
| .header4 { | |
| font-family: 'Josefin Sans'; | |
| font-size: 50px; | |
| margin-top: 20px; | |
| color: #252627; | |
| } | |
| .translucent-white-color { | |
| color: white; | |
| opacity: 0.04; | |
| text-shadow: 7px 7px rgba(0,0,0, 0.7); | |
| } | |
| #greeting-text-div { | |
| margin-top: 6.8vh; | |
| height: 12vh; | |
| position: relative; | |
| } | |
| #greeting { | |
| position: absolute; | |
| left: 50%; | |
| -webkit-transform: translate(-50%); | |
| transform: translate(-50%); | |
| font-size: 10vw; | |
| margin-top: 35vh; | |
| } | |
| #hello-text { | |
| font-family: bitter; | |
| stroke-dasharray: 0; | |
| stroke-dashoffset: 100; | |
| -webkit-animation: text-outline-fadein-fast 5s linear; | |
| animation: text-outline-fadein-fast 5s linear; | |
| -webkit-animation-fill-mode: forwards; | |
| animation-fill-mode: forwards; | |
| } | |
| @-webkit-keyframes text-outline-fadein-fast { | |
| 0% { | |
| stroke: white; | |
| fill: rgba(0,0,0, 0.3); | |
| } | |
| 30% { | |
| stroke: white; | |
| fill: rgba(0,0,0, 0.3); | |
| stroke-dasharray: 800; | |
| } | |
| 40% { | |
| fill: white; | |
| } | |
| 100% { | |
| stroke: transparent; | |
| fill: white; | |
| } | |
| } | |
| @keyframes text-outline-fadein-fast { | |
| 0% { | |
| stroke: white; | |
| fill: rgba(0,0,0, 0.3); | |
| } | |
| 30% { | |
| stroke: white; | |
| fill: rgba(0,0,0, 0.3); | |
| stroke-dasharray: 800; | |
| } | |
| 40% { | |
| fill: white; | |
| } | |
| 100% { | |
| stroke: transparent; | |
| fill: white; | |
| } | |
| } | |
| #header-content > .header1 { | |
| -webkit-animation: fadein 1s linear; | |
| animation: fadein 1s linear; | |
| -webkit-animation-fill-mode: forwards; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-delay: 4.3s; | |
| animation-delay: 4.3s; | |
| } | |
| #header-desc { | |
| -webkit-animation: fadein-bottom 1s; | |
| animation: fadein-bottom 1s; | |
| -webkit-animation-fill-mode: forwards; | |
| animation-fill-mode: forwards; | |
| -webkit-animation-delay: 5.5s; | |
| animation-delay: 5.5s; | |
| line-height: 13.5vh; | |
| } | |
| #design-text, #code-text { | |
| font-family: 'Berkshire Swash'; | |
| } | |
| #and-text-mask { | |
| opacity: 0.3; | |
| display: none; | |
| } | |
| #and-text { | |
| position: absolute; | |
| display: none; | |
| width: 0; | |
| } | |
| #skip-button { | |
| position: absolute; | |
| top: 70vh; | |
| left: 50%; | |
| -webkit-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| cursor: pointer; | |
| opacity: 0.3; | |
| font-size: 6vh; | |
| font-family: Roboto; | |
| width: 53px; | |
| -webkit-animation: fadeout 1s linear; | |
| animation: fadeout 1s linear; | |
| -webkit-animation-delay: 8s; | |
| animation-delay: 8s; | |
| -webkit-animation-fill-mode: forwards; | |
| animation-fill-mode: forwards; | |
| } | |
| #wrapper { | |
| position: relative; | |
| background-color: white; | |
| z-index: 1; | |
| text-align: center; | |
| } | |
| #wrapper::before { | |
| content: ''; | |
| position: absolute; | |
| margin-top: -25px; | |
| left: 50%; | |
| -webkit-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| border-style: solid; | |
| border-color: #ED5446 transparent #ED5446; | |
| border-width: 0 40px 30px 40px; | |
| z-index: 1; | |
| } | |
| #wrapper-handle { | |
| display: block; | |
| text-align: center; | |
| padding-top: 12px; | |
| padding-bottom: 12px; | |
| border-bottom: 1px solid #ED5446; | |
| background-color: #ED5446; | |
| font-size: 30px; | |
| overflow: hidden; | |
| } | |
| #semi-desc-marquee { | |
| margin-top: -40px; | |
| padding: 5px; | |
| white-space: nowrap; | |
| -webkit-animation: marquee 30s linear infinite; | |
| animation: marquee 30s linear infinite; | |
| color: rgba(255,255,255,0.5); | |
| font-family: roboto; | |
| } | |
| @-webkit-keyframes marquee { | |
| from { | |
| -webkit-transform: translateX(100%); | |
| transform: translateX(100%); | |
| } | |
| to { | |
| -webkit-transform: translateX(-100%); | |
| transform: translateX(-100%); | |
| } | |
| } | |
| @keyframes marquee { | |
| from { | |
| -webkit-transform: translateX(100%); | |
| transform: translateX(100%); | |
| } | |
| to { | |
| -webkit-transform: translateX(-100%); | |
| transform: translateX(-100%); | |
| } | |
| } | |
| #about-desc { | |
| position: relative; | |
| top: -50%; | |
| left: 50%; | |
| color: white; | |
| -webkit-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| font-family: 'Berkshire Swash'; | |
| color: rgba(255,255,255,0.6); | |
| z-index: 1; | |
| background: -webkit-linear-gradient(left, transparent, #ED5446, transparent); | |
| background: linear-gradient(to right, transparent, #ED5446, transparent); | |
| } | |
| /*--------------------------------------------------------------------------------*/ | |
| #about-me { | |
| padding-top: 20px; | |
| padding-bottom: 20px; | |
| background-color: rgba(200,207,180, 0.4); | |
| } | |
| #about-me-info { | |
| margin: 25px auto auto auto; | |
| width: 50%; | |
| font-family: Roboto; | |
| line-height: 25px; | |
| text-align: justify; | |
| } | |
| /*--------------------------------------------------------------------------------*/ | |
| #edu { | |
| padding-top: 20px; | |
| } | |
| .edu-school { | |
| width: 80%; | |
| margin: 38px auto auto auto; | |
| text-align: center; | |
| border-left: 6px solid rgba(93, 89, 86, 0.6); | |
| } | |
| .edu-info { | |
| display: inline-block; | |
| width: 100%; | |
| height: 38px; | |
| margin-left: 20px; | |
| font-family: Roboto; | |
| color: rgba(0,0,0,0.8); | |
| } | |
| .edu-course-name { | |
| float: left; | |
| font-weight: bold; | |
| text-align: left; | |
| } | |
| .edu-school-time { | |
| float: right; | |
| position: relative; | |
| top: 50%; | |
| -webkit-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| } | |
| .edu-grades-container { | |
| margin-top: 20px; | |
| margin-left: -25px; | |
| } | |
| .edu-course { | |
| display: inline-block; | |
| height: 58px; | |
| color: rgba(0,0,0,0.8); | |
| margin-top: 25px; | |
| margin-left: 25px; | |
| } | |
| .edu-progress { | |
| position: relative; | |
| display: inline-block; | |
| width: 58px; | |
| } | |
| .edu-course-grade { | |
| position: absolute; | |
| font-family: baloo; | |
| font-size: 24px; | |
| top: calc(50% - 2px); | |
| left: 50%; | |
| -webkit-transform: translate(-50%, -50%); | |
| transform: translate(-50%, -50%); | |
| } | |
| .edu-course-canvas { | |
| -webkit-transform: rotate(-90deg); | |
| transform: rotate(-90deg); | |
| } | |
| .edu-course-desc { | |
| display: inline-block; | |
| height: 58px; | |
| width: 311px; | |
| font-family: bitter; | |
| top: 50%; | |
| -webkit-transform: translateY(-50%); | |
| transform: translateY(-50%); | |
| text-align: left; | |
| } | |
| .edu-course-underline { | |
| height: 2px; | |
| width: inherit; | |
| background-color: rgba(0,0,0,0.6); | |
| } | |
| .edu-gpa-divider { | |
| margin-top: 37px; | |
| width: 100%; | |
| height: 3px; | |
| background: linear-gradient(to right, transparent, rgba(93, 89, 86, 0.6), transparent); | |
| } | |
| #gpa { | |
| margin: -17px auto auto auto; | |
| width: 102px; | |
| background-color: white; | |
| font-family: bitter; | |
| font-size: 20px; | |
| font-weight: bold; | |
| color: #ED5446; | |
| } | |
| .section-divider { | |
| margin-top: 55px; | |
| border-bottom: none; | |
| border-left: none; | |
| border-right: none; | |
| } | |
| .section-divider::after { | |
| content: ''; | |
| position: relative; | |
| top: 40px; | |
| border: 2px solid; | |
| border-width: 40px 40px 0 40px; | |
| border-color: #5D5956 transparent; | |
| opacity: 0.9; | |
| } | |
| /*--------------------------------------------------------------------------------*/ | |
| #skills { | |
| margin: 0 auto 50px auto; | |
| padding-top: 20px; | |
| } | |
| #skills-text::after { | |
| content: 'Not Master Yoda but still a motivated learner'; | |
| display: block; | |
| font-size: 20px; | |
| font-weight: bold; | |
| color: rgba(37, 38, 39, 0.61); | |
| } | |
| #skill-dist { | |
| margin: 60px auto; | |
| width: 50%; | |
| height: 2px; | |
| background-color: lightgray; | |
| } | |
| .skill-dist-line { | |
| position: absolute; | |
| left: 10%; | |
| -webkit-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| margin-top: -62px; | |
| border: none; | |
| border-left: 2px dotted rgba(0,0,0,0.2); | |
| } | |
| .skill-dist-line::before { | |
| content: ''; | |
| position: absolute; | |
| top: -20px; | |
| left: -24px; | |
| font-family: Roboto; | |
| opacity: 0.6; | |
| } | |
| .skill-dist-line0 { | |
| left: 24%; | |
| border-left: none; | |
| } | |
| .skill-dist-line0::before { | |
| content: 'Beginner'; | |
| } | |
| .skill-dist-line1 { | |
| left: 37%; | |
| } | |
| .skill-dist-line1::before { | |
| content: 'Familiar'; | |
| } | |
| .skill-dist-line2 { | |
| left: 50%; | |
| } | |
| .skill-dist-line2::before { | |
| content: 'Proficient'; | |
| } | |
| .skill-dist-line3 { | |
| left: 63%; | |
| } | |
| .skill-dist-line3::before { | |
| content: 'Expert'; | |
| } | |
| .skill-dist-line4 { | |
| left: 75%; | |
| border-left: none; | |
| } | |
| .skill-dist-line4::before { | |
| content: 'Master'; | |
| } | |
| #skills-content { | |
| margin-top: 25px; | |
| } | |
| .skill-divider { | |
| margin-top: 45px; | |
| height: 3px; | |
| width: 100%; | |
| background: -webkit-linear-gradient(left, transparent, lightgray, transparent); | |
| background: linear-gradient(to right, transparent, lightgray, transparent); | |
| } | |
| .skill-desc { | |
| text-align: center; | |
| margin-top: -25px; | |
| margin-bottom: 25px; | |
| } | |
| .skill-desc-title { | |
| background-color: white; | |
| padding-right: 10px; | |
| padding-left: 10px; | |
| color: rgba(0,0,0,0.4); | |
| font-size: 30px; | |
| font-family: bitter; | |
| } | |
| .skill-title { | |
| position: absolute; | |
| padding-left: 5px; | |
| line-height: 21px; | |
| color: white; | |
| } | |
| .skill-progress { | |
| margin: auto; | |
| margin-bottom: 20px; | |
| width: 50%; | |
| height: 20px; | |
| display: inline-block; | |
| text-align: left; | |
| border: 1px solid #ED5446; | |
| border-radius: 15px; | |
| overflow: hidden; | |
| } | |
| .skill-progressbar { | |
| width: 0; | |
| height: inherit; | |
| background-color: #ED5446; | |
| display: inline-block; | |
| -webkit-transition: width 1s ease-out; | |
| transition: width 1s ease-out; | |
| } | |
| .width95 { | |
| width: 95%; | |
| } | |
| .width90 { | |
| width: 90%; | |
| } | |
| .width85 { | |
| width: 85%; | |
| } | |
| .width80 { | |
| width: 80%; | |
| } | |
| .width65 { | |
| width: 65%; | |
| } | |
| .width40 { | |
| width: 40%; | |
| } | |
| .skill-progressbar-gray { | |
| background-color: #5D5956; | |
| } | |
| .skill-gray { | |
| border-color: #5D5956; | |
| } | |
| .skill-progressbar-white { | |
| background-color: lightgray; | |
| } | |
| .skill-white { | |
| border-color: lightgray; | |
| } | |
| .gray-color { | |
| color: #5D5956; | |
| } | |
| .skill-extra { | |
| margin-top: 20px; | |
| } | |
| .skill-extra-title { | |
| font-size: 22px; | |
| color: rgba(0,0,0,0.4); | |
| } | |
| .skill-extra-item { | |
| margin-top: 25px; | |
| margin-right: 25px; | |
| display: inline-block; | |
| font-family: Roboto; | |
| font-size: 21px; | |
| color: #5D5956; | |
| } | |
| /*-----------------------------------------------------------------------------*/ | |
| #projects { | |
| text-align: center; | |
| background-color: #5D5956; | |
| } | |
| #projects-text-svg { | |
| width: 550px; | |
| height: 550px; | |
| margin-bottom: 100px; | |
| } | |
| #cir1 { | |
| opacity: 0; | |
| -webkit-transform-origin: center; | |
| transform-origin: center; | |
| stroke-width: 5px; | |
| stroke: white; | |
| stroke-dasharray: 1500; | |
| stroke-dashoffset: 1500; | |
| -webkit-transform: scale(0.2); | |
| transform: scale(0.2); | |
| } | |
| .stroke-circle { | |
| -webkit-animation: dash 1s cubic-bezier(0.69, 1.13, 0.01, 1.15); | |
| animation: dash 1s cubic-bezier(0.69, 1.13, 0.01, 1.15); | |
| -webkit-animation-fill-mode: forwards; | |
| animation-fill-mode: forwards; | |
| } | |
| @-webkit-keyframes dash { | |
| to { | |
| opacity: 1; | |
| stroke-dashoffset: 0; | |
| -webkit-transform: rotate(-90deg) scale(0.8); | |
| transform: rotate(-90deg) scale(0.8); | |
| } | |
| } | |
| @keyframes dash { | |
| to { | |
| opacity: 1; | |
| stroke-dashoffset: 0; | |
| -webkit-transform: rotate(-90deg) scale(0.8); | |
| transform: rotate(-90deg) scale(0.8); | |
| } | |
| } | |
| #cir2 { | |
| -webkit-transform: scale(0); | |
| transform: scale(0); | |
| -webkit-transform-origin: center; | |
| transform-origin: center; | |
| fill-opacity: 0.4; | |
| } | |
| .pop-circle { | |
| fill-opacity: 0; | |
| -webkit-transform: scale(0.2); | |
| transform: scale(0.2); | |
| -webkit-animation: pop-circle 1s cubic-bezier(0.69, 1.13, 0.01, 1.15); | |
| animation: pop-circle 1s cubic-bezier(0.69, 1.13, 0.01, 1.15); | |
| -webkit-animation-delay: 0.3s; | |
| animation-delay: 0.3s; | |
| -webkit-animation-fill-mode: forwards; | |
| animation-fill-mode: forwards; | |
| } | |
| @-webkit-keyframes pop-circle { | |
| to { | |
| fill-opacity: 0.4; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes pop-circle { | |
| to { | |
| fill-opacity: 0.4; | |
| -webkit-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| } | |
| #projects-text { | |
| font-family: roboto; | |
| font-size: 50px; | |
| font-weight: bolder; | |
| stroke-dasharray: 0; | |
| stroke-dashoffset: 100; | |
| } | |
| .text-outline { | |
| -webkit-animation: text-outline-fadein 5s cubic-bezier(0.69, 1.13, 0.01, 1.15); | |
| animation: text-outline-fadein 5s cubic-bezier(0.69, 1.13, 0.01, 1.15); | |
| -webkit-animation-fill-mode: forwards; | |
| animation-fill-mode: forwards; | |
| } | |
| @-webkit-keyframes text-outline-fadein { | |
| 0% { | |
| stroke: white; | |
| } | |
| to { | |
| stroke-dasharray: 100; | |
| stroke-dashoffset: 0; | |
| } | |
| 30% { | |
| stroke: white; | |
| fill: transparent; | |
| } | |
| 100% { | |
| stroke: transparent; | |
| fill: white; | |
| } | |
| } | |
| @keyframes text-outline-fadein { | |
| 0% { | |
| stroke: white; | |
| } | |
| to { | |
| stroke-dasharray: 100; | |
| stroke-dashoffset: 0; | |
| } | |
| 30% { | |
| stroke: white; | |
| fill: transparent; | |
| } | |
| 100% { | |
| stroke: transparent; | |
| fill: white; | |
| } | |
| } | |
| #projects-tagline-text { | |
| font-family: roboto; | |
| font-size: 25px; | |
| fill: white; | |
| opacity: 0; | |
| } | |
| .semi-text-fadein { | |
| -webkit-animation: semi-fadein 1s linear; | |
| animation: semi-fadein 1s linear; | |
| -webkit-animation-delay: 2s; | |
| animation-delay: 2s; | |
| -webkit-animation-fill-mode: forwards; | |
| animation-fill-mode: forwards; | |
| } | |
| #projects-scroller { | |
| display: inline-block; | |
| text-align: left; | |
| width: 100%; | |
| } | |
| #projects-carousel { | |
| overflow: hidden; | |
| width: 100%; | |
| float: left; | |
| height: inherit; | |
| } | |
| #projects-carousel-viewport { | |
| width: 100%; | |
| overflow: hidden; | |
| height: inherit; | |
| } | |
| #projects-carousel-container { | |
| display: table; | |
| width: 300%; | |
| height: inherit; | |
| } | |
| #projects-carousel-container div { | |
| display: table-cell; | |
| text-align: center; | |
| vertical-align: middle; | |
| } | |
| #projects-carousel-container img { | |
| border: 0.65vw solid rgba(0,0,0,0.3); | |
| border-radius: 12px; | |
| } | |
| .carousel-img-width { | |
| opacity: 1; | |
| width: 65%; | |
| } | |
| .carousel-img-width-alt { | |
| opacity: 0; | |
| width: 10%; | |
| } | |
| .carousel-scroll-button { | |
| position: absolute; | |
| width: 7%; | |
| height: inherit; | |
| border: none; | |
| z-index: 2; | |
| cursor: pointer; | |
| font-family: 'Josefin Sans'; | |
| font-size: 6vh; | |
| letter-spacing: -1.5vh; | |
| color: white; | |
| background-color: transparent; | |
| } | |
| .carousel-scroll-button:focus { | |
| outline: none; | |
| font-weight: 900; | |
| } | |
| .stick-left { | |
| left: 0; | |
| } | |
| .stick-right { | |
| right: 0; | |
| } | |
| #project-desc { | |
| width: 100%; | |
| margin-top: -3px; | |
| padding-top: 14px; | |
| padding-bottom: 22px; | |
| background-color: rgba(0,0,0,0.4); | |
| color: white; | |
| font-family: Roboto; | |
| } | |
| .project-desc-fixed { | |
| position: fixed; | |
| bottom: 0; | |
| background-color: #373634 !important; | |
| } | |
| .project-name { | |
| font-family: 'Baloo'; | |
| font-size: 45px; | |
| } | |
| .project-attr-div { | |
| margin-top: 13px; | |
| font-size: 18px; | |
| } | |
| .project-attr-text { | |
| font-weight: bold; | |
| } | |
| .bottom-padding { | |
| padding-bottom: 50px; | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| #contact { | |
| margin: 0 auto 50px auto; | |
| text-align: center; | |
| width: 100%; | |
| } | |
| #contact-text { | |
| margin: 35px auto 55px auto; | |
| } | |
| .contact-label { | |
| display: block; | |
| position: relative; | |
| opacity: 0; | |
| cursor: text; | |
| margin-left: 1px; | |
| margin-top: 13px; | |
| text-align: left; | |
| font-size: 18px; | |
| font-family: Roboto; | |
| font-weight: bold; | |
| top: 26px; | |
| -webkit-transition: all 0.2s; | |
| transition: all 0.2s; | |
| color: rgba(93, 89, 86, 0.8); | |
| } | |
| .fadein-bottom { | |
| top: 0px; | |
| opacity: 1; | |
| cursor: initial; | |
| } | |
| #contact-form-container { | |
| margin: auto; | |
| width: 45%; | |
| } | |
| .contact-form { | |
| display: block; | |
| width: 100%; | |
| font-family: Roboto; | |
| font-size: 25px; | |
| border: none; | |
| border-bottom: 2px solid rgba(93, 89, 86, 0.65); | |
| color: #5D5956; | |
| } | |
| .contact-form:focus { | |
| outline: none; | |
| } | |
| #contact-message { | |
| resize: vertical; | |
| height: 7em; | |
| } | |
| #contact button { | |
| margin: auto; | |
| margin-top: 38px; | |
| padding: 10px 15px 10px 15px; | |
| cursor: pointer; | |
| background-color: #5D5956; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| font-size: 18px; | |
| -webkit-transition: all 400ms linear; | |
| transition: all 400ms linear; | |
| } | |
| #contact button:hover { | |
| background-color: #332f2c; | |
| outline: none; | |
| box-shadow: 0 0 0 2pt #5D5956; | |
| } | |
| #profiles-text { | |
| margin-top: 50px; | |
| margin-bottom: 25px; | |
| background-color: #E1E1E1; | |
| font-family: Roboto; | |
| font-size: 30px; | |
| color: rgba(37, 38, 39, 0.86); | |
| } | |
| .profile-img-container { | |
| margin-top:20px; | |
| } | |
| .profile-img { | |
| width: 15%; | |
| } | |
| /*----------------------------------------------------------------------------*/ | |
| #site-info { | |
| background-color: #18181A; | |
| margin-top: 5vh; | |
| width: 100%; | |
| color: rgba(255,255,255,0.7); | |
| font-family: roboto; | |
| padding-top: 8px; | |
| padding-bottom: 8px; | |
| } | |
| .fadein { | |
| opacity: 0; | |
| -webkit-animation: fadein 1s; | |
| animation: fadein 1s; | |
| -webkit-animation-delay: 0.5s; | |
| animation-delay: 0.5s; | |
| -webkit-animation-fill-mode: forwards; | |
| animation-fill-mode: forwards; | |
| } | |
| .fadein-fast { | |
| opacity: 0; | |
| -webkit-animation: fadein 500ms; | |
| animation: fadein 500ms; | |
| -webkit-animation-fill-mode: forwards; | |
| animation-fill-mode: forwards; | |
| } | |
| .fadein-top { | |
| -webkit-animation: fadein-top 1s; | |
| animation: fadein-top 1s; | |
| } | |
| @-webkit-keyframes semi-fadein { | |
| to { | |
| opacity: 0.4; | |
| } | |
| } | |
| @keyframes semi-fadein { | |
| to { | |
| opacity: 0.4; | |
| } | |
| } | |
| @-webkit-keyframes fadein { | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes fadein { | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| @-webkit-keyframes fadein-top { | |
| to { | |
| opacity: 1; | |
| margin-top: 0px; | |
| } | |
| } | |
| @keyframes fadein-top { | |
| to { | |
| opacity: 1; | |
| margin-top: 0px; | |
| } | |
| } | |
| @-webkit-keyframes fadein-bottom { | |
| from { | |
| opacity: 0; | |
| margin-top: 20px; | |
| } | |
| to { | |
| opacity: 1; | |
| margin-top: 0px; | |
| } | |
| } | |
| @keyframes fadein-bottom { | |
| from { | |
| opacity: 0; | |
| margin-top: 20px; | |
| } | |
| to { | |
| opacity: 1; | |
| margin-top: 0px; | |
| } | |
| } | |
| .fadeout { | |
| -webkit-animation: fadeout 1s linear; | |
| animation: fadeout 1s linear; | |
| -webkit-animation-delay: 1s; | |
| animation-delay: 1s; | |
| -webkit-animation-fill-mode: forwards; | |
| animation-fill-mode: forwards; | |
| } | |
| .fadeout-fast { | |
| -webkit-animation: fadeout 500ms linear; | |
| animation: fadeout 500ms linear; | |
| -webkit-animation-fill-mode: forwards; | |
| animation-fill-mode: forwards; | |
| } | |
| @-webkit-keyframes fadeout { | |
| to { | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes fadeout { | |
| to { | |
| opacity: 0; | |
| } | |
| } | |
| @media screen and (max-width: 700px) { | |
| #nav { | |
| overflow: visible; | |
| } | |
| .initials { | |
| left: 50%; | |
| -webkit-transform: translateX(-50%); | |
| transform: translateX(-50%); | |
| border-bottom: 2px solid white; | |
| } | |
| .initials-alt { | |
| border: 2px solid white; | |
| } | |
| #menu-container-triangle { | |
| position: relative; | |
| display: block; | |
| width: 0; | |
| top: 0; | |
| margin-top: 0; | |
| margin: auto; | |
| border-width: 0 1.6vw 1.6vw 1.6vw; | |
| border-color: black transparent black; | |
| border-style: solid; | |
| } | |
| .height0 { | |
| height: 0 !important; | |
| } | |
| #menu-container { | |
| display: block; | |
| position: absolute; | |
| overflow: hidden; | |
| top: 6.7vh; | |
| width: 100%; | |
| height: 620%; | |
| left: 0; | |
| -webkit-transition-duration: 250ms; | |
| transition-duration: 250ms; | |
| } | |
| #nav ul { | |
| position: relative; | |
| background-color: black; | |
| width: 100%; | |
| top: 0; | |
| padding: 0.6vh 0 0 0; | |
| } | |
| #nav li { | |
| display: block; | |
| padding-bottom: 0; | |
| margin-top: 15px; | |
| -webkit-transition: none; | |
| transition: none; | |
| } | |
| #nav li:hover { | |
| border-bottom-color: white !important; | |
| } | |
| .nav-triangle { | |
| display: none; | |
| } | |
| #header { | |
| height: 35vh; | |
| } | |
| #header-content { | |
| line-height: 8vh; | |
| height: 35vh; | |
| margin-top: 6vh; | |
| } | |
| .header1 { | |
| font-size: 8vh; | |
| } | |
| .header4 { | |
| font-size: 35px; | |
| } | |
| #skip-button { | |
| width: 8vw; | |
| } | |
| #wrapper::before { | |
| border-width: 0 25px 15px 25px; | |
| margin-top: -15px; | |
| } | |
| .edu-school { | |
| width: 100%; | |
| border-left: none; | |
| } | |
| .edu-info { | |
| margin-left: 0; | |
| } | |
| .edu-course-name { | |
| text-align: center; | |
| float: none; | |
| } | |
| .edu-school-time { | |
| float: none; | |
| } | |
| .edu-course { | |
| text-align: center; | |
| } | |
| .edu-progress { | |
| display: block; | |
| margin: auto; | |
| } | |
| .edu-course-desc { | |
| display: block; | |
| margin-top: 30px; | |
| text-align: center; | |
| font-size: 12px; | |
| width: 240px; | |
| } | |
| #skills-text::after { | |
| font-size: 14px; | |
| } | |
| .skill-dist-line::before { | |
| font-size: 12px; | |
| font-weight: bold; | |
| } | |
| .skill-dist-line3::before { | |
| left: -16px; | |
| } | |
| #projects-text-svg { | |
| width: 88vw; | |
| height: 88vw; | |
| } | |
| #cir1 { | |
| opacity: 1; | |
| } | |
| @-webkit-keyframes dash { | |
| 70% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0; | |
| stroke-dashoffset: 0; | |
| -webkit-transform: rotate(-90deg) scale(0.8); | |
| transform: rotate(-90deg) scale(0.8); | |
| } | |
| } | |
| @keyframes dash { | |
| 70% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0; | |
| stroke-dashoffset: 0; | |
| -webkit-transform: rotate(-90deg) scale(0.8); | |
| transform: rotate(-90deg) scale(0.8); | |
| } | |
| } | |
| #projects-text { | |
| font-size: 30px; | |
| } | |
| #projects-tagline-text { | |
| font-size: 15px; | |
| } | |
| .carousel-img-width { | |
| width: 100%; | |
| } | |
| #projects-carousel-container img { | |
| border-left: none; | |
| border-right: none; | |
| } | |
| .carousel-scroll-button { | |
| background-color: rgba(0,0,0,0.3); | |
| width: 12%; | |
| z-index: 1; | |
| } | |
| #project-desc { | |
| z-index: 2; | |
| } | |
| #contact-form-container { | |
| width: 80%; | |
| } | |
| .profile-img { | |
| width: 48%; | |
| } | |
| } | |
| @media screen and (max-height: 500px) { | |
| #skip-button { | |
| width: 30px; | |
| } | |
| .initials { | |
| top: -4em; | |
| font-size: 1.1em; | |
| padding: 0.2em; | |
| } | |
| #menu-container { | |
| top: 2.3em; | |
| height: 706%; | |
| } | |
| #nav { | |
| height: 35px; | |
| } | |
| #nav ul { | |
| margin-top: -60px; | |
| } | |
| #nav li { | |
| font-size: 1.5em; | |
| margin-top: 0.4em; | |
| padding-bottom: 0.6em; | |
| } | |
| .nav-triangle { | |
| display: none; | |
| } | |
| #wrapper { | |
| overflow-x: auto; | |
| } | |
| } | |
| @media screen and (min-width: 700px) and (max-height: 600px) { | |
| .header1 { | |
| font-size: 8vh; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment