| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> |
| <title>Calculus Portfolio — Introduction to Calculus</title> |
|
|
| |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet"> |
|
|
| <style> |
| :root{ |
| --bg:#0f1724; |
| --card:#0b1020; |
| --muted:#9aa7bf; |
| --accent:#7dd3fc; |
| --accent-2:#60a5fa; |
| --glass: rgba(255,255,255,0.04); |
| --success:#34d399; |
| --danger:#fb7185; |
| --radius:16px; |
| font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; |
| } |
| |
| *{box-sizing:border-box} |
| html,body{height:100%} |
| body{ |
| margin:0; |
| background: linear-gradient(180deg, #071028 0%, #071a2e 65%); |
| color:#e6eef8; |
| -webkit-font-smoothing:antialiased; |
| -moz-osx-font-smoothing:grayscale; |
| padding:32px; |
| } |
| |
| .wrap{ |
| max-width:1100px; |
| margin:0 auto; |
| display:grid; |
| grid-template-columns: 380px 1fr; |
| gap:28px; |
| } |
| |
| |
| aside{ |
| background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); |
| border-radius:var(--radius); |
| padding:22px; |
| box-shadow: 0 6px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02); |
| min-height:520px; |
| position:sticky; |
| top:32px; |
| overflow:hidden; |
| } |
| |
| .logo{ |
| display:flex; |
| gap:14px; |
| align-items:center; |
| margin-bottom:12px; |
| } |
| .logo .mark{ |
| width:62px; |
| height:62px; |
| border-radius:12px; |
| background:linear-gradient(135deg,var(--accent),var(--accent-2)); |
| display:flex; |
| align-items:center; |
| justify-content:center; |
| font-weight:800; |
| color:#04263b; |
| font-size:20px; |
| box-shadow: 0 8px 20px rgba(96,165,250,0.14); |
| } |
| .logo h1{ |
| font-size:16px; |
| margin:0; |
| line-height:1; |
| letter-spacing:0.2px; |
| } |
| .logo p{margin:0;margin-top:4px;color:var(--muted);font-size:13px} |
| |
| .meta{ |
| display:flex; |
| gap:12px; |
| flex-wrap:wrap; |
| margin:18px 0 12px; |
| } |
| .chip{ |
| background:var(--glass); |
| padding:8px 10px; |
| border-radius:10px; |
| font-size:13px; |
| color:var(--muted); |
| box-shadow: 0 3px 10px rgba(2,6,23,0.45); |
| } |
| |
| .summary{ |
| color:var(--muted); |
| font-size:14px; |
| line-height:1.55; |
| margin-bottom:14px; |
| } |
| |
| .objectives{ |
| margin-top:12px; |
| } |
| .objectives h3{font-size:13px;margin:0 0 8px;color:var(--accent)} |
| .objectives ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.6;font-size:14px} |
| |
| |
| main{ |
| background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); |
| border-radius:var(--radius); |
| padding:26px; |
| min-height:520px; |
| box-shadow: 0 6px 40px rgba(2,6,23,0.6); |
| } |
| |
| header.port{ |
| display:flex; |
| align-items:center; |
| justify-content:space-between; |
| gap:12px; |
| margin-bottom:20px; |
| } |
| .title{ |
| display:flex; |
| gap:16px; |
| align-items:center; |
| } |
| .title h2{ |
| margin:0;font-size:20px; |
| } |
| .title p{margin:0;color:var(--muted);font-size:13px} |
| |
| .badge{ |
| background:linear-gradient(90deg,var(--accent-2),var(--accent)); |
| color:#04263b; |
| padding:10px 14px; |
| border-radius:12px; |
| font-weight:700; |
| box-shadow: 0 8px 30px rgba(96,165,250,0.08); |
| } |
| |
| |
| section.block{ |
| margin-bottom:20px; |
| padding:16px; |
| background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015)); |
| border-radius:12px; |
| } |
| .block h3{margin:0 0 10px;font-size:16px} |
| .block p{margin:0;color:var(--muted);line-height:1.6} |
| |
| .outline-grid{ |
| display:grid; |
| grid-template-columns:repeat(2,1fr); |
| gap:12px; |
| margin-top:10px; |
| } |
| .outline-item{ |
| background:rgba(255,255,255,0.02); |
| padding:12px;border-radius:10px; |
| border:1px solid rgba(255,255,255,0.02); |
| color:var(--muted); |
| font-size:14px; |
| } |
| .outline-item strong{display:block;color:#e6eef8;margin-bottom:6px} |
| |
| |
| .accordion{ |
| margin-top:10px; |
| } |
| .acco-item{ |
| border-radius:10px; |
| overflow:hidden; |
| margin-bottom:8px; |
| border:1px solid rgba(255,255,255,0.03); |
| } |
| .acco-head{ |
| display:flex;justify-content:space-between;align-items:center; |
| padding:12px;background:transparent;cursor:pointer; |
| } |
| .acco-head h4{margin:0;font-size:15px} |
| .acco-body{ |
| padding:12px 14px 16px; |
| color:var(--muted); |
| font-size:14px; |
| display:none; |
| line-height:1.6; |
| border-top:1px solid rgba(255,255,255,0.02); |
| } |
| |
| |
| .demo{ |
| display:grid; |
| grid-template-columns: 1fr 260px; |
| gap:16px; |
| align-items:center; |
| margin-top:12px; |
| } |
| .graph{ |
| background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015)); |
| border-radius:12px;padding:14px; |
| min-height:260px; |
| } |
| |
| .controls{ |
| padding:14px;border-radius:12px;background:rgba(255,255,255,0.02); |
| } |
| .controls label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px} |
| .controls input[type="range"]{width:100%} |
| .controls .val{font-weight:700;color:#e6eef8;margin-top:8px} |
| |
| footer.note{ |
| display:flex;justify-content:space-between;align-items:center; |
| gap:10px;margin-top:16px;color:var(--muted);font-size:13px; |
| } |
| |
| |
| @media (max-width:980px){ |
| .wrap{grid-template-columns:1fr; padding:0 12px} |
| aside{position:relative;top:0} |
| .demo{grid-template-columns:1fr} |
| } |
| |
| |
| .sparkle{ |
| width:100%;height:6px;margin-bottom:12px; |
| background: linear-gradient(90deg, rgba(125,211,252,0.06), rgba(96,165,250,0.06)); |
| border-radius:6px; |
| } |
| |
| .cta{ |
| display:inline-flex;gap:10px;align-items:center;padding:10px 14px;border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#04263b;font-weight:700;border:none;cursor:pointer; |
| } |
| |
| |
| .legend{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px} |
| .dot{width:10px;height:10px;border-radius:50%} |
| .dot.sec{background:rgba(125,211,252,0.9)} |
| .dot.tan{background:rgba(96,165,250,0.9)} |
| </style> |
| </head> |
| <body> |
| <div class="wrap" role="main"> |
| |
| <aside aria-label="Course overview"> |
| <div class="logo" role="banner"> |
| <div class="mark">∫d</div> |
| <div> |
| <h1>Calculus Portfolio</h1> |
| <p>Introduction to Calculus — Differential & Integral</p> |
| </div> |
| </div> |
|
|
| <div class="sparkle" aria-hidden="true"></div> |
|
|
| <div class="meta" aria-hidden="true"> |
| <div class="chip">Level: Introductory</div> |
| <div class="chip">Duration: 10–12 weeks</div> |
| <div class="chip">Format: Theory + Demo</div> |
| </div> |
|
|
| <p class="summary"> |
| Calculus studies continuous change. This portfolio summarizes the course objectives, outline, key concepts (limits, derivatives, integrals), and includes a tiny interactive demo illustrating how a secant slope approaches a derivative (tangent slope). |
| </p> |
|
|
| <div class="objectives" aria-labelledby="obj"> |
| <h3 id="obj">Course Objectives</h3> |
| <ul> |
| <li>Understand limits, derivatives & integrals</li> |
| <li>Apply techniques to physics, engineering & economics</li> |
| <li>Analyze & model real-world functions</li> |
| <li>Use derivatives to find maxima/minima</li> |
| </ul> |
| </div> |
|
|
| <div style="margin-top:14px"> |
| <button class="cta" id="downloadBtn" title="Save as PDF (print)"> |
| 📄 Save / Print |
| </button> |
| </div> |
|
|
| <div style="margin-top:18px"> |
| <small style="color:var(--muted)">Author: Calculus Instructor • Prepared as a student portfolio</small> |
| </div> |
| </aside> |
|
|
| |
| <main> |
| <header class="port"> |
| <div class="title"> |
| <div> |
| <h2>Introduction to Calculus</h2> |
| <p>Understanding differential & integral calculus — core ideas, examples, and applications.</p> |
| </div> |
| </div> |
|
|
| <div class="badge">Essentials</div> |
| </header> |
|
|
| |
| <section class="block" aria-labelledby="outlineTitle"> |
| <h3 id="outlineTitle">Course Outline</h3> |
| <div class="outline-grid" role="list"> |
| <div class="outline-item" role="listitem"> |
| <strong>Differential Calculus</strong> |
| Limits • Derivatives • Applications (tangent lines, rates, optimization) |
| </div> |
| <div class="outline-item" role="listitem"> |
| <strong>Integral Calculus</strong> |
| Indefinite/Definite Integrals • Techniques • Area & accumulation problems |
| </div> |
| <div class="outline-item" role="listitem"> |
| <strong>Foundations</strong> |
| Limits, continuity, algebra of functions |
| </div> |
| <div class="outline-item" role="listitem"> |
| <strong>Applications</strong> |
| Physics (velocity/acceleration), engineering, economics & area computations |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="block" aria-labelledby="defs"> |
| <h3 id="defs">What is Calculus?</h3> |
| <p> |
| Calculus is the study of continuous change. Historically developed by Newton and Leibniz, it focuses on two complementary ideas: |
| </p> |
|
|
| <div class="accordion" id="accordion"> |
| <div class="acco-item"> |
| <button class="acco-head" data-target="a1"><h4>Differential Calculus</h4><span>▸</span></button> |
| <div class="acco-body" id="a1"> |
| Differential calculus studies rates of change (derivatives). The derivative f'(x) = dy/dx measures how the function y = f(x) changes as x changes. It arises from the limit of a quotient: the slope of the secant line approaches the slope of the tangent line. |
| </div> |
| </div> |
|
|
| <div class="acco-item"> |
| <button class="acco-head" data-target="a2"><h4>Integral Calculus</h4><span>▸</span></button> |
| <div class="acco-body" id="a2"> |
| Integral calculus reverses differentiation: integration accumulates small pieces to get a whole. Indefinite integrals include an arbitrary constant (C); definite integrals compute accumulated values like area under a curve. |
| </div> |
| </div> |
|
|
| <div class="acco-item"> |
| <button class="acco-head" data-target="a3"><h4>Limits & Continuity</h4><span>▸</span></button> |
| <div class="acco-body" id="a3"> |
| Limits describe the behavior of a function as the input approaches a certain value. Continuity means the limit equals the function value. Limits are the foundation on which both derivatives and integrals are built. |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="block" aria-labelledby="demoTitle"> |
| <h3 id="demoTitle">Interactive Demo — Secant → Tangent (Derivative)</h3> |
| <p style="margin-bottom:12px;color:var(--muted)">Use the slider to move the second point (h). The slope of the secant line approaches the tangent slope as h → 0 for f(x) = x² at x = 1.</p> |
|
|
| <div class="demo" role="application" aria-label="Derivative demo"> |
| <div class="graph" id="svgWrap" aria-hidden="false"> |
| |
| <svg id="calcSVG" width="100%" height="260" viewBox="0 0 600 260" preserveAspectRatio="xMinYMin meet" aria-label="Graph area" role="img"></svg> |
| </div> |
|
|
| <div class="controls" aria-hidden="false"> |
| <label for="hRange">h (distance between points): <span id="hVal">0.8</span></label> |
| <input id="hRange" type="range" min="0.01" max="2" step="0.01" value="0.8" /> |
| <div style="margin-top:12px"> |
| <label for="xInput">Point x (evaluation point):</label> |
| <input id="xInput" type="number" value="1" step="0.1" style="width:100%;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#e6eef8" /> |
| </div> |
|
|
| <div class="val" style="margin-top:12px"> |
| Secant slope: <strong id="secSlope">2.6</strong> |
| </div> |
| <div class="val" style="margin-top:6px"> |
| Tangent (derivative) at x: <strong id="tanSlope">2</strong> |
| </div> |
|
|
| <div style="height:10px"></div> |
|
|
| <div class="legend" style="margin-top:10px"> |
| <div class="dot sec" aria-hidden="true"></div><span>Secant</span> |
| <div style="width:8px"></div> |
| <div class="dot tan" aria-hidden="true"></div><span>Tangent</span> |
| </div> |
| </div> |
| </div> |
|
|
| <footer class="note"> |
| <span>Formula shown uses f(x)=x². Derivative f'(x)=2x (so at x=1, tangent slope = 2).</span> |
| <span style="opacity:0.9">Try h → 0 to see secant slope approach 2.</span> |
| </footer> |
| </section> |
|
|
| |
| <section class="block" aria-labelledby="addTitle"> |
| <h3 id="addTitle">Key Formulas & Notes</h3> |
| <p style="margin-bottom:8px;color:var(--muted)"> |
| <strong>Derivative:</strong> f'(x) = limₕ→0 (f(x+h) - f(x))/h<br> |
| <strong>Indefinite Integral:</strong> ∫ f(x) dx = F(x) + C<br> |
| <strong>Definite Integral:</strong> ∫ₐᵇ f(x) dx = F(b) - F(a) |
| </p> |
|
|
| <div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:8px"> |
| <div class="chip">Applications: Motion, Area, Optimization</div> |
| <div class="chip">Tools: Analytical techniques, substitution, parts</div> |
| <div class="chip">Prereqs: Functions, algebra, exponents</div> |
| </div> |
| </section> |
|
|
| |
| <section style="display:flex;justify-content:space-between;align-items:center;margin-top:8px"> |
| <small style="color:var(--muted)">Prepared as a student portfolio • Clean, shareable, printable</small> |
| <div> |
| <button class="cta" id="toggleTheme">🌙 Toggle Theme</button> |
| </div> |
| </section> |
| </main> |
| </div> |
|
|
| <script> |
| |
| document.querySelectorAll('.acco-head').forEach(btn=>{ |
| btn.addEventListener('click', ()=>{ |
| const target = btn.getAttribute('data-target'); |
| const body = document.getElementById(target); |
| const open = body.style.display === 'block'; |
| |
| document.querySelectorAll('.acco-body').forEach(b=>b.style.display='none'); |
| |
| document.querySelectorAll('.acco-head span').forEach(s=>s.textContent='▸'); |
| if(!open){ |
| body.style.display='block'; |
| btn.querySelector('span').textContent='▾'; |
| } |
| }); |
| }); |
| |
| |
| document.querySelector('.acco-head')?.click(); |
| |
| |
| document.getElementById('downloadBtn').addEventListener('click', ()=> { |
| window.print(); |
| }); |
| |
| |
| const toggle = document.getElementById('toggleTheme'); |
| let dark = true; |
| toggle.addEventListener('click', ()=>{ |
| dark = !dark; |
| if(!dark){ |
| document.body.style.background = 'linear-gradient(180deg,#f8fafc,#e6eef8)'; |
| document.body.style.color = '#02263b'; |
| document.querySelectorAll('aside, main').forEach(el=>{ |
| el.style.background = 'linear-gradient(180deg, rgba(2,38,59,0.02), rgba(2,38,59,0.01))'; |
| el.style.boxShadow = '0 6px 20px rgba(2,6,23,0.04)'; |
| }); |
| } else { |
| location.reload(); |
| } |
| }); |
| |
| |
| (function(){ |
| const svg = document.getElementById('calcSVG'); |
| const w = 600, h = 260; |
| svg.setAttribute('viewBox','0 0 '+w+' '+h); |
| |
| |
| const xMin = -1, xMax = 3, yMin = -1, yMax = 9; |
| const mapX = x => ( (x - xMin) / (xMax - xMin) ) * (w-60) + 40; |
| const mapY = y => h - ( (y - yMin) / (yMax - yMin) ) * (h-40) - 20; |
| |
| |
| function drawAxes(){ |
| svg.innerHTML = ''; |
| const ns = 'http://www.w3.org/2000/svg'; |
| |
| |
| for(let gx = Math.ceil(xMin); gx<=Math.floor(xMax); gx++){ |
| const xPos = mapX(gx); |
| const line = document.createElementNS(ns,'line'); |
| line.setAttribute('x1',xPos); line.setAttribute('x2',xPos); |
| line.setAttribute('y1',20); line.setAttribute('y2',h-20); |
| line.setAttribute('stroke','rgba(255,255,255,0.02)'); |
| line.setAttribute('stroke-width','1'); |
| svg.appendChild(line); |
| |
| const txt = document.createElementNS(ns,'text'); |
| txt.setAttribute('x', xPos); |
| txt.setAttribute('y', h-6); |
| txt.setAttribute('fill','rgba(230,238,248,0.45)'); |
| txt.setAttribute('font-size','10'); |
| txt.setAttribute('text-anchor','middle'); |
| txt.textContent = gx; |
| svg.appendChild(txt); |
| } |
| |
| for(let gy = 0; gy<=8; gy+=1){ |
| const yPos = mapY(gy); |
| const line = document.createElementNS(ns,'line'); |
| line.setAttribute('y1',yPos); line.setAttribute('y2',yPos); |
| line.setAttribute('x1',40); line.setAttribute('x2',w-20); |
| line.setAttribute('stroke','rgba(255,255,255,0.02)'); |
| line.setAttribute('stroke-width','1'); |
| svg.appendChild(line); |
| } |
| |
| |
| const axisX = document.createElementNS(ns,'line'); |
| axisX.setAttribute('x1',mapX(xMin)); axisX.setAttribute('x2',mapX(xMax)); |
| axisX.setAttribute('y1', mapY(0)); axisX.setAttribute('y2', mapY(0)); |
| axisX.setAttribute('stroke','rgba(230,238,248,0.12)'); |
| axisX.setAttribute('stroke-width','1.5'); |
| svg.appendChild(axisX); |
| |
| const axisY = document.createElementNS(ns,'line'); |
| axisY.setAttribute('x1',mapX(0)); axisY.setAttribute('x2',mapX(0)); |
| axisY.setAttribute('y1', mapY(yMin)); axisY.setAttribute('y2', mapY(yMax)); |
| axisY.setAttribute('stroke','rgba(230,238,248,0.12)'); |
| axisY.setAttribute('stroke-width','1.5'); |
| svg.appendChild(axisY); |
| } |
| |
| function plotFunction(){ |
| const ns = 'http://www.w3.org/2000/svg'; |
| const path = document.createElementNS(ns,'path'); |
| let d = ''; |
| const steps = 200; |
| for(let i=0;i<=steps;i++){ |
| const t = i/steps; |
| const x = xMin + t*(xMax - xMin); |
| const y = x*x; |
| const px = mapX(x), py = mapY(y); |
| d += (i===0? 'M':'L') + px + ' ' + py + ' '; |
| } |
| path.setAttribute('d', d); |
| path.setAttribute('stroke','rgba(125,211,252,0.95)'); |
| path.setAttribute('stroke-width','2.2'); |
| path.setAttribute('fill','none'); |
| svg.appendChild(path); |
| } |
| |
| function drawPoints(x, h){ |
| const ns = 'http://www.w3.org/2000/svg'; |
| const x1 = x; |
| const x2 = x + h; |
| const y1 = x1*x1; |
| const y2 = x2*x2; |
| |
| const p1x = mapX(x1), p1y = mapY(y1); |
| const p2x = mapX(x2), p2y = mapY(y2); |
| |
| |
| const c1 = document.createElementNS(ns,'circle'); |
| c1.setAttribute('cx',p1x); c1.setAttribute('cy',p1y); c1.setAttribute. |
