diff --git a/_sass/site/color-theme.scss b/_sass/site/color-theme.scss index 585baa3..385403d 100644 --- a/_sass/site/color-theme.scss +++ b/_sass/site/color-theme.scss @@ -2,6 +2,7 @@ --color-red: #ff556e; --color-purple:#4844a3; + --color-faint-purple:#4844a350; --color-light-purple: #8a8ed8; --color-dark-purple:#342d71; diff --git a/_sass/site/home.scss b/_sass/site/home.scss index 308840e..aa6285c 100644 --- a/_sass/site/home.scss +++ b/_sass/site/home.scss @@ -1,55 +1,73 @@ .color-hero { - height: 108vh; - background-color: var(--color-purple) !important; + height: 108vh; + background-color: var(--color-purple) !important; } .color-hero .hello { - padding-top: 30vh; - color: white; + padding-top: 30vh; + color: white; } .home-secondary-panel { - transform: translateY(-50px); - background-color: white; - min-height: 800; + transform: translateY(-50px); + background-color: white; + min-height: 800; } .home-third-panel { - transform: translateY(-50px); - background-color: var(--color-dark-blue) !important; - min-height: 500px; - color: white; + transform: translateY(-50px); + background-color: var(--color-dark-blue) !important; + min-height: 500px; + color: white; } .home-third-panel a { - color: var(--color-blue) !important; + color: var(--color-blue) !important; } .home-content { - padding-top: 6rem; - padding-bottom: 6rem; + padding-top: 6rem; + padding-bottom: 6rem; } .header-space { - padding-top: 6rem; + padding-top: 6rem; } .home-project { - /* min-height: 310px; */ - margin-top: 1rem; + /* min-height: 310px; */ + margin-top: 1rem; } .hello { - #callsign { - color: rgba(255, 255, 255, .75); + #callsign { + color: rgba(255, 255, 255, 0.75); - a { - color: rgba(255, 255, 255, .75); - } - - a:hover { - color: white; - text-decoration: none; - } + a { + color: rgba(255, 255, 255, 0.75); } -} \ No newline at end of file + + a:hover { + color: white; + text-decoration: none; + } + } +} + +.border-loop { + // border-color: var(--color-faint-purple); + // border-width: 1px; + // border-radius: 15px; + border:none; +} + +.border-loop-right { + border-left: none; + border-bottom: none; + border-top-left-radius: 0px; +} + +.border-loop-left { + border-right: none; + border-bottom: none; +} diff --git a/assets/css/easyScrollDots.min.css b/assets/css/easyScrollDots.min.css new file mode 100644 index 0000000..2469ddd --- /dev/null +++ b/assets/css/easyScrollDots.min.css @@ -0,0 +1,12 @@ +/* Easy Scroll Dots 1.1.5 --- https://github.com/Superhands89/EasyScrollDots +* Quickly add anchor points throughout your web page/application and have navigational dots automatically appear +* in a fixed position on the side of the page. This allows the user to click to scroll though sections of the page, +* and it updates as they scroll. +* +* By Superhands89 2019-2021 --- https://github.com/Superhands89/ +* +* GPLv3 Licence for open source use only +* or purchase a Single Commercial License at https://gum.co/TdtEX +* or purchase an Extended Commercial License at https://gum.co/NGfmlw +*/ +.scroll-indicator-controller{position:fixed;top:50vh;transform:translate(0,-50%);right:10px;z-index:999}.scroll-indicator-controller.indi-mobile>div span{display:none}@media (min-width:1025px){.scroll-indicator-controller{right:20px}}.scroll-indicator-controller>div{width:20px;height:20px;position:relative;border-radius:50%;border:1px solid tomato;background:rgba(0,0,0,.25);margin:0 0 10px 0;cursor:pointer;transition:background .4s ease;will-change:transition}.scroll-indicator-controller>div span{color:tomato;position:absolute;right:calc(100% + 8px);white-space:nowrap;top:50%;font-family:arial,sans-serif;font-size:16px;line-height:17px;width:0;overflow:hidden;opacity:0;transform:translateY(-50%) translateX(10px);transition:all .4s ease;will-change:transition}@media (hover:none){.scroll-indicator-controller>div span{display:none}}.scroll-indicator-controller>div span:after{content:"-----";padding-left:5px;letter-spacing:-2px;font-family:arial,sans-serif;vertical-align:text-top;line-height:14px}@media (hover:hover),(-ms-high-contrast:none),(-ms-high-contrast:active){.scroll-indicator-controller>div:hover span{width:auto;opacity:1;overflow:visible;transform:translateY(-50%) translateX(0)}}.scroll-indicator-controller>div.active{background:tomato;border-color:rgba(0,0,0,.25)}@supports (-ms-ime-align:auto){.scroll-indicator-controller>div span{transition:opacity .4s ease}} diff --git a/assets/js/dotnav.min.js b/assets/js/dotnav.min.js new file mode 100644 index 0000000..65db1a3 --- /dev/null +++ b/assets/js/dotnav.min.js @@ -0,0 +1 @@ +const dotNav=(e,t)=>{(e=>{let t=document.getElementsByTagName(e),n=window.innerHeight;const o=()=>{for(let e=0;e{for(let e=0;e{i=document.getElementsByClassName("in-viewport"),s=document.getElementsByClassName("dots"),visNum=i.length;let e=visNum-1;for(let e=0;e{let n=e.currentTarget.dataset.sec;!function(e,t=200,n="linear",o){const s={linear:e=>e,easeInQuad:e=>e*e,easeOutQuad:e=>e*(2-e),easeInOutQuad:e=>e<.5?2*e*e:(4-2*e)*e-1,easeInCubic:e=>e*e*e,easeOutCubic:e=>--e*e*e+1,easeInOutCubic:e=>e<.5?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1,easeInQuart:e=>e*e*e*e,easeOutQuart:e=>1- --e*e*e*e,easeInOutQuart:e=>e<.5?8*e*e*e*e:1-8*--e*e*e*e,easeInQuint:e=>e*e*e*e*e,easeOutQuint:e=>1+--e*e*e*e*e,easeInOutQuint:e=>e<.5?16*e*e*e*e*e:1+16*--e*e*e*e*e},i=window.pageYOffset,a="now"in window.performance?performance.now():(new Date).getTime(),c=Math.max(document.body.scrollHeight,document.body.offsetHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight,document.documentElement.offsetHeight),d=window.innerHeight||document.documentElement.clientHeight||document.getElementsByTagName("body")[0].clientHeight,l="number"==typeof e?e:e.offsetTop,m=Math.round(c-le?(l&&(clearTimeout(l),l=null),c=a,d=t.apply(n,i),l||(n=i=null)):l||!1===o.trailing||(l=setTimeout(s,r)),d}}let dotFixedNavPresent=!1,dotFixedNavId="",dotFixedNavUp=!1,dotOffset=0;function easyScrollDots(t){let e=document.querySelectorAll(".scroll-indicator");if(!0===t.fixedNav&&(dotFixedNavPresent=!0),dotFixedNavId=""!==t.fixedNavId&&t.fixedNavId,!0===t.fixedNavUpward&&(dotFixedNavUp=!0),t.offset>0&&(dotOffset=t.offset),e.length){const t='
';document.querySelector("body").lastElementChild.insertAdjacentHTML("afterend",t);const o=document.querySelector(".scroll-indicator-controller");void 0===window.orientation&&-1===navigator.userAgent.indexOf("IEMobile")||o.classList.add("indi-mobile");const n=Array.prototype.slice.call(e);n.forEach(function(t,e){const n=t.getAttribute("id"),i=t.getAttribute("data-scroll-indicator-title");let d="";0==e&&(d="active"),o.lastElementChild.insertAdjacentHTML("afterend",'
"+i+"
")});const i=o.querySelectorAll("[data-indi-controller-id]"),d=dotsThrottle(function(){let t={};n.forEach(function(e){const o=e.getAttribute("id"),n=e.getBoundingClientRect().top;t[o]=n});const e=Object.keys(t).map(function(e){return t[e]});Object.keys(t).forEach(function(n){t[n]==function(){const t=e.filter(function(t){return t>-150});return Math.min.apply(null,t)}()&&(Array.prototype.forEach.call(i,function(t){t.classList.contains("active")&&t.classList.remove("active")}),o.querySelector('[data-indi-controller-id="'+n+'"]').classList.add("active"))})},300);window.addEventListener("scroll",d)}}function scrollIndiClicked(t){if(window.jQuery){const e=$("html, body");if(!0===dotFixedNavPresent&&dotFixedNavId.length){const o=document.getElementById(dotFixedNavId).clientHeight,n=$("#"+t);if(!0===dotFixedNavUp){e.animate({scrollTop:n.offset().top-dotOffset},700);const t=document.body.getBoundingClientRect().top;setTimeout(function(){document.body.getBoundingClientRect().top>t&&e.animate({scrollTop:n.offset().top-o-dotOffset},400)},400)}else e.animate({scrollTop:n.offset().top-o-dotOffset},700)}else e.animate({scrollTop:$("#"+t).offset().top-dotOffset},700)}else if(!0===dotFixedNavPresent&&dotFixedNavId.length){const e=document.getElementById(dotFixedNavId).clientHeight,o=document.getElementById(t);if(!0===dotFixedNavUp){window.scrollTo({top:o.offsetTop-dotOffset,left:0,behavior:"smooth"});const t=document.body.getBoundingClientRect().top;setTimeout(function(){document.body.getBoundingClientRect().top>t&&window.scrollTo({top:o.offsetTop-e-dotOffset,left:0,behavior:"smooth"})},400)}else window.scrollTo({top:o.offsetTop-e-dotOffset,left:0,behavior:"smooth"})}else window.scrollTo({top:document.getElementById(t).offsetTop-dotOffset,left:0,behavior:"smooth"})} diff --git a/index.html b/index.html index 3d64e21..2a3b3f8 100644 --- a/index.html +++ b/index.html @@ -6,10 +6,10 @@ uses: - + -{% include head.html %} - + + @@ -26,79 +43,125 @@ uses: {% include nav.html %} -
-
-

Hi,

-

I am Evan Pratten

+
+
+
-
+
+
+

Hi,

+

I am Evan Pratten

+
+
+
-

Who I am

+
+
-

I am a senior-year Highschool student who studies computer science, a Canadian amateur radio operator (callsign va3zza), and am one of the primary - software - developers - writing the code that powers competition-ready robots at Raider - Robotics.

+

Who I am

-
- - - - - -

My notable projects

- -

I develop and provide many web and desktop applications for public use. I host them all on my - private backend infrastructure. The network of servers that powers these applications was originally - set up to help me learn server management and distributed application development.

- - -
- -
- - {% for project in site.data.projects %} -
-
- {% if project.hero %} - {{project.title}} - {% endif %} -
-
{{project.title}} {% if project.archived %}Archived{% endif %}
-

{{project.description}}

- - {% for text_btn in project.text_buttons %} - {{text_btn.text}} - {% endfor %} - - {% for icon_btn in project.icon_buttons %} - - {% endfor %} -
+

I am a senior-year Highschool student who studies computer science, a Canadian amateur radio + operator (callsign va3zza), and am one of the + primary + software + developers + writing the code that powers competition-ready robots at Raider + Robotics.

+
+
- {% endfor %} +
+ + + +
+
+

The blog

+

I occasionally post writeups and tutorials in the blog portion of this website. Below are + the + three most recent posts.

+ +
+ {% assign i = 0 %} + {% for post in site.posts %} + {% if i < 3 %}
+
+
{{post.title}}
+
{{post.excerpt}}
+
+
+ {% assign post_date = post.date | split: " " %} + Published: {{post_date.first}} + +
+
+ {% endif %} + {% assign i = i | plus:1 %} + {% endfor %} +
+ +
+ +
+ + + +
+
+

My notable projects

+ +

I develop and provide many web and desktop applications for public use. I host them all on my + private backend infrastructure. The network of servers that powers these applications was + originally + set up to help me learn server management and distributed application development.

+ + +
+ +
+ + {% for project in site.data.projects %} +
+
+ {% if project.hero %} + {{project.title}} + {% endif %} +
+
{{project.title}} {% if project.archived %}Archived{% endif %}
+

{{project.description}}

+ + {% for text_btn in project.text_buttons %} + {{text_btn.text}} + {% endfor %} + + {% for icon_btn in project.icon_buttons %} + + {% endfor %} +
+
+
+ {% endfor %} + +
+
+
+
@@ -133,4 +196,16 @@ uses: setTimeout(orderProjectGrid, 5000); + + + + \ No newline at end of file