Skip to content

Commit cad20f1

Browse files
SCodeGitSCodeGit
authored
Update index.html
1 parent 2e1544a commit cad20f1

1 file changed

Lines changed: 139 additions & 168 deletions

File tree

‎index.html‎

Lines changed: 139 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -4,189 +4,160 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
<title>SCode — Developer Portfolio</title>
7+
78
<link rel="stylesheet" href="style.css" />
9+
810
<meta name="description" content="SCode — Web developer. Creative developer passionate about design, code, and user experience." />
911

10-
<!-- Favicon -->
11-
<link rel="icon" href="https://raw.githubusercontent.com/SCodeGit/scode.git.io/main/images/scode.jpg" type="image/jpeg">
12-
<link rel="apple-touch-icon" href="https://raw.githubusercontent.com/SCodeGit/scode.git.io/main/images/scode.jpg">
12+
<link rel="icon" href="https://raw.githubusercontent.com/SCodeGit/scode.git.io/main/images/scode.jpg">
1313

14-
<!-- Theme preference -->
1514
<meta name="color-scheme" content="light dark">
1615
</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>
4016

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>
17+
<body>
18+
19+
<div id="backgroundParticles"></div>
20+
21+
<button class="theme-toggle" id="themeToggle">🌙</button>
22+
23+
<!-- HERO -->
24+
<header class="hero">
25+
<div class="container hero-inner">
26+
27+
<img class="logo" src="https://raw.githubusercontent.com/SCodeGit/scode.git.io/main/images/scode.jpg">
28+
29+
<div>
30+
<h1 class="title">SCode</h1>
31+
<p class="subtitle"><span id="typed"></span></p>
32+
33+
<a class="btn primary" href="https://wa.me/233555578864" target="_blank">
34+
Hire Me (WhatsApp)
35+
</a>
4536
</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-
<a class="project-card neon-glow" href="https://scode-coepasco.online/" target="_blank" rel="noopener">
73-
<img src="https://raw.githubusercontent.com/SCodeGit/trial/main/favicon%20scode.jpg"
74-
alt="SCode COE Pasco">
75-
<div class="project-body">
76-
<h3>SCode COE Pasco</h3>
77-
<p>Official past questions portal for Colleges of Education in Ghana, providing easy access to PDFs and learning resources.</p>
37+
7838
</div>
79-
</a>
39+
</header>
40+
41+
<!-- ABOUT -->
42+
<section class="section">
43+
<div class="container">
44+
<p><span id="typedIntro"></span></p>
45+
</div>
46+
</section>
47+
48+
<!-- PROJECTS -->
49+
<section class="section">
50+
<div class="container">
51+
52+
<h2>Selected Projects</h2>
53+
54+
<div class="grid">
55+
56+
<a class="card" href="https://scodegit.github.io/pacesettersfoundation.github.io/" target="_blank">
57+
<img src="https://raw.githubusercontent.com/SCodeGit/scode.git.io/main/images/scode.jpg">
58+
<h3>Pacesetters Foundation</h3>
59+
<p>NGO platform with donation system.</p>
60+
</a>
61+
62+
<a class="card" href="https://scodegit.github.io/Bowiri-Traditional-Council/index.html" target="_blank">
63+
<img src="https://raw.githubusercontent.com/SCodeGit/Bowiri-Traditional-Council/28857d96cf2048e159e3a22335a78a7f13cf84a6/king%20logo.png">
64+
<h3>Bowiri Traditional Council</h3>
65+
<p>Culture and heritage website.</p>
66+
</a>
67+
68+
<a class="card" href="https://scode-coepasco.online/" target="_blank">
69+
<img src="https://raw.githubusercontent.com/SCodeGit/trial/main/favicon%20scode.jpg">
70+
<h3>SCode COE Pasco</h3>
71+
<p>Past questions platform for colleges.</p>
72+
</a>
73+
74+
<!-- NEW: SCodeOS -->
75+
<a class="card" href="https://scodegit.github.io/SCodeOS/" target="_blank">
76+
<img src="https://scodegit.github.io/SCodeOS/images/scode-logo.png">
77+
<h3>SCodeOS</h3>
78+
<p>Developer OS ecosystem & AI workspace.</p>
79+
</a>
80+
81+
<!-- UPCOMING -->
82+
<div class="card dim">
83+
<img src="https://raw.githubusercontent.com/SCodeGit/scode.git.io/main/images/scode.jpg">
84+
<h3>Coming Soon</h3>
85+
<p>AI Learning Platform</p>
8086
</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:atubraabraham@gmail.com">atubraabraham@gmail.com</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>
10687

88+
<div class="card dim">
89+
<img src="https://raw.githubusercontent.com/SCodeGit/scode.git.io/main/images/scode.jpg">
90+
<h3>Coming Soon</h3>
91+
<p>Trading Automation System</p>
10792
</div>
93+
10894
</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>
95+
</div>
96+
</section>
97+
98+
<!-- CONTACT -->
99+
<section class="section">
100+
<div class="container grid2">
101+
102+
<div class="box">
103+
<h3>Contact</h3>
104+
<p>Email: atubraabraham@gmail.com</p>
105+
<p>WhatsApp: +233 55 557 8864</p>
106+
<p>Facebook: Atubra Abraham</p>
107+
</div>
108+
109+
<div class="box">
110+
<h3>Message</h3>
111+
<form id="contactForm">
112+
<input name="name" placeholder="Name" required>
113+
<input name="email" type="email" placeholder="Email" required>
114+
<textarea name="message" placeholder="Message" required></textarea>
115+
<button class="btn primary">Send</button>
116+
<p id="formStatus"></p>
117+
</form>
124118
</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();
119+
120+
</div>
121+
</section>
122+
123+
<footer class="footer">
124+
<p>© 2025 SCode — Built with precision</p>
125+
</footer>
126+
127+
<script>
128+
function typeWriter(el, text) {
129+
let i = 0;
130+
(function t() {
131+
if (i < text.length) {
132+
el.textContent += text[i++];
133+
setTimeout(t, 35);
142134
}
135+
})();
136+
}
137+
138+
typeWriter(document.getElementById("typed"),
139+
"Crafting modern, scalable web experiences.");
140+
141+
typeWriter(document.getElementById("typedIntro"),
142+
"Hi — I’m SCode. I build modern websites for startups, NGOs, and businesses.");
143+
144+
const form = document.getElementById("contactForm");
145+
const status = document.getElementById("formStatus");
146+
147+
form.addEventListener("submit", async (e) => {
148+
e.preventDefault();
149+
const data = new FormData(form);
150+
151+
fetch("https://formspree.io/f/xwpwvqaz", {
152+
method: "POST",
153+
body: data,
154+
headers: { Accept: "application/json" }
155+
}).then(r => {
156+
status.textContent = "Message sent!";
157+
form.reset();
158+
});
159+
});
160+
</script>
143161

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>
191162
</body>
192163
</html>

0 commit comments

Comments
 (0)