Skip to content

Commit babc652

Browse files
SCodeGitSCodeGit
authored
Add files via upload
0 parents  commit babc652

File tree

6 files changed

+231
-0
lines changed

6 files changed

+231
-0
lines changed

‎WhatsApp Image 2025-10-12 at 10.57.51 PM.jpeg‎

30.3 KB
Loading

‎WhatsApp Image 2025-10-12 at 10.57.52 PM.jpeg‎

64.6 KB
Loading

‎WhatsApp Image 2025-10-12 at 10.57.53 PM.jpeg‎

53.4 KB
Loading

‎index.html‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>SCode — Developer Portfolio</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<meta name="description" content="SCode — Web developer. Creative developer passionate about design, code, and user experience." />
10+
</head>
11+
<body>
12+
13+
<!-- Theme toggle -->
14+
<div class="theme-toggle" id="themeToggle" title="Toggle light / dark" aria-label="Toggle theme">🌙</div>
15+
16+
<!-- Header / Hero -->
17+
<header class="hero-outer">
18+
<div class="container hero-inner">
19+
<div class="logo-wrap">
20+
<img src="images/WhatsApp Image 2025-10-12 at 10.57.51 PM.jpeg" alt="SCode logo" class="hero-logo">
21+
</div>
22+
<div class="hero-text">
23+
<h1 class="name">SCode</h1>
24+
<p class="tagline"><span id="typed"></span></p>
25+
<div class="hero-cta">
26+
<a class="btn primary" id="whatsappBtn" href="https://wa.me/233555578864" target="_blank" rel="noopener">Hire Me (WhatsApp)</a>
27+
<a class="btn ghost" href="https://github.com/SCodeGit" target="_blank" rel="noopener">View GitHub</a>
28+
</div>
29+
</div>
30+
</div>
31+
<div class="hero-watermark">
32+
<img src="images/WhatsApp Image 2025-10-12 at 10.57.52 PM.jpeg" alt="watermark" />
33+
</div>
34+
</header>
35+
36+
<!-- About -->
37+
<section class="section about" id="about">
38+
<div class="container">
39+
<h2>About</h2>
40+
<p>Hi — I’m <strong>SCode</strong>, a creative developer passionate about design, code, and user experience. I build clean, responsive websites for NGOs, startups and businesses.</p>
41+
</div>
42+
</section>
43+
44+
<!-- Projects -->
45+
<section class="section projects" id="projects">
46+
<div class="container">
47+
<h2>Selected Projects</h2>
48+
<div class="projects-grid">
49+
<a class="project-card" href="https://scodegit.github.io/pacesettersfoundation.github.io/" target="_blank" rel="noopener">
50+
<img src="images/WhatsApp Image 2025-10-12 at 10.57.53 PM.jpeg" alt="Pacesetters">
51+
<div class="project-body">
52+
<h3>Pacesetters Foundation</h3>
53+
<p>Multi-page NGO site: donations, programs, and team profiles.</p>
54+
</div>
55+
</a>
56+
<div class="project-card placeholder">
57+
<div class="project-body">
58+
<h3>Project Two</h3>
59+
<p>Coming soon — demo and case study will be added here.</p>
60+
</div>
61+
</div>
62+
<div class="project-card placeholder">
63+
<div class="project-body">
64+
<h3>Project Three</h3>
65+
<p>Coming soon — demo and case study will be added here.</p>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
</section>
71+
72+
<!-- Contact -->
73+
<section class="section contact" id="contact">
74+
<div class="container">
75+
<h2>Contact</h2>
76+
<div class="contact-grid">
77+
<div class="contact-card">
78+
<h3>Get in touch</h3>
79+
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
80+
<p>WhatsApp: <a href="https://wa.me/233555578864" target="_blank" rel="noopener">+233 55 557 8864</a></p>
81+
<p>Facebook: <a href="https://www.facebook.com/people/Atubra-Abraham/100072576882412/" target="_blank" rel="noopener">Atubra Abraham</a></p>
82+
<p>GitHub: <a href="https://github.com/SCodeGit" target="_blank" rel="noopener">SCodeGit</a></p>
83+
</div>
84+
<div class="contact-card">
85+
<h3>Message</h3>
86+
<form action="mailto:[email protected]" method="post" enctype="text/plain">
87+
<input name="name" placeholder="Your name" required>
88+
<input name="email" type="email" placeholder="Your email" required>
89+
<textarea name="message" rows="4" placeholder="Your message" required></textarea>
90+
<button class="btn primary" type="submit">Send Email</button>
91+
</form>
92+
</div>
93+
</div>
94+
</div>
95+
</section>
96+
97+
<!-- Footer -->
98+
<footer class="footer">
99+
<div class="container footer-inner">
100+
<div class="left">
101+
<strong>SCode</strong><br>
102+
<small>© 2025 All Rights Reserved — built by <a class="dev-link" href="https://scodegit.github.io/" target="_blank" rel="noopener">SCode</a></small>
103+
</div>
104+
<div class="right social-links">
105+
<a href="https://github.com/SCodeGit" target="_blank" rel="noopener">GitHub</a>
106+
<a href="https://www.facebook.com/people/Atubra-Abraham/100072576882412/" target="_blank" rel="noopener">Facebook</a>
107+
<a href="https://wa.me/233555578864" target="_blank" rel="noopener">WhatsApp</a>
108+
</div>
109+
</div>
110+
</footer>
111+
112+
<button id="topBtn" title="Back to top">↑</button>
113+
114+
<script src="script.js"></script>
115+
</body>
116+
</html>

‎script.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
// Typing effect (simple)
3+
const typedText = "Hi, I'm SCode — a creative developer passionate about design, code, and user experience.";
4+
const typedEl = document.getElementById('typed');
5+
let i = 0;
6+
function typeWriter(){ if(i<=typedText.length){ typedEl.innerHTML = typedText.slice(0,i) + (i%2? '_':''); i++; setTimeout(typeWriter,28);} else { typedEl.innerHTML = typedText; } }
7+
document.addEventListener('DOMContentLoaded', ()=>{ typeWriter(); });
8+
9+
// Theme toggle (dark/light) with localStorage
10+
const themeToggle = document.getElementById('themeToggle');
11+
themeToggle && themeToggle.addEventListener('click', ()=>{
12+
document.body.classList.toggle('light');
13+
themeToggle.textContent = document.body.classList.contains('light') ? '☀️' : '🌙';
14+
localStorage.setItem('scode_theme', document.body.classList.contains('light') ? 'light' : 'dark');
15+
});
16+
// Load saved theme
17+
if(localStorage.getItem('scode_theme')==='light'){ document.body.classList.add('light'); if(themeToggle) themeToggle.textContent='☀️'; }
18+
19+
// Reveal on scroll
20+
const reveals = Array.from(document.querySelectorAll('.reveal'));
21+
const obs = new IntersectionObserver((entries)=>{
22+
entries.forEach(ent=>{ if(ent.isIntersecting){ ent.target.classList.add('visible'); obs.unobserve(ent.target); } });
23+
},{threshold:0.12});
24+
reveals.forEach(r=>obs.observe(r));
25+
26+
// Back to top button
27+
const topBtn = document.getElementById('topBtn');
28+
window.addEventListener('scroll', ()=>{ if(window.scrollY>300) topBtn.style.display='flex'; else topBtn.style.display='none'; });
29+
topBtn && topBtn.addEventListener('click', ()=>{ window.scrollTo({top:0,behavior:'smooth'}); });
30+
31+
// Smooth links handled by browser for external; internal anchors optional

‎style.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
2+
:root{
3+
--navy:#071235;
4+
--blue:#1e63d3;
5+
--silver:#f2f4f8;
6+
--accent:#f6b75e;
7+
--bg-dark:#061221;
8+
--bg-light:#f8fbff;
9+
--text-dark:#0b1c2e;
10+
--text-light:#e9f2ff;
11+
--radius:12px;
12+
}
13+
*{box-sizing:border-box;margin:0;padding:0}
14+
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg-dark);color:var(--text-light);-webkit-font-smoothing:antialiased}
15+
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
16+
17+
/* THEME TOGGLE */
18+
.theme-toggle{position:fixed;right:18px;top:18px;background:rgba(255,255,255,0.06);color:var(--text-light);width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:999;box-shadow:0 6px 20px rgba(0,0,0,0.3)}
19+
20+
/* HERO */
21+
.hero-outer{position:relative;padding:60px 0 40px;overflow:hidden}
22+
.hero-inner{display:flex;align-items:center;gap:24px}
23+
.logo-wrap{flex:0 0 140px}
24+
.hero-logo{width:140px;height:140px;object-fit:contain;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,0.4);background:linear-gradient(135deg,var(--blue),var(--navy))}
25+
.hero-text .name{font-size:2rem;margin-bottom:6px}
26+
.hero-text .tagline{color:rgba(255,255,255,0.9);margin-bottom:12px}
27+
.hero-cta{display:flex;gap:12px}
28+
.btn{padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
29+
.primary{background:var(--accent);color:#041027}
30+
.ghost{background:transparent;color:var(--silver);border:1px solid rgba(255,255,255,0.06)}
31+
32+
/* Watermark */
33+
.hero-watermark{position:absolute;right:-60px;top:10%;opacity:0.06;transform:rotate(-12deg);width:480px}
34+
.hero-watermark img{width:100%;display:block}
35+
36+
/* Sections */
37+
.section{padding:48px 0}
38+
.section h2{color:var(--accent);margin-bottom:12px}
39+
.section p{color:rgba(255,255,255,0.9)}
40+
41+
/* About */
42+
.about p{max-width:820px}
43+
44+
/* Projects grid */
45+
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
46+
.project-card{background:rgba(255,255,255,0.03);padding:0;border-radius:10px;overflow:hidden;display:block;border:1px solid rgba(255,255,255,0.03)}
47+
.project-card img{height:140px;width:100%;object-fit:cover}
48+
.project-body{padding:12px}
49+
.placeholder{display:flex;align-items:center;justify-content:center;min-height:140px}
50+
51+
/* Contact */
52+
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:18px}
53+
.contact-card{background:rgba(255,255,255,0.03);padding:18px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
54+
55+
/* Footer */
56+
.footer{background:linear-gradient(90deg,var(--navy),var(--blue));padding:18px;margin-top:24px;color:var(--silver)}
57+
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px}
58+
.footer .dev-link{color:var(--silver);font-weight:700;text-decoration:none;position:relative}
59+
.dev-link::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--navy));transition:width .35s ease;border-radius:2px}
60+
.dev-link:hover::after{width:100%}
61+
.social-links a{color:var(--silver);margin-left:12px}
62+
63+
/* Top button */
64+
#topBtn{position:fixed;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;background:var(--blue);color:#fff;border:none;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:999}
65+
66+
/* Reveal animation */
67+
.reveal{opacity:0;transform:translateY(18px);transition:all .6s cubic-bezier(.2,.9,.3,1)}
68+
.reveal.visible{opacity:1;transform:none}
69+
.delay-1{transition-delay:.12s}
70+
.delay-2{transition-delay:.22s}
71+
72+
/* Light theme (switch) */
73+
body.light{background:var(--bg-light);color:var(--text-dark)}
74+
body.light .hero-logo{background:linear-gradient(135deg,var(--navy),var(--blue));box-shadow:0 6px 18px rgba(0,0,0,0.06)}
75+
body.light .footer{background:linear-gradient(90deg,#f0f4fb,#eaf2ff);color:var(--text-dark)}
76+
body.light .dev-link{color:var(--text-dark)}
77+
78+
/* Responsive */
79+
@media(max-width:900px){
80+
.hero-inner{flex-direction:column;align-items:center;text-align:center;padding:0 1rem}
81+
.hero-watermark{display:none}
82+
.contact-grid{grid-template-columns:1fr}
83+
.nav{display:none}
84+
}

0 commit comments

Comments
 (0)