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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue