diff --git a/src/derwinbell/about.css b/src/derwinbell/about.css new file mode 100644 index 0000000..76367d8 --- /dev/null +++ b/src/derwinbell/about.css @@ -0,0 +1,414 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +/* 🔥 UPDATED FONT SYSTEM */ +body { + font-family: 'Inter', sans-serif; + background: #05070b; + color: #f5f5f5; +} + +/* HEADINGS = STRONGER FONT */ +.about-title, +.leadership-title, +.footer-name, +.highlights-title { + font-family: 'Space Grotesk', sans-serif; + letter-spacing: -0.02em; +} + +/* SMALL POLISH */ +.about-title { + font-weight: 600; +} + +.leadership-title { + font-weight: 600; +} + +.footer-name { + font-weight: 700; +} + +/* ===== HEADER ===== */ +.site-header { + position: sticky; + top: 0; + z-index: 1000; + background: rgba(5, 7, 11, 0.92); + backdrop-filter: blur(10px); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.navbar-container { + max-width: 1250px; + margin: 0 auto; + padding: 1.5rem 4rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + text-decoration: none; + color: #f5f5f5; + font-size: 1rem; + font-weight: 600; +} + +.nav-links { + list-style: none; + display: flex; + gap: 2rem; +} + +.nav-links a { + text-decoration: none; + color: #f5f5f5; + font-size: 1rem; + position: relative; +} + +.nav-links a.active, +.nav-links a:hover { + color: #38d9e6; +} + +.nav-links a.active::after, +.nav-links a:hover::after { + content: ""; + position: absolute; + left: 0; + bottom: -6px; + width: 100%; + height: 2px; + background: #38d9e6; +} + +/* ===== HERO ===== */ +.about-hero { + min-height: 90vh; + display: flex; + align-items: center; + justify-content: center; + padding: 5rem 2rem 6rem; + text-align: center; +} + +.about-hero-content { + max-width: 980px; +} + +.profile-image { + width: 240px; + height: 240px; + object-fit: cover; + border-radius: 50%; + border: 8px solid rgba(255, 255, 255, 0.92); + box-shadow: 0 0 50px rgba(255, 255, 255, 0.16); + margin-bottom: 2rem; + + opacity: 0; + transform: translateY(30px); + animation: fadeUp 0.9s ease forwards; + animation-delay: 0.2s; +} + +.about-title { + font-size: clamp(2.2rem, 5vw, 4.4rem); + line-height: 1.12; + color: #38d9e6; + margin-bottom: 1.75rem; + + opacity: 0; + transform: translateY(30px); + animation: fadeUp 0.9s ease forwards; + animation-delay: 1s; +} + +.about-intro { + max-width: 900px; + margin: 0 auto; + + opacity: 0; + transform: translateY(30px); + animation: fadeUp 0.9s ease forwards; + animation-delay: 1.8s; +} + +.about-intro p { + font-size: clamp(1.05rem, 2vw, 1.25rem); + line-height: 1.9; + color: #d1d5db; + margin-bottom: 1.4rem; +} + +/* ===== RESUME BUTTON ===== */ +.resume-button-container { + margin-top: 2.5rem; + display: flex; + justify-content: center; +} + +.resume-btn { + display: inline-block; + padding: 0.9rem 2.2rem; + background: rgba(255, 255, 255, 0.08); + color: #f5f5f5; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + border-radius: 8px; + border: 1px solid rgba(255, 255, 255, 0.12); + + transition: all 0.25s ease; + letter-spacing: 0.02em; + backdrop-filter: blur(6px); +} + +/* Hover effect (clean, not flashy) */ +.resume-btn:hover { + background: #38d9e6; + color: #05070b; + border-color: #38d9e6; +} + +/* ===== LEADERSHIP ===== */ +.leadership-section { + background: #f5f5f5; + color: #111; + padding: 7rem 4rem; + margin-top: 2rem; +} + +.leadership-inner { + max-width: 1100px; + margin: 0 auto; +} + +.leadership-title { + font-size: clamp(3rem, 8vw, 6.5rem); + line-height: 0.95; + margin-bottom: 2rem; + color: #111; +} + +.leadership-highlight { + font-weight: 600; + font-size: 1.2rem; + line-height: 1.7; + margin-bottom: 1.5rem; + color: #111; + max-width: 850px; +} + +.leadership-text { + font-size: 1.08rem; + line-height: 1.95; + color: #4b5563; + max-width: 850px; + margin-bottom: 1.5rem; +} + +.leadership-text:nth-of-type(3) { + margin-top: 2.5rem; +} + +/* ===== HIGHLIGHTS ===== */ +.highlights-section { + background: #dfe3e8; + padding: 7rem 4rem; +} + +.highlights-inner { + max-width: 900px; + margin: 0 auto; +} + +.highlights-title { + text-align: center; + font-size: 2.4rem; + color: #111; + margin-bottom: 2.5rem; +} + +.highlight-list { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.highlight-item { + padding: 1rem 0; + border-bottom: 2px solid #38d9e6; +} + +.highlight-item p { + font-size: 1.08rem; + line-height: 1.8; + color: #111; +} + +/* ===== FOOTER ===== */ +.about-footer { + background: #02040a; + padding: 7rem 2rem 5rem; +} + +.about-footer-inner { + max-width: 900px; + margin: 0 auto; + text-align: center; +} + +.footer-main { + margin-bottom: 2.5rem; +} + +.footer-name { + font-size: clamp(3rem, 8vw, 6rem); + line-height: 0.95; + color: #ffffff; + margin-bottom: 1rem; +} + +.footer-role { + font-size: 1.2rem; + color: #d1d5db; + line-height: 1.7; +} + +.footer-contact { + margin-bottom: 2.5rem; +} + +.footer-contact a, +.footer-contact p { + display: block; + color: #f5f5f5; + text-decoration: none; + font-size: 1.15rem; + line-height: 1.8; +} + +.footer-contact a:hover { + color: #38d9e6; +} + +.footer-links { + display: flex; + justify-content: center; + align-items: center; + gap: 0.6rem; + flex-wrap: wrap; + margin-bottom: 2.2rem; + font-size: 1.05rem; + font-weight: 600; +} + +.footer-links a { + color: #ffffff; + text-decoration: none; + transition: opacity 0.2s ease; +} + +.footer-links a:hover { + opacity: 0.7; +} + +.footer-links span { + color: #38d9e6; +} + +.footer-note { + font-size: 1rem; + color: #9ca3af; +} + +.footer-icon { + width: 18px; + height: 18px; + vertical-align: middle; + margin: 0 6px; +} + +/* ===== ANIMATION ===== */ +.fade-section { + opacity: 0; + transform: translateY(35px); + transition: all 0.8s ease; +} + +.fade-section.visible { + opacity: 1; + transform: translateY(0); +} + +@keyframes fadeUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== RESPONSIVE ===== */ +@media (max-width: 900px) { + .navbar-container, + .leadership-section, + .highlights-section { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .profile-image { + width: 190px; + height: 190px; + } +} + +@media (max-width: 600px) { + .navbar-container { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + .about-hero { + min-height: auto; + padding-top: 6rem; + padding-bottom: 4rem; + } + + .leadership-title, + .footer-name { + line-height: 1; + } + + .footer-role, + .footer-contact a, + .footer-contact p { + font-size: 1rem; + } +} + +/* SCROLL BAR */ +.scroll-progress { + position: fixed; + top: 0; + left: 0; + width: 0%; + height: 4px; + background: #d6cbcb; + z-index: 2000; +} \ No newline at end of file diff --git a/src/derwinbell/about.html b/src/derwinbell/about.html new file mode 100644 index 0000000..1f9e78d --- /dev/null +++ b/src/derwinbell/about.html @@ -0,0 +1,158 @@ + + + + + + + + About | Derwin Bell + + + +
+ + + +
+
+
+ Portrait of Derwin Bell + +

Software Engineer | Backend Developer | Systems-Focused Builder

+ +
+

+ 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. +

+ +

+ 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. +

+
+ Resume +
+
+ +
+
+ +
+
+

Leadership

+ +

+ Leading technical environments independently while supporting 100+ users and managing 40+ systems. +

+ + +

+ 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. +

+ +

+ 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. +

+ + +

+ Led a Java capstone team to build a Sports News Center using OOP, + SOLID principles, and custom data structures. +

+

+ 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. +

+ +

+ 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. +

+
+
+ + +
+
+

Highlights

+ +
+
+

Built, repaired, and configured 40+ lab computers including OS installs and virtual machines.

+
+ +
+

Supported 100+ IT students while helping staff and professors maintain reliable classroom environments.

+
+ +
+

Led a Java capstone team in building a Sports News Center project using OOP, SOLID principles, and custom data structures.

+
+ +
+

Focused on backend systems, technical problem solving, and building software that works in real-world environments.

+
+ +
+

Growing across Java, Spring Boot, databases, distributed systems, and cloud-focused engineering.

+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/src/derwinbell/about.js b/src/derwinbell/about.js new file mode 100644 index 0000000..7812db1 --- /dev/null +++ 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 + "%"; +}); \ No newline at end of file diff --git a/src/derwinbell/images/DerwinBell.png b/src/derwinbell/images/DerwinBell.png new file mode 100644 index 0000000..822cd50 Binary files /dev/null and b/src/derwinbell/images/DerwinBell.png differ diff --git a/src/derwinbell/images/JP.png b/src/derwinbell/images/JP.png new file mode 100644 index 0000000..8626348 Binary files /dev/null and b/src/derwinbell/images/JP.png differ diff --git a/src/derwinbell/images/LeetCode.png b/src/derwinbell/images/LeetCode.png new file mode 100644 index 0000000..def4cad Binary files /dev/null and b/src/derwinbell/images/LeetCode.png differ diff --git a/src/derwinbell/images/Sports.png b/src/derwinbell/images/Sports.png new file mode 100644 index 0000000..1cdc374 Binary files /dev/null and b/src/derwinbell/images/Sports.png differ diff --git a/src/derwinbell/images/Systems.png b/src/derwinbell/images/Systems.png new file mode 100644 index 0000000..edcadbc Binary files /dev/null and b/src/derwinbell/images/Systems.png differ diff --git a/src/derwinbell/images/resume.pdf b/src/derwinbell/images/resume.pdf new file mode 100644 index 0000000..f76cb49 Binary files /dev/null and b/src/derwinbell/images/resume.pdf differ diff --git a/src/derwinbell/images/star.gif b/src/derwinbell/images/star.gif new file mode 100644 index 0000000..adcb195 Binary files /dev/null and b/src/derwinbell/images/star.gif differ diff --git a/src/derwinbell/index.html b/src/derwinbell/index.html new file mode 100644 index 0000000..e6ea536 --- /dev/null +++ b/src/derwinbell/index.html @@ -0,0 +1,149 @@ + + + + + + + Derwin Bell | Virtual Resume + + +
+ + + +
+
+
+

Hello there,

+

I'm Derwin Bell.

+

Systems-Driven Software Engineer

+ +

+ 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. +

+
+
+ +
+
+
+

About Me

+ +

+ 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. +

+ +

+ 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. +

+ +

+ 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. +

+
+
+ +
+
+

My Approach to Work

+ +

+ 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. +

+ +

+ 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. +

+ +

+ 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. +

+
+ +
+
+

My Roles

+
    +
  • Software Engineer
  • +
  • Backend Developer
  • +
  • Systems / Cloud-Focused Engineer
  • +
+
+ +
+

Education

+

Delaware Technical Community College

+

Information Technology (Programming Focus)

+
+
+ +
+

Contact

+ +

+ I am always open to new opportunities, collaborations, and conversations + around software engineering, backend development, and systems. +

+ + +
+
+
+
+ + + + \ No newline at end of file diff --git a/src/derwinbell/projects.css b/src/derwinbell/projects.css new file mode 100644 index 0000000..47346e8 --- /dev/null +++ b/src/derwinbell/projects.css @@ -0,0 +1,528 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Inter', sans-serif; + color: #f5f5f5; + min-height: 100vh; + transition: background 0.5s ease; +} + +/* ===== PAGE FADE IN ===== */ +.fade-in { + opacity: 0; + transform: translateY(12px); + animation: pageFadeIn 0.6s ease forwards; +} + +@keyframes pageFadeIn { + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== DYNAMIC BACKGROUNDS ===== */ +body.project-theme-0 { + background: linear-gradient(180deg, #07131a 0%, #0d2d38 100%); +} + +body.project-theme-1 { + background: linear-gradient(180deg, #1b0f2a 0%, #35204d 100%); +} + +body.project-theme-2 { + background: linear-gradient(180deg, #122014 0%, #203d26 100%); +} + +body.project-theme-3 { + background: linear-gradient(180deg, #25130d 0%, #4c2819 100%); +} + +/* Header */ +.site-header { + position: sticky; + top: 0; + z-index: 1000; + background: rgba(5, 7, 11, 0.3); + backdrop-filter: blur(12px); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.navbar-container { + max-width: 1250px; + margin: 0 auto; + padding: 1.5rem 4rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + text-decoration: none; + color: #f5f5f5; + font-size: 1rem; + font-weight: 700; +} + +.nav-links { + list-style: none; + display: flex; + gap: 2.2rem; +} + +.nav-links a { + text-decoration: none; + color: #f5f5f5; + font-size: 1rem; + position: relative; +} + +.nav-links a.active, +.nav-links a:hover { + color: #38d9e6; +} + +.nav-links a.active::after, +.nav-links a:hover::after { + content: ""; + position: absolute; + left: 0; + bottom: -6px; + width: 100%; + height: 2px; + background: #38d9e6; +} + +/* Hero */ +.projects-hero { + padding: 6rem 2rem 2rem; +} + +.projects-hero-inner { + max-width: 1000px; + margin: 0 auto; + text-align: center; +} + +.projects-eyebrow { + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 0.14em; + color: #9be7ef; + margin-bottom: 1rem; +} + +.projects-title { + font-size: clamp(2.8rem, 7vw, 5.5rem); + line-height: 0.96; + letter-spacing: -0.04em; + margin-bottom: 1rem; +} + +.projects-subtitle { + max-width: 760px; + margin: 0 auto; + font-size: 1.08rem; + line-height: 1.85; + color: rgba(255, 255, 255, 0.82); +} + +/* Carousel */ +.project-carousel-section { + padding: 2rem 2rem 6rem; +} + +.carousel-shell { + max-width: 1200px; + margin: 0 auto 3rem; + display: grid; + grid-template-columns: 72px 1fr 72px; + align-items: center; + gap: 1rem; +} + +.carousel-btn { + width: 56px; + height: 56px; + margin: 0 auto; + border-radius: 50%; + border: 1px solid rgba(255, 255, 255, 0.18); + background: rgba(255, 255, 255, 0.08); + color: #ffffff; + font-size: 1.25rem; + cursor: pointer; + transition: all 0.25s ease; +} + +.carousel-btn:hover { + background: #ffffff; + color: #111; +} + +.carousel-track { + position: relative; + height: 440px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + perspective: 1200px; +} + +.project-panel { + position: absolute; + width: 290px; + height: 370px; + transition: transform 0.55s ease, opacity 0.55s ease, filter 0.55s ease; + cursor: pointer; +} + +.project-card-visual { + position: relative; + height: 100%; + border-radius: 24px; + overflow: hidden; + box-shadow: 0 24px 50px rgba(0, 0, 0, 0.25); + background: #111; +} + +.project-image { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + object-fit: cover; +} + +.project-overlay { + position: absolute; + inset: 0; + background: linear-gradient( + to top, + rgba(0, 0, 0, 0.72) 0%, + rgba(0, 0, 0, 0.28) 45%, + rgba(0, 0, 0, 0.08) 100% + ); +} + +.project-number { + position: absolute; + top: 1.2rem; + left: 1.2rem; + font-size: 0.82rem; + font-weight: 700; + color: rgba(255, 255, 255, 0.84); + letter-spacing: 0.08em; + z-index: 2; +} + +.project-text { + position: absolute; + left: 1.5rem; + right: 1.5rem; + bottom: 1.5rem; + z-index: 2; + color: #fff; + text-align: left; +} + +.project-text h2 { + font-size: 1.35rem; + line-height: 1.12; + margin-bottom: 0.35rem; + letter-spacing: -0.03em; +} + +.project-text p { + font-size: 0.95rem; + color: rgba(255, 255, 255, 0.85); +} + +.project-panel.active { + transform: translateX(0) scale(1); + z-index: 3; + opacity: 1; +} + +.project-panel.left { + transform: translateX(-220px) scale(0.88) rotateY(24deg); + z-index: 2; + opacity: 0.62; + filter: blur(0.4px); +} + +.project-panel.right { + transform: translateX(220px) scale(0.88) rotateY(-24deg); + z-index: 2; + opacity: 0.62; + filter: blur(0.4px); +} + +.project-panel.hidden-left { + transform: translateX(-430px) scale(0.72) rotateY(30deg); + z-index: 1; + opacity: 0; +} + +.project-panel.hidden-right { + transform: translateX(430px) scale(0.72) rotateY(-30deg); + z-index: 1; + opacity: 0; +} + +/* DETAILS */ +.project-details { + max-width: 980px; + margin: 0 auto; + text-align: center; + padding: 2rem 1rem 0; + animation: fadeInUp 0.45s ease; +} + +.detail-label { + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 0.12em; + color: #9be7ef; + margin-bottom: 0.9rem; +} + +.detail-title { + font-size: clamp(2rem, 5vw, 3.2rem); + line-height: 1.05; + letter-spacing: -0.03em; + margin-bottom: 1rem; +} + +.detail-description { + max-width: 820px; + margin: 0 auto 2rem; + font-size: 1.08rem; + line-height: 1.9; + color: rgba(255, 255, 255, 0.84); +} + +.detail-meta { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.25rem; + max-width: 980px; + margin: 0 auto 2rem; +} + +.meta-block { + padding: 1.25rem; + border-radius: 18px; + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.meta-block h4 { + font-size: 0.92rem; + margin-bottom: 0.55rem; + color: #ffffff; +} + +.meta-block p { + font-size: 0.98rem; + line-height: 1.7; + color: rgba(255, 255, 255, 0.78); +} + +.github-link { + display: inline-block; + text-decoration: none; + color: #111; + background: #ffffff; + padding: 0.95rem 1.5rem; + border-radius: 12px; + font-weight: 700; + transition: transform 0.2s ease, opacity 0.2s ease; +} + +.github-link:hover { + transform: translateY(-2px); + opacity: 0.92; +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(14px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* Mobile */ +@media (max-width: 900px) { + .navbar-container, + .projects-hero, + .project-carousel-section { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .carousel-shell { + grid-template-columns: 1fr; + gap: 1.2rem; + } + + .carousel-btn { + display: none; + } + + .carousel-track { + height: auto; + min-height: 360px; + } + + .project-panel { + width: 250px; + height: 330px; + } + + .project-panel.left { + transform: translateX(-120px) scale(0.82); + } + + .project-panel.right { + transform: translateX(120px) scale(0.82); + } + + .detail-meta { + grid-template-columns: 1fr; + } +} + +@media (max-width: 600px) { + .navbar-container { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + .nav-links { + gap: 1.2rem; + } + + .projects-title { + line-height: 1; + } + + .project-panel { + width: 220px; + height: 300px; + } + + .project-panel.left, + .project-panel.right { + opacity: 0.35; + } + + .project-text h2 { + font-size: 1.1rem; + } + + .project-text p, + .detail-description, + .meta-block p { + font-size: 1rem; + } +} + +/* Footer */ +.about-footer { + background: #02040a; + padding: 7rem 2rem 5rem; + margin-top: 4rem; +} + +.about-footer-inner { + max-width: 900px; + margin: 0 auto; + text-align: center; +} + +.footer-main { + margin-bottom: 2.5rem; +} + +.footer-name { + font-family: 'Space Grotesk', sans-serif; + font-size: clamp(3rem, 8vw, 6rem); + line-height: 0.95; + color: #ffffff; + margin-bottom: 1rem; + letter-spacing: -0.02em; +} + +.footer-role { + font-size: 1.2rem; + color: #d1d5db; + line-height: 1.7; +} + +.footer-contact { + margin-bottom: 2.5rem; +} + +.footer-contact a, +.footer-contact p { + display: block; + color: #f5f5f5; + text-decoration: none; + font-size: 1.15rem; + line-height: 1.8; +} + +.footer-contact a:hover { + color: #38d9e6; +} + +.footer-links { + display: flex; + justify-content: center; + align-items: center; + gap: 0.6rem; + flex-wrap: wrap; + margin-bottom: 2.2rem; + font-size: 1.05rem; + font-weight: 600; +} + +.footer-links a { + color: #ffffff; + text-decoration: none; + transition: opacity 0.2s ease; +} + +.footer-links a:hover { + opacity: 0.7; +} + +.footer-links span { + color: #38d9e6; +} + +.footer-note { + font-size: 1rem; + color: #9ca3af; +} + +.footer-icon { + width: 18px; + height: 18px; + vertical-align: middle; + margin: 0 6px; +} \ No newline at end of file diff --git a/src/derwinbell/projects.html b/src/derwinbell/projects.html new file mode 100644 index 0000000..892b129 --- /dev/null +++ b/src/derwinbell/projects.html @@ -0,0 +1,113 @@ + + + + + + + + + + + + Projects | Derwin Bell + + + + +
+
+
+

Selected Work

+

Projects I’m building.

+

+ A mix of backend systems, Java applications, engineering simulations, + and problem-solving work that shows how I think and build. +

+
+
+ + +
+ + + + + + \ No newline at end of file diff --git a/src/derwinbell/projects.js b/src/derwinbell/projects.js new file mode 100644 index 0000000..3a584d3 --- /dev/null +++ b/src/derwinbell/projects.js @@ -0,0 +1,153 @@ +const projects = [ + { + label: "Project 01", + shortTitle: "LabWatch Platform", + title: "LabWatch", + subtitle: "Backend Systems", + description: + "LabWatch Platform is a distributed, event-driven monitoring system that simulates real-world infrastructure alerting workflows. Built with Spring Boot microservices and Apache Kafka, it ingests machine telemetry, processes events asynchronously, and manages alert lifecycles with deduplication and state transitions (ACTIVE → RESOLVED). The system is containerized with Docker and backed by PostgreSQL for scalable, production-style deployment.", + tech: "Java, Spring Boot, Apache Kafka, PostgreSQL, Hibernate (JPA), Docker, Maven, Event-Driven Microservices Architecture", + focus: "Backend architecture, event processing, alert lifecycle management", + status: "In Progress", + link: "https://github.com/djbell261/labwatch-platform.git", + image: "images/Systems.png" + }, + { + label: "Project 02", + shortTitle: "Sports News Center", + title: "Sports News Center", + subtitle: "Java Application", + description: + "A Java application built around object-oriented design where users can interact with sports content, manage articles, and work through structured content workflows. The project emphasizes OOP, SOLID principles, and custom data structures.", + tech: "Java, OOP, SOLID, Custom Data Structures", + focus: "Application architecture, clean logic, object-oriented design", + status: "In Progress", + link: "https://github.com/djbell261", + image: "images/Sports.png" + }, + { + label: "Project 03", + shortTitle: "JPMorgan Simulation", + title: "JPMorgan Chase Software Engineering Job Simulation", + subtitle: "Microservice Workflow", + description: + "A practical engineering simulation centered on backend development concepts, including transaction processing, service integration, REST endpoints, and structured workflow execution.", + tech: "Spring Boot, Kafka, REST APIs, SQL, JPA, H2", + focus: "Event-driven backend logic, API integration, service architecture", + status: "Completed", + link: "https://github.com/djbell261/forage-midas.git", + image: "images/JP.png" + }, + { + label: "Project 04", + shortTitle: "LeetCode Repository", + title: "LeetCode Solutions Repository", + subtitle: "Problem Solving", + description: + "A growing GitHub repository of algorithm and data structure solutions used to strengthen problem-solving, coding fluency, and technical interview readiness over time.", + tech: "Java, Data Structures, Algorithms, GitHub", + focus: "Problem solving, coding patterns, technical interview prep", + status: "Ongoing", + link: "https://github.com/djbell261/My-LeetCode-Solutions.git", + image: "images/LeetCode.png" + } +]; + +const carouselTrack = document.getElementById("carouselTrack"); +const prevBtn = document.getElementById("prevBtn"); +const nextBtn = document.getElementById("nextBtn"); + +const detailLabel = document.getElementById("detailLabel"); +const detailTitle = document.getElementById("detailTitle"); +const detailDescription = document.getElementById("detailDescription"); +const detailTech = document.getElementById("detailTech"); +const detailFocus = document.getElementById("detailFocus"); +const detailStatus = document.getElementById("detailStatus"); +const detailLink = document.getElementById("detailLink"); + +let currentIndex = 0; + +function createCards() { + carouselTrack.innerHTML = ""; + + projects.forEach((project, index) => { + const card = document.createElement("article"); + card.className = "project-panel"; + card.dataset.index = index; + + card.innerHTML = ` +
+ ${project.title} preview +
+ ${String(index + 1).padStart(2, "0")} +
+

${project.shortTitle}

+

${project.subtitle}

+
+
+ `; + + card.addEventListener("click", () => { + currentIndex = index; + renderCarousel(); + renderDetails(); + }); + + carouselTrack.appendChild(card); + }); +} + +function renderCarousel() { + const cards = document.querySelectorAll(".project-panel"); + + cards.forEach((card, index) => { + card.classList.remove("active", "left", "right", "hidden-left", "hidden-right"); + + if (index === currentIndex) { + card.classList.add("active"); + } else if (index === (currentIndex - 1 + projects.length) % projects.length) { + card.classList.add("left"); + } else if (index === (currentIndex + 1) % projects.length) { + card.classList.add("right"); + } else if (index < currentIndex) { + card.classList.add("hidden-left"); + } else { + card.classList.add("hidden-right"); + } + }); + + document.body.className = `project-theme-${currentIndex}`; +} + +function renderDetails() { + const project = projects[currentIndex]; + + detailLabel.textContent = project.label; + detailTitle.textContent = project.title; + detailDescription.textContent = project.description; + detailTech.textContent = project.tech; + detailFocus.textContent = project.focus; + detailStatus.textContent = project.status; + detailLink.href = project.link; + + const details = document.getElementById("projectDetails"); + details.style.animation = "none"; + void details.offsetWidth; + details.style.animation = "fadeInUp 0.45s ease"; +} + +prevBtn.addEventListener("click", () => { + currentIndex = (currentIndex - 1 + projects.length) % projects.length; + renderCarousel(); + renderDetails(); +}); + +nextBtn.addEventListener("click", () => { + currentIndex = (currentIndex + 1) % projects.length; + renderCarousel(); + renderDetails(); +}); + +createCards(); +renderCarousel(); +renderDetails(); \ No newline at end of file diff --git a/src/derwinbell/resume.css b/src/derwinbell/resume.css new file mode 100644 index 0000000..d8ed126 --- /dev/null +++ b/src/derwinbell/resume.css @@ -0,0 +1,340 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Inter', sans-serif; + background: #000; + color: #111; +} + +/* ===== HEADER ===== */ +.site-header { + position: sticky; + top: 0; + z-index: 1000; + background: #000; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); +} + +.navbar-container { + max-width: 1250px; + margin: 0 auto; + padding: 1.5rem 4rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + text-decoration: none; + color: #f5f5f5; + font-size: 1rem; + font-weight: 600; +} + +.nav-links { + list-style: none; + display: flex; + gap: 2.25rem; +} + +.nav-links a { + text-decoration: none; + color: #f5f5f5; + font-size: 1rem; + position: relative; +} + +.nav-links a.active, +.nav-links a:hover { + color: #38d9e6; +} + +.nav-links a.active::after, +.nav-links a:hover::after { + content: ""; + position: absolute; + left: 0; + bottom: -6px; + width: 100%; + height: 2px; + background: #38d9e6; +} + +/* ===== HERO ===== */ +.resume-hero { + background: #f3f4f6; + padding: 7rem 2rem 6rem; +} + +.resume-hero-inner { + max-width: 1100px; + margin: 0 auto; +} + +.resume-name { + font-family: 'Cormorant Garamond', serif; + font-size: clamp(3.5rem, 7vw, 6.2rem); + line-height: 0.95; + font-weight: 600; + color: #111; + margin-bottom: 2rem; + letter-spacing: -0.03em; +} + +.resume-summary { + max-width: 860px; + font-size: 1.2rem; + line-height: 1.9; + color: #556070; + margin-bottom: 3rem; +} + +.resume-top-row { + display: flex; + justify-content: space-between; + align-items: center; + gap: 2rem; + flex-wrap: wrap; +} + +.resume-email { + font-size: 2rem; + font-weight: 500; + color: #111; +} + +.download-btn { + display: inline-block; + padding: 1rem 2rem; + background: #334155; + color: #fff; + text-decoration: none; + font-size: 1rem; + font-weight: 600; + border-radius: 8px; + transition: all 0.25s ease; +} + +.download-btn:hover { + background: #38d9e6; + color: #05070b; +} + +/* ===== GENERAL SECTIONS ===== */ +.resume-section { + padding: 6rem 2rem; +} + +.light-section { + background: #dfe3e8; +} + +.border-top { + border-top: 1px solid rgba(0, 0, 0, 0.08); +} + +.resume-container { + max-width: 1100px; + margin: 0 auto; +} + +/* ===== SECTION TITLE ===== */ +.section-title { + font-size: clamp(2.5rem, 5vw, 4rem); + line-height: 1; + font-weight: 800; + color: #111; + margin-bottom: 3.5rem; + letter-spacing: -0.03em; +} + +/* ===== ENTRIES ===== */ +.resume-entry { + max-width: 850px; + margin-bottom: 3.5rem; +} + +.entry-date { + font-size: 1rem; + color: #374151; + margin-bottom: 0.6rem; +} + +.entry-title { + font-size: 2rem; + font-weight: 800; + color: #111; + margin-bottom: 0.45rem; + line-height: 1.15; +} + +.entry-subtitle { + font-size: 1.1rem; + font-weight: 500; + color: #374151; + margin-bottom: 1rem; +} + +.entry-text { + font-size: 1.08rem; + line-height: 1.9; + color: #374151; + margin-bottom: 1rem; + max-width: 820px; +} + +/* EDUCATION */ +.education-section { + background: #e5e7eb; /* slightly lighter than experience */ + padding: 6rem 2rem; + border-top: 1px solid rgba(0,0,0,0.08); +} + +.education-title { + font-size: 2.2rem; + font-weight: 800; + color: #111; + margin-bottom: 2.5rem; + letter-spacing: -0.02em; +} + +/* Entry layout */ +.education-entry { + max-width: 700px; +} + +/* Smaller*/ +.edu-date { + font-size: 0.9rem; + color: #6b7280; + margin-bottom: 0.4rem; +} + +.edu-school { + font-size: 1.4rem; + font-weight: 700; + color: #111; + margin-bottom: 0.3rem; +} + +.edu-degree { + font-size: 1rem; + color: #4b5563; +} + +/* SKILLS / CERTS */ +.skills-section { + background: #05070b; + padding: 7rem 2rem; +} + +.skills-container { + max-width: 1250px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 4rem; + align-items: start; +} + +.skills-column h3 { + font-family: 'Cormorant Garamond', serif; + font-size: 2.5rem; + font-weight: 600; + color: #38d9e6; + margin-bottom: 2rem; + letter-spacing: -0.02em; +} + +.skills-column p { + font-size: 1.08rem; + line-height: 1.9; + color: #f3f4f6; + margin-bottom: 0.55rem; +} + + +.skills-column .cert-item { + margin-bottom: 0.85rem; +} + +/* RESPONSIVE */ +@media (max-width: 900px) { + .navbar-container, + .resume-hero, + .resume-section, + .skills-section { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .resume-email { + font-size: 1.35rem; + } + + .entry-title { + font-size: 1.6rem; + } + + .skills-container { + grid-template-columns: 1fr; + gap: 3rem; + } +} + +@media (max-width: 600px) { + .navbar-container { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + .nav-links { + gap: 1.2rem; + } + + .resume-hero { + padding-top: 5rem; + padding-bottom: 4rem; + } + + .resume-summary { + font-size: 1.05rem; + line-height: 1.8; + } + + .resume-email { + font-size: 1.1rem; + } + + .download-btn { + width: 100%; + text-align: center; + } + + .section-title { + margin-bottom: 2.5rem; + } + + .entry-title { + font-size: 1.35rem; + } + + .entry-subtitle, + .entry-text, + .skills-column p { + font-size: 1rem; + } + + .skills-column h3 { + font-size: 2rem; + } +} \ No newline at end of file diff --git a/src/derwinbell/resume.html b/src/derwinbell/resume.html new file mode 100644 index 0000000..9c77858 --- /dev/null +++ b/src/derwinbell/resume.html @@ -0,0 +1,157 @@ + + + + + + + + + + + + Resume | Derwin Bell + + + + + + +
+ + +
+
+

Derwin Bell

+ +

+ Systems-focused software engineer and backend developer with hands-on experience + in IT support, software development, and building practical technical solutions. + I focus on creating backend systems that are reliable, scalable, and solve + real-world problems. +

+ +
+

djbell261@gmail.com

+ Download PDF +
+
+
+ + +
+
+

Experience

+ + +
+ +

MySikaBox

+

Backend Engineer Extern

+ +

+ Worked on backend engineering tasks focused on building scalable systems, + API development, and improving application performance within a production-like environment. +

+ +

+ Gained experience with backend architecture, debugging, and integrating services + while collaborating in a fast-paced development workflow using modern engineering practices. +

+
+ + +
+ +

Delaware Technical Community College

+

IT Technician Intern

+ +

+ Built, repaired, and configured 40+ computers including operating system installs, + virtualization environments, and lab setups for student use. +

+ +

+ Supported 100+ students and faculty by troubleshooting hardware, software, + and networking issues, ensuring reliable classroom environments. +

+
+ + +
+ +

Delaware Technical Community College

+

Library Help Desk

+ +

+ Maintained and managed 100+ reporting records using SQL, ensuring data accuracy and reliability for library operations. + +

+ +

+ +Queried relational databases to generate reports, analyze system data, and support troubleshooting of digital resources. +

+
+ +
+
+ + +
+
+

Education

+ +
+

2023 – 2026

+

Delaware Technical Community College

+

Information Technology (Programming Focus)

+
+
+
+ + +
+
+ +
+

TOOLS

+

Git

+

GitHub

+

Postman

+

IntelliJ

+

VS Code

+
+ +
+

SKILLS

+

Backend Development

+

API Design

+

Problem Solving

+

Debugging

+

System Design Fundamentals

+
+ +
+

FRAMEWORK

+

Spring Boot

+

REST APIs

+

SQL / PostgreSQL

+

Linux Systems

+
+ +
+
+ +
+ + \ No newline at end of file diff --git a/src/derwinbell/script.js b/src/derwinbell/script.js new file mode 100644 index 0000000..73fd9e5 --- /dev/null +++ b/src/derwinbell/script.js @@ -0,0 +1,9 @@ +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 + "%"; +}); \ No newline at end of file diff --git a/src/derwinbell/styles.css b/src/derwinbell/styles.css new file mode 100644 index 0000000..d677f8d --- /dev/null +++ b/src/derwinbell/styles.css @@ -0,0 +1,352 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + background-color: #f6f4ef; + color: #1a1a1a; +} + +/* HEADER */ +.site-header { + position: sticky; + top: 0; + z-index: 1000; + + background: rgba(246, 244, 239, 0.95); + backdrop-filter: blur(10px); + + border-bottom: 1px solid rgba(0, 0, 0, 0.06); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); +} + +.site-header.scrolled { + border-bottom: 1px solid rgba(0, 0, 0, 0.12); +} + +.navbar-container { + max-width: 1250px; + margin: 0 auto; + padding: 1.5rem 4rem; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + text-decoration: none; + color: #111; + font-size: 1rem; + font-weight: 600; +} + +.nav-links { + list-style: none; + display: flex; + gap: 2.5rem; +} + +.nav-links a { + text-decoration: none; + color: #111; + font-size: 0.98rem; + font-weight: 500; + transition: opacity 0.2s ease; +} + +.nav-links a:hover { + opacity: 0.65; +} + +/* HERO */ +.hero-container { + min-height: 82vh; + display: flex; + align-items: center; + max-width: 1250px; + margin: 0 auto; + padding: 0 4rem; +} + +.hero-text { + max-width: 1050px; +} + +.eyebrow { + font-size: 1.05rem; + color: #111; + margin-bottom: 0.5rem; +} + +.role { + font-size: 1.1rem; + color: #111; + margin-bottom: 2.2rem; +} + +.hero-description { + font-size: clamp(2rem, 3.6vw, 3.9rem); + line-height: 1.22; + font-weight: 500; + letter-spacing: -0.02em; + color: #556070; + max-width: 1100px; +} + +/* MAIN CONTENT GRID */ +.content-grid { + max-width: 1250px; + margin: 0 auto; + padding: 5rem 4rem 6rem; + display: grid; + grid-template-columns: 1.15fr 1fr; + gap: 5rem; +} + +.right-column section { + margin-bottom: 3.5rem; +} + +/* INFO GRID ON RIGHT */ +.info-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + align-items: start; +} + +/* TYPOGRAPHY */ +h2 { + font-size: 1.8rem; + font-weight: 700; + color: #111; + margin-bottom: 1.5rem; +} + +p { + font-size: 1.02rem; + line-height: 1.9; + color: #556070; + max-width: 580px; + margin-bottom: 1.6rem; +} + +.about-container p, +.approach-container p { + max-width: 600px; +} + +/* ROLES */ +.roles-list { + list-style: none; +} + +.roles-list li { + font-size: 1.02rem; + line-height: 1.8; + color: #556070; + margin-bottom: 0.5rem; +} + +/* CONTACT */ +.contact-links a { + display: block; + text-decoration: none; + color: #111; + margin-bottom: 0.8rem; + font-size: 1rem; +} + +.contact-links a:hover { + text-decoration: underline; +} + +/* FOOTER */ +.site-footer { + border-top: 1px solid rgba(0, 0, 0, 0.08); + margin-top: 4rem; + padding: 3rem 0; + background: #0f1115; +} + +.footer-container { + max-width: 700px; + margin: 0 auto; + padding: 0 2rem; + + display: flex; + flex-direction: column; + align-items: center; + text-align: center; +} + +.footer-links { + font-size: 0.95rem; + font-weight: 500; + margin-bottom: 1.2rem; + color: #e5e7eb; + + display: flex; + gap: 0.5rem; + align-items: center; +} + +.footer-links a { + text-decoration: none; + color: #e5e7eb; + transition: opacity 0.2s ease; +} + +.footer-links a:hover { + opacity: 0.6; +} + +.footer-text { + font-size: 0.95rem; + color: #9ca3af; +} + +.footer-icon { + width: 16px; + height: 16px; + vertical-align: middle; + margin: 0 6px; + opacity: 0.9; + transition: transform 0.3s ease; +} + +.footer-icon:hover { + transform: scale(1.2) rotate(10deg); +} +/* SCROLL BAR */ +.scroll-progress { + position: fixed; + top: 0; + left: 0; + width: 0%; + height: 4px; + background: #111; + z-index: 2000; +} + +/* RESPONSIVE */ +@media (max-width: 1000px) { + .content-grid { + grid-template-columns: 1fr; + gap: 3rem; + } + + .info-grid { + grid-template-columns: 1fr; + gap: 2rem; + } + + .hero-container { + min-height: 70vh; + } + + .hero-description { + font-size: clamp(1.8rem, 6vw, 3rem); + } +} + +@media (max-width: 700px) { + .navbar-container, + .hero-container, + .content-grid { + padding-left: 1.5rem; + padding-right: 1.5rem; + } + + .navbar-container { + flex-direction: column; + align-items: flex-start; + gap: 1rem; + } + + .nav-links { + gap: 1.2rem; + } + + h2 { + font-size: 1.5rem; + } + + p, + .roles-list li, + .contact-links a { + font-size: 0.98rem; + } +} + +.hero-container { + min-height: 82vh; + display: flex; + align-items: center; + max-width: 1250px; + margin: 0 auto; + padding: 0 4rem; +} + +.hero-text { + max-width: 1050px; +} + +.greeting { + font-size: 1.05rem; + color: #111; + margin-bottom: 0.35rem; + animation: fadeUp 0.6s ease-out forwards; + animation-delay: 0.2s; + opacity: 0; +} + +.name { + font-size: clamp(2.2rem, 4vw, 4.2rem); + line-height: 1.05; + font-weight: 600; + color: #111; + margin-bottom: 0.7rem; + letter-spacing: -0.03em; + animation: fadeUp 0.7s ease-out forwards; + animation-delay: 0.8s; + opacity: 0; +} + +.role { + font-size: 1.15rem; + color: #374151; + margin-bottom: 2rem; + animation: fadeUp 0.7s ease-out forwards; + animation-delay: 1.5s; + opacity: 0; +} + +.hero-description { + font-size: clamp(1.2rem, 2vw, 1.7rem); + line-height: 1.7; + font-weight: 400; + color: #556070; + max-width: 860px; + animation: fadeUp 0.8s ease-out forwards; + animation-delay: 2.3s; + opacity: 0; +} + +@keyframes fadeUp { + from { + opacity: 0; + transform: translateY(22px); + } + to { + opacity: 1; + transform: translateY(0); + } +} \ No newline at end of file