1
0
Fork 0
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 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

View file

@ -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 {

View file

@ -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>

View file

@ -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;
}
}
}

View file

@ -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);
}

View file

@ -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);
});
};
};