Skip to content

Commit

Permalink
updated icons ig?
Browse files Browse the repository at this point in the history
  • Loading branch information
@psynyde
psynyde committed Nov 18, 2023
1 parent 350869d commit 6bd2b77
Show file tree
Hide file tree
Showing 5 changed files with 340 additions and 424 deletions.
190 changes: 113 additions & 77 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,81 +1,117 @@
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width, initial-scale=1.0">
<link rel=stylesheet href=style.css>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap" rel="stylesheet">
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap"
rel="stylesheet"
/>

<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
<link rel="manifest" href="assets/site.webmanifest">
<link
rel="apple-touch-icon"
sizes="180x180"
href="assets/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="assets/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="assets/favicon-16x16.png"
/>
<link rel="manifest" href="assets/site.webmanifest" />

<title>meow ฅ^•ﻌ•^ฅ</title>
</head>
<body class="dark">
<div class="nav">
<button onclick="changetheme()">
<span id="btn-icon" class="iconify" data-icon="bx:sun"></span>
</button>
</div>
<div class=logo-container>
<div class=fire>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<svg xmlns=http://www.w3.org/2000/svg version=1.1 class=fire-effect width=0 height=0>
<defs>
<filter id=fire-blur>
<feGaussianBlur in=SourceGraphic stdDeviation=10 result=blur />
<feColorMatrix in=blur mode=matrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result=goo />
<feBlend in=SourceGraphic in2=fire-blur />
</filter>
</defs>
</svg>
</div>
<section class=heading>
<h2>Wahid Islam</h2>
<p class="info">A Student, Developer & linux enthuist & A <span class="age"></span> y/o</p>
</section>
<section class=socials>
<a href=https://discordapp.com/users/697797379583115315/ target=_blank>
<span class=iconify data-icon=line-md:discord></span>
</a>
<a href=https://t.me/wahidislam target=_blank>
<span class=iconify data-icon=line-md:telegram></span>
</a>
<a href=https://github.com/PsyNyde target=_blank>
<span class=iconify data-icon=line-md:github-loop></span>
</a>
<a href=https://reddit.com/u/wahidislamlinad target=_blank>
<span class=iconify data-icon=line-md:reddit></span>
</a>
<a href=https://www.buymeacoffee.com/wahidislam target=_blank>
<span class=iconify data-icon=line-md:buy-me-a-coffee-filled></span>
</a>
</section>
<h3>Projects</h3>
<title>meow ฅ^•ﻌ•^ฅ</title>
</head>
<body class="dark">
<div class="nav">
<button onclick="changetheme()">
<span id="btn-icon" class="iconify" data-icon="bx:sun"></span>
</button>
</div>
<div class="logo-container">
<div class="fire">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
class="fire-effect"
width="0"
height="0"
>
<defs>
<filter id="fire-blur">
<feGaussianBlur
in="SourceGraphic"
stdDeviation="10"
result="blur"
/>
<feColorMatrix
in="blur"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7"
result="goo"
/>
<feBlend in="SourceGraphic" in2="fire-blur" />
</filter>
</defs>
</svg>
</div>
<section class="heading">
<h2>Wahid Islam</h2>
<p class="info">
A Student, Developer & linux enthuist & A <span class="age"></span> y/o
</p>
</section>
<section class="socials">
<a
href="https://discordapp.com/users/697797379583115315/"
target="_blank"
>
<span class="iconify" data-icon="line-md:discord"></span>
</a>
<a href="https://t.me/wahidislam" target="_blank">
<span class="iconify" data-icon="line-md:telegram"></span>
</a>
<a href="https://github.com/PsyNyde" target="_blank">
<span class="iconify" data-icon="line-md:github-loop"></span>
</a>
<a href="https://reddit.com/u/wahidislamlinad" target="_blank">
<span class="iconify" data-icon="line-md:reddit"></span>
</a>
<a href="https://www.buymeacoffee.com/wahidislam" target="_blank">
<span class="iconify" data-icon="line-md:buy-me-a-coffee-filled"></span>
</a>
</section>
<h3>Projects</h3>

<section class=projects> </section>

</body>
<script src=https://code.iconify.design/2/2.2.1/iconify.min.js></script>
<script src="index.js"></script>
<section class="projects"></section>
</body>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script src="index.js"></script>
</html>
55 changes: 33 additions & 22 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,44 @@ console.log(`meow :3
ﾞ（ﾟ､ ｡ ７
　l、ﾞ ~ヽ
　じしf_, )ノ
`)
`);

let theme= localStorage.getItem("darkTheme");
let theme = localStorage.getItem("darkTheme");

const enableDarkMode = () => {
document.querySelector("body").classList.remove("light");
document.querySelector("body").classList.add("dark");

icon = document.getElementById("btn-icon");
icon.removeAttribute("data-icon");
icon.setAttribute("data-icon","bx:sun");
icon.setAttribute(
"data-icon",
"line-md:sunny-outline-to-moon-alt-loop-transition",
);

localStorage.removeItem("darkTheme");
localStorage.setItem("darkTheme", "enabled");
};

const disableDarkMode = () => {
document.querySelector("body").classList.remove("dark");
document.querySelector("body").classList.add("light");
document.querySelector("body").classList.remove("dark");
document.querySelector("body").classList.add("light");
icon = document.getElementById("btn-icon");
icon.removeAttribute("data-icon");
icon.setAttribute("data-icon","bx:moon");
icon.setAttribute(
"data-icon",
"line-md:moon-alt-to-sunny-outline-loop-transition",
);

localStorage.removeItem("darkTheme");
localStorage.setItem("darkTheme", "disabled");
};

if((theme == "enabled") || (window.matchMedia('(prefers-color-scheme: dark)').matches && theme !== "disabled")){
if (
theme == "enabled" ||
(window.matchMedia("(prefers-color-scheme: dark)").matches &&
theme !== "disabled")
) {
enableDarkMode();
} else {
disableDarkMode();
Expand All @@ -39,29 +49,28 @@ if((theme == "enabled") || (window.matchMedia('(prefers-color-scheme: dark)').ma
const changetheme = () => {
theme = localStorage.getItem("darkTheme");

theme !== "enabled" ? enableDarkMode() : disableDarkMode();
}
theme !== "enabled" ? enableDarkMode() : disableDarkMode();
};

//make repos load automatically

var projects = document.querySelector('.projects')
const repos = 'https://api.github.com/users/PsyNyde/repos?sort=updated';
const api = 'https://api.github.com/users/PsyNyde';
var projects = document.querySelector(".projects");
const repos = "https://api.github.com/users/PsyNyde/repos?sort=updated";
const api = "https://api.github.com/users/PsyNyde";

fetch(api)
.then(res => res.json())
.then(data => {
.then((res) => res.json())
.then((data) => {
var followers = data.followers;
})
});

fetch(repos)
.then(res => res.json())
.then(data => {
.then((res) => res.json())
.then((data) => {
i = 0;
num = 6;
while (i < num) {

repo=data[i]
repo = data[i];

projects.innerHTML += `
<div class=project-holder>
Expand All @@ -79,9 +88,11 @@ fetch(repos)
</div>
`;
i++;

}
})
});

const age = document.querySelector(".age");
age.textContent = `${((new Date()-new Date(2003,11,10))/31557600000).toFixed(2)}`
age.textContent = `${(
(new Date() - new Date(2003, 11, 10)) /
31557600000
).toFixed(2)}`;
Loading

0 comments on commit 6bd2b77

Please sign in to comment.