mirror of
https://github.com/dilllxd/gitfolio.git
synced 2024-08-14 22:28:09 +00:00
Animate Profile Picture
This commit is contained in:
K4USTU3H
parent
44e28393cf
commit
644b39dd12
5 changed files with 158 additions and 159 deletions
|
|
@ -97,13 +97,26 @@ body {
|
|||
#profile_img {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
min-width: 180px;
|
||||
min-height: 180px;
|
||||
max-width: 180px;
|
||||
max-height: 180px;
|
||||
border-radius: 5px;
|
||||
background-size: cover !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background: var(--gradient);
|
||||
transition: background 0.5s ease;
|
||||
background-size: 300% 300%;
|
||||
animation: grad 8s ease infinite;
|
||||
-webkit-background-clip: text;
|
||||
font-size: 128px;
|
||||
font-family: "Asap Condensed", sans-serif;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes grad {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
#profile div {
|
||||
|
|
@ -267,13 +280,27 @@ body {
|
|||
}
|
||||
|
||||
#profile_img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
min-width: 120px;
|
||||
min-height: 120px;
|
||||
max-width: 120px;
|
||||
max-height: 120px;
|
||||
margin: 0px auto !important;
|
||||
background: var(--gradient);
|
||||
transition: background 0.5s ease;
|
||||
background-size: 300% 300%;
|
||||
animation: grad 8s ease infinite;
|
||||
-webkit-background-clip: text;
|
||||
font-size: 128px;
|
||||
font-family: "Asap Condensed", sans-serif;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes grad {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
#work {
|
||||
|
|
|
|||
|
|
@ -1,78 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title></title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.materialdesignicons.com/4.5.95/css/materialdesignicons.min.css"
|
||||
/>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.4.1.min.js"
|
||||
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible"
|
||||
content="ie=edge" />
|
||||
<title></title>
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.materialdesignicons.com/4.5.95/css/materialdesignicons.min.css" />
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
|
||||
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
|
||||
<link rel="stylesheet"
|
||||
href="index.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="profile">
|
||||
<div id="profile_img"></div>
|
||||
<div id="username">
|
||||
<div id="fullname"></div>
|
||||
<body>
|
||||
<div id="profile">
|
||||
<div id="profile_img">
|
||||
<span id="status">K_</span>
|
||||
</div>
|
||||
<div id="username">
|
||||
<div id="fullname"></div>
|
||||
</div>
|
||||
<div id="userbio"></div>
|
||||
<div id="about"></div>
|
||||
</div>
|
||||
<div id="userbio"></div>
|
||||
<div id="about"></div>
|
||||
</div>
|
||||
<div id="display">
|
||||
<div id="work">
|
||||
<h1>Work.</h1>
|
||||
<div class="projects"
|
||||
id="work_section"></div>
|
||||
<div id="display">
|
||||
<div id="work">
|
||||
<h1>Work.</h1>
|
||||
<div class="projects" id="work_section"></div>
|
||||
</div>
|
||||
<div id="forks" style="display:none;">
|
||||
<h1>Forks.</h1>
|
||||
<div class="projects" id="forks_section"></div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<a href="https://github.com/imfunniee" target="_blank">
|
||||
made on earth by a human
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="forks"
|
||||
style="display:none;">
|
||||
<h1>Forks.</h1>
|
||||
<div class="projects"
|
||||
id="forks_section"></div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<a href="https://github.com/imfunniee"
|
||||
target="_blank">made on earth by a human</a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const magicProjectsGrid = new MagicGrid(
|
||||
{
|
||||
container: "#work_section",
|
||||
animate: false,
|
||||
gutter: 30, // default gutter size
|
||||
static: true,
|
||||
useMin: false,
|
||||
maxColumns: 2,
|
||||
useTransform: true
|
||||
});
|
||||
<script>
|
||||
const magicProjectsGrid = new MagicGrid({
|
||||
container: "#work_section",
|
||||
animate: false,
|
||||
gutter: 30, // default gutter size
|
||||
static: true,
|
||||
useMin: false,
|
||||
maxColumns: 2,
|
||||
useTransform: true
|
||||
});
|
||||
|
||||
const magicForksGrid = new MagicGrid(
|
||||
{
|
||||
container: "#forks_section",
|
||||
animate: false,
|
||||
gutter: 30, // default gutter size
|
||||
static: true,
|
||||
useMin: false,
|
||||
maxColumns: 2,
|
||||
useTransform: true
|
||||
});
|
||||
const magicForksGrid = new MagicGrid({
|
||||
container: "#forks_section",
|
||||
animate: false,
|
||||
gutter: 30, // default gutter size
|
||||
static: true,
|
||||
useMin: false,
|
||||
maxColumns: 2,
|
||||
useTransform: true
|
||||
});
|
||||
|
||||
$("document").ready(() =>
|
||||
{
|
||||
magicProjectsGrid.listen();
|
||||
magicForksGrid.listen();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
$("document").ready(() => {
|
||||
magicProjectsGrid.listen();
|
||||
magicForksGrid.listen();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,20 @@
|
|||
:root {
|
||||
--bg-color: rgb(10, 10, 10);
|
||||
--text-color: #fff;
|
||||
--background-image: linear-gradient(90deg,
|
||||
rgba(10, 10, 10, 0.3),
|
||||
rgb(10, 10, 10, 1)),
|
||||
url("{{{background}}}");
|
||||
--background-background: linear-gradient(0deg,
|
||||
rgba(10, 10, 10, 1),
|
||||
rgba(10, 10, 10, 0.6)),
|
||||
url("{{{background}}}") center center fixed;
|
||||
--background-image: linear-gradient(
|
||||
90deg,
|
||||
rgba(10, 10, 10, 0.3),
|
||||
rgb(10, 10, 10, 1)
|
||||
),
|
||||
url("{{{background}}}");
|
||||
--background-background: linear-gradient(
|
||||
0deg,
|
||||
rgba(10, 10, 10, 1),
|
||||
rgba(10, 10, 10, 0.6)
|
||||
),
|
||||
url("{{{background}}}") center center fixed;
|
||||
--height: 50vh;
|
||||
--gradient: linear-gradient(90deg, #009bef, #ff0000);
|
||||
}
|
||||
|
||||
#display h1 {
|
||||
|
|
@ -24,9 +29,11 @@
|
|||
|
||||
@media (max-width: 800px) {
|
||||
:root {
|
||||
--background-image: linear-gradient(0deg,
|
||||
rgba(10, 10, 10, 1),
|
||||
rgba(10, 10, 10, 0)),
|
||||
url("{{{background}}}") !important;
|
||||
--background-image: linear-gradient(
|
||||
0deg,
|
||||
rgba(10, 10, 10, 1),
|
||||
rgba(10, 10, 10, 0)
|
||||
),
|
||||
url("{{{background}}}") !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
:root {
|
||||
--bg-color: #fff;
|
||||
--text-color: rgb(10, 10, 10);
|
||||
--background-image: linear-gradient(90deg,
|
||||
rgba(10, 10, 10, 0.4),
|
||||
rgb(10, 10, 10, 0.4)),
|
||||
url("{{{background}}}");
|
||||
--background-image: linear-gradient(
|
||||
90deg,
|
||||
rgba(10, 10, 10, 0.4),
|
||||
rgb(10, 10, 10, 0.4)
|
||||
),
|
||||
url("{{{background}}}");
|
||||
--background-background: #fff;
|
||||
}
|
||||
--gradient: linear-gradient(90deg, #009bef, #ff0000);
|
||||
}
|
||||
|
|
|
|||
80
populate.js
80
populate.js
|
|
@ -4,33 +4,20 @@ const jsdom = require("jsdom").JSDOM,
|
|||
options = {
|
||||
resources: "usable"
|
||||
};
|
||||
const
|
||||
{
|
||||
getConfig,
|
||||
outDir
|
||||
} = require("./utils");
|
||||
const
|
||||
{
|
||||
getRepos,
|
||||
getUser
|
||||
} = require("./api");
|
||||
const { getConfig, outDir } = require("./utils");
|
||||
const { getRepos, getUser } = require("./api");
|
||||
|
||||
function convertToEmoji(text)
|
||||
{
|
||||
function convertToEmoji(text) {
|
||||
if (text == null) return;
|
||||
text = text.toString();
|
||||
var pattern = /(?<=:\s*).*?(?=\s*:)/gs;
|
||||
if (text.match(pattern) != null)
|
||||
{
|
||||
if (text.match(pattern) != null) {
|
||||
var str = text.match(pattern);
|
||||
str = str.filter(function(arr)
|
||||
{
|
||||
str = str.filter(function(arr) {
|
||||
return /\S/.test(arr);
|
||||
});
|
||||
for (i = 0; i < str.length; i++)
|
||||
{
|
||||
if (emoji.URLS[str[i]] != undefined)
|
||||
{
|
||||
for (i = 0; i < str.length; i++) {
|
||||
if (emoji.URLS[str[i]] != undefined) {
|
||||
text = text.replace(
|
||||
`:${str[i]}:`,
|
||||
`<img src="${emoji.URLS[str[i]]}" class="emoji">`
|
||||
|
|
@ -38,17 +25,13 @@ function convertToEmoji(text)
|
|||
}
|
||||
}
|
||||
return text;
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
return text;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports.updateHTML = (username, opts) =>
|
||||
{
|
||||
const
|
||||
{
|
||||
module.exports.updateHTML = (username, opts) => {
|
||||
const {
|
||||
includeFork,
|
||||
codepen,
|
||||
dev,
|
||||
|
|
@ -60,31 +43,22 @@ module.exports.updateHTML = (username, opts) =>
|
|||
//add data to assets/index.html
|
||||
jsdom
|
||||
.fromFile(`${__dirname}/assets/index.html`, options)
|
||||
.then(function(dom)
|
||||
{
|
||||
.then(function(dom) {
|
||||
let window = dom.window,
|
||||
document = window.document;
|
||||
(async () =>
|
||||
{
|
||||
try
|
||||
{
|
||||
(async () => {
|
||||
try {
|
||||
console.log("Building HTML/CSS...");
|
||||
const repos = await getRepos(username, opts);
|
||||
|
||||
for (var i = 0; i < repos.length; i++)
|
||||
{
|
||||
for (var i = 0; i < repos.length; i++) {
|
||||
let element;
|
||||
if (repos[i].fork == false)
|
||||
{
|
||||
if (repos[i].fork == false) {
|
||||
element = document.getElementById("work_section");
|
||||
}
|
||||
else if (includeFork == true)
|
||||
{
|
||||
} else if (includeFork == true) {
|
||||
document.getElementById("forks").style.display = "block";
|
||||
element = document.getElementById("forks_section");
|
||||
}
|
||||
else
|
||||
{
|
||||
} else {
|
||||
continue;
|
||||
}
|
||||
element.innerHTML += `
|
||||
|
|
@ -136,9 +110,6 @@ module.exports.updateHTML = (username, opts) =>
|
|||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:title" content="${user.login}" />
|
||||
<meta name="twitter:description" content="${user.bio}" />`;
|
||||
document.getElementById(
|
||||
"profile_img"
|
||||
).style.background = `url('${user.avatar_url}') center center`;
|
||||
document.getElementById(
|
||||
"username"
|
||||
).innerHTML = `<span style="display:${
|
||||
|
|
@ -176,7 +147,7 @@ module.exports.updateHTML = (username, opts) =>
|
|||
dribbble == null ? "none !important" : "block"
|
||||
};"><a href="https://www.dribbble.com/${dribbble}" target="_blank" class="socials"><i class="mdi mdi-dribbble"></i></a></span>
|
||||
<span style="display:${
|
||||
email == null ? "none !important" : "block"
|
||||
email == null ? "none !important" : "block"
|
||||
};"><a href="mailto:${email}" target="_blank" class="socials"><i class="mdi mdi-email"></i></a></span>
|
||||
<span style="display:${
|
||||
instagram == null ? "none !important" : "block"
|
||||
|
|
@ -195,8 +166,7 @@ module.exports.updateHTML = (username, opts) =>
|
|||
await fs.writeFile(
|
||||
`${outDir}/config.json`,
|
||||
JSON.stringify(data, null, " "),
|
||||
function(err)
|
||||
{
|
||||
function(err) {
|
||||
if (err) throw err;
|
||||
console.log("Config file updated.");
|
||||
}
|
||||
|
|
@ -204,21 +174,17 @@ module.exports.updateHTML = (username, opts) =>
|
|||
await fs.writeFile(
|
||||
`${outDir}/index.html`,
|
||||
"<!DOCTYPE html>" + window.document.documentElement.outerHTML,
|
||||
function(error)
|
||||
{
|
||||
function(error) {
|
||||
if (error) throw error;
|
||||
console.log(`Build Complete, Files can be Found @ ${outDir}\n`);
|
||||
}
|
||||
);
|
||||
}
|
||||
catch (error)
|
||||
{
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
})();
|
||||
})
|
||||
.catch(function(error)
|
||||
{
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue