dylan/gitfolio
1
0
Fork 0
mirror of https://github.com/dilllxd/gitfolio.git synced 2024-08-14 22:28:09 +00:00
Code Issues Projects Releases Wiki Activity

Animate Profile Picture

Browse source
This commit is contained in:
K4USTU3H 2019-12-09 22:34:29 +05:30
parent 44e28393cf
commit 644b39dd12
No known key found for this signature in database
GPG key ID: C51A67AF09CB9767
5 changed files with 158 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
assets/index.css
View file

@ -97,13 +97,26 @@ body {
#profile_img { #profile_img {
width: 180px; width: 180px;
height: 180px; height: 180px;
min-width: 180px; background: var(--gradient);
min-height: 180px; transition: background 0.5s ease;
max-width: 180px; background-size: 300% 300%;
max-height: 180px; animation: grad 8s ease infinite;
border-radius: 5px; -webkit-background-clip: text;
background-size: cover !important; font-size: 128px;
background-repeat: no-repeat !important; 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 { #profile div {
@ -267,13 +280,27 @@ body {
} }
#profile_img { #profile_img {
width: 120px;
height: 120px;
min-width: 120px;
min-height: 120px;
max-width: 120px;
max-height: 120px;
margin: 0px auto !important; 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 { #work {

50
assets/index.html
View file

@ -1,26 +1,28 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" <meta name="viewport" content="width=device-width, initial-scale=1.0" />
content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta http-equiv="X-UA-Compatible"
content="ie=edge" />
<title></title> <title></title>
<link rel="stylesheet" <link
href="https://cdn.materialdesignicons.com/4.5.95/css/materialdesignicons.min.css" /> rel="stylesheet"
<script src="https://code.jquery.com/jquery-3.4.1.min.js" 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=" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script> crossorigin="anonymous"
></script>
<script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script> <script src="https://unpkg.com/magic-grid/dist/magic-grid.min.js"></script>
<link rel="stylesheet" <link rel="stylesheet" href="index.css" />
href="index.css" />
</head> </head>
<body> <body>
<div id="profile"> <div id="profile">
<div id="profile_img"></div> <div id="profile_img">
<span id="status">K_</span>
</div>
<div id="username"> <div id="username">
<div id="fullname"></div> <div id="fullname"></div>
</div> </div>
@ -30,23 +32,20 @@
<div id="display"> <div id="display">
<div id="work"> <div id="work">
<h1>Work.</h1> <h1>Work.</h1>
<div class="projects" <div class="projects" id="work_section"></div>
id="work_section"></div>
</div> </div>
<div id="forks" <div id="forks" style="display:none;">
style="display:none;">
<h1>Forks.</h1> <h1>Forks.</h1>
<div class="projects" <div class="projects" id="forks_section"></div>
id="forks_section"></div>
</div> </div>
<div id="footer"> <div id="footer">
<a href="https://github.com/imfunniee" <a href="https://github.com/imfunniee" target="_blank">
target="_blank">made on earth by a human</a> made on earth by a human
</a>
</div> </div>
</div> </div>
<script> <script>
const magicProjectsGrid = new MagicGrid( const magicProjectsGrid = new MagicGrid({
{
container: "#work_section", container: "#work_section",
animate: false, animate: false,
gutter: 30, // default gutter size gutter: 30, // default gutter size
@ -56,8 +55,7 @@
useTransform: true useTransform: true
}); });
const magicForksGrid = new MagicGrid( const magicForksGrid = new MagicGrid({
{
container: "#forks_section", container: "#forks_section",
animate: false, animate: false,
gutter: 30, // default gutter size gutter: 30, // default gutter size
@ -67,12 +65,10 @@
useTransform: true useTransform: true
}); });
$("document").ready(() => $("document").ready(() => {
{
magicProjectsGrid.listen(); magicProjectsGrid.listen();
magicForksGrid.listen(); magicForksGrid.listen();
}); });
</script> </script>
</body> </body>
</html> </html>

19
assets/themes/dark.css
View file

@ -1,15 +1,20 @@
:root { :root {
--bg-color: rgb(10, 10, 10); --bg-color: rgb(10, 10, 10);
--text-color: #fff; --text-color: #fff;
--background-image: linear-gradient(90deg, --background-image: linear-gradient(
90deg,
rgba(10, 10, 10, 0.3), rgba(10, 10, 10, 0.3),
rgb(10, 10, 10, 1)), rgb(10, 10, 10, 1)
),
url("{{{background}}}"); url("{{{background}}}");
--background-background: linear-gradient(0deg, --background-background: linear-gradient(
0deg,
rgba(10, 10, 10, 1), rgba(10, 10, 10, 1),
rgba(10, 10, 10, 0.6)), rgba(10, 10, 10, 0.6)
),
url("{{{background}}}") center center fixed; url("{{{background}}}") center center fixed;
--height: 50vh; --height: 50vh;
--gradient: linear-gradient(90deg, #009bef, #ff0000);
} }
#display h1 { #display h1 {
@ -24,9 +29,11 @@
@media (max-width: 800px) { @media (max-width: 800px) {
:root { :root {
--background-image: linear-gradient(0deg, --background-image: linear-gradient(
0deg,
rgba(10, 10, 10, 1), rgba(10, 10, 10, 1),
rgba(10, 10, 10, 0)), rgba(10, 10, 10, 0)
),
url("{{{background}}}") !important; url("{{{background}}}") !important;
} }
} }

7
assets/themes/light.css
View file

@ -1,9 +1,12 @@
:root { :root {
--bg-color: #fff; --bg-color: #fff;
--text-color: rgb(10, 10, 10); --text-color: rgb(10, 10, 10);
--background-image: linear-gradient(90deg, --background-image: linear-gradient(
90deg,
rgba(10, 10, 10, 0.4), rgba(10, 10, 10, 0.4),
rgb(10, 10, 10, 0.4)), rgb(10, 10, 10, 0.4)
),
url("{{{background}}}"); url("{{{background}}}");
--background-background: #fff; --background-background: #fff;
--gradient: linear-gradient(90deg, #009bef, #ff0000);
} }

76
populate.js
View file

@ -4,33 +4,20 @@ const jsdom = require("jsdom").JSDOM,
options = { options = {
resources: "usable" resources: "usable"
}; };
const const { getConfig, outDir } = require("./utils");
{ const { getRepos, getUser } = require("./api");
getConfig,
outDir
} = require("./utils");
const
{
getRepos,
getUser
} = require("./api");
function convertToEmoji(text) function convertToEmoji(text) {
{
if (text == null) return; if (text == null) return;
text = text.toString(); text = text.toString();
var pattern = /(?<=:\s*).*?(?=\s*:)/gs; var pattern = /(?<=:\s*).*?(?=\s*:)/gs;
if (text.match(pattern) != null) if (text.match(pattern) != null) {
{
var str = text.match(pattern); var str = text.match(pattern);
str = str.filter(function(arr) str = str.filter(function(arr) {
{
return /\S/.test(arr); return /\S/.test(arr);
}); });
for (i = 0; i < str.length; i++) for (i = 0; i < str.length; i++) {
{ if (emoji.URLS[str[i]] != undefined) {
if (emoji.URLS[str[i]] != undefined)
{
text = text.replace( text = text.replace(
`:${str[i]}:`, `:${str[i]}:`,
`<img src="${emoji.URLS[str[i]]}" class="emoji">` `<img src="${emoji.URLS[str[i]]}" class="emoji">`
@ -38,17 +25,13 @@ function convertToEmoji(text)
} }
} }
return text; return text;
} } else {
else
{
return text; return text;
} }
} }
module.exports.updateHTML = (username, opts) => module.exports.updateHTML = (username, opts) => {
{ const {
const
{
includeFork, includeFork,
codepen, codepen,
dev, dev,
@ -60,31 +43,22 @@ module.exports.updateHTML = (username, opts) =>
//add data to assets/index.html //add data to assets/index.html
jsdom jsdom
.fromFile(`${__dirname}/assets/index.html`, options) .fromFile(`${__dirname}/assets/index.html`, options)
.then(function(dom) .then(function(dom) {
{
let window = dom.window, let window = dom.window,
document = window.document; document = window.document;
(async () => (async () => {
{ try {
try
{
console.log("Building HTML/CSS..."); console.log("Building HTML/CSS...");
const repos = await getRepos(username, opts); const repos = await getRepos(username, opts);
for (var i = 0; i < repos.length; i++) for (var i = 0; i < repos.length; i++) {
{
let element; let element;
if (repos[i].fork == false) if (repos[i].fork == false) {
{
element = document.getElementById("work_section"); element = document.getElementById("work_section");
} } else if (includeFork == true) {
else if (includeFork == true)
{
document.getElementById("forks").style.display = "block"; document.getElementById("forks").style.display = "block";
element = document.getElementById("forks_section"); element = document.getElementById("forks_section");
} } else {
else
{
continue; continue;
} }
element.innerHTML += ` element.innerHTML += `
@ -136,9 +110,6 @@ module.exports.updateHTML = (username, opts) =>
<meta name="twitter:card" content="summary" /> <meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="${user.login}" /> <meta name="twitter:title" content="${user.login}" />
<meta name="twitter:description" content="${user.bio}" />`; <meta name="twitter:description" content="${user.bio}" />`;
document.getElementById(
"profile_img"
).style.background = `url('${user.avatar_url}') center center`;
document.getElementById( document.getElementById(
"username" "username"
).innerHTML = `<span style="display:${ ).innerHTML = `<span style="display:${
@ -195,8 +166,7 @@ module.exports.updateHTML = (username, opts) =>
await fs.writeFile( await fs.writeFile(
`${outDir}/config.json`, `${outDir}/config.json`,
JSON.stringify(data, null, " "), JSON.stringify(data, null, " "),
function(err) function(err) {
{
if (err) throw err; if (err) throw err;
console.log("Config file updated."); console.log("Config file updated.");
} }
@ -204,21 +174,17 @@ module.exports.updateHTML = (username, opts) =>
await fs.writeFile( await fs.writeFile(
`${outDir}/index.html`, `${outDir}/index.html`,
"<!DOCTYPE html>" + window.document.documentElement.outerHTML, "<!DOCTYPE html>" + window.document.documentElement.outerHTML,
function(error) function(error) {
{
if (error) throw error; if (error) throw error;
console.log(`Build Complete, Files can be Found @ ${outDir}\n`); console.log(`Build Complete, Files can be Found @ ${outDir}\n`);
} }
); );
} } catch (error) {
catch (error)
{
console.log(error); console.log(error);
} }
})(); })();
}) })
.catch(function(error) .catch(function(error) {
{
console.log(error); console.log(error);
}); });
}; };