DarkFolio 0.1.0

data/assets/404.js

@@ -0,0 +1,58 @@
+window.onload = function() {
+  if(performance.navigation.type == 2){
+   location.reload(true);
+  }
+  var $all_msg = $('.big-header');
+  var $wordList = "Uh Oh! You hit a 404".split("");
+  $.each($wordList, function(idx, elem) {
+    if (idx > "Uh Oh! You hit a".length) {
+      var newEL = $("<span/>").text(elem).css({
+        opacity: 0,
+        color: $(".color").text()
+      });
+    } else {
+      var newEL = $("<span/>").text(elem).css({
+        opacity: 0,
+      });
+    }
+    //append it to the welcome message
+    newEL.appendTo($all_msg);
+    //set the delay on the animation for this element
+    newEL.delay(idx * 33);
+    //animate the opacity back to full 1
+    newEL.animate({
+      opacity: 1
+    }, 500);
+  });
+  $(".sdc").fadeIn(200);
+  //
+  gsap.registerPlugin(ScrollTrigger)
+  gsap.to(".pagebody", {
+    scrollTrigger: {
+      trigger: ".divheader",
+      start: "bottom-=300 top",
+      end: "bottom-=200 top",
+      scrub: true,
+      toggleActions: "restart none reverse none"
+    },
+    opacity: 1,
+    transform: "translateY(-200px)",
+  })
+  gsap.to(".divheader", {
+    scrollTrigger: {
+      trigger: ".divheader",
+      start: "bottom-=300 top",
+      end: "bottom-=200 top",
+      markers: true,
+      id: "light",
+      scrub: true,
+      toggleActions: "restart none reverse none"
+    },
+    backgroundColor: "white",
+  })
+}
+
+$(window).on('beforeunload', function() {
+  $('body').hide();
+  $(window).scrollTop(0);
+});

data/assets/blog.js

@@ -0,0 +1,50 @@
+window.onload = function() {
+  if(performance.navigation.type == 2){
+   location.reload(true);
+  }
+  var $all_msg = $('.big-header');
+  var $wordList = ($('.author').text() + "'s blog").split("");
+  $.each($wordList, function(idx, elem) {
+    //create a span for the letter and set opacity to 0
+    if (idx < $wordList.length - 7) {
+      var newEL = $("<span/>").text(elem).css({
+        opacity: 0,
+        color: $(".color").text()
+      });
+    } else {
+      var newEL = $("<span/>").text(elem).css({
+        opacity: 0,
+      });
+    }
+    //append it to the welcome message
+    newEL.appendTo($all_msg);
+    //set the delay on the animation for this element
+    newEL.delay(idx * 33);
+    //animate the opacity back to full 1
+    newEL.animate({
+      opacity: 1
+    }, 500);
+  });
+  $(".sdc").fadeIn(200);
+  //
+  gsap.registerPlugin(ScrollTrigger)
+  var cards = gsap.utils.toArray(".card")
+  cards.forEach((item) => {
+    gsap.to(item, {
+      scrollTrigger: {
+        trigger: item,
+        start: "top bottom",
+        end: "top bottom-=200",
+        scrub: true
+      },
+      opacity: 1,
+      transform: "translateY(0px)",
+    })
+  });
+
+}
+
+$(window).on('beforeunload', function() {
+  $('body').hide();
+  $(window).scrollTop(0);
+});

data/assets/index.js

@@ -0,0 +1,59 @@
+window.onload = function() {
+  if(performance.navigation.type == 2){
+   location.reload(true);
+ }
+  var $all_msg = $('.big-header');
+  var $wordList = ("Hello 👋, I am " + $('.author').text()).split("");
+  $wordList[6] = "👋"
+  delete $wordList[7]
+  $.each($wordList, function(idx, elem) {
+    //create a span for the letter and set opacity to 0
+    if (idx > 14) {
+      var newEL = $("<span/>").text(elem).css({
+        opacity: 0,
+        color: $(".color").text()
+      });
+    } else {
+      var newEL = $("<span/>").text(elem).css({
+        opacity: 0,
+      });
+    }
+    //append it to the welcome message
+    newEL.appendTo($all_msg);
+    //set the delay on the animation for this element
+    newEL.delay(idx * 33);
+    //animate the opacity back to full 1
+    newEL.animate({
+      opacity: 1
+    }, 500);
+  });
+  $(".sdc").fadeIn(200);
+  //
+  gsap.registerPlugin(ScrollTrigger)
+  gsap.to(".pagebody", {
+    scrollTrigger: {
+      trigger: ".divheader",
+      start: "bottom-=300 top",
+      end: "bottom-=200 top",
+      scrub: true,
+      toggleActions: "restart none reverse none"
+    },
+    opacity: 1,
+    transform: "translateY(-200px)",
+  })
+  gsap.to(".divheader", {
+    scrollTrigger: {
+      trigger: ".divheader",
+      start: "bottom-=300 top",
+      end: "bottom-=200 top",
+      scrub: true,
+      toggleActions: "restart none reverse none"
+    },
+    backgroundColor: "white",
+  })
+}
+
+$(window).on('beforeunload', function() {
+  $('body').hide();
+  $(window).scrollTop(0);
+});

data/assets/main.scss

@@ -0,0 +1,45 @@
+---
+---
+
+@import "syntax";
+
+.divheader {
+  transform: background-color 2s;
+  background-color:#292b2c
+}
+.sdc {
+  animation: sdc 2s linear infinite;
+  -webkit-animation: sdc 2s linear infinite;
+  -ms-animation: sdc 2s linear infinite;
+}
+.pagebody {
+  opacity: 0;
+  transform: translateY(200px);
+}
+@keyframes sdc {
+  0% {  transform: translateY(100px); opacity: 1 }
+  50% { transform: translateY(0px); opacity: 0 }
+  100% { transform: translateY(100px); opacity: 1 }
+}
+.card {
+  opacity: 0;
+  transform: translateY(200px);
+}
+
+.post-list{
+  text-align: center;
+  justify-content: center;
+  padding-top:2.5em;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  -ms-flex-wrap:wrap;flex-wrap:
+  wrap;-webkit-box-flex:1;
+  -ms-flex:1 0 auto;
+  flex:1 0 auto
+}
+@media only screen and (min-width: 48em){
+  post-list {
+    padding-top:5em
+  }
+}

data/assets/post.js

@@ -0,0 +1,50 @@
+window.onload = function() {
+  if(performance.navigation.type == 2){
+   location.reload(true);
+ }
+  var $all_msg = $('.big-header');
+  var $wordList = $('title').text().split(" | " + $('.author').text())[0].split("");
+  $.each($wordList, function(idx, elem) {
+    //create a span for the letter and set opacity to 0
+    var newEL = $("<span/>").text(elem).css({
+      opacity: 0,
+    });
+    //append it to the welcome message
+    newEL.appendTo($all_msg);
+    //set the delay on the animation for this element
+    newEL.delay(idx * 33);
+    //animate the opacity back to full 1
+    newEL.animate({
+      opacity: 1
+    }, 500);
+  });
+  $(".sdc").fadeIn(200);
+  //
+  gsap.registerPlugin(ScrollTrigger)
+  gsap.to(".pagebody", {
+    scrollTrigger: {
+      trigger: ".divheader",
+      start: "bottom-=300 top",
+      end: "bottom-=200 top",
+      scrub: true,
+      toggleActions: "restart none reverse none"
+    },
+    opacity: 1,
+    transform: "translateY(-50px)",
+  })
+  gsap.to(".divheader", {
+    scrollTrigger: {
+      trigger: ".divheader",
+      start: "bottom-=300 top",
+      end: "bottom-=200 top",
+      scrub: true,
+      toggleActions: "restart none reverse none"
+    },
+    backgroundColor: "white",
+  })
+}
+
+$(window).on('beforeunload', function() {
+  $('body').hide();
+  $(window).scrollTop(0);
+});

data/assets/projects.js

@@ -0,0 +1,50 @@
+window.onload = function() {
+  if(performance.navigation.type == 2){
+   location.reload(true);
+  }
+  var $all_msg = $('.big-header');
+  var author = $(".author").text()
+  var result = []
+  var texts = []
+  var $wordList = (author + "'s Projects").split("");
+  $.each($wordList, function(idx, elem) {
+    if (idx < $wordList.length - 11) {
+      var newEL = $("<span/>").text(elem).css({
+        opacity: 0,
+        color: $(".color").text()
+      });
+    } else {
+      var newEL = $("<span/>").text(elem).css({
+        opacity: 0,
+      });
+    }
+    //append it to the welcome message
+    newEL.appendTo($all_msg);
+    //set the delay on the animation for this element
+    newEL.delay(idx * 33);
+    //animate the opacity back to full 1
+    newEL.animate({
+      opacity: 1
+    }, 500);
+  });
+  $(".sdc").fadeIn(200);
+  //
+  gsap.registerPlugin(ScrollTrigger)
+  var cards = gsap.utils.toArray(".card")
+  cards.forEach((item) => {
+    gsap.to(item, {
+      scrollTrigger: {
+        trigger: item,
+        start: "center bottom",
+      },
+      opacity: 1,
+      transform: "translateY(0px)",
+    })
+  });
+
+}
+
+$(window).on('beforeunload', function() {
+  $('body').hide();
+  $(window).scrollTop(0);
+});

metadata

@@ -0,0 +1,83 @@
+--- !ruby/object:Gem::Specification
+name: DarkFolio
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- RedYetiDev
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2021-02-24 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.2'
+description: |2
+    DarkFolio is a Jekyll Theme made by RedYetiDev. The theme contains a blog page, a projects page and a main page.
+    The blog page allows you to post posts using markdown. The projects allows you to show off your projects and creations. On the main page
+    The main page shows a small paragraph about you, and an avatar.
+email: redyetidev@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- README.md
+- _config.yml
+- _includes/head.html
+- _layouts/404.html
+- _layouts/blog.html
+- _layouts/index.html
+- _layouts/post.html
+- _layouts/projects.html
+- _posts/2020-02-23-example-post.md
+- _sass/syntax.scss
+- assets/404.js
+- assets/blog.js
+- assets/index.js
+- assets/main.scss
+- assets/post.js
+- assets/projects.js
+homepage: https://redyetidev.github.io/DarkFolio
+licenses:
+- Mozzila Public License 2.0
+metadata:
+  bug_tracker_uri: https://github.com/redyetidev/DarkFolio/issues
+  changelog_uri: https://github.com/redyetidev/DarkFolio/CHANGELOG.md
+  documentation_uri: https://redyetidev.github.io/DarkFolio/DarkFolio
+  homepage_uri: https://redyetidev.github.io/DarkFolio/
+  source_code_uri: https://github.com/redyetidev/DarkFolio
+post_install_message: Thanks for installing DarkFolio, If you need help, check out
+  the bug tracker.
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.0.3
+signing_key:
+specification_version: 4
+summary: The DarkFolio theme is a simple theme containing a index page, blog page,
+  and projects page
+test_files: []