Skip to content

Commit fd1ad9e

Browse files
SCodeGitSCodeGit
authored
Update index.html
1 parent af17097 commit fd1ad9e

File tree

1 file changed

+192
-0
lines changed

1 file changed

+192
-0
lines changed

‎index.html‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,198 @@
1414
<!-- Theme preference -->
1515
<meta name="color-scheme" content="light dark">
1616
</head>
17+
<body class="dark-theme">
18+
<!-- Background overlay for particles/matrix -->
19+
<div id="backgroundParticles"></div>
20+
<!-- Theme toggle -->
21+
<button class="theme-toggle" id="themeToggle" title="Toggle light/dark" aria-label="Toggle theme">🌙</button>
22+
23+
<!-- Header / Hero -->
24+
<header class="hero-outer">
25+
<div class="container hero-inner">
26+
<div class="logo-wrap">
27+
<a href="index.html">
28+
<img src="https://raw.githubusercontent.com/SCodeGit/scode.git.io/main/images/scode.jpg" alt="SCode logo" class="hero-logo neon-glow">
29+
</a>
30+
</div>
31+
<div class="hero-text" style="line-height:1.2;">
32+
<h1 class="name glitch">SCode</h1>
33+
<p class="tagline"><span id="typed"></span></p>
34+
<div class="hero-cta">
35+
<a class="btn primary neon-btn" id="whatsappBtn" href="https://wa.me/233555578864" target="_blank" rel="noopener">Hire Me (WhatsApp)</a>
36+
</div>
37+
</div>
38+
</div>
39+
</header>
40+
41+
<!-- About / Intro -->
42+
<section class="section about" id="about" style="padding-top:40px;">
43+
<div class="container" style="line-height:1.4;">
44+
<p><span id="typedIntro"></span></p>
45+
</div>
46+
</section>
47+
48+
<!-- Projects -->
49+
<section class="section projects" id="projects">
50+
<div class="container">
51+
<h2 class="glitch">Selected Projects</h2>
52+
<div class="projects-grid">
53+
54+
<!-- Project 1 -->
55+
<a class="project-card neon-glow" href="https://scodegit.github.io/pacesettersfoundation.github.io/" target="_blank" rel="noopener">
56+
<img src="https://raw.githubusercontent.com/SCodeGit/scode.git.io/main/images/scode.jpg" alt="Pacesetters Foundation">
57+
<div class="project-body">
58+
<h3>Pacesetters Foundation</h3>
59+
<p>Multi-page NGO site with donation and community sections.</p>
60+
</div>
61+
</a>
62+
63+
<!-- Project 2 -->
64+
<a class="project-card neon-glow" href="https://scodegit.github.io/Bowiri-Traditional-Council/index.html" target="_blank" rel="noopener">
65+
<img src="https://raw.githubusercontent.com/SCodeGit/Bowiri-Traditional-Council/28857d96cf2048e159e3a22335a78a7f13cf84a6/king%20logo.png" alt="Bowiri Traditional Council">
66+
<div class="project-body">
67+
<h3>Bowiri Traditional Council</h3>
68+
<p>Elegant traditional council website highlighting culture, leadership, and heritage.</p>
69+
</div>
70+
</a>
71+
72+
<!-- Project 3 placeholder -->
73+
<div class="project-card placeholder neon-glow">
74+
<div class="project-body">
75+
<h3>Project Three</h3>
76+
<p>Coming soon — demo and case study will be added here.</p>
77+
</div>
78+
</div>
79+
80+
</div>
81+
</div>
82+
</section>
83+
84+
<!-- Contact -->
85+
<section class="section contact" id="contact">
86+
<div class="container">
87+
<h2 class="glitch">Contact</h2>
88+
<div class="contact-grid">
89+
<div class="contact-card neon-glow">
90+
<h3>Get in touch</h3>
91+
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
92+
<p>WhatsApp: <a href="https://wa.me/233555578864" target="_blank" rel="noopener">+233 55 557 8864</a></p>
93+
<p>Facebook: <a href="https://www.facebook.com/people/Atubra-Abraham/100072576882412/" target="_blank" rel="noopener">Atubra Abraham</a></p>
94+
</div>
95+
96+
<div class="contact-card neon-glow">
97+
<h3>Message</h3>
98+
<form id="contactForm">
99+
<input name="name" placeholder="Your name" required>
100+
<input name="email" type="email" placeholder="Your email" required>
101+
<textarea name="message" rows="4" placeholder="Your message" required></textarea>
102+
<button class="btn primary neon-btn" type="submit">Send</button>
103+
<p id="formStatus" style="margin-top:10px;"></p>
104+
</form>
105+
</div>
106+
107+
</div>
108+
</div>
109+
</section>
110+
111+
<!-- Footer -->
112+
<footer class="footer neon-glow">
113+
<div class="container footer-inner">
114+
<div class="left">
115+
<strong>SCode</strong><br>
116+
<small>© 2025 All Rights Reserved — built by
117+
<a class="dev-link" href="index.html">SCode</a>
118+
</small>
119+
</div>
120+
<div class="right social-links">
121+
<a href="https://www.facebook.com/people/Atubra-Abraham/100072576882412/" target="_blank" rel="noopener">Facebook</a>
122+
<a href="https://wa.me/233555578864" target="_blank" rel="noopener">WhatsApp</a>
123+
</div>
124+
</div>
125+
</footer>
126+
127+
<button id="topBtn" title="Back to top" class="neon-btn">↑</button>
128+
129+
<!-- Typewriter Script -->
130+
<script>
131+
function typeWriter(element, text, speed = 40, callback = null) {
132+
let i = 0;
133+
element.textContent = '';
134+
function type() {
135+
if (i < text.length) {
136+
element.textContent += text.charAt(i);
137+
i++;
138+
setTimeout(type, speed);
139+
} else if (callback) callback();
140+
}
141+
type();
142+
}
143+
144+
// Hero animation
145+
const typedEl = document.getElementById('typed');
146+
typeWriter(typedEl, "Crafting sleek, responsive web experiences with precision and creativity.");
147+
148+
// About/Intro animation
149+
const typedIntro = document.getElementById('typedIntro');
150+
typeWriter(typedIntro, "Hi — I’m SCode. I specialize in building modern, responsive websites for startups, NGOs, and businesses, blending design, code, and user experience with precision and creativity.");
151+
</script>
152+
153+
<!-- Contact Form Script -->
154+
<script>
155+
const form = document.getElementById('contactForm');
156+
const status = document.getElementById('formStatus');
157+
158+
form.addEventListener('submit', function(event) {
159+
event.preventDefault();
160+
const formData = new FormData(form);
161+
162+
fetch('https://formspree.io/f/xwpwvqaz', {
163+
method: 'POST',
164+
body: formData,
165+
headers: {'Accept': 'application/json'}
166+
}).then(response => {
167+
if (response.ok) {
168+
status.style.color = 'lime';
169+
status.textContent = '✅ Message sent successfully! Thank you.';
170+
form.reset();
171+
} else {
172+
response.json().then(data => {
173+
if (data.errors) {
174+
status.style.color = 'red';
175+
status.textContent = '❌ Error sending message: ' + data.errors.map(e => e.message).join(', ');
176+
} else {
177+
status.style.color = 'red';
178+
status.textContent = '❌ Something went wrong. Please try again later.';
179+
}
180+
});
181+
}
182+
}).catch(error => {
183+
status.style.color = 'red';
184+
status.textContent = '❌ Network error. Please try again later.';
185+
});
186+
});
187+
</script>
188+
189+
<!-- External Script -->
190+
<script src="script.js"></script>
191+
</body>
192+
</html>
193+
<!DOCTYPE html>
194+
<html lang="en">
195+
<head>
196+
<meta charset="utf-8" />
197+
<meta name="viewport" content="width=device-width, initial-scale=1" />
198+
<title>SCode — Developer Portfolio</title>
199+
<link rel="stylesheet" href="style.css" />
200+
<meta name="description" content="SCode — Web developer. Creative developer passionate about design, code, and user experience." />
201+
202+
<!-- Favicon -->
203+
<link rel="icon" href="https://raw.githubusercontent.com/SCodeGit/scode.git.io/main/images/scode.jpg" type="image/jpeg">
204+
<link rel="apple-touch-icon" href="https://raw.githubusercontent.com/SCodeGit/scode.git.io/main/images/scode.jpg">
205+
206+
<!-- Theme preference -->
207+
<meta name="color-scheme" content="light dark">
208+
</head>
17209
<body class="dark-theme">
18210

19211
<!-- Background overlay for particles/matrix -->

0 commit comments

Comments
 (0)