working on ui
This commit is contained in:
parent
e97404a9b7
commit
8c8cf288ac
@ -2,6 +2,7 @@
|
||||
--color-red: #ff556e;
|
||||
|
||||
--color-purple:#4844a3;
|
||||
--color-faint-purple:#4844a350;
|
||||
--color-light-purple: #8a8ed8;
|
||||
--color-dark-purple:#342d71;
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
12
assets/css/easyScrollDots.min.css
vendored
Normal file
12
assets/css/easyScrollDots.min.css
vendored
Normal file
@ -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}}
|
||||
1
assets/js/dotnav.min.js
vendored
Normal file
1
assets/js/dotnav.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
const dotNav=(e,t)=>{(e=>{let t=document.getElementsByTagName(e),n=window.innerHeight;const o=()=>{for(let e=0;e<t.length;e++)t[e].getBoundingClientRect().top<n?t[e].classList.add("in-viewport"):t[e].classList.remove("in-viewport")};o(),window.addEventListener("scroll",o)})("section");const n=document.getElementsByTagName(e),o=document.getElementById("dot-nav");let s,i=document.getElementsByClassName("in-viewport");for(let e=0;e<n.length;e++)n[e].classList.add("section-"+e);(()=>{for(let e=0;e<n.length;e++){const t=document.createElement("a");t.id="dot-"+e,t.classList.add("dots"),t.href="#",t.setAttribute("data-sec",e),o.appendChild(t)}})();let a=document.getElementById("dot-nav").clientHeight/2;document.getElementById("dot-nav").style.top="calc(50% - "+a+"px)";const c=()=>{i=document.getElementsByClassName("in-viewport"),s=document.getElementsByClassName("dots"),visNum=i.length;let e=visNum-1;for(let e=0;e<n.length;e++)s[e].classList.remove("active");document.getElementById("dot-"+e).classList.add("active")};c(),window.onscroll=function(){c()};const d=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-l<d?c-d:l);if("requestAnimationFrame"in window==0)return window.scroll(0,m),void(o&&o());!function e(){const c="now"in window.performance?performance.now():(new Date).getTime(),d=Math.min(1,(c-a)/t),l=s[n](d);window.scroll(0,Math.ceil(l*(m-i)+i)),window.pageYOffset!==m?requestAnimationFrame(e):o&&o()}()}(document.querySelector(".section-"+n),"1000",t),e.preventDefault()};s=document.getElementsByClassName("dots");for(let e=0;e<s.length;e++)s[e].addEventListener("click",d)};dotNav("section","easeInOutCubic");
|
||||
12
assets/js/easyScrollDots.min.js
vendored
Normal file
12
assets/js/easyScrollDots.min.js
vendored
Normal file
@ -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
|
||||
*/
|
||||
function dotsThrottle(t,e,o){let n,i,d,l=null,c=0;o||(o={});const s=function(){c=!1===o.leading?0:Date.now(),l=null,d=t.apply(n,i),l||(n=i=null)};return function(){const a=Date.now();c||!1!==o.leading||(c=a);const r=e-(a-c);return n=this,i=arguments,r<=0||r>e?(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='<div class="scroll-indicator-controller"><span></span></div>';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",'<div class="'+d+'" data-indi-controller-id="'+n+'" onclick="scrollIndiClicked(\''+n+"');\"><span>"+i+"</span><div></div></div>")});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"})}
|
||||
203
index.html
203
index.html
@ -6,10 +6,10 @@ uses:
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
|
||||
<head>
|
||||
{% include head.html %}
|
||||
<script type="application/ld+json">
|
||||
{% include head.html %}
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "http://schema.org/",
|
||||
"@type": "Person",
|
||||
@ -18,6 +18,23 @@ uses:
|
||||
"url": "https://retrylife.ca"
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- <link rel="stylesheet" href="{{site.baseurl}}/assets/css/easyScrollDots.min.css">
|
||||
|
||||
<style>
|
||||
.scroll-indicator-controller>div {
|
||||
border: 1px solid var(--color-blue);
|
||||
background: unset;
|
||||
}
|
||||
|
||||
.scroll-indicator-controller>div span {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
|
||||
.scroll-indicator-controller>div.active {
|
||||
background: var(--color-blue);
|
||||
}
|
||||
</style> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -26,79 +43,125 @@ uses:
|
||||
<!-- Navbar -->
|
||||
{% include nav.html %}
|
||||
|
||||
<div class="color-hero">
|
||||
<div class="hello container">
|
||||
<h1>Hi,</h1>
|
||||
<h1>I am Evan Pratten</h1>
|
||||
<section>
|
||||
<div>
|
||||
<div class="scroll-indicator" id="headerSection" data-scroll-indicator-title="Hello"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-hero">
|
||||
<div class="hello container">
|
||||
<h1>Hi,</h1>
|
||||
<h1>I am Evan Pratten</h1>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="home-secondary-panel edge--top">
|
||||
<div class="inner-content-container home-content container">
|
||||
<h1>Who I am</h1>
|
||||
<div class="card border-loop border-loop-right">
|
||||
<div class="card-body">
|
||||
|
||||
<h3>I am a senior-year Highschool student who studies computer science, a Canadian amateur radio operator (callsign <a href="https://www.qrz.com/db/VA3ZZA">va3zza</a>), and am one of the primary
|
||||
software
|
||||
developers
|
||||
writing the code that powers competition-ready robots at <a href="https://github.com/frc5024">Raider
|
||||
Robotics</a>.</h3>
|
||||
<h1>Who I am</h1>
|
||||
|
||||
<div class="header-space"></div>
|
||||
|
||||
<!-- <h1>My Blog</h1>
|
||||
|
||||
<h3>The main function of this website is to host my <a href="/blog">blog</a>. </h3>
|
||||
|
||||
<div class="header-space"></div> -->
|
||||
|
||||
<!-- <h1>What I do</h1>
|
||||
|
||||
<h3> I am a software developer, and photographer. I use this website to host
|
||||
<a href="/blog">blog posts</a>
|
||||
about my learnings as a programmer, and to share the best of my
|
||||
<a href=" /photography">photos</a></h3>
|
||||
|
||||
|
||||
<div style="padding-top:3rem;"></div>
|
||||
<hr>
|
||||
<div style="padding-top:3rem;"></div> -->
|
||||
|
||||
<h1>My notable projects</h1>
|
||||
|
||||
<h3>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.</h3>
|
||||
|
||||
|
||||
<div style="padding-top:3rem;"></div>
|
||||
|
||||
<div class="row" id="project-grid">
|
||||
|
||||
{% for project in site.data.projects %}
|
||||
<div class="col-sm-4 project-item">
|
||||
<div class="card home-project">
|
||||
{% if project.hero %}
|
||||
<img src="{{project.hero.img_src}}" class="card-img-top" alt="{{project.title}}" loading="auto">
|
||||
{% endif %}
|
||||
<div class="card-body" {% if project.archived %}data-toggle="tooltip" data-placement="top" title="No longer actively maintained"{% endif %}>
|
||||
<h5 class="card-title"><strong>{{project.title}} {% if project.archived %}<span class="badge badge-secondary">Archived</span>{% endif %}</strong></h5>
|
||||
<p class="card-text">{{project.description}}</p>
|
||||
|
||||
{% for text_btn in project.text_buttons %}
|
||||
<a href="{{text_btn.url}}" class="btn btn-{{text_btn.color}}">{{text_btn.text}}</a>
|
||||
{% endfor %}
|
||||
|
||||
{% for icon_btn in project.icon_buttons %}
|
||||
<a href="{{icon_btn.url}}" class="btn btn-dark"><i class="{{icon_btn.icon}}"></i></a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<h3>I am a senior-year Highschool student who studies computer science, a Canadian amateur radio
|
||||
operator (callsign <a href="https://www.qrz.com/db/VA3ZZA">va3zza</a>), and am one of the
|
||||
primary
|
||||
software
|
||||
developers
|
||||
writing the code that powers competition-ready robots at <a
|
||||
href="https://github.com/frc5024">Raider
|
||||
Robotics</a>.</h3>
|
||||
<div>
|
||||
<div class="scroll-indicator" id="whoSection" data-scroll-indicator-title="Who I am"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- <div class="header-space"></div> -->
|
||||
|
||||
<div class="card card border-loop border-loop-left">
|
||||
<div class="card-body">
|
||||
<h1>The blog</h1>
|
||||
<h3>I occasionally post writeups and tutorials in the blog portion of this website. Below are
|
||||
the
|
||||
three most recent posts.</h3>
|
||||
|
||||
<div class="card-deck">
|
||||
{% assign i = 0 %}
|
||||
{% for post in site.posts %}
|
||||
{% if i < 3 %} <div class="card home-project">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{post.title}}</h5>
|
||||
<h6 class="card-text">{{post.excerpt}}</h6>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
{% assign post_date = post.date | split: " " %}
|
||||
<small class="text-muted">Published: {{post_date.first}}</small>
|
||||
<a href="{{post.url}}"><button class="btn btn-outline-primary btn-sm"
|
||||
style="float:right;">Read Post</button></a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% assign i = i | plus:1 %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div style="text-align:center;">
|
||||
<a href="/blog" style="margin:auto;"><button type="button" class="btn btn-outline-primary">View
|
||||
More</button></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="header-space"></div> -->
|
||||
|
||||
<div class="card card border-loop border-loop-right">
|
||||
<div class="card-body">
|
||||
<h1>My notable projects</h1>
|
||||
|
||||
<h3>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.</h3>
|
||||
|
||||
|
||||
<div style="padding-top:3rem;"></div>
|
||||
|
||||
<div class="row" id="project-grid">
|
||||
|
||||
{% for project in site.data.projects %}
|
||||
<div class="col-sm-4 project-item">
|
||||
<div class="card home-project">
|
||||
{% if project.hero %}
|
||||
<img src="{{project.hero.img_src}}" class="card-img-top" alt="{{project.title}}"
|
||||
loading="auto">
|
||||
{% endif %}
|
||||
<div class="card-body" {% if project.archived %}data-toggle="tooltip"
|
||||
data-placement="top" title="No longer actively maintained" {% endif %}>
|
||||
<h5 class="card-title"><strong>{{project.title}} {% if project.archived %}<span
|
||||
class="badge badge-secondary">Archived</span>{% endif %}</strong></h5>
|
||||
<p class="card-text">{{project.description}}</p>
|
||||
|
||||
{% for text_btn in project.text_buttons %}
|
||||
<a href="{{text_btn.url}}" class="btn btn-{{text_btn.color}}">{{text_btn.text}}</a>
|
||||
{% endfor %}
|
||||
|
||||
{% for icon_btn in project.icon_buttons %}
|
||||
<a href="{{icon_btn.url}}" class="btn btn-dark"><i
|
||||
class="{{icon_btn.icon}}"></i></a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -133,4 +196,16 @@ uses:
|
||||
setTimeout(orderProjectGrid, 5000);
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Dotdav -->
|
||||
<!-- <script src="{{site.baseurl}}/assets/js/easyScrollDots.min.js"></script>
|
||||
<script>
|
||||
easyScrollDots({
|
||||
'fixedNav': false,
|
||||
'fixedNavId': '',
|
||||
'fixedNavUpward': false,
|
||||
'offset': 50
|
||||
});
|
||||
</script> -->
|
||||
|
||||
</body>
|
||||
Loading…
x
Reference in New Issue
Block a user