Skip to content
This repository was archived by the owner on Feb 12, 2026. It is now read-only.

Commit 8a582b5

Browse files
NeocleNeocle
authored
Add files via upload
1 parent 9872d68 commit 8a582b5

5 files changed

Lines changed: 273 additions & 8 deletions

File tree

‎about.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>About - Neocle</title>
6+
<title>Neocle - About</title>
77
<link rel="icon" href="https://neocle.me/uploads/favicon.png" />
88
<meta name="description" content="Learn more about Neocle." />
99
<meta name="theme-color" content="#f0f4ff" />
@@ -60,10 +60,10 @@
6060
<div class="wrapper">
6161
<main class="container">
6262
<div class="navbar">
63-
<a href="index.html"><i class="navbar-icons fa-solid fa-house"></i>Home</a>
64-
<a href="about.html" class="active"><i class="navbar-icons fa-solid fa-address-card"></i>About</a>
65-
<a href="projects.html"><i class="navbar-icons fa-solid fa-diagram-project"></i>Projects</a>
66-
<a href="contact.html"><i class="navbar-icons fa-solid fa-message"></i>Contact</a>
63+
<a href="/"><i class="navbar-icons fa-solid fa-house"></i>Home</a>
64+
<a href="/about" class="active"><i class="navbar-icons fa-solid fa-address-card"></i>About</a>
65+
<a href="/projects"><i class="navbar-icons fa-solid fa-diagram-project"></i>Projects</a>
66+
<a href="/contact"><i class="navbar-icons fa-solid fa-message"></i>Contact</a>
6767
<a href="#"><i class="navbar-icons fa-solid fa-question"></i>Soon...</a>
6868
</div>
6969

‎contact.html‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Neocle - Contact</title>
7+
<link rel="icon" href="https://neocle.me/uploads/favicon.png" />
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
9+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet" />
10+
<link rel="stylesheet" href="css/styles.css" />
11+
<script src="js/loading-animation.js"></script>
12+
<style>
13+
form {
14+
display: flex;
15+
flex-direction: column;
16+
gap: 1rem;
17+
background: rgba(255, 255, 255, 0.05);
18+
padding: 2rem;
19+
border-radius: 16px;
20+
border: 1px solid rgba(255, 255, 255, 0.1);
21+
animation: fadeIn 0.6s ease both;
22+
}
23+
24+
input, textarea {
25+
font-family: var(--font);
26+
background: rgba(255, 255, 255, 0.05);
27+
border: 1px solid rgba(255, 255, 255, 0.1);
28+
color: white;
29+
padding: 0.75rem 1rem;
30+
border-radius: 12px;
31+
font-size: 1rem;
32+
resize: vertical;
33+
transition: border 0.3s ease;
34+
}
35+
36+
input:focus, textarea:focus {
37+
outline: none;
38+
border-color: var(--accent);
39+
}
40+
41+
button {
42+
background: var(--accent);
43+
color: white;
44+
border: none;
45+
padding: 0.75rem 1.2rem;
46+
border-radius: 12px;
47+
font-weight: 600;
48+
cursor: pointer;
49+
transition: background 0.3s ease;
50+
}
51+
52+
button:hover {
53+
background: var(--end);
54+
}
55+
56+
@keyframes fadeIn {
57+
from {
58+
opacity: 0;
59+
transform: translateY(20px);
60+
}
61+
to {
62+
opacity: 1;
63+
transform: translateY(0);
64+
}
65+
}
66+
67+
.contact-block {
68+
display: flex;
69+
align-items: center;
70+
gap: 1rem;
71+
background: rgba(255, 255, 255, 0.05);
72+
padding: 1rem 1.5rem;
73+
border-radius: 14px;
74+
border: 1px solid rgba(255, 255, 255, 0.1);
75+
color: white;
76+
text-decoration: none;
77+
font-weight: 600;
78+
transition: background 0.3s ease, transform 0.2s ease;
79+
font-size: 1.2rem;
80+
}
81+
82+
.contact-block:hover {
83+
background: var(--accent);
84+
transform: translateY(-2px);
85+
}
86+
87+
.contact-block i {
88+
font-size: 1.6rem;
89+
}
90+
</style>
91+
</head>
92+
<body>
93+
<div class="wrapper">
94+
<main class="container">
95+
<section class="header">
96+
<h1 class="main-title">Get In Touch</h1>
97+
<p class="subtitle">Let's connect or collaborate on something cool!</p>
98+
</section>
99+
100+
<div class="navbar">
101+
<a href="/"><i class="fa-solid fa-house navbar-icons"></i>Home</a>
102+
<a href="/about"><i class="fa-solid fa-address-card navbar-icons"></i>About</a>
103+
<a href="/projects"><i class="fa-solid fa-diagram-project navbar-icons"></i>Projects</a>
104+
<a href="/contact.html"><i class="fa-solid fa-message navbar-icons"></i>Contact</a>
105+
<a href="/"><i class="fa-solid fa-question navbar-icons"></i>Soon...</a>
106+
</div>
107+
108+
<div class="contact-info">
109+
<p>You can reach me directly via this form or through socials below.</p>
110+
</div>
111+
112+
<form action="mailto:your@email.com" method="POST" enctype="text/plain">
113+
<input type="text" name="name" placeholder="Your Name" required />
114+
<input type="email" name="email" placeholder="Your Email" required />
115+
<textarea name="message" rows="5" placeholder="Your Message" required></textarea>
116+
<button type="submit">Send Message</button>
117+
</form>
118+
119+
<div class="contact-blocks" style="margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem;">
120+
<a href="https://discordapp.com/users/515958203838627856/" target="_blank" class="contact-block">
121+
<i class="fab fa-discord"></i>
122+
<span>@neocle</span>
123+
</a>
124+
<a href="https://www.instagram.com/neocle_/" target="_blank" class="contact-block">
125+
<i class="fab fa-instagram"></i>
126+
<span>@neocle_</span>
127+
</a>
128+
</div>
129+
</main>
130+
</div>
131+
132+
<footer class="footer">
133+
<p>&copy; 2025 Neocle. All rights reserved.</p>
134+
</footer>
135+
136+
<script src="js/navbar-highlight.js"></script>
137+
</body>
138+
</html>

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Home - Neocle</title>
6+
<title>Neocle - Home</title>
77
<link rel="icon" href="https://neocle.me/uploads/favicon.png" />
88
<meta name="description" content="Future game and software developer." />
99
<meta name="theme-color" content="#f0f4ff" />

‎js/navbar-highlight.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
const currentPath = window.location.pathname;
1+
const currentPath = window.location.pathname.replace(/\/$/, '');
22

33
document.querySelectorAll('.navbar a').forEach(link => {
4-
if (link.getAttribute('href') === currentPath) {
4+
const href = link.getAttribute('href').replace(/\/$/, '');
5+
if (href && currentPath.endsWith(href)) {
56
link.classList.add('active');
67
}
78
});

‎projects.html‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Neocle - Projects</title>
7+
<link rel="icon" href="https://neocle.me/uploads/favicon.png" />
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
9+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet" />
10+
<link rel="stylesheet" href="css/styles.css" />
11+
<script src="js/loading-animation.js"></script>
12+
<style>
13+
.projects-section {
14+
display: flex;
15+
flex-direction: column;
16+
gap: 2rem;
17+
margin-bottom: 3rem;
18+
}
19+
20+
.project-card {
21+
background: rgba(255, 255, 255, 0.05);
22+
padding: 1.5rem;
23+
border-radius: 16px;
24+
border: 1px solid rgba(255, 255, 255, 0.1);
25+
transition: transform 0.3s ease, box-shadow 0.3s ease;
26+
animation: fadeInUp 0.6s ease both;
27+
display: flex;
28+
align-items: center;
29+
gap: 1.5rem;
30+
}
31+
32+
.project-img {
33+
width: 120px;
34+
height: 120px;
35+
object-fit: cover;
36+
border-radius: 12px;
37+
flex-shrink: 0;
38+
box-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
39+
}
40+
41+
.project-card:hover {
42+
transform: translateY(-5px);
43+
box-shadow: 0 0 20px rgba(131, 193, 223, 0.2);
44+
}
45+
46+
.project-title {
47+
font-size: 1.5rem;
48+
font-weight: 600;
49+
margin-bottom: 0.5rem;
50+
}
51+
52+
.project-desc {
53+
font-size: 1rem;
54+
color: rgba(255, 255, 255, 0.8);
55+
}
56+
57+
@keyframes fadeInUp {
58+
from {
59+
opacity: 0;
60+
transform: translateY(20px);
61+
}
62+
to {
63+
opacity: 1;
64+
transform: translateY(0);
65+
}
66+
}
67+
</style>
68+
</head>
69+
<body>
70+
<div class="wrapper">
71+
<main class="container">
72+
<section class="header">
73+
<h1 class="main-title">My Projects</h1>
74+
<p class="subtitle">A showcase of things I've built or contributed to.</p>
75+
</section>
76+
77+
<div class="navbar">
78+
<a href="/"><i class="fa-solid fa-house navbar-icons"></i>Home</a>
79+
<a href="/about"><i class="fa-solid fa-address-card navbar-icons"></i>About</a>
80+
<a href="/projects.html"><i class="fa-solid fa-diagram-project navbar-icons"></i>Projects</a>
81+
<a href="/contact"><i class="fa-solid fa-message navbar-icons"></i>Contact</a>
82+
<a href="/"><i class="fa-solid fa-question navbar-icons"></i>Soon...</a>
83+
</div>
84+
85+
<section class="projects-section">
86+
<div class="project-card">
87+
<img src="images/project1.jpg" alt="Project One" class="project-img">
88+
<div class="project-info">
89+
<h2 class="project-title">Project One</h2>
90+
<p class="project-desc">A cool project I made using HTML, CSS, and JavaScript. It does amazing things!</p>
91+
</div>
92+
</div>
93+
94+
<div class="project-card">
95+
<img src="images/project2.jpg" alt="Project Two" class="project-img">
96+
<div class="project-info">
97+
<h2 class="project-title">Project Two</h2>
98+
<p class="project-desc">This one is a game prototype using Unity. It's still in progress but looks promising.</p>
99+
</div>
100+
</div>
101+
102+
<div class="project-card">
103+
<img src="images/project3.jpg" alt="Open Source" class="project-img">
104+
<div class="project-info">
105+
<h2 class="project-title">Open Source Contribution</h2>
106+
<p class="project-desc">I contributed to an open-source tool on GitHub, fixing bugs and improving performance.</p>
107+
</div>
108+
</div>
109+
</section>
110+
111+
<section class="socials">
112+
<a href="https://discordapp.com/users/515958203838627856/" class="icon"><i class="fab fa-discord"></i></a>
113+
<a href="https://www.youtube.com/channel/UCuJroY6sbleZrTz7N0xyWbA" class="icon"><i class="fab fa-youtube"></i></a>
114+
<a href="https://www.tiktok.com/@neocle_" class="icon"><i class="fab fa-tiktok"></i></a>
115+
<a href="https://www.instagram.com/neocle_/" class="icon"><i class="fab fa-instagram"></i></a>
116+
<a href="https://github.com/Neocle" class="icon"><i class="fab fa-github"></i></a>
117+
</section>
118+
</main>
119+
</div>
120+
121+
<footer class="footer">
122+
<p>&copy; 2025 Neocle. All rights reserved.</p>
123+
</footer>
124+
<script src="js/navbar-highlight.js"></script>
125+
</body>
126+
</html>

0 commit comments

Comments
 (0)