Skip to content

Commit ceb75c0

Browse files
neeoderneeoder
committed
V1.1
1 parent 13a2f76 commit ceb75c0

8 files changed

Lines changed: 301 additions & 18 deletions

File tree

‎.idea/jsLibraryMappings.xml‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/neeoder.github.io.iml‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<link rel="stylesheet" href="style.css">
1313
</head>
1414
<body>
15+
<div id="particles-js"></div>
1516
<nav>
1617
<a href="index.html" class="logo">NEEODER</a>
1718
<ul>
@@ -21,14 +22,18 @@
2122
</ul>
2223
</nav>
2324

25+
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
2426
<main>
2527
<section class="hero">
2628
<h1 class="hero-title">NEEODER</h1>
2729
<p class="hero-subtitle">Developer and stuff</p>
2830
</section>
31+
<section class="reveal-section">
32+
<h2>Wanna see my work?</h2>
33+
<a href="projects.html" class="cta-button">View Projects</a>
34+
</section>
2935
</main>
3036

31-
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
32-
<script src="script.js"></script>
37+
<script type="module" src="script.js"></script>
3338
</body>
3439
</html>

‎package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"devDependencies": {
3+
"@types/jest": "^29.2.5",
4+
"jest": "^29.3.1"
5+
},
6+
"scripts": {
7+
"test": "jest"
8+
},
9+
"dependencies": {
10+
"animejs": "^4.0.2"
11+
}
12+
}

‎particlesjs-config.json‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
{
2+
"particles": {
3+
"number": {
4+
"value": 80,
5+
"density": {
6+
"enable": true,
7+
"value_area": 800
8+
}
9+
},
10+
"color": {
11+
"value": "#ffffff"
12+
},
13+
"shape": {
14+
"type": "circle",
15+
"stroke": {
16+
"width": 0,
17+
"color": "#000000"
18+
},
19+
"polygon": {
20+
"nb_sides": 5
21+
},
22+
"image": {
23+
"src": "img/github.svg",
24+
"width": 100,
25+
"height": 100
26+
}
27+
},
28+
"opacity": {
29+
"value": 0.5,
30+
"random": false,
31+
"anim": {
32+
"enable": false,
33+
"speed": 1,
34+
"opacity_min": 0.1,
35+
"sync": false
36+
}
37+
},
38+
"size": {
39+
"value": 3,
40+
"random": true,
41+
"anim": {
42+
"enable": false,
43+
"speed": 40,
44+
"size_min": 0.1,
45+
"sync": false
46+
}
47+
},
48+
"line_linked": {
49+
"enable": true,
50+
"distance": 150,
51+
"color": "#ffffff",
52+
"opacity": 0.4,
53+
"width": 1
54+
},
55+
"move": {
56+
"enable": true,
57+
"speed": 6,
58+
"direction": "none",
59+
"random": false,
60+
"straight": false,
61+
"out_mode": "out",
62+
"bounce": false,
63+
"attract": {
64+
"enable": false,
65+
"rotateX": 600,
66+
"rotateY": 1200
67+
}
68+
}
69+
},
70+
"interactivity": {
71+
"detect_on": "canvas",
72+
"events": {
73+
"onhover": {
74+
"enable": true,
75+
"mode": "repulse"
76+
},
77+
"onclick": {
78+
"enable": true,
79+
"mode": "push"
80+
},
81+
"resize": true
82+
},
83+
"modes": {
84+
"grab": {
85+
"distance": 400,
86+
"line_linked": {
87+
"opacity": 1
88+
}
89+
},
90+
"bubble": {
91+
"distance": 400,
92+
"size": 40,
93+
"duration": 2,
94+
"opacity": 8,
95+
"speed": 3
96+
},
97+
"repulse": {
98+
"distance": 200,
99+
"duration": 0.4
100+
},
101+
"push": {
102+
"particles_nb": 4
103+
},
104+
"remove": {
105+
"particles_nb": 2
106+
}
107+
}
108+
},
109+
"retina_detect": true
110+
}

‎projects.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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>Neeoder</title>
7+
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Space+Mono&display=swap" rel="stylesheet">
11+
12+
<link rel="stylesheet" href="style.css">
13+
</head>
14+
<body>
15+
<div id="particles-js"></div>
16+
<nav>
17+
<a href="index.html" class="logo">NEEODER</a>
18+
<ul>
19+
<li><a href="projects.html">Projects</a></li>
20+
<li><a href="about.html">About</a></li>
21+
<li><a href="contact.html">Contact</a></li>
22+
</ul>
23+
</nav>
24+
25+
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
26+
<main>
27+
<section class="projects-section">
28+
<h2>My Upcoming Work</h2>
29+
<div class="project-grid">
30+
<div class="project-card">
31+
<h3>Hangman</h3>
32+
<p>A hangman game made with python featuring various things.</p>
33+
<a href="#">Coming Soon</a>
34+
</div>
35+
<div class="project-card">
36+
<h3>Snake</h3>
37+
<p>A snake game made with python featuring various things.</p>
38+
<a href="#">In Development</a>
39+
</div>
40+
</div>
41+
</section>
42+
</main>
43+
44+
<script type="module" src="script.js"></script>
45+
</body>

‎script.js‎

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,41 @@
1-
document.addEventListener('DOMContentLoaded', () => {
2-
const textWrapper = document.querySelector('.hero-title');
1+
import { createTimeline, stagger, animate } from 'https://cdn.jsdelivr.net/npm/animejs/+esm';
32

4-
if (textWrapper) {
5-
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
6-
anime.timeline({loop: false})
7-
.add({
8-
targets: '.hero-title .letter',
9-
scale: [4, 1],
10-
opacity: [0, 1],
11-
translateZ: 0,
12-
easing: "easeOutExpo",
13-
duration: 950,
14-
delay: (el, i) => 70 * i
15-
});
16-
}
3+
particlesJS.load('particles-js', 'particlesjs-config.json', function() {
4+
console.log('callback - particles.js config loaded');
5+
})
6+
7+
const textWrapper = document.querySelector('.hero-title');
8+
if (textWrapper) {
9+
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
10+
11+
const tl = createTimeline({loop: false, direction: 'alternate'});
12+
tl.add('.hero-title .letter', {
13+
opacity: [0, 1],
14+
translateY: [-200, 0],
15+
easing: 'easeOutExpo',
16+
duration: 1400,
17+
delay: stagger(70),
18+
});
19+
}
20+
21+
if (document.querySelector('.project-grid')) {
22+
animate('.project-card', {
23+
translateY: [50, 0],
24+
easing: 'easeOutExpo',
25+
opacity: [0, 1],
26+
delay: stagger(100),
27+
});
28+
}
29+
30+
const observer = new IntersectionObserver((entries) => {
31+
entries.forEach(entry => {
32+
if (entry.isIntersecting) {
33+
entry.target.classList.add('visible');
34+
}
35+
});
36+
}, {
37+
threshold: 0.1
1738
});
39+
40+
const revealElements = document.querySelectorAll('.reveal-section');
41+
revealElements.forEach(el => observer.observe(el));

‎style.css‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,3 +76,89 @@ nav a:hover {
7676
margin-top: 1rem;
7777
color: #aaa;
7878
}
79+
80+
.projects-section {
81+
padding: 4rem 5%;
82+
text-align: center;
83+
}
84+
85+
.projects-section h2 {
86+
font-family: var(--font-heading), serif;
87+
font-size: 3rem;
88+
margin-bottom: 3rem;
89+
color: var(--primary-color);
90+
}
91+
92+
.project-grid {
93+
display: grid;
94+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
95+
gap: 2rem;
96+
}
97+
98+
.project-card {
99+
background: #2a2a2a;
100+
border: 1px solid #333;
101+
padding: 2rem;
102+
text-align: left;
103+
transition: transform 0.3s ease, box-shadow 0.3s ease;
104+
opacity: 0;
105+
transform: translateY(50px);
106+
}
107+
108+
.project-card:hover {
109+
transform: translateY(-10px);
110+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
111+
}
112+
113+
.project-card h3 {
114+
font-family: var(--font-heading), serif;
115+
color: var(--primary-color);
116+
margin-bottom: 0.5rem;
117+
}
118+
119+
.project-card p {
120+
margin-bottom: 1rem;
121+
}
122+
123+
.project-card a {
124+
text-decoration: none;
125+
color: var(--text-color);
126+
font-weight: bold;
127+
}
128+
129+
#particles-js {
130+
position: absolute;
131+
width: 100%;
132+
height: 100%;
133+
top: 0;
134+
left: 0;
135+
z-index: -1;
136+
}
137+
138+
.reveal-section {
139+
padding: 8rem 5%;
140+
text-align: center;
141+
opacity: 0;
142+
transform: translateY(50px);
143+
transition: opacity 1s ease, transform 1s ease;
144+
}
145+
146+
.reveal-section.visible {
147+
opacity: 1;
148+
transform: translateY(0);
149+
}
150+
151+
.cta-button {
152+
display: inline-block;
153+
margin-top: 2rem;
154+
padding: 1rem 2rem;
155+
background: var(--primary-color);
156+
color: var(--bg-color);
157+
text-decoration: none;
158+
font-family: var(--font-heading), serif;
159+
border-radius: 5px;
160+
transition: transform 0.3s ease;
161+
}
162+
.cta-button:hover {
163+
transform: scale(1.1);
164+
}

0 commit comments

Comments
 (0)