summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.gitignore1
-rw-r--r--images/cave.jpgbin0 -> 6870017 bytes
-rw-r--r--index.html3
-rwxr-xr-xlaunch.sh36
-rw-r--r--pages/info/about.html2
-rw-r--r--pages/repo/github/repos.html4
-rw-r--r--src/css/about.css2
-rw-r--r--src/css/ghrepo.css94
-rw-r--r--src/css/index.css12
-rw-r--r--src/css/style.css29
-rw-r--r--src/js/getrepo.js6
-rw-r--r--src/js/tilt.conf.js4
12 files changed, 148 insertions, 45 deletions
diff --git a/.gitignore b/.gitignore
index 43e52ccd..556e0028 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
.DS_Store
.tmp/**
+.vercel
diff --git a/images/cave.jpg b/images/cave.jpg
new file mode 100644
index 00000000..957ef00a
--- /dev/null
+++ b/images/cave.jpg
Binary files differ
diff --git a/index.html b/index.html
index 886cba46..c1a6c990 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,9 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="littleblack111's profile website">
+ <meta name="keywords" content="littleblack, littleblack111, profile">
+ <meta name="author" content="littleblack111">
<title>littleblack111</title>
<link rel="stylesheet" href="/src/css/style.css">
<link rel="stylesheet" href="/src/css/index.css">
diff --git a/launch.sh b/launch.sh
index 9b02a8ea..d14f143a 100755
--- a/launch.sh
+++ b/launch.sh
@@ -1,9 +1,27 @@
-printf '\033[0;35mCode Checking Starts...\033[0m\n'
-html5validator --also-check-css --also-check-svg --verbose | npx gnomon || printf '\033[0;31mCode Check Failed...\033[0m\n'
-# sleep .5
-echo
-htmltest --conf ./.htmltest.yml | npx gnomon || printf '\033[0;31mCode Check Failed...\033[0m\n'
-# sleep .5
-printf '\033[0;32mNpx Server Starting...\033[0m\n'
-
-exec npx serve -d -p 209 #| npx gnomon;
+function selfcheck() {
+ printf '\033[0;35mCode Checking Starts...\033[0m\n'
+ html5validator --also-check-css --also-check-svg --verbose | npx gnomon || printf '\033[0;31mCode Check Failed...\033[0m\n'
+ # sleep .5
+ echo
+ htmltest --conf ./.htmltest.yml | npx gnomon || printf '\033[0;31mCode Check Failed...\033[0m\n'
+ # sleep .5
+}
+
+function start() {
+ printf '\033[0;32mNpx Server Starting...\033[0m\n'
+ exec npx serve -d -p 209 #| npx gnomon;
+}
+
+function main() {
+ selfcheck
+ start
+}
+
+if [ "$1" ]; then
+ $@
+ exit 0
+fi
+
+main
+
+
diff --git a/pages/info/about.html b/pages/info/about.html
index 89d0c75b..3278eb09 100644
--- a/pages/info/about.html
+++ b/pages/info/about.html
@@ -15,7 +15,7 @@
<!-- main page -->
<section class="aboutPage">
<div class="pp">
- <img src="/images/self.jpg" alt="Me">
+ <img src="/images/self.jpg" alt="Me" loading="lazy">
</div>
<div class="name">
<strong>littleblack111</strong>
diff --git a/pages/repo/github/repos.html b/pages/repo/github/repos.html
index 575f0cf4..b4d239b8 100644
--- a/pages/repo/github/repos.html
+++ b/pages/repo/github/repos.html
@@ -21,7 +21,6 @@
<!-- main Github Functions -->
<main class="container tilt">
- <h1>All Of My Projects</h1>
<section class="intro">
<div class="user-info animate animation--fast slideInTop"></div>
</section>
@@ -32,7 +31,8 @@
<section class="repos">
<input type="text" class="filter-repos animate animate--slow slideInTop hide" placeholder="Search Projects" />
- <ul class="repo-list animate slideInTop tilt"></ul>
+ <div class="loader"></div>
+ <ul class="repo-list animate slideInTop tilt", id="repo-list"></ul>
</section>
</main>
<script src="/src/js/tilt.js" />
diff --git a/src/css/about.css b/src/css/about.css
index 580d5f40..81769118 100644
--- a/src/css/about.css
+++ b/src/css/about.css
@@ -5,5 +5,5 @@
.name {
font-family: smooth;
font-size: 5vw;
-
+
}
diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css
index 87a2da6a..7f47c825 100644
--- a/src/css/ghrepo.css
+++ b/src/css/ghrepo.css
@@ -1,22 +1,22 @@
-@media (prefers-color-scheme: light) {
- :root {
- --text: #151515;
- --accent: #1688f0;
- --bg-main: #fff;
- --bg-repo: #f0f0f0;
- --bg-user: #f5f5f5;
+/* @media (prefers-color-scheme: light) { */
+/* :root { */
+/* --text: #151515; */
+/* --accent: #1688f0; */
+/* --bg-main: #fff; */
+/* --bg-repo: #f0f0f0; */
+/* --bg-user: #f5f5f5; */
+/* } */
+/* } */
+
+/* @media (prefers-color-scheme: dark) { */
+:root {
+ --text: #e5e5e5;
+ --accent: #1688f0;
+ --bg-main: #000;
+ --bg-repo: #0f0f1a;
+ --bg-user: #0a0a0f;
}
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --text: #e5e5e5;
- --accent: #1688f0;
- --bg-main: #000;
- --bg-repo: #0f0f1a;
- --bg-user: #0a0a0f;
- }
-}
+/* } */
* {
box-sizing: border-box;
@@ -95,10 +95,15 @@ img {
box-shadow: 0 0 10mm rgba(0,0,0,.7);
}
+img:hover {
+ transform: scale(1.1);
+}
+
a {
background: transparent;
color: var(--accent);
text-decoration: none;
+ -webkit-transition: background 0.5s
}
a:hover {
@@ -161,6 +166,10 @@ ul {
background: transparent;
}
+.user-info *:hover {
+ transform: scale(1.1);
+}
+
.filter-repos,
input {
background: rgba(10, 10, 15, 0.3);
@@ -173,11 +182,29 @@ input {
border: 2px solid var(--accent);
box-shadow: 0 0 10mm rgba(0,0,0,.7);
text-align: center;
+ -webkit-transition: all 0.5s
}
+input:hover,
.filter-repos:hover {
- background: rgba(10, 10, 15, 0.5);
- transition: background 0.5s
+ /* background: rgba(10, 10, 15, 0.5); */
+ transition: all 0.5s;
+ -webkit-backdrop-filter: blur(5px);
+ backdrop-filter: blur(5px);
+ box-shadow: 0 0 50mm rgba(0,0,0,.7);
+ transform: scale(1.1);
+ transition: all 0.5s;
+}
+
+input:active,
+.filter-repos:active {
+ background: #F4E8C1;
+ box-shadow: 0 0 10mm rgba(0,0,0,.7);
+}
+
+input:active,
+.filter-repos:active {
+ background: rgba(244, 232, 193, 0.5);
}
.repos {
@@ -197,6 +224,13 @@ input {
/* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
}
+.repos:hover {
+ background: rgba(0, 0, 0, 0.3);
+ transform: scale(1.01);
+ box-shadow: 0 0 20mm rgba(128,128,128,.7);
+ transition: all 0.5s;
+}
+
h3 {
margin: 4px;
width: 100%;
@@ -225,6 +259,7 @@ h3 {
background: transparent;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
+ -webkit-transition: all 0.5s
/* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
/* background: rgba(128, 128, 128, 0.1); */
}
@@ -236,9 +271,14 @@ h3 {
.repo-list li:hover {
/* box-shadow: 0 3px 6px var(--accent), 0 3px 6px var(--accent); */
background: rgba(0, 0, 0, 0.5);
- transition: background 0.5s
+ transform: scale(1.1);
+ transition: background 0.5s, transform 1s, all 0.3s
}
+.repo-list:hover .repo:not(:hover) {
+ background: rgba(0, 0, 0, 0.3);
+ transition: all 1s
+}
.link-btn {
padding: 10px 20px;
/* background: var(--bg-main); */
@@ -247,13 +287,14 @@ h3 {
border-radius: 30px;
border: 2px solid var(--accent);
color: var(--text);
+ -webkit-transition: background 0.5s, transform 0.5s, border 0.5s, all 0.5s;
}
.link-btn:hover {
background: rgba(22, 136, 240, 0.5);
border: 2px solid var(--text);
transform: scale(1.1);
- transition: background 0.5s, transform 0.3s, border 0.5s;
+ transition: background 0.5s, transform 0.5s, border 0.5s, all 0.5s;
}
.repo-list p {
@@ -262,13 +303,20 @@ h3 {
background: transparent;
}
+.intro:hover,
+.user-info:hover {
+ -webkit-backdrop-filter: blur(8px);
+ backdrop-filter: blur(8px);
+ transform: scale(1.1);
+ transition: all 0.5s;
+}
+
.user-info {
/* background: transparent; */
background: rgba(128, 128, 128, 0.2);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
/* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
-
}
@media (min-width: 700px) {
diff --git a/src/css/index.css b/src/css/index.css
index a305a2e4..a7fb6205 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -44,6 +44,12 @@
text-align: center;
}
+.window:hover,
+.placeholder:hover {
+ transform: scale(1.1);
+ transition: all 0.3s
+}
+
.window .placeholder .text {
position: relative;
width: 100%;
@@ -60,6 +66,12 @@
.title {
text-shadow: 15px 15px 15px black;
+ transition: all 0.5s
+}
+
+.title:hover {
+ transform: scale(1.1);
+ transition: all 0.5s
}
.window .placeholder .text .br {
diff --git a/src/css/style.css b/src/css/style.css
index a4e608fb..d9bf3c56 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -97,6 +97,10 @@ body {
}
/* transition */
+* {
+ transition: all 0.3s;
+}
+
*:hover {
transition: all 0.3s
}
@@ -117,7 +121,7 @@ header {
align-items:center;
/* background: color(0, 0, 0, .1); */
z-index: 1000;
- background-color: #331E38;
+ background: rgba(128, 128, 128, 0.2)
}
.navBar a {
@@ -144,19 +148,21 @@ header {
bottom: 0;
width: 100%;
height: 1mm;
- background: #F4E8C1;
+ background: rgba(128, 128, 128, 0.2);
border-radius: 1mm;
transform: scaleX(0);
- transition: transform 0.3s;
+ transition: all 0.3s;
}
.navBar a:hover::after {
- transform: scaleX(1);
+ transform: scaleX(1.1);
}
.navBar a:hover {
background: rgba(255, 255, 255, 0.2);
- transition: background 1s
+ -webkit-backdrop-filter: blur(5px);
+ backdrop-filter: blur(5px);
+ transition: all 1s
}
.navBar a.active::after {
@@ -171,6 +177,19 @@ header {
transform: scaleX(1);
}
+.navBar:active,
+.navBar:hover,
+header:active,
+header:hover,
+#navBarHeader:hover,
+#navBarHeader:active
+{
+ transform: scale(1.005);
+ -webkit-backdrop-filter: blur(5px);
+ backdrop-filter: blur(5px);
+ transition: all 0.5s
+}
+
/* other ================================================== */
.contents {
diff --git a/src/js/getrepo.js b/src/js/getrepo.js
index 4c92b9c3..36c11df6 100644
--- a/src/js/getrepo.js
+++ b/src/js/getrepo.js
@@ -28,10 +28,12 @@ const displayProfile = (profile) => {
const userInfo = document.querySelector('.user-info');
userInfo.innerHTML = `
<figure>
- <img alt="user avatar" src=${profile.avatar_url} />
+ <a href=${profile.html_url}><img alt="user avatar" src=${profile.avatar_url} /></a>
</figure>
<div>
- <h2><a href=${profile.blog}><strong>${profile.name}</strong></a></h2>
+ <!-- <h2><a href=${profile.blog}><strong>${profile.name}</strong></a></h2> -->
+ <h2><a href=/><strong>${profile.name}</strong></a></h2>
+ <!-- <h2><a href=${profile.html_url}><strong>${profile.name}</strong></a></h2> -->
<p>${profile.bio}</p>
<p>
<strong>Mail:</strong> ${profile.email}
diff --git a/src/js/tilt.conf.js b/src/js/tilt.conf.js
index d0ef14ad..e98c8d70 100644
--- a/src/js/tilt.conf.js
+++ b/src/js/tilt.conf.js
@@ -1,5 +1,5 @@
VanillaTilt.init(document.querySelectorAll(".tilt"),{
glare: true,
- reverse: true,
- "max-glare": 0.5,
+ // reverse: true,
+ "max-glare": 0.1,
})
generated by cgit v1.2.3 (git 2.25.1) at 2026-11-01 14:57:28 +0000