diff --git a/images/ChristopherBennettLinkedIn.png b/images/ChristopherBennettLinkedIn.png new file mode 100644 index 0000000..eb4bc98 Binary files /dev/null and b/images/ChristopherBennettLinkedIn.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..2157e50 --- /dev/null +++ b/index.html @@ -0,0 +1,344 @@ + + + + + + Christopher Bennett Resume + + + + + +
+
+

SYSTEM BOOT

+

0%

+ +
+
+
+ + + +

Initializing portfolio systems...

+
+
+ + +
+
+

SYSTEM STATUS

+

Initializing portfolio...

+

Loading projects, experience, and creative systems.

+
+
+ +
+
+ + + + + +
+
+
+
+ + + +
+ +
+
+

Software Developer • Game Developer • Creative Technologist

+ +

+ Building + interactive + systems + and polished + digital + experiences. +

+ +

+ Junior Software Developer with hands-on experience in software engineering, + IT systems, and game development, building reliable applications and creative solutions. +

+ +
+ View Projects + Download Resume +
+ +
+ + + Email + + + + + GitHub + + + + + LinkedIn + +
+
+ +
+
+ Christopher Bennett + +
+

Christopher Bennett

+

Software Developer

+
+ +
+ C# + Unity + ASP.NET + Java +
+
+
+
+
+
+ +
+
01
+

Objective

+

+ Junior Software Developer with hands-on experience + in software engineering, IT systems, and game development, + seeking full-time or contract opportunities to build reliable systems, + develop engaging applications, and continue growing as a technically + versatile engineer. +

+
+ +
+
02
+

Skills

+ +
+
Languages
+
Frameworks / Libraries
+
Databases
+
Tools / Platforms
+
Methodologies
+
Professional Skills
+
+ + +
+ +
+
03
+

Experience

+ +
+
+
+

Target

+

Closing Expert

+
+ Aug 2024 - Current +
+ +
    +
  • + Directed store closing procedures by ensuring + timely completion of nightly operations and + strict adherence to company standards while + providing exceptional customer service. +
    • +
+
+ +
+
+
+

University of Delaware

+

Software Engineer Researcher

+
+ Jan. 2022 - May 2024 +
+ +
    +
  • + Directed store closing procedures by ensuring + timely completion of nightly operations and + strict adherence to company standards while + providing exceptional customer service. +
    • +
+
+ +
+
+
+

University of Delaware

+

Teaching Assistant

+
+ Sep. 2021 - May 2024 +
+ +
    +
  • + Directed store closing procedures by ensuring + timely completion of nightly operations and + strict adherence to company standards while + providing exceptional customer service. +
    • +
+
+ +
+
+
+

Endevor LLC.

+

Software Engineer

+
+ Jun. 2023 - Sep. 2023 +
+ +
    +
  • + Directed store closing procedures by ensuring + timely completion of nightly operations and + strict adherence to company standards while + providing exceptional customer service. +
    • +
+
+
+ +
+
04
+

Projects

+ +
+
+
+

Assignment Timeline Maker

+

Neurodivergent-Friendly Timeline Generator

+
+ Research Project +
+ +
    +
  • + Created a research web application for professors to + convert documents into auto-generated timelines and + simplify dense text for neurodivergent students. +
    • +
+
+
+ +
+
05
+

Education

+ +
+
+
+

Code Differently

+

A.I. Powered Software-Engineering Program

+
+
+ +
    +
  • + Intensive, project-based training program + focused on AI-powered software engineering, agile + collaboration, and applying analytical problem-solving + to real-world challenges. +
    • +
+
+ +
+
+
+

University of Delaware

+

B.S. Computer Science

+
+
+ +
    +
  • Executive Member: Game Design & Development Club
    • +
  • Member: UDel Competitive Programming Club, UD Capture The Flag Team
    • +
  • Awards: Computer and Information Sciences Department Student Honorable Mention
    • +
  • + Coursework: Algorithms, Data Structures, + Artificial Intelligence, Machine Learning, Software Development, + Advanced Web Security, Parallel Computing, + Human Computer Interaction, Operating Systems, + Statistics, Calculus, Linear Algebra, + Educational Game Development +
    • +
+
+
+
+ + \ No newline at end of file diff --git a/resumes/ChrisBennettResume2026.pdf b/resumes/ChrisBennettResume2026.pdf new file mode 100644 index 0000000..73234cb Binary files /dev/null and b/resumes/ChrisBennettResume2026.pdf differ diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..1d68798 --- /dev/null +++ b/styles.css @@ -0,0 +1,780 @@ +:root { + --bg: #030303; + --bg-soft: #0b0b0f; + --panel: rgba(14, 14, 18, 0.78); + --panel-2: rgba(20, 20, 26, 0.9); + --line: rgba(255, 255, 255, 0.08); + --line-strong: rgba(255, 255, 255, 0.14); + --text: #f5f5f7; + --text-soft: #adadb8; + --accent: #8b5cf6; + --accent-2: #60a5fa; + --shadow: rgba(0, 0, 0, 0.45); +} + +* { + box-sizing: border-box; + background-color: var(--bg); +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + background: + radial-gradient(circle at top left, rgba(96, 165, 250, 0.08), transparent 25%), + radial-gradient(circle at top right, rgba(139, 92, 246, 0.08), transparent 20%), + linear-gradient(to bottom, #020202, #050507 45%, #020202 100%); + color: var(--text); + min-height: 100vh; + overflow-x: hidden; +} + +.bg-grid { + position: fixed; + inset: 0; + pointer-events: none; + z-index: 0; + background-image: + linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); + background-size: 64px 64px; + mask-image: radial-gradient(circle at center, black 35%, transparent 100%); +} + +.bg-glow { + position: fixed; + inset: 0; + pointer-events: none; + z-index: 0; + background: + radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.08), transparent 18%), + radial-gradient(circle at 50% 18%, rgba(96, 165, 250, 0.06), transparent 22%); + filter: blur(20px); +} + +.floating-shapes { + position: fixed; + inset: 0; + z-index: 0; + pointer-events: none; + overflow: hidden; +} + +.shape { + position: absolute; + display: block; + border: 1px solid rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.02); + box-shadow: 0 0 25px rgba(255, 255, 255, 0.03); + transform: rotate(18deg); +} + +.shape::before { + content: ""; + position: absolute; + inset: 22%; + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.shape-1 { + width: 140px; + height: 140px; + left: -30px; + top: 18%; + animation: floatOne 18s ease-in-out infinite; +} + +.shape-2 { + width: 60px; + height: 60px; + right: 9%; + top: 22%; + animation: floatTwo 16s ease-in-out infinite; +} + +.shape-3 { + width: 95px; + height: 95px; + left: 12%; + bottom: 10%; + animation: floatThree 20s ease-in-out infinite; +} + +.shape-4 { + width: 40px; + height: 40px; + right: 18%; + bottom: 18%; + animation: floatTwo 14s ease-in-out infinite; +} + +.shape-5 { + width: 22px; + height: 22px; + left: 28%; + top: 58%; + animation: floatOne 12s ease-in-out infinite; +} + +.shape-6 { + width: 18px; + height: 18px; + right: 30%; + top: 38%; + animation: floatThree 15s ease-in-out infinite; +} + +.shape-7 { + width: 70px; + height: 70px; + right: -10px; + top: 62%; + animation: floatTwo 17s ease-in-out infinite; +} + +.shape-8 { + width: 28px; + height: 28px; + left: 48%; + bottom: 8%; + animation: floatOne 13s ease-in-out infinite; +} + +@keyframes floatOne { + 0%, 100% { + transform: translateY(0) rotate(18deg); + opacity: 0.35; + } + 50% { + transform: translateY(-18px) rotate(28deg); + opacity: 0.65; + } +} + +@keyframes floatTwo { + 0%, 100% { + transform: translateY(0) translateX(0) rotate(-12deg); + opacity: 0.2; + } + 50% { + transform: translateY(12px) translateX(10px) rotate(-2deg); + opacity: 0.45; + } +} + +@keyframes floatThree { + 0%, 100% { + transform: translateY(0) rotate(35deg); + opacity: 0.18; + } + 50% { + transform: translateY(-12px) rotate(18deg); + opacity: 0.45; + } +} + +.top-nav { + position: sticky; + top: 0; + z-index: 20; + display: flex; + justify-content: space-between; + align-items: center; + gap: 20px; + padding: 20px 28px; + backdrop-filter: blur(10px); + background: rgba(3, 3, 3, 0.55); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} + +.nav-brand { + font-size: 1rem; + font-weight: 700; + letter-spacing: 0.02em; +} + +.nav-links { + display: flex; + gap: 28px; +} + +.nav-links a { + color: var(--text-soft); + text-decoration: none; + font-size: 0.95rem; + transition: color 0.2s ease; +} + +.nav-links a:hover { + color: var(--text); +} + +.nav-cta { + text-decoration: none; + color: #050505; + background: #ffffff; + padding: 12px 18px; + border-radius: 14px; + font-weight: 700; + transition: transform 0.2s ease; +} + +.nav-cta:hover { + transform: translateY(-2px); +} + +main { + position: relative; + z-index: 1; + max-width: 1200px; + margin: 0 auto; + padding: 32px 20px 80px; +} + +.hero { + margin-bottom: 28px; +} + +.hero-window { + position: relative; + background: rgba(8, 8, 10, 0.82); + border: 1px solid var(--line); + border-radius: 28px; + overflow: hidden; + box-shadow: 0 24px 70px var(--shadow); +} + +.window-bar { + display: flex; + gap: 8px; + padding: 18px 20px; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} + +.window-bar span { + width: 10px; + height: 10px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.12); +} + +.hero-content { + display: grid; + grid-template-columns: 1.2fr 0.8fr; + gap: 30px; + padding: 56px; + min-height: 620px; + background: + radial-gradient(circle at 20% 20%, rgba(255,255,255,0.04), transparent 20%), + linear-gradient(to right, rgba(255, 255, 255, 0.015), rgba(255,255,255,0.01)); +} + +.hero-left { + display: flex; + flex-direction: column; + justify-content: center; + max-width: 700px; +} + +.hero-kicker { + color: var(--text-soft); + font-size: 0.9rem; + text-transform: uppercase; + letter-spacing: 0.12em; + margin-bottom: 20px; +} + +.hero h1 { + margin: 0 0 22px; + font-size: clamp(3rem, 7vw, 6.5rem); + line-height: 0.95; + letter-spacing: -0.05em; + max-width: 820px; +} + +.hero-subtitle { + font-size: 1.15rem; + line-height: 1.7; + color: var(--text-soft); + max-width: 640px; + margin-bottom: 28px; +} + +.hero-actions { + display: flex; + gap: 14px; + flex-wrap: wrap; + margin-bottom: 24px; +} + +.primary-btn, +.secondary-btn { + text-decoration: none; + padding: 14px 20px; + border-radius: 14px; + font-weight: 700; + transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; +} + +.primary-btn { + background: linear-gradient(135deg, var(--accent), var(--accent-2)); + color: white; +} + +.secondary-btn { + background: rgba(255, 255, 255, 0.03); + color: var(--text); + border: 1px solid rgba(255, 255, 255, 0.08); +} + +.primary-btn:hover, +.secondary-btn:hover { + transform: translateY(-2px); +} + +.hero-links { + display: flex; + gap: 12px; + flex-wrap: wrap; +} + +.hero-link { + display: inline-flex; + align-items: center; + gap: 10px; + text-decoration: none; + color: var(--text); + padding: 12px 16px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.035); + border: 1px solid rgba(255, 255, 255, 0.07); + transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; +} + +.hero-link:hover { + transform: translateY(-2px); + border-color: rgba(255, 255, 255, 0.16); + background: rgba(255, 255, 255, 0.06); + color: var(--text); +} + +.hero-right { + display: flex; + align-items: center; + justify-content: center; +} + +.profile-panel { + width: 100%; + max-width: 360px; + padding: 28px; + border-radius: 24px; + background: linear-gradient(180deg, rgba(20, 20, 26, 0.95), rgba(12, 12, 16, 0.95)); + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: + inset 0 1px 0 rgba(255,255,255,0.04), + 0 18px 40px rgba(0,0,0,0.35); +} + +.profile-pic { + width: 100%; + aspect-ratio: 1 / 1; + object-fit: cover; + border-radius: 20px; + display: block; + margin-bottom: 18px; + filter: grayscale(10%); +} + +.profile-meta h2 { + margin: 0 0 6px; + font-size: 1.4rem; +} + +.profile-meta p { + margin: 0 0 18px; + color: var(--text-soft); +} + +.profile-tags { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.profile-tags span { + font-size: 0.85rem; + padding: 8px 12px; + border-radius: 999px; + background: rgba(255,255,255,0.04); + border: 1px solid rgba(255,255,255,0.07); + color: var(--text-soft); +} + +.content-card { + position: relative; + background: var(--panel); + border: 1px solid var(--line); + border-radius: 24px; + padding: 28px; + margin-bottom: 24px; + box-shadow: + inset 0 1px 0 rgba(255,255,255,0.03), + 0 16px 40px rgba(0, 0, 0, 0.28); + backdrop-filter: blur(10px); +} + +.section-label { + color: rgba(255,255,255,0.22); + font-size: 0.8rem; + letter-spacing: 0.18em; + margin-bottom: 10px; +} + +.content-card h3 { + margin: 0 0 18px; + font-size: 1.6rem; +} + +.content-card p, +.content-card li { + color: var(--text-soft); + line-height: 1.7; +} + +.skills-grid { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-bottom: 18px; +} + +.skill-pill { + padding: 10px 14px; + border-radius: 999px; + background: rgba(255,255,255,0.04); + border: 1px solid rgba(255,255,255,0.07); + color: var(--text); + font-size: 0.92rem; +} + +.entry-card, +.project-card { + background: rgba(255, 255, 255, 0.025); + border: 1px solid rgba(255, 255, 255, 0.07); + border-radius: 20px; + padding: 20px; + margin-bottom: 18px; + transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease; +} + +.entry-card:hover, +.project-card:hover { + transform: translateY(-4px); + border-color: rgba(255, 255, 255, 0.14); + background: rgba(255, 255, 255, 0.04); +} + +.entry-top, +.project-top { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 18px; + margin-bottom: 12px; +} + +.entry-title { + margin: 0 0 6px; + font-size: 1.15rem; + color: var(--text); +} + +.entry-role { + margin: 0; + color: var(--text-soft); +} + +.entry-date, +.project-badge { + white-space: nowrap; + font-size: 0.9rem; + color: var(--text-soft); + background: rgba(255,255,255,0.04); + border: 1px solid rgba(255,255,255,0.06); + padding: 8px 12px; + border-radius: 999px; +} + +.detail-list { + margin: 0; + padding-left: 20px; +} + +.detail-list li { + margin-bottom: 10px; +} + +@media (max-width: 980px) { + .hero-content { + grid-template-columns: 1fr; + padding: 36px 24px; + min-height: auto; + } + + .hero-right { + justify-content: flex-start; + } + + .profile-panel { + max-width: 100%; + } +} + +@media (max-width: 720px) { + .top-nav { + padding: 16px 14px; + flex-wrap: wrap; + } + + .nav-links { + width: 100%; + justify-content: center; + gap: 18px; + order: 3; + } + + .nav-cta { + padding: 10px 14px; + } + + main { + padding: 18px 14px 60px; + } + + .hero-content { + padding: 28px 18px; + } + + .hero h1 { + font-size: clamp(2.4rem, 11vw, 4rem); + } + + .hero-subtitle { + font-size: 1rem; + } + + .hero-actions, + .hero-links { + flex-direction: column; + align-items: stretch; + } + + .primary-btn, + .secondary-btn, + .hero-link { + text-align: center; + justify-content: center; + } + + .entry-top, + .project-top { + flex-direction: column; + } + + .bg-grid { + background-size: 42px 42px; + } +} + + +/* animations */ + +.hero-text { + font-size: clamp(3rem, 8vw, 6rem); + font-weight: 900; + line-height: 0.9; + letter-spacing: -0.03em; + margin: 0; +} + +.line { + display: block; + width: 0; + overflow: hidden; + white-space: nowrap; + animation: typing 0.6s steps(12, end) forwards; + animation-play-state: paused; +} + +.line:nth-child(1) { animation-delay: 0s; } +.line:nth-child(2) { animation-delay: 0.7s; } +.line:nth-child(3) { animation-delay: 1.4s; } +.line:nth-child(4) { animation-delay: 2.1s; } +.line:nth-child(5) { animation-delay: 2.8s; } +.line:nth-child(6) { animation-delay: 3.5s; } + +@keyframes typing { + from { width: 0; } + to { width: 100%; } +} + +.line:nth-child(1) { + border-right: 3px solid white; +} + +.line:nth-child(2) { + border-right: 3px solid white; +} + +.line:nth-child(3) { + border-right: 3px solid white; +} + +.line:nth-child(4) { + border-right: 3px solid white; +} + +.line:nth-child(5) { + border-right: 3px solid white; +} + +.line:nth-child(6) { + border-right: 3px solid white; +} + +.line:nth-child(7) { + border-right: 3px solid white; +} + + + +/* system startup */ +.startup-popup { + position: fixed; + top: 30px; + right: 30px; + z-index: 9999; + + background: rgba(10, 10, 10, 0.88); + border: 1px solid rgba(255, 255, 255, 0.12); + color: #f5f5f5; + backdrop-filter: blur(10px); + + padding: 1rem 1.25rem; + border-radius: 16px; + min-width: 320px; + max-width: 420px; + + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); + + opacity: 0; + transform: translateY(-20px) scale(0.98); + animation: popupIn 0.6s ease forwards, popupOut 0.6s ease forwards 2.8s; +} + +.popup-inner h2 { + margin: 0.2rem 0 0.35rem; + font-size: 1.2rem; + font-weight: 700; +} + +.popup-label { + margin: 0; + font-size: 0.72rem; + letter-spacing: 0.18em; + text-transform: uppercase; + color: #9ca3af; +} + +.popup-subtext { + margin: 0; + font-size: 0.92rem; + color: #d1d5db; + line-height: 1.4; +} + +@keyframes popupIn { + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@keyframes popupOut { + to { + opacity: 0; + transform: translateY(-12px) scale(0.98); + visibility: hidden; + } +} + + +/* opening cinematic */ + +#loader { + position: fixed; + inset: 0; + background: #050505; + z-index: 9999; + + display: flex; + align-items: center; + justify-content: center; + + color: #e5e5e5; + font-family: monospace; + + transition: opacity 0.6s ease, visibility 0.6s ease; +} + +.loader-content { + text-align: center; + width: 320px; +} + +.loader-label { + font-size: 0.7rem; + letter-spacing: 0.2em; + color: #888; + margin-bottom: 1rem; +} + +#loader-percent { + font-size: 3rem; + font-weight: 900; + margin: 0; +} + +.loader-bar { + width: 100%; + height: 6px; + background: rgba(255,255,255,0.1); + border-radius: 10px; + margin: 1rem 0; + overflow: hidden; +} + +.loader-fill { + background: #00ff99; + box-shadow: 0 0 10px #00ff99; +} + +.loader-subtext { + font-size: 0.85rem; + color: #aaa; +} + +/* hidden state */ +#loader.hidden { + opacity: 0; + visibility: hidden; +} + +.page-loaded .line { + animation-play-state: running; +} \ No newline at end of file