代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Record bits and pieces</title><!-- Meta Data -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="address=no" />
<meta name="author" content="ArtTemplate" />
<meta name="description" content="vCard" /><!-- Twitter data -->
<link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="57x57" href="assets/images/favicons/apple-touch-icon-57x57.png">
<link rel="shortcut icon" href="assets/images/favicons/worm2.png" type="image/png"><!-- Styles -->
<link rel="stylesheet" type="text/css" href="assets/styles/style.min.css" />
<style type="text/css">
@import url('https://at.alicdn.com/t/font_1356399_mlind04xhcl.css');
.news-item p {
color: #5F6F81;
line-height: 1.5;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body class="bg-triangles">
<!-- Preloader -->
<div class="preloader">
<div class="preloader__wrap">
<div class="circle-pulse">
<div class="circle-pulse__1"></div>
<div class="circle-pulse__2"></div>
</div>
<div class="preloader__progress"><span></span></div>
</div>
</div>
<main class="main">
<div class="container gutter-top">
<div class="row sticky-parent">
<!-- Sidebar -->
<aside class="col-12 col-md-12 col-xl-3">
<div class="sidebar box pb-0 sticky-column"><svg class="avatar avatar--180" viewBox="0 0 188 188">
<g class="avatar__box">
<image xlink:href="assets/img/avatar-1.jpg" height="100%" width="100%" />
</g>
</svg>
<div class="text-center">
<h3 class="title title--h3 sidebar__user-name"><span class="weight--500"></span></h3>
<div class="badge badge--gray">Creative Director</div><!-- Social -->
<div class="social"><a class="social__link"
href="http://wpa.qq.com/msgrd?v=3&uin=250348426&site=qq&menu=yes"
target="_blank" title="QQ">
<i class="font-icon iconfont iconqq-"></i>
</a>
<a class="social__link" href="#" onclick="WeChat()">
<i class="font-icon iconfont iconweixin"></i>
</a>
</div>
</div>
<div class="sidebar__info box-inner box-inner--rounded">
<ul class="contacts-block">
<li class="contacts-block__item" data-toggle="tooltip" data-placement="top"
title="Birthday"><i class="font-icon icon-calendar"></i></li>
<li class="contacts-block__item" data-toggle="tooltip" data-placement="top"
title="Address"><i class="font-icon icon-location"></i></li>
<li class="contacts-block__item" data-toggle="tooltip" data-placement="top"
title="E-mail"><a href=""><i class="font-icon icon-envelope"></i></a></li>
<li class="contacts-block__item" data-toggle="tooltip" data-placement="top"
title="Phone"><i class="font-icon icon-phone"></i></li>
<li class="contacts-block__item" data-toggle="tooltip" data-placement="top"
title="Github"><a href=""><i class="font-icon icon-github"></i></a></li>
</ul><a class="btn btn--blue-gradient" href="#" onclick="downFile()"><i
class="font-icon icon-download"></i>Download CV</a>
</div>
</div>
</aside><!-- Content -->
<div class="col-12 col-md-12 col-xl-9">
<div class="box pb-0">
<!-- Menu -->
<div class="circle-menu">
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div class="inner-menu">
<ul class="nav">
<li class="nav__item"><a href="index.html">About</a></li>
<li class="nav__item"><a href="resume.html">Resume</a></li>
<li class="nav__item"><a href="portfolio.html">Portfolio</a></li>
<li class="nav__item"><a class="active" href="blog.html">Blog</a></li>
<li class="nav__item"><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="pb-2">
<h1 class="title title--h1 title__separate">Project</h1>
</div>
<div class="news-grid pb-0">
<article class="news-item box">
<div class="news-item__image-wrap overlay overlay--45">
<div class="news-item__date">May 3, 2020</div>
<a class="news-item__link" href="https://gitee.com/NidhoggDJoking/Eternal"></a>
<img class="cover lazyload" src="assets/img/image_25.jpg" alt="" />
</div>
<div class="news-item__caption">
<h2 class="title title--h4">Eternal</h2>
<p>看不到的牵挂，等不来的樱花。</p>
</div>
</article>
<article class="news-item box">
<div class="news-item__image-wrap overlay overlay--45">
<div class="news-item__date">Jan 30, 2020</div>
<a class="news-item__link" href="https://github.com/NidhoggDJoking/Evolution"></a>
<img class="cover lazyload" src="assets/img/image_21.jpg" alt="" />
</div>
<div class="news-item__caption">
<h2 class="title title--h4">Evolution</h2>
<p>🐞 さあ、お前の罪を数えろ～！</p>
</div>
</article>
<article class="news-item box">
<div class="news-item__image-wrap overlay overlay--45">
<div class="news-item__date">Jan 18, 2020</div>
<a class="news-item__link" href="https://github.com/NidhoggDJoking/uni-app"></a>
<img class="cover lazyload" src="assets/img/image_24.jpg" alt="" />
</div>
<div class="news-item__caption">
<h2 class="title title--h4">uni-app</h2>
<p>🚀 A Use HbuilderX Demo.</p>
</div>
</article>
<article class="news-item box">
<div class="news-item__image-wrap overlay overlay--45">
<div class="news-item__date">Dec 15, 2019</div>
<a class="news-item__link"
href="https://github.com/NidhoggDJoking/BackstageTemplate"></a>
<img class="cover lazyload" src="assets/img/image_1.jpg" alt="" />
</div>
<div class="news-item__caption">
<h2 class="title title--h4">BackstageTemplate</h2>
<p> 👻 A background management system template.</p>
</div>
</article>
<article class="news-item box">
<div class="news-item__image-wrap overlay overlay--45">
<div class="news-item__date">Oct 1, 2019</div>
<a class="news-item__link" href="https://github.com/NidhoggDJoking/Angular"></a>
<img class="cover lazyload" src="assets/img/image_20.jpg" alt="" />
</div>
<div class="news-item__caption">
<h2 class="title title--h4">Angular</h2>
<p>👺 Angular Link Start！</p>
</div>
</article>
<article class="news-item box">
<div class="news-item__image-wrap overlay overlay--45">
<div class="news-item__date">April 25, 2019</div>
<a class="news-item__link" href="https://github.com/NidhoggDJoking/VueCli"></a>
<img class="cover lazyload" src="assets/img/image_10.jpg" alt="" />
</div>
<div class="news-item__caption">
<h2 class="title title--h4">VueCli</h2>
<p>⚡ Reduce repeated wheel construction.</p>
</div>
</article>
<article class="news-item box">
<div class="news-item__image-wrap overlay overlay--45">
<div class="news-item__date">Sep. 16, 2019</div>
<a class="news-item__link"
href="https://github.com/NidhoggDJoking/ResourcePool"></a>
<img class="cover lazyload" src="assets/img/image_11.jpg" alt="" />
</div>
<div class="news-item__caption">
<h2 class="title title--h4">ResourcePool</h2>
<p>💎 The resource library is convenient for me to use.</p>
</div>
</article>
<article class="news-item box">
<div class="news-item__image-wrap overlay overlay--45">
<div class="news-item__date">May. 4, 2019</div>
<a class="news-item__link" href="https://github.com/NidhoggDJoking/AI"></a>
<img class="cover lazyload" src="assets/img/image_16.jpg" alt="" />
</div>
<div class="news-item__caption">
<h2 class="title title--h4">AI</h2>
<p>💀 Free is the best ！.</p>
</div>
</article>
<article class="news-item box">
<div class="news-item__image-wrap overlay overlay--45">
<div class="news-item__date">Mar. 8, 2019</div>
<a class="news-item__link"
href="https://github.com/NidhoggDJoking/NidhoggDJoking.github.io"></a>
<img class="cover lazyload" src="assets/img/image_18.jpg" alt="" />
</div>
<div class="news-item__caption">
<h2 class="title title--h4">NidhoggDJoking.github.io</h2>
<p>🚩 Personal blog or Personal Resume.</p>
</div>
</article>
<article class="news-item box">
<div class="news-item__image-wrap overlay overlay--45">
<div class="news-item__date">Oct. 1, 2018</div>
<a class="news-item__link" href="https://github.com/NidhoggDJoking/Inori"></a>
<img class="cover lazyload" src="assets/img/image_22.jpg" alt="" />
</div>
<div class="news-item__caption">
<h2 class="title title--h4">Inori</h2>
<p>👨👩👦 It's the home of the project.</p>
</div>
</article>
<article class="news-item box">
<div class="news-item__image-wrap overlay overlay--45">
<div class="news-item__date">Jan. 15, 2019</div>
<a class="news-item__link" href="https://github.com/NidhoggDJoking/wx"></a>
<img class="cover lazyload" src="assets/img/image_15.jpg" alt="" />
</div>
<div class="news-item__caption">
<h2 class="title title--h4">wx</h2>
<p>💩 WeChat Mini Program.</p>
</div>
</article>
</div>
</div><!-- Footer -->
<footer class="footer"></footer>
</div>
</div>
</div>
</main>
<div class="back-to-top"></div><!-- SVG masks --><svg class="svg-defs">
<clipPath id="avatar-box">
<path
d="M1.85379 38.4859C2.9221 18.6653 18.6653 2.92275 38.4858 1.85453 56.0986.905299 77.2792 0 94 0c16.721 0 37.901.905299 55.514 1.85453 19.821 1.06822 35.564 16.81077 36.632 36.63137C187.095 56.0922 188 77.267 188 94c0 16.733-.905 37.908-1.854 55.514-1.068 19.821-16.811 35.563-36.632 36.631C131.901 187.095 110.721 188 94 188c-16.7208 0-37.9014-.905-55.5142-1.855-19.8205-1.068-35.5637-16.81-36.63201-36.631C.904831 131.908 0 110.733 0 94c0-16.733.904831-37.9078 1.85379-55.5141z" />
</clipPath>
<clipPath id="avatar-hexagon">
<path
d="M0 27.2891c0-4.6662 2.4889-8.976 6.52491-11.2986L31.308 1.72845c3.98-2.290382 8.8697-2.305446 12.8637-.03963l25.234 14.31558C73.4807 18.3162 76 22.6478 76 27.3426V56.684c0 4.6805-2.5041 9.0013-6.5597 11.3186L44.4317 82.2915c-3.9869 2.278-8.8765 2.278-12.8634 0L6.55974 68.0026C2.50414 65.6853 0 61.3645 0 56.684V27.2891z" />
</clipPath>
</svg>
<div class="WeChat">
<img src="assets/WeChat/WeChat.png" alt="WeChat">
</div>
<canvas class="science"></canvas>
<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
<script src="assets/js/jquery-3.4.1.min.js"></script>
<script src="assets/js/plugins.min.js"></script>
<script src="assets/js/common.min.js"></script>
<script src="assets/js/data.js"></script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
fetch('https://api.github.com/users/NidhoggDJoking/repos').then(res => {
return res.json()
}).then(res2 => {
console.log('我的Github列表数据', res2);
var html = template('tpl-repos-list', { data: res2 });
$('.news-grid').html(html);
})
</script>
<script type="text/html" id="tpl-repos-list">
{{each data}}
<article class="news-item box">
<div class="news-item__image-wrap overlay overlay--45">
<div class="news-item__date">{{$value.pushed_at.replace(/T/g, ' ').replace(/\:[\d]{2}Z/, '')}}</div>
<a class="news-item__link" target="_blank" href="{{$value.html_url}}"></a>
<img class="cover lazyload" src="assets/img/image_{{$index + 1}}.jpg" alt="" />
</div>
<div class="news-item__caption">
<h2 class="title title--h4">{{$value.name}}</h2>
<p title="{{$value.description}}">{{$value.description}}</p>
</div>
</article>
{{/each data}}
</script>
<script>
// 背景画布
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const RESOLUTION = 1;
let w = canvas.width = window.innerWidth * RESOLUTION;
let h = canvas.height = window.innerHeight * RESOLUTION;
const PARTICLE_COUNT = 400;
const CONNECT_DISTANCE = w * 0.05;
const FORCE_DISTANCE = w * 0.1;
const r = (n = 1) => Math.random() * n;
const PI = Math.PI;
const TAU = PI * 2;
let time = new Date();
const lerp = (start, end, amt) => {
return (1 - amt) * start + amt * end;
};
const distance = (x1, y1, x2, y2) => {
const a = x1 - x2;
const b = y1 - y2;
return Math.sqrt(a * a + b * b);
};
const angle = (cx, cy, ex, ey) => {
return Math.atan2(ey - cy, ex - cx);
};
const particlePrototype = () => ({
x: w * 0.5 + Math.cos(r(TAU)) * r(w * 0.5),
y: h * 0.5 + Math.sin(r(TAU)) * r(h * 0.5),
angle: r(TAU),
speed: r(0.15),
normalSpeed: r(0.15),
oscAmplitudeX: r(2),
oscSpeedX: 0.001 + r(0.008),
oscAmplitudeY: r(2),
oscSpeedY: 0.001 + r(0.008),
connectDistance: r(CONNECT_DISTANCE),
color: {
r: Math.round(200 + r(55)),
g: Math.round(150 + r(105)),
b: Math.round(200 + r(55))
}
});
const particles = new Array(PARTICLE_COUNT).
fill({}).
map(particlePrototype);
const update = () => {
particles.forEach(p1 => {
p1.x += (Math.cos(p1.angle) + Math.cos(time * p1.oscSpeedX) * p1.oscAmplitudeX) * p1.speed;
p1.y += (Math.sin(p1.angle) + Math.cos(time * p1.oscSpeedY) * p1.oscAmplitudeY) * p1.speed;
p1.speed = lerp(p1.speed, p1.normalSpeed * RESOLUTION, 0.1);
if (p1.x > w || p1.x < 0) {
p1.angle = PI - p1.angle;
}
if (p1.y > h || p1.y < 0) {
p1.angle = -p1.angle;
}
if (r() < 0.005)
p1.oscAmplitudeX = r(2);
if (r() < 0.005)
p1.oscSpeedX = 0.001 + r(0.008);
if (r() < 0.005)
p1.oscAmplitudeY = r(2);
if (r() < 0.005)
p1.oscSpeedY = 0.001 + r(0.008);
p1.x = Math.max(-0.01, Math.min(p1.x, w + 0.01));
p1.y = Math.max(-0.01, Math.min(p1.y, h + 0.01));
});
};
const render = () => {
ctx.clearRect(0, 0, w, h);
particles.map(p1 => {
particles.
filter(p2 => {
if (p1 == p2)
return false;
if (distance(p1.x, p1.y, p2.x, p2.y) > p1.connectDistance)
return false;
return true;
}).
map(p2 => {
const dist = distance(p1.x, p1.y, p2.x, p2.y);
p1.speed = lerp(p1.speed, p1.speed + 0.05 / p1.connectDistance * dist, 0.2);
return {
p1,
p2,
color: p1.color,
opacity: Math.floor(100 / p1.connectDistance * (p1.connectDistance - dist)) / 100
};
}).
forEach((line, i) => {
const colorSwing = Math.sin(time * line.p1.oscSpeedX);
ctx.beginPath();
ctx.globalAlpha = line.opacity;
ctx.moveTo(line.p1.x, line.p1.y);
ctx.lineTo(line.p2.x, line.p2.y);
ctx.strokeStyle = `rgb(
${Math.floor(line.color.r * colorSwing)},
${Math.floor(line.color.g * 0.5 + line.color.g * 0.5 * colorSwing)},
${line.color.b}
)`;
ctx.lineWidth = line.opacity * 4;
ctx.stroke();
ctx.closePath();
});
});
};
const loop = () => {
time = new Date();
update();
render();
window.requestAnimationFrame(loop);
};
loop();
window.addEventListener('mousemove', e => {
const mouseX = e.layerX * RESOLUTION;
const mouseY = e.layerY * RESOLUTION;
particles.forEach(p => {
const dist = distance(mouseX, mouseY, p.x, p.y);
if (dist < FORCE_DISTANCE && dist > 0) {
p.angle = angle(mouseX, mouseY, p.x, p.y);
const force = (FORCE_DISTANCE - dist) * 0.1;
p.speed = lerp(p.speed, force, 0.2);
}
});
});
window.addEventListener('resize', e => {
w = canvas.width = window.innerWidth * RESOLUTION;
h = canvas.height = window.innerHeight * RESOLUTION;
});
//# sourceURL=pen.js
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手