mirror of
https://github.com/dilllxd/gitfolio.git
synced 2024-08-14 22:28:09 +00:00
Add files via upload
This commit is contained in:
imfunny
GitHub
parent
4a2872171d
commit
ee354ae852
19 changed files with 3180 additions and 2387 deletions
|
|
@ -1,9 +1 @@
|
|||
[
|
||||
{
|
||||
"url_title": "FooBar",
|
||||
"title": "FooBar",
|
||||
"sub_title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
|
||||
"top_image": "https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450",
|
||||
"visible": true
|
||||
}
|
||||
]
|
||||
[]
|
||||
|
|
@ -1,64 +1,125 @@
|
|||
<!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">
|
||||
<!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>Lorem ipsum dolor</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
|
||||
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.4.1.min.js"
|
||||
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loading">
|
||||
<div id="spinner"></div>
|
||||
<div id="spinner"></div>
|
||||
</div>
|
||||
<a href="/" class="go_back"><i class="fas fa-arrow-left"></i></a>
|
||||
<div id="background_overlay"></div>
|
||||
<div id="background"></div>
|
||||
<table id="profile_blog">
|
||||
<tbody><tr>
|
||||
<td style="width:8vw;"><div id="profile_img_blog"></div></td>
|
||||
<td style="width:52vw;">
|
||||
<div id="username_blog"></div>
|
||||
</td>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:8vw;"><div id="profile_img_blog"></div></td>
|
||||
<td style="width:52vw;">
|
||||
<div id="username_blog"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
</tbody>
|
||||
</table>
|
||||
<div id="blog-display">
|
||||
<h1 id="blog_title">Lorem ipsum dolor</h1>
|
||||
<h2 id="blog_sub_title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
|
||||
<div id="blog">
|
||||
<img src="https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat pretium sem, ac maximus dui sodales a. Nunc aliquet hendrerit turpis ac egestas. Phasellus volutpat tristique maximus. <b>Pellentesque feugiat eget nisi et dignissim.</b> Nam nibh erat, sollicitudin non facilisis nec, scelerisque nec ipsum. Sed accumsan velit condimentum, pharetra felis vitae, commodo tellus. <u><i>Mauris consequat luctus orci.</i></u></p>
|
||||
<p>
|
||||
Vivamus pharetra lobortis dui non tincidunt. Mauris vitae nisi vestibulum, mollis magna a, maximus mi. Suspendisse dictum eget augue quis sodales. Quisque rutrum ligula nec dapibus tincidunt. <span>Proin hendrerit massa a tellus vestibulum, a hendrerit ipsum iaculis. Suspendisse potenti.</span> Praesent eget erat blandit, finibus sapien vitae, ullamcorper erat. Integer blandit, felis at ullamcorper maximus, odio lectus pretium mauris, vel consequat lectus quam eu risus. Pellentesque gravida nec diam eget vehicula.
|
||||
</p>
|
||||
<img src="https://images.unsplash.com/photo-1556814278-8906c7d3a05f?w=1050">
|
||||
<p>
|
||||
Donec hendrerit turpis non libero eleifend dignissim. Mauris non tempor metus, et tristique massa. Integer consequat justo quam, vitae aliquam arcu vestibulum at. Donec porttitor quam in tempus convallis. Praesent feugiat eget eros vitae accumsan. Duis ultricies odio quis nisl volutpat, consectetur imperdiet sem laoreet. Quisque maximus semper ligula at tincidunt. Pellentesque accumsan varius vehicula.
|
||||
</p>
|
||||
</div>
|
||||
<h1 id="blog_title">Lorem ipsum dolor</h1>
|
||||
<h2 id="blog_sub_title">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
</h2>
|
||||
<div id="blog">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1553748024-d1b27fb3f960?w=1450"
|
||||
/>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat
|
||||
pretium sem, ac maximus dui sodales a. Nunc aliquet hendrerit turpis
|
||||
ac egestas. Phasellus volutpat tristique maximus.
|
||||
<b>Pellentesque feugiat eget nisi et dignissim.</b> Nam nibh erat,
|
||||
sollicitudin non facilisis nec, scelerisque nec ipsum. Sed accumsan
|
||||
velit condimentum, pharetra felis vitae, commodo tellus.
|
||||
<u><i>Mauris consequat luctus orci.</i></u>
|
||||
</p>
|
||||
<p>
|
||||
Vivamus pharetra lobortis dui non tincidunt. Mauris vitae nisi
|
||||
vestibulum, mollis magna a, maximus mi. Suspendisse dictum eget augue
|
||||
quis sodales. Quisque rutrum ligula nec dapibus tincidunt.
|
||||
<span
|
||||
>Proin hendrerit massa a tellus vestibulum, a hendrerit ipsum
|
||||
iaculis. Suspendisse potenti.</span
|
||||
>
|
||||
Praesent eget erat blandit, finibus sapien vitae, ullamcorper erat.
|
||||
Integer blandit, felis at ullamcorper maximus, odio lectus pretium
|
||||
mauris, vel consequat lectus quam eu risus. Pellentesque gravida nec
|
||||
diam eget vehicula.
|
||||
</p>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1556814278-8906c7d3a05f?w=1050"
|
||||
/>
|
||||
<p>
|
||||
Donec hendrerit turpis non libero eleifend dignissim. Mauris non
|
||||
tempor metus, et tristique massa. Integer consequat justo quam, vitae
|
||||
aliquam arcu vestibulum at. Donec porttitor quam in tempus convallis.
|
||||
Praesent feugiat eget eros vitae accumsan. Duis ultricies odio quis
|
||||
nisl volutpat, consectetur imperdiet sem laoreet. Quisque maximus
|
||||
semper ligula at tincidunt. Pellentesque accumsan varius vehicula.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer_blog">
|
||||
<a href="https://github.com/imfunniee" target="_blank">made on earth by a human</a>
|
||||
<a href="https://github.com/imfunniee" target="_blank"
|
||||
>made on earth by a human</a
|
||||
>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
setTimeout(function(){
|
||||
setTimeout(function() {
|
||||
document.getElementById("loading").classList.add("animated");
|
||||
document.getElementById("loading").classList.add("fadeOut");
|
||||
setTimeout(function(){
|
||||
document.getElementById("loading").classList.remove("animated");
|
||||
document.getElementById("loading").classList.remove("fadeOut");
|
||||
document.getElementById("loading").style.display = "none";
|
||||
},800);
|
||||
},1500);
|
||||
$.getJSON("../../config.json", function(user){
|
||||
setTimeout(function() {
|
||||
document.getElementById("loading").classList.remove("animated");
|
||||
document.getElementById("loading").classList.remove("fadeOut");
|
||||
document.getElementById("loading").style.display = "none";
|
||||
}, 800);
|
||||
}, 1500);
|
||||
$.getJSON("../../config.json", function(user) {
|
||||
var icon = document.createElement("link");
|
||||
icon.setAttribute("rel", "icon");
|
||||
icon.setAttribute("href", user[0].userimg);
|
||||
icon.setAttribute("type", "image/png");
|
||||
document.getElementsByTagName("head")[0].appendChild(icon);
|
||||
document.getElementById("profile_img_blog").style.background = `url('${user[0].userimg}') center center`;
|
||||
document.getElementById("username_blog").innerHTML = `<spanstyle="display:${user[0].name == null || !user[0].name ? 'none' : 'block'};">${user[0].name}</span><br>@${user[0].username}<b id="blog_time"></b>`;
|
||||
});
|
||||
</script>
|
||||
document.getElementById("profile_img_blog").style.background = `url('${
|
||||
user[0].userimg
|
||||
}') center center`;
|
||||
document.getElementById(
|
||||
"username_blog"
|
||||
).innerHTML = `<span style="display:${
|
||||
user[0].name == null || !user[0].name ? "none" : "block"
|
||||
};">${user[0].name}</span>@${user[0].username}<b id="blog_time"></b>`;
|
||||
|
||||
</body></html>
|
||||
if ((user[0].theme = "dark.css")) {
|
||||
document.querySelector("#background_overlay").style.background =
|
||||
"linear-gradient(0deg, rgba(10, 10, 10, 1), rgba(10, 10, 10, 0.1))";
|
||||
} else {
|
||||
document.querySelector("#background_overlay").style.background =
|
||||
"linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.1))";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
533
assets/index.css
533
assets/index.css
|
|
@ -1,15 +1,15 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Poppins');
|
||||
@import url('https://fonts.googleapis.com/css?family=Questrial');
|
||||
|
||||
body{
|
||||
margin:0%;
|
||||
padding:0%;
|
||||
width:100vw;
|
||||
background:var(--bg-color);
|
||||
color:var(--text-color);
|
||||
max-width:100vw;
|
||||
overflow-x:hidden;
|
||||
align-items:center;
|
||||
body {
|
||||
margin: 0%;
|
||||
padding: 0%;
|
||||
width: 100vw;
|
||||
background: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
align-items: center;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
|
|
@ -23,448 +23,525 @@ body{
|
|||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
top:0;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#spinner {
|
||||
animation: rotate 0.5s infinite linear;
|
||||
width:50px;
|
||||
height:50px;
|
||||
border:2px solid var(--bg-color);
|
||||
border-bottom:2px solid var(--text-color);
|
||||
border-radius:50%;
|
||||
margin:0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 2px solid var(--bg-color);
|
||||
border-bottom: 2px solid var(--text-color);
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% {transform: rotate(0deg);}
|
||||
100% {transform: rotate(360deg);}
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#profile {
|
||||
width:24vw;
|
||||
padding:4vh 3vw;
|
||||
height:92vh;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:center;
|
||||
text-align:left;
|
||||
background:var(--background-image) center center;
|
||||
width: 24vw;
|
||||
padding: 4vh 3vw;
|
||||
height: 92vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
background: var(--background-image) center center;
|
||||
background-size: cover !important;
|
||||
background-repeat:no-repeat;
|
||||
position:fixed;
|
||||
color:#fff !important;
|
||||
background-repeat: no-repeat;
|
||||
position: fixed;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
#display {
|
||||
width:64vw;
|
||||
padding:4vh 3vw;
|
||||
height:92vh;
|
||||
display:inline-block;
|
||||
padding-left:33vw;
|
||||
width: 64vw;
|
||||
padding: 4vh 3vw;
|
||||
height: 92vh;
|
||||
display: inline-block;
|
||||
padding-left: 33vw;
|
||||
}
|
||||
|
||||
#display h1 {
|
||||
font-size:50px;
|
||||
color:var(--text-color);
|
||||
font-weight:bold;
|
||||
font-size: 50px;
|
||||
color: var(--text-color);
|
||||
font-weight: bold;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
width:18px;
|
||||
height:18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#profile_img_blog {
|
||||
border-radius:50%;
|
||||
width:90px;
|
||||
height:90px;
|
||||
background-size:cover !important;
|
||||
border-radius: 50%;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background-size: cover !important;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#username_blog {
|
||||
font-size:18px;
|
||||
color:var(--text-color);
|
||||
font-size: 18px;
|
||||
color: var(--text-color);
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight:bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#username_blog span {
|
||||
font-size:24px;
|
||||
font-size: 24px;
|
||||
font-family: 'Questrial', sans-serif !important;
|
||||
}
|
||||
|
||||
#username_blog b {
|
||||
font-size:12px;
|
||||
font-family:'Poppins', sans-serif;
|
||||
font-weight:bold;
|
||||
font-size: 12px;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#blog-display {
|
||||
width:60vw;
|
||||
margin:0px 20vw;
|
||||
text-align:left;
|
||||
margin-top:3vh;
|
||||
z-index:1;
|
||||
width: 60vw;
|
||||
margin: 0px 20vw;
|
||||
text-align: left;
|
||||
margin-top: 3vh;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#profile_blog {
|
||||
width:60vw;
|
||||
margin:0px 20vw;
|
||||
margin-top:10vh;
|
||||
text-align:left;
|
||||
z-index:1;
|
||||
width: 60vw;
|
||||
margin: 0px 20vw;
|
||||
margin-top: 34vh;
|
||||
text-align: left;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#background_overlay {
|
||||
width: 100vw;
|
||||
height: 55vh;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#background {
|
||||
width:100vw;
|
||||
height:55vh;
|
||||
background:var(--background-background);
|
||||
background-size:cover !important;
|
||||
background-repeat:no-repeat;
|
||||
width: 100vw;
|
||||
height: 55vh;
|
||||
background-size: cover !important;
|
||||
background-repeat: no-repeat !important;
|
||||
position: absolute;
|
||||
z-index:-1;
|
||||
margin-top:-10vh;
|
||||
z-index: -2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#blog-display h1 {
|
||||
font-size:50px;
|
||||
color:var(--text-color);
|
||||
font-weight:bold;
|
||||
font-size: 50px;
|
||||
color: var(--text-color);
|
||||
font-weight: bold;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
}
|
||||
|
||||
#blog-display h2 {
|
||||
color:var(--blog-gray-color);
|
||||
color: var(--blog-gray-color);
|
||||
}
|
||||
|
||||
#blog-display {
|
||||
padding:1vh 0px;
|
||||
padding: 1vh 0px;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
}
|
||||
|
||||
#blog p {
|
||||
font-size:17px;
|
||||
line-height:25px;
|
||||
word-spacing:1.2px;
|
||||
margin:5vh 0px;
|
||||
font-size: 17px;
|
||||
line-height: 25px;
|
||||
word-spacing: 1.2px;
|
||||
margin: 5vh 0px;
|
||||
}
|
||||
|
||||
#blog p span {
|
||||
padding:2px 4px;
|
||||
background:var(--text-color);
|
||||
color:var(--bg-color) !important;
|
||||
padding: 2px 4px;
|
||||
background: var(--text-color);
|
||||
color: var(--bg-color) !important;
|
||||
}
|
||||
|
||||
#blog img {
|
||||
width:100%;
|
||||
margin:2vh 0px;
|
||||
border-radius:5px;
|
||||
border:1px solid rgb(0, 0, 0, 0.08);
|
||||
width: 100%;
|
||||
margin: 2vh 0px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid rgb(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
#header {
|
||||
width:63vw;
|
||||
text-align:right;
|
||||
padding:3vh 0px;
|
||||
position:absolute;
|
||||
width: 63vw;
|
||||
text-align: right;
|
||||
padding: 3vh 0px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#header a {
|
||||
color:var(--text-color);
|
||||
text-decoration:none;
|
||||
margin-left:4vw;
|
||||
font-weight:bold;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
margin-left: 4vw;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#footer_blog {
|
||||
width:90vw;
|
||||
padding:8vh 5vw;
|
||||
text-align:center;
|
||||
width: 90vw;
|
||||
padding: 8vh 5vw;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#footer_blog a {
|
||||
color:var(--text-color) !important;
|
||||
text-decoration:none;
|
||||
color: var(--text-color) !important;
|
||||
text-decoration: none;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
font-weight:bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#footer {
|
||||
width:100%;
|
||||
padding:8vh 0px;
|
||||
text-align:center;
|
||||
width: 100%;
|
||||
padding: 8vh 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
color:var(--text-color) !important;
|
||||
text-decoration:none;
|
||||
color: var(--text-color) !important;
|
||||
text-decoration: none;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
font-weight:bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#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;
|
||||
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;
|
||||
}
|
||||
|
||||
#profile div {
|
||||
font-weight:bold;
|
||||
margin:1.5vh 0px;
|
||||
font-weight: bold;
|
||||
margin: 1.5vh 0px;
|
||||
}
|
||||
|
||||
#username {
|
||||
font-size:18px;
|
||||
font-weight:bold;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#username span {
|
||||
font-size:24px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#userbio {
|
||||
font-size:26px;
|
||||
font-size: 26px;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
width:100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#about {
|
||||
font-size:18px;
|
||||
font-size: 18px;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
}
|
||||
|
||||
#about a,
|
||||
#username a {
|
||||
color:#fff !important;
|
||||
text-decoration:none;
|
||||
font-weight:bold;
|
||||
color: #fff !important;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#about a:hover,
|
||||
#username a:hover {
|
||||
text-decoration:underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#about span {
|
||||
margin:1vh 0px;
|
||||
display:block;
|
||||
margin: 1vh 0px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#about span i {
|
||||
font-size:16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#work {
|
||||
margin:2vh 0px;
|
||||
padding:4vh 0px !important;
|
||||
margin: 2vh 0px;
|
||||
padding: 4vh 0px !important;
|
||||
}
|
||||
|
||||
#forks {
|
||||
margin:2vh 0px;
|
||||
padding:4vh 0px !important;
|
||||
margin: 2vh 0px;
|
||||
padding: 4vh 0px !important;
|
||||
}
|
||||
|
||||
.projects {
|
||||
margin-left: -15px; /* align section w/ heading above */
|
||||
margin-left: -15px;
|
||||
/* align section w/ heading above */
|
||||
}
|
||||
|
||||
.projects a {
|
||||
/* 30px is the gutter size in magic grid */
|
||||
width: calc(49% - 30px); /* 49% avoids a weird single column on some wide screens */
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
/* 30px is the gutter size in magic grid */
|
||||
width: calc(49% - 30px);
|
||||
/* 49% avoids a weird single column on some wide screens */
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.projects section {
|
||||
width: 100%;
|
||||
padding:2.5vh 5%;
|
||||
display:inline-block;
|
||||
border-radius:5px;
|
||||
color:var(--text-color);
|
||||
border:1px solid rgb(0, 0, 0, 0.08);
|
||||
box-shadow:0px 0px 0px rgb(0, 0, 0, 0);
|
||||
transition:0.4s ease-in-out;
|
||||
transform:scale(1);
|
||||
padding: 2.5vh 5%;
|
||||
margin: 1vh 0px;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
color: var(--text-color);
|
||||
border: 1px solid rgb(0, 0, 0, 0.08);
|
||||
box-shadow: 0px 0px 0px rgb(0, 0, 0, 0);
|
||||
transition: 0.4s ease-in-out;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.projects section:hover {
|
||||
cursor: pointer;
|
||||
border:1px solid rgb(0, 0, 0, 0);
|
||||
box-shadow:0px 15px 35px rgb(0, 0, 0, 0.06);
|
||||
transform:scale(1.03);
|
||||
border: 1px solid rgb(0, 0, 0, 0);
|
||||
box-shadow: 0px 15px 35px rgb(0, 0, 0, 0.06);
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.section_title {
|
||||
font-size:24px;
|
||||
font-weight:bold;
|
||||
margin:1vh 0px;
|
||||
padding:0px 1px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 1vh 0px;
|
||||
padding: 0px 1px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.about_section {
|
||||
font-size:18px;
|
||||
font-size: 18px;
|
||||
font-family: 'Questrial', sans-serif;
|
||||
margin:2vh 0px;
|
||||
font-weight:bold;
|
||||
margin: 2vh 0px;
|
||||
font-weight: bold;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.bottom_section {
|
||||
margin:1vh 0px;
|
||||
font-size:14px;
|
||||
margin: 1vh 0px;
|
||||
font-size: 14px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.bottom_section span {
|
||||
margin-right:20px;
|
||||
font-weight:bold;
|
||||
margin-right: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bottom_section span i {
|
||||
font-size:15px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.socials {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
margin: 3vh 0px !important;
|
||||
}
|
||||
|
||||
.socials span {
|
||||
display: inline-block !important;
|
||||
margin-right: 2vw !important;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
.socials span a {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
#blog_section {
|
||||
margin:2vh 0px;
|
||||
padding:2vh 0px !important;
|
||||
margin: 2vh 0px;
|
||||
padding: 2vh 0px !important;
|
||||
}
|
||||
|
||||
#blogs {
|
||||
columns: 2;
|
||||
}
|
||||
|
||||
#blog_title {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
#blog_sub_title {
|
||||
font-size: 36px;
|
||||
margin-top: -2vh;
|
||||
}
|
||||
|
||||
#blogs section {
|
||||
width:85%;
|
||||
display:inline-block;
|
||||
border-radius:5px;
|
||||
color:var(--text-color);
|
||||
border:1px solid rgb(0, 0, 0, 0.04);
|
||||
box-shadow:0px 0px 0px rgb(0, 0, 0, 0);
|
||||
transition:0.4s ease-in-out;
|
||||
transform:scale(1);
|
||||
padding:0px;
|
||||
margin:2vh 0px;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
color: var(--text-color);
|
||||
border: 1px solid rgb(0, 0, 0, 0.04);
|
||||
box-shadow: 0px 0px 0px rgb(0, 0, 0, 0);
|
||||
transition: 0.4s ease-in-out;
|
||||
transform: scale(1);
|
||||
padding: 0px;
|
||||
margin: 2vh 0px;
|
||||
}
|
||||
|
||||
#blogs section img {
|
||||
width:100%;
|
||||
border-radius:5px 5px 0px 0px;
|
||||
width: 100%;
|
||||
border-radius: 5px 5px 0px 0px;
|
||||
}
|
||||
|
||||
.blog_container {
|
||||
padding:2.5vh 5%;
|
||||
padding: 2.5vh 5%;
|
||||
}
|
||||
|
||||
#blogs section:hover {
|
||||
cursor: pointer;
|
||||
border:1px solid rgb(0, 0, 0, 0);
|
||||
box-shadow:0px 15px 35px rgb(0, 0, 0, 0.06);
|
||||
transform:scale(1.03);
|
||||
border: 1px solid rgb(0, 0, 0, 0);
|
||||
box-shadow: 0px 15px 35px rgb(0, 0, 0, 0.06);
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.go_back {
|
||||
position: absolute;
|
||||
color:var(--text-color);
|
||||
font-size:26px;
|
||||
margin-left:5vw;
|
||||
margin-top:4vh;
|
||||
color: var(--text-color);
|
||||
font-size: 26px;
|
||||
margin-left: 5vw;
|
||||
margin-top: 4vh;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color:var(--bg-color);
|
||||
background:var(--text-color);
|
||||
color: var(--bg-color);
|
||||
background: var(--text-color);
|
||||
}
|
||||
|
||||
@media (max-width: 800px){
|
||||
@media (max-width: 800px) {
|
||||
#profile {
|
||||
width:90vw;
|
||||
padding:4vh 5vw;
|
||||
height:60vh;
|
||||
text-align:center;
|
||||
width: 90vw;
|
||||
padding: 4vh 5vw;
|
||||
height: 60vh;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#display {
|
||||
width:90vw;
|
||||
padding:4vh 5vw;
|
||||
height:auto;
|
||||
display:inline-block;
|
||||
padding-left:5vw;
|
||||
width: 90vw;
|
||||
padding: 4vh 5vw;
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
padding-left: 5vw;
|
||||
}
|
||||
|
||||
#profile_img {
|
||||
width:120px;
|
||||
height:120px;
|
||||
min-width:120px;
|
||||
min-height:120px;
|
||||
max-width:120px;
|
||||
max-height:120px;
|
||||
margin:0px auto !important;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
min-width: 120px;
|
||||
min-height: 120px;
|
||||
max-width: 120px;
|
||||
max-height: 120px;
|
||||
margin: 0px auto !important;
|
||||
}
|
||||
|
||||
#work {
|
||||
margin:0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.projects {
|
||||
margin-left: 0; /* remove neg margin to align w/ header */
|
||||
margin-left: 0;
|
||||
/* remove neg margin to align w/ header */
|
||||
}
|
||||
|
||||
.projects a {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.projects section {
|
||||
width:88%;
|
||||
width: 88%;
|
||||
}
|
||||
|
||||
#blogs {
|
||||
columns: 1;
|
||||
}
|
||||
|
||||
#blogs section {
|
||||
width:98%;
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
#blog_section {
|
||||
margin:0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#blog-display {
|
||||
width:90vw;
|
||||
margin:0px 5vw;
|
||||
text-align:left;
|
||||
margin-top:0vh;
|
||||
z-index:1;
|
||||
width: 90vw;
|
||||
margin: 0px 5vw;
|
||||
text-align: left;
|
||||
margin-top: 0vh;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#blog_title {
|
||||
font-size: 32px !important;
|
||||
}
|
||||
|
||||
#blog_sub_title {
|
||||
font-size: 24px;
|
||||
margin-top: -1vh;
|
||||
}
|
||||
|
||||
#profile_blog {
|
||||
width:90vw;
|
||||
margin:0px 5vw;
|
||||
margin-top:10vh;
|
||||
text-align:left;
|
||||
z-index:1;
|
||||
width: 90vw;
|
||||
margin: 0px 5vw;
|
||||
margin-top: 36vh;
|
||||
text-align: left;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#profile_img_blog {
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.go_back {
|
||||
position: relative;
|
||||
color:var(--text-color);
|
||||
font-size:26px;
|
||||
margin-left:5vw;
|
||||
top:5vh;
|
||||
color: var(--text-color);
|
||||
font-size: 26px;
|
||||
margin-left: 5vw;
|
||||
top: 5vh;
|
||||
}
|
||||
|
||||
#blog img {
|
||||
margin:1vh 0px !important;
|
||||
margin: 1vh 0px !important;
|
||||
}
|
||||
|
||||
#blog p {
|
||||
margin:2vh 0px;
|
||||
margin: 2vh 0px;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {width:5px;height:5px;}
|
||||
::-webkit-scrollbar-track {background:var(--bg-color);}
|
||||
::-webkit-scrollbar-thumb {background:var(--text-color);}
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--text-color);
|
||||
}
|
||||
|
|
@ -1,118 +1,121 @@
|
|||
<!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://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
|
||||
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
|
||||
<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="loading">
|
||||
<div id="spinner"></div>
|
||||
</div>
|
||||
<div id="profile">
|
||||
<div id="profile_img"></div>
|
||||
<div id="username">
|
||||
<div id="fullname"></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>
|
||||
<div id="forks" style="display:none;">
|
||||
<h1>Forks.</h1>
|
||||
<div class="projects" id="forks_section"></div>
|
||||
</div>
|
||||
<div id="blog_section">
|
||||
<h1>Blog.</h1>
|
||||
<div id="blogs"></div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<a href="https://github.com/imfunniee" target="_blank">made on earth by a human</a>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
setTimeout(function () {
|
||||
document.getElementById("loading").classList.add("animated");
|
||||
document.getElementById("loading").classList.add("fadeOut");
|
||||
setTimeout(function () {
|
||||
document.getElementById("loading").classList.remove("animated");
|
||||
document.getElementById("loading").classList.remove("fadeOut");
|
||||
document.getElementById("loading").style.display = "none";
|
||||
}, 800);
|
||||
}, 1500);
|
||||
$.getJSON("blog.json", function (blog) {
|
||||
blog = blog || [];
|
||||
if (blog.length == 0) {
|
||||
return document.getElementById("blog_section").style.display = "none";
|
||||
}
|
||||
for (var i = 0; i < blog.length; i++) {
|
||||
$("#blogs").append(`
|
||||
<a href="./blog/${blog[i].url_title}/" target="_blank">
|
||||
<section>
|
||||
<img src="${blog[i].top_image}">
|
||||
<div class="blog_container">
|
||||
<div class="section_title">${blog[i].title}</div>
|
||||
<div class="about_section">
|
||||
${blog[i].sub_title}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
`);
|
||||
}
|
||||
}).fail(function () {
|
||||
return document.getElementById("blog_section").style.display = "none";
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker.register('service-worker.js');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<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
|
||||
})
|
||||
|
||||
$('document').ready(() => {
|
||||
magicProjectsGrid.listen();
|
||||
magicForksGrid.listen();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!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://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
|
||||
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<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="loading">
|
||||
<div id="spinner"></div>
|
||||
</div>
|
||||
<div id="profile">
|
||||
<div id="profile_img"></div>
|
||||
<div id="username">
|
||||
<div id="fullname"></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>
|
||||
<div id="forks" style="display:none;">
|
||||
<h1>Forks.</h1>
|
||||
<div class="projects" id="forks_section"></div>
|
||||
</div>
|
||||
<div id="blog_section">
|
||||
<h1>Blog.</h1>
|
||||
<div id="blogs"></div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<a href="https://github.com/imfunniee" target="_blank"
|
||||
>made on earth by a human</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
setTimeout(function() {
|
||||
document.getElementById("loading").classList.add("animated");
|
||||
document.getElementById("loading").classList.add("fadeOut");
|
||||
setTimeout(function() {
|
||||
document.getElementById("loading").classList.remove("animated");
|
||||
document.getElementById("loading").classList.remove("fadeOut");
|
||||
document.getElementById("loading").style.display = "none";
|
||||
}, 800);
|
||||
}, 1500);
|
||||
$.getJSON("blog.json", function(blog) {
|
||||
blog = blog || [];
|
||||
if (blog.length == 0) {
|
||||
return (document.getElementById("blog_section").style.display =
|
||||
"none");
|
||||
}
|
||||
for (var i = 0; i < blog.length; i++) {
|
||||
$("#blogs").append(`
|
||||
<a href="./blog/${blog[i].url_title}/" target="_blank">
|
||||
<section>
|
||||
<img src="./blog/${blog[i].url_title}/${blog[i].top_image}">
|
||||
<div class="blog_container">
|
||||
<div class="section_title">${blog[i].title}</div>
|
||||
<div class="about_section">
|
||||
${blog[i].sub_title}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
`);
|
||||
}
|
||||
}).fail(function() {
|
||||
return (document.getElementById("blog_section").style.display = "none");
|
||||
});
|
||||
</script>
|
||||
|
||||
<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
|
||||
});
|
||||
|
||||
$("document").ready(() => {
|
||||
magicProjectsGrid.listen();
|
||||
magicForksGrid.listen();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,30 +2,36 @@
|
|||
--bg-color: rgb(10, 10, 10);
|
||||
--text-color: #fff;
|
||||
--blog-gray-color: rgb(180, 180, 180);
|
||||
--background-image: linear-gradient(90deg, rgba(10, 10, 10, 0.6), rgb(10, 10, 10, 1)), url("{{{background}}}");
|
||||
--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;
|
||||
url("{{{background}}}") center center fixed;
|
||||
--height: 50vh;
|
||||
}
|
||||
|
||||
#display h1 {
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: #fff;
|
||||
}
|
||||
|
||||
#blog-display h1 {
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: #fff;
|
||||
}
|
||||
|
||||
.projects section {
|
||||
background: rgb(20, 20, 20);
|
||||
}
|
||||
|
||||
#blog_section section {
|
||||
background: rgb(20, 20, 20);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
:root {
|
||||
--background-image: linear-gradient(0deg, rgba(10, 10, 10, 1), rgba(10, 10, 10, 0)),
|
||||
url("{{{background}}}") !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue