diff --git a/index.html b/index.html
index 64795d9..ca554ae 100644
--- a/index.html
+++ b/index.html
@@ -1,81 +1,117 @@
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
-meow ฅ^•ﻌ•^ฅ
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Wahid Islam
-A Student, Developer & linux enthuist & A y/o
-
-
-Projects
+ meow ฅ^•ﻌ•^ฅ
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Wahid Islam
+
+ A Student, Developer & linux enthuist & A y/o
+
+
+
+ Projects
-
-
-
-
-
+
+
+
+
diff --git a/index.js b/index.js
index 95e3c6f..a8fb92e 100644
--- a/index.js
+++ b/index.js
@@ -3,9 +3,9 @@ console.log(`meow :3
ﾞ（ﾟ､ ｡ ７
l、ﾞ ~ヽ
じしf_, )ノ
-`)
+`);
-let theme= localStorage.getItem("darkTheme");
+let theme = localStorage.getItem("darkTheme");
const enableDarkMode = () => {
document.querySelector("body").classList.remove("light");
@@ -13,24 +13,34 @@ const enableDarkMode = () => {
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();
@@ -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 += `
@@ -79,9 +88,11 @@ fetch(repos)
`;
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)}`;
diff --git a/style.css b/style.css
index 0d3c31b..33940cf 100644
--- a/style.css
+++ b/style.css
@@ -1,310 +1,319 @@
-:root{
- --fg-primary:#f0f0f0;
- --fg-secoundary:#d0d0d0;
- --bg-primary:#151515;
- --bg-secoundary:#1f1f1f;
+:root {
+ --fg-primary: #f0f0f0;
+ --fg-secoundary: #d0d0d0;
+ --bg-primary: #151515;
+ --bg-secoundary: #1f1f1f;
}
*,
body {
- margin: 0;
- padding: 0;
- max-height:100vh;
- max-width:100vw;
+ margin: 0;
+ padding: 0;
+ max-height: 100vh;
+ max-width: 100vw;
}
.socials,
h2,
h3,
h4 {
- color: var(--fg-primary);
- transition : color 0.6s ease-in-out;
+ color: var(--fg-primary);
+ transition: color 0.6s ease-in-out;
}
-body.light .socials,body.light h2,body.light h3,body.light h4 {
+body.light .socials,
+body.light h2,
+body.light h3,
+body.light h4 {
color: var(--bg-primary);
}
a {
- text-decoration: none;
- color: inherit
+ text-decoration: none;
+ color: inherit;
}
-.info{
- margin:0 1.7em;
+.info {
+ margin: 0 1.7em;
}
.socials {
- display: flex;
- flex-direction: row;
- justify-content: center;
- font-size: 1.25rem;
- padding: 1em 1em;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ font-size: 1.25rem;
+ padding: 1em 1em;
}
-.socials svg{
- padding: 0 .8em 0 .8em;
+.socials svg {
+ padding: 0 0.8em 0 0.8em;
}
h4 {
- font-size: 1.1rem;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ font-size: 1.1rem;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
-.description{
- overflow: hidden;
- text-overflow: ellipsis;
+.description {
+ overflow: hidden;
+ text-overflow: ellipsis;
}
-
.project-holder {
- display: flex;
- overflow-x: hidden;
- flex-direction: column;
- margin:.5em;
- padding: .2em;
- border-radius: 13px;
- background: var(--bg-primary);
- box-shadow: 13px 13px 25px #0e0e0e, -13px -13px 25px #1c1c1c;
- transition : background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
-}
-.project-holder h4{
- display: flex;
- flex-direction: row;
- justify-content: space-between;
-}
-
-@media screen and (min-width:1200px){
- .project-holder{
- height:6.5em;
+ display: flex;
+ overflow-x: hidden;
+ flex-direction: column;
+ margin: 0.5em;
+ padding: 0.2em;
+ border-radius: 13px;
+ background: var(--bg-primary);
+ box-shadow:
+ 13px 13px 25px #0e0e0e,
+ -13px -13px 25px #1c1c1c;
+ transition:
+ background-color 0.4s ease-in-out,
+ box-shadow 0.4s ease-in-out;
+}
+.project-holder h4 {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+@media screen and (min-width: 1200px) {
+ .project-holder {
+ height: 6.5em;
margin: 1em;
}
}
body.light .project-holder {
background: var(--fg-primary);
- box-shadow: 13px 13px 25px #cccccc, -13px -13px 25px #ffffff;
+ box-shadow:
+ 13px 13px 25px #cccccc,
+ -13px -13px 25px #ffffff;
}
.fire,
-.fire>div {
- border-radius: 100%
+.fire > div {
+ border-radius: 100%;
}
.project-holder div {
- padding: 1em;
+ padding: 1em;
}
.project-holder div p {
- padding-top: .5em;
+ padding-top: 0.5em;
}
body {
- background-color: var(--bg-primary);
- height: 100%;
- width: 100%;
- font-family: 'Montserrat', sans-serif;
- transition : background-color 0.4s ease-in-out;
+ background-color: var(--bg-primary);
+ height: 100%;
+ width: 100%;
+ font-family: "Montserrat", sans-serif;
+ transition: background-color 0.4s ease-in-out;
}
-body.light{
- background-color: var(--fg-primary)
+body.light {
+ background-color: var(--fg-primary);
}
.logo-container {
- display: flex;
- justify-content: center;
- margin-top: 1em;
+ display: flex;
+ justify-content: center;
+ margin-top: 1em;
}
.heading p {
- padding-top: .5em
+ padding-top: 0.5em;
}
p {
- color: var(--fg-secoundary);
- font-size: 1rem;
- transition : color 0.6s ease-in-out;
+ color: var(--fg-secoundary);
+ font-size: 1rem;
+ transition: color 0.6s ease-in-out;
}
body.light p {
color: var(--bg-secoundary);
}
h2 {
- font-size: 2rem;
+ font-size: 2rem;
}
h3 {
- font-size: 1.5rem;
- margin: 1em;
+ font-size: 1.5rem;
+ margin: 1em;
}
-.nav{
- display:flex;
- flex-direction:row-reverse;
+.nav {
+ display: flex;
+ flex-direction: row-reverse;
margin: 0.75em;
-
}
button {
font-size: 1.2rem;
color: var(--fg-secoundary);
- display:flex;
- justify-content:center;
- align-items:center;
- height:45px;
- width:45px;
- border:none;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 45px;
+ width: 45px;
+ border: none;
border-radius: 10px;
background: var(--bg-primary);
- box-shadow: 10px 10px 21px #080808,
- -10px -10px 21px #222222;
- transition : background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
+ box-shadow:
+ 10px 10px 21px #080808,
+ -10px -10px 21px #222222;
+ transition:
+ background-color 0.4s ease-in-out,
+ box-shadow 0.4s ease-in-out;
}
-
-body.light button{
+body.light button {
color: var(--bg-secoundary);
background: var(--fg-primary);
- box-shadow: 10px 10px 10px #cccccc, -10px -10px 21px #ffffff;
+ box-shadow:
+ 10px 10px 10px #cccccc,
+ -10px -10px 21px #ffffff;
}
-
.heading {
- text-align: center;
- margin-top: 2em
+ text-align: center;
+ margin-top: 2em;
}
.projects {
- margin: 1em;
- display: grid;
- padding-bottom:2.5em;
-
+ margin: 1em;
+ display: grid;
+ padding-bottom: 2.5em;
}
-@media screen and (min-width:1200px){
- .projects{
- grid-template-columns:33.33% 33.33% 33.33%;
+@media screen and (min-width: 1200px) {
+ .projects {
+ grid-template-columns: 33.33% 33.33% 33.33%;
}
}
.fire {
- position: relative;
- width: 12em;
- height: 12em;
- overflow: hidden;
- filter: url(#fire-blur)
+ position: relative;
+ width: 12em;
+ height: 12em;
+ overflow: hidden;
+ filter: url(#fire-blur);
}
-.fire>div {
- position: absolute;
- left: 12%;
- bottom: 0;
- width: 5em;
- height: 5em;
- background: 0 0;
- animation-fill-mode: backwards;
- animation-name: firecircle;
- animation-duration: 1.2s;
- animation-timing-function: cubic-bezier(0.5, 0.07, 0.64, 1);
- animation-iteration-count: infinite;
- will-change: transform, background-color
+.fire > div {
+ position: absolute;
+ left: 12%;
+ bottom: 0;
+ width: 5em;
+ height: 5em;
+ background: 0 0;
+ animation-fill-mode: backwards;
+ animation-name: firecircle;
+ animation-duration: 1.2s;
+ animation-timing-function: cubic-bezier(0.5, 0.07, 0.64, 1);
+ animation-iteration-count: infinite;
+ will-change: transform, background-color;
}
-.fire>div:first-child {
- animation-delay: .14s;
- margin-left: .8em;
- margin-bottom: -1em
+.fire > div:first-child {
+ animation-delay: 0.14s;
+ margin-left: 0.8em;
+ margin-bottom: -1em;
}
-.fire>div:nth-child(2) {
- animation-delay: .28s;
- margin-left: 1.1em;
- margin-bottom: -1.8em
+.fire > div:nth-child(2) {
+ animation-delay: 0.28s;
+ margin-left: 1.1em;
+ margin-bottom: -1.8em;
}
-.fire>div:nth-child(3) {
- animation-delay: .42s;
- margin-left: 3.8em;
- margin-bottom: -1.8em
+.fire > div:nth-child(3) {
+ animation-delay: 0.42s;
+ margin-left: 3.8em;
+ margin-bottom: -1.8em;
}
-.fire>div:nth-child(4) {
- animation-delay: .56s;
- margin-left: 1.8em;
- margin-bottom: -2.1em
+.fire > div:nth-child(4) {
+ animation-delay: 0.56s;
+ margin-left: 1.8em;
+ margin-bottom: -2.1em;
}
-.fire>div:nth-child(5) {
- animation-delay: .7s;
- margin-left: 3.8em;
- margin-bottom: -2.1em
+.fire > div:nth-child(5) {
+ animation-delay: 0.7s;
+ margin-left: 3.8em;
+ margin-bottom: -2.1em;
}
-.fire>div:nth-child(6) {
- animation-delay: .84s;
- margin-left: 3.3em;
- margin-bottom: -1em
+.fire > div:nth-child(6) {
+ animation-delay: 0.84s;
+ margin-left: 3.3em;
+ margin-bottom: -1em;
}
-.fire>div:nth-child(7) {
- animation-delay: .98s;
- margin-left: 4em;
- margin-bottom: -2.2em
+.fire > div:nth-child(7) {
+ animation-delay: 0.98s;
+ margin-left: 4em;
+ margin-bottom: -2.2em;
}
-.fire>div:nth-child(8) {
- animation-delay: 1.12s;
- margin-left: .1em;
- margin-bottom: -1.5em
+.fire > div:nth-child(8) {
+ animation-delay: 1.12s;
+ margin-left: 0.1em;
+ margin-bottom: -1.5em;
}
-.fire>div:nth-child(9) {
- animation-delay: 1.26s;
- margin-left: 4.2em;
- margin-bottom: -2em
+.fire > div:nth-child(9) {
+ animation-delay: 1.26s;
+ margin-left: 4.2em;
+ margin-bottom: -2em;
}
-.fire>div:nth-child(10) {
- animation-delay: 1.4s;
- margin-left: 1.8em;
- margin-bottom: -2.2em
+.fire > div:nth-child(10) {
+ animation-delay: 1.4s;
+ margin-left: 1.8em;
+ margin-bottom: -2.2em;
}
-.fire>div:nth-child(11) {
- animation-delay: 1.54s;
- margin-left: 3.8em;
- margin-bottom: -2.2em
+.fire > div:nth-child(11) {
+ animation-delay: 1.54s;
+ margin-left: 3.8em;
+ margin-bottom: -2.2em;
}
-.fire>div:nth-child(12) {
- animation-delay: 1.68s;
- margin-left: .2em;
- margin-bottom: -2em
+.fire > div:nth-child(12) {
+ animation-delay: 1.68s;
+ margin-left: 0.2em;
+ margin-bottom: -2em;
}
-.fire>div:nth-child(13) {
- animation-delay: 1.82s;
- margin-left: .1em;
- margin-bottom: -2.1em
+.fire > div:nth-child(13) {
+ animation-delay: 1.82s;
+ margin-left: 0.1em;
+ margin-bottom: -2.1em;
}
-.fire>div:nth-child(14) {
- animation-delay: 1.96s;
- margin-left: 2.1em;
- margin-bottom: -2.1em
+.fire > div:nth-child(14) {
+ animation-delay: 1.96s;
+ margin-left: 2.1em;
+ margin-bottom: -2.1em;
}
-.fire>div:nth-child(15) {
- animation-delay: 2.1s;
- margin-left: .9em;
- margin-bottom: -1.6em
+.fire > div:nth-child(15) {
+ animation-delay: 2.1s;
+ margin-left: 0.9em;
+ margin-bottom: -1.6em;
}
@keyframes firecircle {
- 0% {
- transform: translateY(0) scale(1);
- background: hsl(0deg, 70%, 60%)
- }
-
- 100% {
- transform: translateY(-11em) scale(0);
- background: hsl(50deg, 100%, 80%)
- }
+ 0% {
+ transform: translateY(0) scale(1);
+ background: hsl(0deg, 70%, 60%);
+ }
+
+ 100% {
+ transform: translateY(-11em) scale(0);
+ background: hsl(50deg, 100%, 80%);
+ }
}
diff --git a/test.css b/test.css
deleted file mode 100644
index f43e464..0000000
--- a/test.css
+++ /dev/null
@@ -1,121 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@900&family=Sumana:wght@700&display=swap");
-body {
- align-items: center;
- background-color: hsl(180, 20%, 90%);
- display: flex;
- font-family: "Merriweather", serif;
- flex-wrap: wrap;
- justify-content: center;
- height: 100vh;
- margin: 0;
-}
-.person {
- align-items: center;
- display: flex;
- flex-direction: column;
- max-width: 40rem;
-}
-.container {
- border-radius: 50%;
- height: 312px;
- -webkit-tap-highlight-color: transparent;
- transform: scale(1.25);
- transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
- width: 400px;
-}
-.container:hover {
- transform: scale(1.42);
-}
-.container:after {
- background-color: #eee4e4;
- content: "";
- height: 10px;
- position: absolute;
- top: 390px;
- width: 100%;
-}
-
-.container-inner {
- clip-path: path(
- "M 390,400 C 390,504.9341 304.9341,590 200,590 95.065898,590 10,504.9341 10,400 V 10 H 200 390 Z"
- );
- position: relative;
- transform-origin: 50%;
- top: -200px;
-}
-.circle {
- background-color: #fee7d3;
- border-radius: 50%;
- cursor: pointer;
- height: 380px;
- left: 10px;
- pointer-events: none;
- position: absolute;
- top: 210px;
- width: 380px;
-}
-.img {
- pointer-events: none;
- position: relative;
- transform: translateY(15px) scale(1.2);
- transform-origin: 50% bottom;
- transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-.container:hover .img {
- transform: translateY(0px) scale(1.26);
-}
-.img1 {
- left: 1rem;
- top: 13rem;
- max-width: 85%;
-}
-
-
-.divider {
- margin-top: 14rem;
- background-color: #ca6060;
- height: 3px;
- width: 360px;
-}
-.name {
- color: #404245;
- font-size: 56px;
- font-weight: 600;
- margin-top: 16px;
- text-align: center;
-}
-.title {
- color: #6e6e6e;
- font-family: arial;
- font-size: 34px;
- font-style: italic;
- margin-top: 4px;
-}
-
-@media screen and (min-width: 1080px){
- .container{
- transform: scale(0.5);
- }
- .container:hover {
- transform: scale(0.57);
- }
- .divider {
- margin-top: unset;
- height: 1px;
- width: 160px;
- }
- .name {
- color: #404245;
- font-size: 36px;
- font-weight: 600;
- margin-top: 16px;
- text-align: center;
- }
- .title {
- color: #6e6e6e;
- font-family: arial;
- font-size: 14px;
- font-style: italic;
- margin-top: 4px;
- }
-}
diff --git a/test.html b/test.html
deleted file mode 100644
index 412515d..0000000
--- a/test.html
+++ /dev/null
@@ -1,19 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
Wahid
-
Yeasa'r Jamai
-