code-differently · djbell261 · Mar 27, 2026 · Mar 27, 2026 · Mar 28, 2026 · Mar 30, 2026
diff --git a/src/derwinbell/about.css b/src/derwinbell/about.css
diff --git a/src/derwinbell/about.html b/src/derwinbell/about.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="about.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
+  <title>About | Derwin Bell</title>
+</head>
+<body>
+
+     <div class="scroll-progress"></div>
+
+  <header class="site-header">
+    <nav class="navbar-container">
+      <a href="index.html" class="logo">DB</a>
+
+      <ul class="nav-links">
+        <li><a href="#leadership">Leadership</a></li>
+        <li><a href="#highlights">Highlights</a></li>
+        <li><a href="#contact">Contacts</a></li>
+        <li><a href="about.html" class="active">About</a></li>
+        <li><a href="projects.html">Projects</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main>
+    <section class="about-hero">
+      <div class="about-hero-content">
+        <img src="images/DerwinBell.png" alt="Portrait of Derwin Bell" class="profile-image" />
+
+        <h1 class="about-title">Software Engineer | Backend Developer | Systems-Focused Builder</h1>
+
+        <div class="about-intro">
+          <p>
+            I’m Derwin Bell. My journey into technology began in Computer Science, where I built my
+            initial foundation in programming and problem solving, before transitioning into Information
+            Technology to deepen my understanding of systems, infrastructure, and how technology operates
+            in real-world environments.
+          </p>
+
+          <p>
+            Through hands-on IT support and software development experience, I’ve learned to think beyond
+            just writing code. I care about how systems are built, how they run, how they scale, and how
+            they solve real problems for real users.
+          </p>
+          <div class="resume-button-container">
+            <a href="resume.html" class="resume-btn">Resume</a>
+        </div>
+        </div>
+
+      </div>
+    </section>
+
+   <section id="leadership" class="leadership-section fade-section">
+  <div class="leadership-inner">
+    <h1 class="leadership-title">Leadership</h1>
+
+    <p class="leadership-highlight">
+      Leading technical environments independently while supporting 100+ users and managing 40+ systems.
+    </p>
+
+    <!-- IT INTERN STORY -->
+    <p class="leadership-text">
+      As an IT Intern, I took on a highly independent role managing classroom and lab technology across
+      multiple environments. I built, repaired, and configured over 40 computers, installed operating
+      systems, set up virtual machines, and ensured each system was ready for student use and instruction.
+    </p>
+
+    <p class="leadership-text">
+      I supported more than 100 IT students by helping them navigate systems, troubleshoot issues in real
+      time, and understand how to operate within their lab environments. I also worked closely with staff
+      and professors to prepare classrooms and maintain reliable systems for daily use.
+    </p>
+
+
+     <p class="leadership-highlight">
+      Led a Java capstone team to build a Sports News Center using OOP,
+      SOLID principles, and custom data structures.
+    </p> 
+    <p class="leadership-text">
+      I stepped into a leadership role during my Java capstone project,
+      where I helped guide my team in building a Sports News Center application. The project was designed
+      using object-oriented programming, SOLID principles, and custom data structures to create a structured
+      and maintainable system for managing content and user interactions.
+    </p>
+
+    <p class="leadership-text">
+      I contributed to shaping the architecture of the application, organizing how we approached the system,
+      and helping ensure the team stayed aligned on building a clean and functional solution. This experience
+      pushed me to think beyond individual code and take responsibility for guiding a team toward delivering
+      a complete working system.
+    </p>
+  </div>
+</section>
+
+
+    <section id="highlights" class="highlights-section fade-section">
+      <div class="highlights-inner">
+        <h2 class="highlights-title">Highlights</h2>
+
+        <div class="highlight-list">
+          <div class="highlight-item">
+            <p>Built, repaired, and configured 40+ lab computers including OS installs and virtual machines.</p>
+          </div>
+
+          <div class="highlight-item">
+            <p>Supported 100+ IT students while helping staff and professors maintain reliable classroom environments.</p>
+          </div>
+
+          <div class="highlight-item">
+            <p>Led a Java capstone team in building a Sports News Center project using OOP, SOLID principles, and custom data structures.</p>
+          </div>
+
+          <div class="highlight-item">
+            <p>Focused on backend systems, technical problem solving, and building software that works in real-world environments.</p>
+          </div>
+
+          <div class="highlight-item">
+            <p>Growing across Java, Spring Boot, databases, distributed systems, and cloud-focused engineering.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer id="contact" class="about-footer">
+    <div class="about-footer-inner">
+      <div class="footer-main">
+        <h2 class="footer-name">Derwin Bell</h2>
+        <p class="footer-role">Software Engineer / Backend Developer / Systems-Focused Builder</p>
+      </div>
+
+      <div class="footer-contact">
+        <a href="mailto:djbell261@gmail.com">djbell261@gmail.com</a>
+        <p>Wilmington, Delaware</p>
+      </div>
+
+      <div class="footer-links">
+        <a href="https://www.linkedin.com/in/derwin-bell-666336256" target="_blank" rel="noopener noreferrer">LinkedIn</a>
+        <span>/</span>
+        <a href="https://github.com/djbell261" target="_blank" rel="noopener noreferrer">GitHub</a>
+        <span>/</span>
+        <a href="projects.html">Projects</a>
+      </div>
+
+      <p class="footer-note">
+       Handcrafted by Derwin Bell
+        <img src="images/star.gif" class="footer-icon" alt="star" loading="lazy">
+
+      </p>
+    </div>
+  </footer>
+
+  <script src="about.js"></script>
+</body>
+</html>
diff --git a/src/derwinbell/about.js b/src/derwinbell/about.js
@@ -0,0 +1,28 @@
+const sections = document.querySelectorAll(".fade-section");
+
+const observer = new IntersectionObserver(
+  entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add("visible");
+      }
+    });
+  },
+  {
+    threshold: 0.15
+  }
+);
+
+sections.forEach(section => {
+  observer.observe(section);
+});
+
+const progressBar = document.querySelector(".scroll-progress");
+
+window.addEventListener("scroll", () => {
+  const scrollTop = window.scrollY;
+  const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+  const scrollPercent = (scrollTop / docHeight) * 100;
+
+  progressBar.style.width = scrollPercent + "%";
+});
diff --git a/src/derwinbell/images/DerwinBell.png b/src/derwinbell/images/DerwinBell.png
diff --git a/src/derwinbell/images/JP.png b/src/derwinbell/images/JP.png
diff --git a/src/derwinbell/images/LeetCode.png b/src/derwinbell/images/LeetCode.png
diff --git a/src/derwinbell/images/Sports.png b/src/derwinbell/images/Sports.png
diff --git a/src/derwinbell/images/Systems.png b/src/derwinbell/images/Systems.png
diff --git a/src/derwinbell/images/resume.pdf b/src/derwinbell/images/resume.pdf
diff --git a/src/derwinbell/images/star.gif b/src/derwinbell/images/star.gif
diff --git a/src/derwinbell/index.html b/src/derwinbell/index.html
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="styles.css" />
+  <title>Derwin Bell | Virtual Resume</title>
+</head>
+<body>
+  <div class="scroll-progress"></div>
+
+  <header class="site-header">
+    <nav class="navbar-container">
+      <a href="index.html" class="logo">DB</a>
+
+      <ul class="nav-links">
+        <li><a href="about.html">About</a></li>
+        <li><a href="projects.html">Projects</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main>
+   <section id="hero" class="hero-container">
+  <div class="hero-text">
+    <p class="greeting">Hello there,</p>
+    <h1 class="name">I'm Derwin Bell.</h1>
+    <p class="role"> Systems-Driven Software Engineer</p>
+
+    <p class="hero-description"> 
+    I build reliable software systems through backend development, infrastructure,
+  and practical problem solving, with a focus on creating solutions that work in
+  the real world.
+    </p>
+  </div>
+</section>
+
+    <div class="content-grid">
+      <div class="left-column">
+        <section id="about" class="about-container">
+          <h2>About Me</h2>
+
+          <p>
+            Derwin Bell is driven, curious, disciplined, and systems-minded. A focused
+            and evolving Information Technology student, problem solver, builder,
+            collaborator, and continuous learner. Logical, adaptable, detail-oriented,
+            and solution-focused. A team player with a strong work ethic, a growth
+            mindset, and a passion for building software that works in the real world.
+          </p>
+
+          <p>
+            I design and build reliable software systems, focusing on backend
+            development, systems thinking, and real-world problem solving. I approach
+            development iteratively, learning through experimentation, debugging, and
+            refining solutions to create scalable and efficient applications.
+          </p>
+
+          <p>
+            One of my strengths is combining hands-on IT experience with software
+            development. I understand not just how to build systems, but how they run,
+            fail, and scale. I work with Java, Spring Boot, databases, and distributed
+            systems while continuing to grow in cloud, infrastructure, and modern
+            software engineering practices.
+          </p>
+        </section>
+      </div>
+
+      <div class="right-column">
+        <section id="approach" class="approach-container">
+          <h2>My Approach to Work</h2>
+
+          <p>
+            My approach is rooted in continuous learning, problem solving, and building
+            with intention. I enjoy working through real-world challenges, collaborating
+            with others, and iterating on solutions to improve performance and
+            reliability.
+          </p>
+
+          <p>
+            I focus on understanding how systems work end-to-end, from development to
+            deployment. By applying industry practices and learning through hands-on
+            experience, I aim to build software that is not only functional, but
+            scalable, maintainable, and impactful.
+          </p>
+
+          <p>
+            I value clear communication, adaptability, and strong attention to detail. I
+            am constantly working to improve both my technical skills and my ability to
+            think critically, ensuring that the solutions I build align with real user
+            needs and practical outcomes.
+          </p>
+        </section>
+
+        <div class="info-grid">
+          <section id="roles" class="roles-container">
+            <h2>My Roles</h2>
+            <ul class="roles-list">
+              <li>Software Engineer</li>
+              <li>Backend Developer</li>
+              <li>Systems / Cloud-Focused Engineer</li>
+            </ul>
+          </section>
+
+          <section id="education" class="education-section">
+            <h2>Education</h2>
+            <p>Delaware Technical Community College</p>
+            <p>Information Technology (Programming Focus)</p>
+          </section>
+        </div>
+
+        <section id="contact" class="contact-section">
+          <h2>Contact</h2>
+
+          <p>
+            I am always open to new opportunities, collaborations, and conversations
+            around software engineering, backend development, and systems.
+          </p>
+
+          <div class="contact-links">
+            <a href="mailto:djbell261@gmail.com">djbell261@gmail.com</a>
+            <a href="https://www.linkedin.com/in/derwin-bell-666336256" target="_blank" rel="noopener noreferrer">LinkedIn</a>
+            <a href="https://github.com/djbell261" target="_blank" rel="noopener noreferrer">GitHub</a>
+          </div>
+        </section>
+      </div>
+    </div>
+  </main>
+  <footer class="site-footer">
+  <div class="footer-container">
+
+    <div class="footer-links">
+      <a href="https://www.linkedin.com/in/derwin-bell-666336256" target="_blank">LinkedIn</a>
+      <span>/</span>
+      <a href="https://github.com/djbell261" target="_blank">GitHub</a>
+      <span>/</span>
+      <a href="projects.html">Portfolio</a>
+    </div>
+
+    <p class="footer-text">
+      Built with ❤️ by Derwin Bell
+     <img src="images/star.gif" class="footer-icon" alt="star" loading="lazy">
+
+    </p>
+
+  </div>
+</footer>
+  <script src="script.js"></script>
+</body>
+</html>