215 lines
6.2 KiB
Handlebars
215 lines
6.2 KiB
Handlebars
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>DarkCat09's Web Site</title>
|
|
<link rel="stylesheet/less" type="text/css" href="styles.less" />
|
|
<link rel="stylesheet" href="//brick.freetls.fastly.net/Montserrat:400,400i,500,500i,600,600i,700,700i">
|
|
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/shakrmedia/tuesday@v1.1.0/build/tuesday.min.css" />
|
|
<link rel="stylesheet" href="fontawesome/css/fontawesome.min.css" />
|
|
<link rel="stylesheet" href="fontawesome/css/solid.min.css" />
|
|
<link rel="stylesheet" href="fontawesome/css/regular.min.css" />
|
|
<link rel="stylesheet" href="fontawesome/css/brands.min.css" />
|
|
<script src="//cdn.jsdelivr.net/npm/less"></script>
|
|
</head>
|
|
<body onload="init()">
|
|
<!-- The Universe -->
|
|
<div class="space-wrapper">
|
|
<div class="space">
|
|
<canvas id="stars"></canvas>
|
|
<img id="space-obj" src="img/earth.gif" alt="Unable to load image" />
|
|
</div>
|
|
</div>
|
|
<!-- About Menu -->
|
|
<div class="menu about-menu">
|
|
<div class="top-menu">
|
|
<ul class="section">
|
|
{{#each menu}}
|
|
<li>
|
|
<input type="radio" name="section-input" id="{{this.id}}-section">
|
|
<label for="{{this.id}}-section">
|
|
<a href="#{{this.id}}">
|
|
<i class="{{this.icon}}"></i>
|
|
</a>
|
|
</label>
|
|
</li>
|
|
{{/each}}
|
|
</ul>
|
|
<div class="row-fill"></div>
|
|
<ul class="section">
|
|
<li id="move">
|
|
<label>
|
|
<a href="javascript:void(0)">
|
|
<i class="fa-solid fa-arrows-up-down-left-right"></i>
|
|
</a>
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="hidden" id="about">
|
|
<div class="card about-card">
|
|
<div class="title">
|
|
Hi! I'm Andrew.
|
|
</div>
|
|
{{#each about}}
|
|
<div>
|
|
<div class="icon">
|
|
<i class="{{this.icon}}"></i>
|
|
</div>
|
|
<div class="content">
|
|
{{{this.content}}}
|
|
{{#if this.expand}}
|
|
<div class="expand-wrapper">
|
|
<input type="checkbox" id="expand-{{this.id}}">
|
|
<label class="expand link" for="expand-{{this.id}}">
|
|
<i class="fa-solid fa-angle-down"></i>
|
|
Details
|
|
</label>
|
|
<div class="hidden" id="details-{{this.id}}">
|
|
{{this.code}}
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
<div class="card profiles">
|
|
{{#each profiles}}
|
|
<div>
|
|
<div class="icon">
|
|
<i class="{{this.icon}}"></i>
|
|
</div>
|
|
<div class="content">
|
|
<a class="name" target="_blank" href="{{this.url}}">
|
|
{{this.name}}: {{this.user}}
|
|
</a>
|
|
<div class="copylink">
|
|
<span class="link profile-link" data-link="{{#if this.copy}}{{this.copy}}{{else}}{{this.url}}{{/if}}">
|
|
<i class="fa-solid fa-copy"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="copied inline-popup right">
|
|
Copied
|
|
</div>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
<div class="hidden" id="code">
|
|
<div class="card">
|
|
{{#each langs}}
|
|
<div>
|
|
<div class="icon">
|
|
{{#if this.svg}}
|
|
<span>
|
|
<img src="{{this.icon}}">
|
|
</span>
|
|
{{else}}
|
|
<i class="{{this.icon}}"></i>
|
|
{{/if}}
|
|
</div>
|
|
<div class="content">
|
|
<div class="lang-name">{{this.name}}</div>
|
|
<div class="details">
|
|
<div class="expand-wrapper">
|
|
<input type="checkbox" id="expand-{{this.id1}}">
|
|
<label class="expand link" for="expand-{{this.id1}}">
|
|
<i class="fa-solid fa-angle-down"></i>
|
|
Details
|
|
</label>
|
|
<div class="hidden" id="{{this.id2}}">
|
|
<div class="lang-wrapper">
|
|
<div class="lang-skills">
|
|
<div class="caption">
|
|
I know:
|
|
</div>
|
|
<ol>
|
|
{{#each this.skills}}
|
|
<li>{{{this}}}</li>
|
|
{{/each}}
|
|
</ol>
|
|
</div>
|
|
<div class="projects">
|
|
{{#each this.projects}}
|
|
<div class="repo">
|
|
<a target="_blank" href="{{this.url}}">
|
|
{{this.name}}
|
|
</a>
|
|
<div class="stars-icon">
|
|
<i class="fa-regular fa-star"></i>
|
|
</div>
|
|
<div class="stars-num">{{this.stars}}</div>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
<div class="hidden" id="selfhosted">
|
|
<div class="card">
|
|
<div>Hosted on Raspberry Pi 4B</div>
|
|
{{#each selfhosted}}
|
|
<div>
|
|
<div class="icon">
|
|
<i class="{{this.icon}}"></i>
|
|
</div>
|
|
<div class="content">
|
|
<a href="https://{{this.domain}}" target="_blank">
|
|
{{this.domain}}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Context Menu -->
|
|
<div class="menu context-menu">
|
|
<ul>
|
|
{{#each spaceobj}}
|
|
<li class="change-img">
|
|
<span class="li-wrapper" data-img="{{this.img}}">
|
|
<span class="icon">
|
|
<i class="{{this.icon}}"></i>
|
|
</span>
|
|
{{this.name}}
|
|
</span>
|
|
</li>
|
|
{{/each}}
|
|
<li class="change-speed">
|
|
<span class="li-wrapper">
|
|
<span class="icon">
|
|
<i class="fas fa-wrench"></i>
|
|
</span>
|
|
Speed:
|
|
<input type="range" min="0" max="1170" step="30" value="720" />
|
|
</span>
|
|
</li>
|
|
<li class="land-to">
|
|
<span class="li-wrapper">
|
|
<span class="icon">
|
|
<i class="fa-solid fa-rocket"></i>
|
|
</span>
|
|
Land to Earth
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- JavaScript -->
|
|
<script src="js/anim.js"></script>
|
|
<script src="js/script.js"></script>
|
|
<script src="js/init.js"></script>
|
|
<script src="js/menu.js"></script>
|
|
<script src="js/control.js"></script>
|
|
<script src="js/handlers.js"></script>
|
|
</body>
|
|
</html>
|