Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
193 lines (192 loc) · 19.1 KB
/
Copy pathindex.html
File metadata and controls
193 lines (192 loc) · 19.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Free Developer Portfolio Website Template | Maya Okafor</title>
<meta name="description" content="Free developer portfolio template as a single HTML file. Projects with tech filters, coding activity chart, skills, work history, copy email button and CV link.">
<meta name="keywords" content="developer portfolio template, programmer portfolio HTML free, software engineer portfolio website, web developer resume site, free HTML template, one page website template">
<meta name="robots" content="index, follow, max-image-preview:large">
<link rel="canonical" href="https://mmrahmanbappi.github.io/100-free-html-templates/portfolio/developer-portfolio/">
<meta name="theme-color" content="#0E0E10">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Free HTML Templates">
<meta property="og:title" content="Free Developer Portfolio Website Template | Maya Okafor">
<meta property="og:description" content="Free developer portfolio template as a single HTML file. Projects with tech filters, coding activity chart, skills, work history, copy email button and CV link.">
<meta property="og:url" content="https://mmrahmanbappi.github.io/100-free-html-templates/portfolio/developer-portfolio/">
<meta property="og:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/portfolio/developer-portfolio/screenshot.png"><meta property="og:image:alt" content="Free Developer Portfolio Website Template | Maya Okafor">
<meta property="og:image:width" content="1440">
<meta property="og:image:height" content="900">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Developer Portfolio Website Template | Maya Okafor">
<meta name="twitter:description" content="Free developer portfolio template as a single HTML file. Projects with tech filters, coding activity chart, skills, work history, copy email button and CV link.">
<meta name="twitter:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/portfolio/developer-portfolio/screenshot.png">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='12' fill='%230E0E10'/><text x='32' y='42' text-anchor='middle' font-size='26' font-family='monospace' fill='%2314B8A6'>mo</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://images.unsplash.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Figtree:wght@400;600;800&display=swap" rel="stylesheet">
<!-- Structured data for this template page. When you use the template, replace it with LocalBusiness or Organization schema for your own business (see README). -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebPage",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/portfolio/developer-portfolio/#webpage",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/portfolio/developer-portfolio/",
"name": "Free Developer Portfolio Website Template (HTML)",
"description": "Free developer portfolio template as a single HTML file. Projects with tech filters, coding activity chart, skills, work history, copy email button and CV link.",
"inLanguage": "en",
"primaryImageOfPage": {
"@type": "ImageObject",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/portfolio/developer-portfolio/screenshot.png"
},
"isPartOf": {
"@type": "WebSite",
"name": "Free HTML Templates",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/"
},
"breadcrumb": {
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/portfolio/developer-portfolio/#breadcrumb"
},
"mainEntity": {
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/portfolio/developer-portfolio/#template"
}
},
{
"@type": "CreativeWork",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/portfolio/developer-portfolio/#template",
"name": "Free Developer Portfolio Website Template (HTML)",
"description": "Free developer portfolio template as a single HTML file. Projects with tech filters, coding activity chart, skills, work history, copy email button and CV link.",
"genre": "Website template",
"image": "https://mmrahmanbappi.github.io/100-free-html-templates/portfolio/developer-portfolio/screenshot.png",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/portfolio/developer-portfolio/",
"license": "https://opensource.org/licenses/MIT",
"isAccessibleForFree": true,
"encodingFormat": "text/html",
"inLanguage": "en",
"keywords": "developer portfolio template, programmer portfolio HTML free, software engineer portfolio website, web developer resume site",
"author": {
"@type": "Person",
"name": "mmrahmanbappi",
"url": "https://github.com/mmrahmanbappi"
},
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"downloadUrl": "https://mmrahmanbappi.github.io/100-free-html-templates/portfolio/developer-portfolio/index.html"
},
{
"@type": "BreadcrumbList",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/portfolio/developer-portfolio/#breadcrumb",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Free HTML Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Portfolio Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/portfolio/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Developer Portfolio Template",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/portfolio/developer-portfolio/"
}
]
}
]
}
</script>
<style>
:root{--ink:#0E0E10;--tx:#26262B;--mu:#6C6C75;--ln:#E6E6EA;--bg:#FAFAFA;--tl:#0D9488;--tl-l:#E6F5F3;--m:"Fira Code",ui-monospace,monospace;--b:"Figtree",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--b);font-size:18px;line-height:1.65;color:var(--tx);background:var(--bg)}
img{max-width:100%;height:auto;display:block}a{color:inherit}h1,h2,h3{margin:0;line-height:1.1;color:var(--ink);font-weight:800;letter-spacing:-.02em}
.wrap{max-width:1000px;margin:0 auto;padding:0 22px}.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:var(--tl);color:#fff;padding:8px;z-index:99}
:focus-visible{outline:2px solid var(--tl);outline-offset:3px;border-radius:4px}
.hd{position:sticky;top:0;z-index:40;background:rgba(250,250,250,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--ln)}.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:var(--m);font-weight:500;text-decoration:none;color:var(--ink)}.logo span{color:var(--tl)}
.menu{display:flex;gap:24px;list-style:none;margin:0;padding:0;font-family:var(--m);font-size:15px}.menu a{text-decoration:none}.menu a:hover{color:var(--tl)}
.burger{display:none;background:none;border:1px solid var(--ln);border-radius:6px;padding:6px 10px;cursor:pointer}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:8px;font-weight:600;text-decoration:none;border:1px solid var(--ink);font-family:var(--b);font-size:16px;cursor:pointer}
.btn-k{background:var(--ink);color:#fff}.btn-o{background:transparent;color:var(--ink)}
.hero{padding:80px 0 60px}.av{display:flex;align-items:center;gap:14px;margin-bottom:26px}.av img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--m);font-size:14px;background:var(--tl-l);color:var(--tl);border-radius:999px;padding:4px 12px}.status i{width:8px;height:8px;border-radius:50%;background:var(--tl)}
.hero h1{font-size:clamp(40px,6vw,74px)}.hero h1 span{color:var(--tl)}.hero p{font-size:21px;color:var(--mu);max-width:48ch;margin:22px 0 28px}
.ac{display:flex;gap:10px;flex-wrap:wrap}
.term{margin-top:40px;background:var(--ink);color:#C8C8D0;border-radius:12px;padding:20px 22px;font-family:var(--m);font-size:15px;line-height:1.8}
.term .p{color:var(--tl)}.term .c{color:#77777F}
section{padding:70px 0;border-top:1px solid var(--ln)}.sh{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.sh h2{font-size:34px}.sh .k{font-family:var(--m);font-size:14px;color:var(--tl);display:block;margin-bottom:6px}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chips button{font-family:var(--m);font-size:13px;border:1px solid var(--ln);background:#fff;border-radius:6px;padding:6px 12px;cursor:pointer}.chips button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.proj{display:grid;grid-template-columns:1fr 1fr;gap:18px}.pj{background:#fff;border:1px solid var(--ln);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.pj img{aspect-ratio:16/9;object-fit:cover;width:100%;border-bottom:1px solid var(--ln)}.pj .bd{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.pj h3{font-size:21px}.pj p{margin:0;color:var(--mu);font-size:16px}.tags{display:flex;gap:6px;flex-wrap:wrap}.tags span{font-family:var(--m);font-size:12px;background:var(--bg);border:1px solid var(--ln);border-radius:4px;padding:2px 8px}
.pj .lk{display:flex;gap:16px;margin-top:auto;font-family:var(--m);font-size:14px}.pj .lk a{color:var(--tl)}
.heat{background:#fff;border:1px solid var(--ln);border-radius:14px;padding:18px;overflow-x:auto}
.hm{display:grid;grid-template-rows:repeat(7,12px);grid-auto-flow:column;grid-auto-columns:12px;gap:3px;min-width:680px}.hm i{border-radius:2px;background:#EBEDF0}
.hm .l1{background:#B3E4DE}.hm .l2{background:#5CC7BA}.hm .l3{background:#14A394}.hm .l4{background:#0B6E64}
.hl{display:flex;justify-content:space-between;font-size:14px;color:var(--mu);margin-top:10px;font-family:var(--m)}
.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.sk{background:#fff;border:1px solid var(--ln);border-radius:12px;padding:16px}
.sk h3{font-size:16px;font-family:var(--m);font-weight:500;color:var(--tl);margin-bottom:8px}.sk ul{list-style:none;padding:0;margin:0;font-size:16px}.sk li{display:flex;justify-content:space-between;padding:4px 0}.sk li span{color:var(--mu);font-family:var(--m);font-size:13px}
.xp{list-style:none;padding:0;margin:0}.xp li{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:18px 0;border-bottom:1px dashed var(--ln)}
.xp time{font-family:var(--m);font-size:14px;color:var(--mu)}.xp h3{font-size:19px}.xp b{color:var(--tl);font-weight:600}.xp p{margin:6px 0 0;color:var(--mu);font-size:16px}
.ct{background:var(--ink);color:#C8C8D0;border-radius:18px;padding:44px;text-align:center}.ct h2{color:#fff;font-size:clamp(32px,4.4vw,52px)}.ct p{margin:14px auto 22px;max-width:44ch}
.mail{display:inline-flex;align-items:center;gap:12px;background:#1C1C21;border:1px solid #33333A;border-radius:10px;padding:10px 12px 10px 18px;font-family:var(--m)}
.mail button{background:var(--tl);color:#fff;border:0;border-radius:6px;padding:7px 12px;font:inherit;font-size:13px;cursor:pointer}
.soc{display:flex;gap:18px;justify-content:center;margin-top:20px;font-family:var(--m);font-size:15px}.soc a{color:#fff}
footer{padding:30px 0;font-family:var(--m);font-size:13px;color:var(--mu);text-align:center}
@media(max-width:760px){.menu{display:none}.burger{display:block}.menu.open{display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:var(--bg);padding:18px 22px;border-bottom:1px solid var(--ln);gap:12px}
.proj,.skills{grid-template-columns:1fr}.xp li{grid-template-columns:1fr;gap:4px}.ct{padding:30px 20px}.mail{flex-direction:column}}
</style>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<!-- Template notice bar: delete this block before you publish your own site -->
<div id="template-bar" style="background:#111;color:#fff;font:500 14px/1.4 system-ui,sans-serif;text-align:center;padding:9px 16px">Free HTML template. <a href="index.html" download="developer-portfolio.html" style="color:#FFD166;font-weight:700">Download this template (free)</a> | <a href="https://mmrahmanbappi.github.io/100-free-html-templates/" style="color:#fff">See all free templates</a></div>
<header class="hd"><nav class="wrap nav" aria-label="Main"><a href="#" class="logo">~/maya<span>.dev</span></a><ul class="menu" id="menu"><li><a href="#work">work</a></li><li><a href="#skills">skills</a></li><li><a href="#experience">experience</a></li><li><a href="#contact">contact</a></li></ul><button class="burger" aria-label="Open menu" aria-expanded="false" aria-controls="menu">☰</button></nav></header>
<main id="main" class="wrap">
<section class="hero" aria-labelledby="h1" style="border:0">
<div class="av"><img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=160&q=75&auto=format&fit=crop" alt="Maya Okafor" width="64" height="64"><span class="status"><i></i>Open to new projects from November</span></div>
<h1 id="h1">Hi, I'm Maya. I build fast, <span>friendly</span> web apps.</h1>
<p>Full-stack developer in Berlin with 8 years of experience. I help startups and product teams turn ideas into web apps people enjoy using, from the database to the last pixel.</p>
<div class="ac"><a href="#work" class="btn btn-k">See my work</a><a href="#" class="btn btn-o">Download CV (PDF)</a></div>
<div class="term" aria-label="Short summary"><div><span class="p">$</span> whoami</div><div>maya okafor · full-stack developer · berlin</div><div><span class="p">$</span> cat stack.txt</div><div>typescript, react, next.js, node, postgres, aws</div><div class="c"># currently: building a booking platform for 400 clinics</div></div>
</section>
<section id="work" aria-labelledby="w1"><div class="sh"><div><span class="k">// selected work</span><h2 id="w1">Projects</h2></div><div class="chips" role="group" aria-label="Filter by technology" id="chips"><button type="button" aria-pressed="true" data-t="all">all</button><button type="button" aria-pressed="false" data-t="React">react</button><button type="button" aria-pressed="false" data-t="Node">node</button><button type="button" aria-pressed="false" data-t="Python">python</button></div></div><div class="proj" id="proj"></div></section>
<section aria-labelledby="a1"><div class="sh"><div><span class="k">// activity</span><h2 id="a1">1,284 contributions in the last year</h2></div></div><div class="heat"><div class="hm" id="hm" role="img" aria-label="Chart of daily coding activity over the past year"></div><div class="hl"><span>Oct 2025</span><span>Less ▢▣■ More</span><span>Oct 2026</span></div></div></section>
<section id="skills" aria-labelledby="k1"><div class="sh"><div><span class="k">// toolbox</span><h2 id="k1">Skills</h2></div></div><div class="skills">
<div class="sk"><h3>frontend</h3><ul><li>TypeScript<span>8 yrs</span></li><li>React / Next.js<span>6 yrs</span></li><li>CSS and design systems<span>8 yrs</span></li><li>Accessibility<span>5 yrs</span></li></ul></div>
<div class="sk"><h3>backend</h3><ul><li>Node.js<span>7 yrs</span></li><li>PostgreSQL<span>6 yrs</span></li><li>Python / FastAPI<span>3 yrs</span></li><li>GraphQL<span>4 yrs</span></li></ul></div>
<div class="sk"><h3>ops</h3><ul><li>AWS<span>5 yrs</span></li><li>Docker<span>6 yrs</span></li><li>CI/CD<span>6 yrs</span></li><li>Testing<span>8 yrs</span></li></ul></div></div></section>
<section id="experience" aria-labelledby="x1"><div class="sh"><div><span class="k">// history</span><h2 id="x1">Experience</h2></div></div><ol class="xp">
<li><time>2023 to now</time><div><h3>Senior engineer · <b>ClinicFlow</b></h3><p>Lead developer on a booking platform used by 400 clinics. Cut page load time by 62% and rebuilt the design system.</p></div></li>
<li><time>2020 to 2023</time><div><h3>Full-stack developer · <b>Parcelio</b></h3><p>Built the delivery tracking app from zero to 2 million monthly users. Introduced end-to-end testing.</p></div></li>
<li><time>2018 to 2020</time><div><h3>Frontend developer · <b>Studio Nord</b></h3><p>Built websites and web apps for 30+ clients in retail, travel and finance.</p></div></li></ol></section>
<section id="contact" aria-labelledby="c1" style="border:0"><div class="ct"><h2 id="c1">Let's build something together.</h2><p>I take on two or three freelance projects a year, and I'm always happy to talk about full-time roles.</p><div class="mail"><span id="em">hello@maya.dev</span><button type="button" id="cp">Copy email</button></div><div class="soc"><a href="https://github.com/" rel="noopener">GitHub</a><a href="https://www.linkedin.com/" rel="noopener">LinkedIn</a><a href="#">Read my blog</a></div></div></section>
</main>
<footer>© <span id="yr">2026</span> Maya Okafor · Photos: <a href="https://unsplash.com" rel="noopener">Unsplash</a> · <a href="https://mmrahmanbappi.github.io/100-free-html-templates/">Free HTML Templates</a></footer>
<script>
const P=[["Clinic booking platform","Online booking, reminders and payments for 400 clinics. Next.js front end with a Node API.",["React","Node","Postgres"],"1551288049-bebda4e38f71"],["Parcel tracking app","Live delivery tracking with maps and push updates for 2 million monthly users.",["React","Node"],"1558494949-ef010cbdcc31"],["Price forecasting tool","A Python service that predicts demand for a grocery chain, with a simple dashboard.",["Python","FastAPI"],"1504868584819-f8e8b4b6d7e3"],["Open-source form library","A tiny, accessible form library for React with 3,400 stars on GitHub.",["React","TypeScript"],"1555066931-4365d14bab8c"]];
const $=id=>document.getElementById(id);
function proj(t){$('proj').innerHTML=P.filter(p=>t==='all'||p[2].includes(t)||(t==='Python'&&p[2].includes('Python'))).map(p=>`<article class="pj"><img src="https://images.unsplash.com/photo-${p[3]}?w=700&h=394&q=75&auto=format&fit=crop" alt="Screenshot for ${p[0]}" width="700" height="394" loading="lazy"><div class="bd"><h3>${p[0]}</h3><p>${p[1]}</p><div class="tags">${p[2].map(x=>`<span>${x}</span>`).join('')}</div><div class="lk"><a href="#">Live site</a><a href="#">Source code</a></div></div></article>`).join('')}
$('chips').onclick=e=>{const b=e.target.closest('button');if(!b)return;$('chips').querySelectorAll('button').forEach(x=>x.setAttribute('aria-pressed',x===b));proj(b.dataset.t)};proj('all');
let h='';for(let i=0;i<364;i++){const v=Math.abs(Math.sin(i*1.37)+Math.cos(i*.21))*2.2,wk=i%7>4?0.4:1,l=Math.min(4,Math.floor(v*wk));h+=`<i class="${l?'l'+l:''}"></i>`}$('hm').innerHTML=h;
$('cp').onclick=()=>{navigator.clipboard&&navigator.clipboard.writeText($('em').textContent);$('cp').textContent='Copied ✓';setTimeout(()=>$('cp').textContent='Copy email',1800)};
</script>
<script>
(()=>{const b=document.querySelector('.burger'),m=document.getElementById('menu'),y=document.getElementById('yr');
if(b&&m){b.addEventListener('click',()=>{const o=m.classList.toggle('open');b.setAttribute('aria-expanded',o)});
m.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{m.classList.remove('open');b.setAttribute('aria-expanded',false)}))}
if(y)y.textContent=new Date().getFullYear()})();
</script>
</body>
</html>