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
+
+
+
+
+
+
+
+
+
+
+
+
+
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.
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+
+
+
+
+
+
+
+
\ 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 = `
+
+
+
+
${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.
+
+
+
+
+
+
+
+
+
+
Experience
+
+
+
+ 2026
+ 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.
+
+
+
+
+
+ 2024 – 2025
+ 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.
+
+
+
+
+
+ 2023 – 2024
+ 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