Skip to content

Commit a3bf5a8

Browse files
Zane-LiaoZane-Liao
committed
first commit
0 parents  commit a3bf5a8

5 files changed

Lines changed: 326 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# This is an experimental personal website, basically all written by AI

‎Zane.jpg‎

38.5 KB
Loading

‎index.html‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE html>
2+
<html lang = "en">
3+
<head>
4+
<meta charset = "UTF-8">
5+
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
6+
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
7+
<title>My Geek Blog</title>
8+
<link rel = "stylesheet" href = "styles.css">
9+
<link href = "https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel = "stylesheet">
10+
</head>
11+
<body>
12+
<div id = "loading">
13+
<div class = "loader"></div>
14+
</div>
15+
16+
<div class = "background">
17+
<div id = "stars"></div>
18+
<div id = "stars2"></div>
19+
<div id = "stars3"></div>
20+
</div>
21+
22+
<header>
23+
<div class = "container">
24+
<div class = "profile-picture">
25+
<img src = "Zane.jpg" alt = "Profile Picture">
26+
</div>
27+
<div class = "header-text">
28+
<h1>Zane Liao's Blog</h1>
29+
<p>Become an independent developer.😎</p>
30+
<button id = "toggleMode">Toggle Night Mode</button>
31+
</div>
32+
</div>
33+
</header>
34+
35+
<nav>
36+
<ul>
37+
<li><a href = "#home" class = "nav-link">Home</a></li>
38+
<li><a href = "#about" class = "nav-link">About</a></li>
39+
<li><a href = "#blog" class = "nav-link">Blog</a></li>
40+
</ul>
41+
</nav>
42+
43+
<main>
44+
<div class = "container">
45+
<section id = "about">
46+
<h2>About Me</h2>
47+
<p>👋 Hey there! I'm a young guy from Asia with a passion for exploration and creativity.</p>
48+
</section>
49+
50+
<section id = "blog">
51+
<h2>Blog Posts</h2>
52+
<div class = "blog-post">
53+
<h3><a href = "#">First Blog Post</a></h3>
54+
<p>Introduction to my blog and what you can expect to find here.</p>
55+
</div>
56+
<button id = "loadMore">Load More Posts</button>
57+
58+
<h3>Write a new post: </h3>
59+
<textarea id = "newPostContent" rows = "4" cols = "50" placeholder = "Start writing your post..."></textarea>
60+
<p id = "wordCount">Word Count: 0</p>
61+
</section>
62+
</div>
63+
</main>
64+
65+
<footer>
66+
<div class = "container">
67+
<p>&copy; 2024 My Geek Blog. All rights reserved.</p>
68+
<p><a href = "https://github.com/Zane-Liao">GitHub</a> | <a href = "mailto:lzq666amn@gmail.com">Email</a></p>
69+
</div>
70+
</footer>
71+
72+
<script>
73+
document.addEventListener('DOMContentLoaded', function () {
74+
const loading = document.getElementById('loading');
75+
setTimeout(() => {
76+
loading.style.display = 'none';
77+
}, 2000);
78+
79+
const toggleModeButton = document.getElementById('toggleMode');
80+
toggleModeButton.addEventListener('click', function () {
81+
document.body.classList.toggle('night-mode');
82+
document.querySelector('header').classList.toggle('night-mode');
83+
document.querySelector('footer').classList.toggle('night-mode');
84+
});
85+
86+
const blogSection = document.getElementById('blog');
87+
const loadMoreButton = document.getElementById('loadMore');
88+
loadMoreButton.addEventListener('click', function () {
89+
const newPost = document.createElement('div');
90+
newPost.classList.add('blog-post');
91+
newPost.innerHTML = `
92+
<h3><a href = "#">New Blog Post</a></h3>
93+
<p>This is a new dynamically loaded blog post.</p>
94+
`;
95+
blogSection.insertBefore(newPost, loadMoreButton);
96+
});
97+
98+
document.querySelectorAll('.nav-link').forEach(anchor => {
99+
anchor.addEventListener('click', function (e) {
100+
e.preventDefault();
101+
const targetId = this.getAttribute('href');
102+
document.querySelector(targetId).scrollIntoView({
103+
behavior: 'smooth'
104+
});
105+
});
106+
});
107+
108+
const newPostContent = document.getElementById('newPostContent');
109+
const wordCountDisplay = document.getElementById('wordCount');
110+
newPostContent.addEventListener('input', function () {
111+
const wordCount = this.value.trim().split(/\s+/).filter(word => word.length > 0).length;
112+
wordCountDisplay.textContent = `Word Count: ${wordCount}`;
113+
});
114+
});
115+
</script>
116+
</body>
117+
</html>

‎script.js‎

Whitespace-only changes.

‎styles.css‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
body {
2+
background-color: #1e1e1e;
3+
color : #c5c8c6;
4+
font-family : 'Fira Code', monospace;
5+
margin : 0;
6+
padding : 0;
7+
}
8+
9+
.container {
10+
width : 80%;
11+
max-width: 800px;
12+
margin : 0 auto;
13+
padding : 20px;
14+
}
15+
16+
header {
17+
background-color: #282a36;
18+
padding : 40px 0;
19+
text-align : center;
20+
display : flex;
21+
align-items : center;
22+
justify-content : center;
23+
}
24+
25+
header .profile-picture {
26+
flex-shrink : 0;
27+
margin-right: 20px;
28+
}
29+
30+
header .profile-picture img {
31+
border-radius: 50%;
32+
width : 100px;
33+
height : 100px;
34+
object-fit : cover;
35+
}
36+
37+
header .header-text {
38+
text-align: left;
39+
}
40+
41+
header h1 {
42+
color : #50fa7b;
43+
font-size: 3rem;
44+
margin : 0;
45+
}
46+
47+
header p {
48+
color : #f8f8f2;
49+
font-size: 1.2rem;
50+
margin : 10px 0;
51+
}
52+
53+
h2 {
54+
color : #50fa7b;
55+
font-size : 2rem;
56+
margin-bottom: 20px;
57+
}
58+
59+
a {
60+
color : #8be9fd;
61+
text-decoration: none;
62+
}
63+
64+
a:hover {
65+
text-decoration: underline;
66+
}
67+
68+
.blog-post {
69+
margin-bottom: 30px;
70+
}
71+
72+
footer {
73+
text-align : center;
74+
padding : 20px 0;
75+
background-color: #282a36;
76+
color : #f8f8f2;
77+
}
78+
79+
footer a {
80+
color : #8be9fd;
81+
text-decoration: none;
82+
margin : 0 10px;
83+
}
84+
85+
footer a:hover {
86+
text-decoration: underline;
87+
}
88+
89+
body.night-mode {
90+
background-color: #121212;
91+
color : #e0e0e0;
92+
}
93+
94+
header.night-mode {
95+
background-color: #333;
96+
}
97+
98+
footer.night-mode {
99+
background-color: #333;
100+
}
101+
102+
button {
103+
padding : 10px 20px;
104+
font-size : 1rem;
105+
color : #fff;
106+
background-color: #50fa7b;
107+
border : none;
108+
border-radius : 5px;
109+
cursor : pointer;
110+
transition : all 0.3s ease;
111+
position : relative;
112+
overflow : hidden;
113+
}
114+
115+
button:hover {
116+
background-color: #8be9fd;
117+
}
118+
119+
button::before {
120+
content : '';
121+
position : absolute;
122+
left : -100%;
123+
top : 0;
124+
width : 300%;
125+
height : 100%;
126+
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
127+
transition: all 0.4s ease-in-out;
128+
}
129+
130+
button:hover::before {
131+
left: 100%;
132+
}
133+
134+
#loading {
135+
position : fixed;
136+
width : 100%;
137+
height : 100%;
138+
background : #1e1e1e;
139+
display : flex;
140+
align-items : center;
141+
justify-content: center;
142+
z-index : 100;
143+
}
144+
145+
.loader {
146+
border : 16px solid #f3f3f3;
147+
border-top : 16px solid #50fa7b;
148+
border-radius: 50%;
149+
width : 120px;
150+
height : 120px;
151+
animation : spin 2s linear infinite;
152+
}
153+
154+
@keyframes spin {
155+
0% { transform: rotate(0deg); }
156+
100% { transform: rotate(360deg); }
157+
}
158+
159+
.background {
160+
position: absolute;
161+
width : 100%;
162+
height : 100vh;
163+
overflow: hidden;
164+
z-index : -1;
165+
}
166+
167+
#stars, #stars2, #stars3 {
168+
position : absolute;
169+
top : 0;
170+
left : 0;
171+
width : 100%;
172+
height : 100%;
173+
background: transparent;
174+
z-index : -1;
175+
}
176+
177+
#stars {
178+
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png') repeat top center;
179+
opacity : 0.4;
180+
animation : stars1 100s linear infinite;
181+
}
182+
183+
#stars2 {
184+
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png') repeat top center;
185+
opacity : 0.2;
186+
animation : stars2 50s linear infinite;
187+
}
188+
189+
#stars3 {
190+
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png') repeat top center;
191+
opacity : 0.1;
192+
animation : stars3 30s linear infinite;
193+
}
194+
195+
@keyframes stars1 {
196+
from { background-position: 0 0; }
197+
to { background-position: 10000px 10000px; }
198+
}
199+
200+
@keyframes stars2 {
201+
from { background-position: 0 0; }
202+
to { background-position: 20000px 20000px; }
203+
}
204+
205+
@keyframes stars3 {
206+
from { background-position: 0 0; }
207+
to { background-position: 30000px 30000px; }
208+
}

0 commit comments

Comments
 (0)