code-differently · jkbarclay261 · Apr 2, 2026
diff --git a/JKB-VirtualResume/images/James.jpg b/JKB-VirtualResume/images/James.jpg
diff --git a/JKB-VirtualResume/images/Screenshot 2026-04-02 at 2.46.23 PM.png b/JKB-VirtualResume/images/Screenshot 2026-04-02 at 2.46.23 PM.png
diff --git a/JKB-VirtualResume/images/Screenshot 2026-04-02 at 3.01.33 PM.png b/JKB-VirtualResume/images/Screenshot 2026-04-02 at 3.01.33 PM.png
diff --git a/JKB-VirtualResume/index.html b/JKB-VirtualResume/index.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>James Barclay | Portfolio</title>
+
+  <link rel="stylesheet" href="style.css" />
+
+  <style>
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+
+    body {
+      background: #0f172a;
+      color: #e2e8f0;
+      line-height: 1.6;
+    }
+
+    a {
+      text-decoration: none;
+      color: inherit;
+    }
+
+    nav {
+      position: fixed;
+      top: 0;
+      width: 100%;
+      background: rgba(15, 23, 42, 0.9);
+      backdrop-filter: blur(10px);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 15px 40px;
+      z-index: 1000;
+      border-bottom: 1px solid rgba(255,255,255,0.1);
+    }
+
+    nav h2 {
+      color: #38bdf8;
+      font-size: 18px;
+    }
+
+    nav ul {
+      display: flex;
+      gap: 20px;
+      list-style: none;
+    }
+
+    nav ul li a {
+      color: #e2e8f0;
+      transition: 0.3s;
+      font-weight: 500;
+    }
+
+    nav ul li a:hover {
+      color: #38bdf8;
+    }
+
+    .hero {
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      padding: 0 20px;
+      background: linear-gradient(135deg, #0f172a, #1e293b);
+    }
+
+    .hero img {
+      width: 160px;
+      height: 160px;
+      border-radius: 50%;
+      border: 4px solid #38bdf8;
+      margin-bottom: 20px;
+      object-fit: cover;
+    }
+
+    .hero h1 {
+      font-size: 2.5rem;
+      color: #38bdf8;
+    }
+
+    .hero p {
+      max-width: 600px;
+      margin-top: 10px;
+      color: #cbd5e1;
+    }
+
+    .btn {
+      margin-top: 20px;
+      padding: 10px 20px;
+      background: #38bdf8;
+      color: #0f172a;
+      border-radius: 8px;
+      font-weight: bold;
+      transition: 0.3s;
+    }
+
+    .btn:hover {
+      background: #0ea5e9;
+    }
+
+
+    section {
+      padding: 80px 20px;
+      max-width: 1000px;
+      margin: auto;
+    }
+
+    h2.section-title {
+      font-size: 2rem;
+      margin-bottom: 20px;
+      color: #38bdf8;
+      border-left: 5px solid #38bdf8;
+      padding-left: 10px;
+    }
+
+    .card {
+      background: #1e293b;
+      padding: 20px;
+      border-radius: 12px;
+      margin-bottom: 15px;
+      box-shadow: 0 8px 20px rgba(0,0,0,0.3);
+      transition: 0.3s;
+    }
+
+    .card:hover {
+      transform: translateY(-5px);
+    }
+
+    .skills {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .skill {
+      background: #38bdf8;
+      color: #0f172a;
+      padding: 8px 12px;
+      border-radius: 20px;
+      font-size: 14px;
+      font-weight: bold;
+    }
+
+    footer {
+      text-align: center;
+      padding: 30px;
+      border-top: 1px solid rgba(255,255,255,0.1);
+      color: #94a3b8;
+    }
+  </style>
+</head>
+<body>
+
+
+  <nav>
+    <h2>James Barclay</h2>
+    <ul>
+      <li><a href="#about">About</a></li>
+      <li><a href="#skills">Skills</a></li>
+      <li><a href="#projects">Projects</a></li>
+      <li><a href="#experience">Experience</a></li>
+      <li><a href="#contact">Contact</a></li>
+    </ul>
+  </nav>
+
+
+  <div class="hero">
+    <img src="images/James.jpg" alt="James Barclay" />
+    <h1>Hi, I'm James</h1>
+    <p>AI-focused developer & technologist passionate about building modern, scalable, and intelligent systems.</p>
+    <a class="btn" href="#projects">View My Work</a>
+  </div>
+
+  <section id="about">
+    <h2 class="section-title">About Me</h2>
+    <div class="card">
+      Brings 10+ years of professional experience in operations, workflow optimization, and stakeholder collaboration. Known for precision, structured problem solving, and translating complex requirements into actionable solutions. Eager to contribute technical skills and continue growing within a collaborative, solution-driven team.
+
+    </div>
+  </section>
+
+  <section id="skills">
+    <h2 class="section-title">Skills</h2>
+    <div class="card skills">
+      <div class="skill">Java</div>
+      <div class="skill">JavaScript</div>
+      <div class="skill">React</div>
+      <div class="skill">HTML</div>
+      <div class="skill">CSS</div>
+      <div class="skill">Git</div>
+      <div class="skill">GitHub</div>
+      <div class="skill">Problem Solving</div>
+      <div class="skill">AI Development</div>
+    </div>
+  </section>
+
+  <section id="projects">
+    <h2 class="section-title">Projects</h2>
+    <div class="card">
+      <h3>E-Commerce Financial Dashboard</h3>
+      <p>Full-stack React + Node.js system for tracking revenue, inventory, and analytics.</p>
+    </div>
+  </section>
+
+  <section id="experience">
+    <h2 class="section-title">Experience</h2>
+
+    <div class="card">
+      <h3>Project Manager – WakeFern</h3>
+      <p>Led operational workflows, improved processes, and managed inventory systems.</p>
+    </div>
+
+    <div class="card">
+      <h3>Detailer – Newcastle Autospa</h3>
+      <p>Managed high-volume customer service operations and digital engagement.</p>
+    </div>
+  </section>
+
+  <section id="contact">
+    <h2 class="section-title">Contact</h2>
+    <div class="card">
+      <p>Email: jkbarclay261@gmail.com</p>
+      <p>LinkedIn: https://bit.ly/3ZUnGuc</p>
+      <p>GitHub: https://bit.ly/4rtlztk</p>
+    </div>
+  </section>
+
+  <footer>
+    © 2026 James Barclay | Built with HTML & CSS
+  </footer>
+
+</body>
+</html>
diff --git a/JKB-VirtualResume/styles.css b/JKB-VirtualResume/styles.css
@@ -0,0 +1,147 @@
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+  background: #0f172a;
+  color: #e2e8f0;
+  line-height: 1.6;
+}
+
+nav {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  background: rgba(15, 23, 42, 0.9);
+  backdrop-filter: blur(10px);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 40px;
+  z-index: 1000;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+}
+
+nav h2 {
+  color: #38bdf8;
+  font-size: 18px;
+}
+
+nav ul {
+  display: flex;
+  gap: 20px;
+  list-style: none;
+}
+
+nav ul li a {
+  color: #e2e8f0;
+  font-weight: 500;
+  transition: 0.3s;
+}
+
+nav ul li a:hover {
+  color: #38bdf8;
+}
+
+.hero {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 0 20px;
+  background: linear-gradient(135deg, #0f172a, #1e293b);
+}
+
+.hero img {
+  width: 160px;
+  height: 160px;
+  border-radius: 50%;
+  border: 4px solid #38bdf8;
+  margin-bottom: 20px;
+  object-fit: cover;
+}
+
+.hero h1 {
+  font-size: 2.5rem;
+  color: #38bdf8;
+}
+
+.hero p {
+  max-width: 600px;
+  margin-top: 10px;
+  color: #cbd5e1;
+}
+
+.btn {
+  display: inline-block;
+  margin-top: 20px;
+  padding: 10px 20px;
+  background: #38bdf8;
+  color: #0f172a;
+  border-radius: 8px;
+  font-weight: bold;
+  transition: 0.3s;
+}
+
+.btn:hover {
+  background: #0ea5e9;
+}
+
+section {
+  padding: 80px 20px;
+  max-width: 1000px;
+  margin: auto;
+}
+
+.section-title {
+  font-size: 2rem;
+  margin-bottom: 20px;
+  color: #38bdf8;
+  border-left: 5px solid #38bdf8;
+  padding-left: 10px;
+}
+
+.card {
+  background: #1e293b;
+  padding: 20px;
+  border-radius: 12px;
+  margin-bottom: 15px;
+  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
+  transition: 0.3s;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+}
+
+.skills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.skill {
+  background: #38bdf8;
+  color: #0f172a;
+  padding: 8px 12px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.card p {
+  margin-bottom: 8px;
+}
+
+footer {
+  text-align: center;
+  padding: 30px;
+  border-top: 1px solid rgba(255,255,255,0.1);
+  color: #94a3b8;
+}