https://www.justuswill.com/code.js

1// Responsive website features
2
3// dynamically detect if device uses touch to disable some hover effects
4// from http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml#:~:text=4%20novel%20ways%20to%20deal%20with%20sticky%20%3Ahover,class%20based%20on%20current%20user%20input%20type%20
5;(function(){
6    var isTouch = false
7    var isTouchTimer
8    var curRootClass = 'cannot-touch'
9    document.documentElement.classList.add(curRootClass)
10
11    function addtouchclass(e){
12        clearTimeout(isTouchTimer)
13        if (curRootClass !== 'can-touch'){
14            document.documentElement.classList.remove(curRootClass)
15            curRootClass = 'can-touch'
16            document.documentElement.classList.add(curRootClass)
17        }
18        // set isTouch for 500ms, so class doesn't change on subsequent mouseover
19        isTouch = true
20        isTouchTimer = setTimeout(function(){isTouch = false}, 500)
21    }
22
23    function removetouchclass(e){
24        if (!isTouch && curRootClass === 'can-touch'){
25            isTouch = false
26            document.documentElement.classList.remove(curRootClass)
27            curRootClass = 'cannot-touch'
28            document.documentElement.classList.add(curRootClass)
29        }
30    }
31
32    document.addEventListener('touchstart', addtouchclass, false)
33    document.addEventListener('mouseover', removetouchclass, false)
34})();
35
36
37// Highlight via illuminating effect
38$(function() {
39    var bg_color = $('#header-animation').css('background-color');
40    var text_gradient = $('.header-text h1 .gradient').css('background');
41    var text_style = {
42        'background': '',
43        'background-clip': 'text',
44        '-webkit-background-clip': 'text',
45        '-moz-background-clip': 'text',
46        '-moz-text-fill-color': 'transparent',
47        '-webkit-text-fill-color': 'transparent'
48    };
49    var x, y, xy, bgWebKit, bgMoz;
50    var xt, yt, deg;
51    var lightColor = 'rgba(28, 52, 72, 1.0)', gradientSize = 300;
52    // var lightColor = 'rgba(30, 40, 48, 1.0)', gradientSize = 300;
53
54    $('#header').mousemove(function(e) {
55        var text = $('.header-text h1 .gradient');
56        x  = e.pageX - this.offsetLeft;
57        y  = e.pageY - this.offsetTop;
58        xy = x + ' ' + y;
59        bgWebKit = '-webkit-gradient(radial, ' + xy + ', 0, ' + xy + ', ' + gradientSize + ', from(' + lightColor + '), to(rgba(255,255,255,0.0))), ' + bg_color;
60        bgMoz    = '-moz-radial-gradient(' + x + 'px ' + y + 'px 45deg, circle, ' + lightColor + ' 0%, ' + bg_color + ' ' + gradientSize + 'px)';
61        xt = e.pageX - (text.offset().left + text.width() / 2);
62        yt = e.pageY - (text.offset().top + text.height() / 2);
63        deg = Math.atan2(-xt, yt) * 180/Math.PI;
64        text_style['background'] = 'linear-gradient(' + deg + 'deg, var(--main-color-bright), var(--main-color))'
65        $('#header-animation')
66            .css({ background: bgWebKit })
67            .css({ background: bgMoz });
68        text.css(text_style);
69    }).mouseleave(function() {
70        var text = $('.header-text h1 .gradient');
71        $('#header-animation').css({ background: bg_color });
72        text.css({background: text_gradient});
73
74        text_style['background'] = text_gradient;
75        text.css(text_style);
76    });
77});
78
79// active tabs
80$('.tab-links').on('click', function(){
81    $('.tab-links').each(function(){
82        $(this).removeClass('active-link');
83    });
84    $('.tab-contents').each(function(){
85        $(this).removeClass('active-tab');
86    });
87    $(this).addClass('active-link');
88    $('#' + $(this).attr('data-open')).addClass('active-tab');
89});
90$('.nav-open').on('click', function(){
91    $('.tab-links').each(function(){
92        $(this).removeClass('active-link');
93    });
94    $('.tab-contents').each(function(){
95        $(this).removeClass('active-tab');
96    });
97    $('#' + $(this).attr('data-tab')).addClass('active-link');
98    $('#' + $(this).attr('data-open')).addClass('active-tab');
99});
100
101// expand abstract
102$('.abstract-expand').on('click', function(){
103    var abs = $('#' + $(this).attr('data-open'));
104    if (abs.hasClass('active-abstract')){
105        abs.removeClass('active-abstract');
106        $(this).removeClass('active-abstract-link');
107
108    }
109    else{
110        abs.addClass('active-abstract');
111        $(this).addClass('active-abstract-link');
112    }
113});
114
115//active projects
116$(function(){
117    var open = false;

118    $('.btn').on('click', function(){
119        if(!open){
120            $('.project').each(function(){
121                $(this).addClass('active-project');
122            });
123            $('#btn-open').css({display: 'none'});
124            $('#btn-close').css({display: 'inline'});
125            open = true;
126        }
127        else{
128            $('.project').each(function(){
129                if(!$(this).hasClass('start-project')){
130                    $(this).removeClass('active-project');
131                }
132            });
133            $('#btn-open').css({display: 'inline'});
134            $('#btn-close').css({display: 'none'});
135            open = false;
136        }
137    });
138    $('.layer').on('click', function (){
139        let proj = $(this).parent();
140        if(proj.hasClass('open-project')){
141            proj.removeClass('open-project');
142        }
143        else{
144            $('.project').each(function (){
145                $(this).removeClass('open-project');
146            });
147            proj.addClass('open-project');
148        }
149    });
150});
151
152// open/close menu
153$('.menu-open').on('click', function(){
154    $('nav ul').css({right: '0'});
155    $('#menu-open').css({width: '0'});
156});
157$('.menu-close').on('click', function(){
158    $('nav ul').css({right: '-200px'});
159    $('#menu-open').css({width: '30px'});
160});