updated resume, added resume data api folder for easy updates

src/components/Resume.tsx

@@ -1,57 +1,8 @@
 import React from "react";
-
-const contactInfo = {
-  location: "Amarillo, TX",
-  phone: "806.654.2813",
-  email: "jholt1008@gmail.com",
-  linkedin: "https://www.linkedin.com/in/jody-holt-9b19b0256",
-};
-
-const summary = `Detail-oriented software developer skilled in building full-stack applications using React, TypeScript, Node/Express, SQL, and Docker. Experienced in designing responsive user interfaces, structuring maintainable front-end architectures, and developing reliable, modular APIs. Strong communicator with proven ability to solve problems quickly, learn new technologies efficiently, and deliver clean, scalable code across multiple projects.`;
-
-const skills = [
-  {
-    category: "Front-End Development",
-    items: ["React", "TypeScript", "Responsive UI/UX", "Component Architecture", "Entity Framework Core", "TailwindCSS"],
-  },
-  {
-    category: "Back-End & APIs",
-    items: ["Node.js", "Express.js", "RESTful API", "Authentication Flows", "Data Validation", "C#", ".NET Core"],
-  },
-  {
-    category: "Database & Data Modeling",
-    items: ["SQL", "PostgreSQL", "CRUD Operations", "Query Optimization", "Object-Oriented Analysis & Design"],
-  },
-  {
-    category: "DevOps & Tools",
-    items: ["Docker Compose", "Git/GitHub", "Software Migration", "Multi-Container Setups"],
-  },
-  {
-    category: "Software Engineering",
-    items: ["Clear Communication", "Modular Code Design", "Collaboration", "Rapid Learning", "Problem-Solving"],
-  },
-];
-
-const accomplishments = [
-  "Meta's Front-End Web Development and Data Engineering certificate programs",
-  "Built responsive React applications featuring structured component trees & dynamic routing",
-  "Designed SQL databases with optimal CRUD operations & well-structured queries",
-  "Containerized full-stack apps with Docker Compose for optimal scaling, resolved network, environment, version control, and dependency issues",
-  "Created reusable UI components and interactive features that improved consistency and flow, user-friendly animations and enticing UX",
-];
-
-const workHistory = [
-  { title: "Training Specialist", company: "Subway", location: "Canyon, TX", dates: "2024–Present" },
-  { title: "Head Lifeguard", company: "Johnson Park Youth Center", location: "Borger, TX", dates: "Seasonal 2022–2025" },
-  { title: "Sacker/Grocery Stocker", company: "United Supermarkets", location: "Canyon, TX", dates: "2023–2024" },
-];
-
-const education = [
-  { degree: "M.S. in Computer Information Systems and Business Analytics", school: "West Texas A&M University", date: "May 2027" },
-  { degree: "B.S. in Computer Information Systems", school: "West Texas A&M University", date: "May 2026" },
-];
+import { resumeData } from "../data/resume";
 
 export function Resume() {
+  const { contactInfo, summary, skills, certifications, projects, workHistory, education } = resumeData;
   return (
     <div className="mx-auto max-w-5xl px-4 py-16 md:py-24">
       {/* Header */}
@@ -67,6 +18,22 @@ export function Resume() {
           <a href={`mailto:${contactInfo.email}`} className="hover:text-primary anim-base">
             {contactInfo.email}
           </a>
+          {contactInfo.website && (
+            <>
+              <span className="hidden sm:inline text-primary">•</span>
+              <a href={contactInfo.website} className="hover:text-primary anim-base">
+                {new URL(contactInfo.website).hostname}
+              </a>
+            </>
+          )}
+          {contactInfo.linkedin && (
+            <>
+              <span className="hidden sm:inline text-primary">•</span>
+              <a href={contactInfo.linkedin} className="hover:text-primary anim-base">
+                LinkedIn
+              </a>
+            </>
+          )}
         </div>
       </div>
 
@@ -101,18 +68,47 @@ export function Resume() {
         </div>
       </section>
 
-      {/* Accomplishments */}
-      <section className="mb-10 anim-fade-in">
-        <SectionTitle>Professional Accomplishments</SectionTitle>
-        <ul className="space-y-3">
-          {accomplishments.map((item, i) => (
-            <li key={i} className="flex gap-3 text-text/85">
-              <span className="mt-2 h-2 w-2 shrink-0 rounded-full bg-primary" />
-              <span>{item}</span>
-            </li>
-          ))}
-        </ul>
-      </section>
+      {/* Certifications */}
+      {certifications && certifications.length > 0 && (
+        <section className="mb-10 anim-fade-in">
+          <SectionTitle>Certifications</SectionTitle>
+          <ul className="space-y-3">
+            {certifications.map((item, i) => (
+              <li key={i} className="flex gap-3 text-text/85">
+                <span className="mt-2 h-2 w-2 shrink-0 rounded-full bg-primary" />
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {/* Projects */}
+      {projects && projects.length > 0 && (
+        <section className="mb-10 anim-fade-in">
+          <SectionTitle>Projects</SectionTitle>
+          <div className="space-y-4">
+            {projects.map((project) => (
+              <div
+                key={project.name}
+                className="rounded-lg border border-secondary bg-secondary/20 p-4 anim-base hover:border-primary/50"
+              >
+                <h4 className="font-semibold text-text">
+                  {project.name} <span className="text-text/70">| {project.stack}</span>
+                </h4>
+                <ul className="mt-2 space-y-2">
+                  {project.bullets.map((b, i) => (
+                    <li key={i} className="flex gap-3 text-text/85">
+                      <span className="mt-2 h-2 w-2 shrink-0 rounded-full bg-primary" />
+                      <span>{b}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
 
       {/* Work History */}
       <section className="mb-10 anim-fade-in">
@@ -121,15 +117,27 @@ export function Resume() {
           {workHistory.map((job, i) => (
             <div
               key={i}
-              className="flex flex-col sm:flex-row sm:items-center sm:justify-between rounded-lg border border-secondary bg-secondary/20 p-4 anim-base hover:border-primary/50"
+              className="flex flex-col rounded-lg border border-secondary bg-secondary/20 p-4 anim-base hover:border-primary/50"
             >
-              <div>
-                <h4 className="font-semibold text-text">{job.title}</h4>
-                <p className="text-text/70 text-sm">
-                  {job.company} — {job.location}
-                </p>
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+                <div>
+                  <h4 className="font-semibold text-text">{job.title}</h4>
+                  <p className="text-text/70 text-sm">
+                    {job.company} — {job.location}
+                  </p>
+                </div>
+                <span className="mt-2 sm:mt-0 text-sm text-primary font-medium">{job.dates}</span>
               </div>
-              <span className="mt-2 sm:mt-0 text-sm text-primary font-medium">{job.dates}</span>
+              {job.bullets && job.bullets.length > 0 && (
+                <ul className="mt-2 space-y-2">
+                  {job.bullets.map((b, idx) => (
+                    <li key={idx} className="flex gap-3 text-text/85">
+                      <span className="mt-2 h-2 w-2 shrink-0 rounded-full bg-primary" />
+                      <span>{b}</span>
+                    </li>
+                  ))}
+                </ul>
+              )}
             </div>
           ))}
         </div>
@@ -146,7 +154,10 @@ export function Resume() {
             >
               <div>
                 <h4 className="font-semibold text-text">{edu.degree}</h4>
-                <p className="text-text/70 text-sm">{edu.school}</p>
+                <p className="text-text/70 text-sm">
+                  {edu.school}
+                  {edu.details ? ` | ${edu.details}` : ""}
+                </p>
               </div>
               <span className="mt-2 sm:mt-0 text-sm text-primary font-medium">{edu.date}</span>
             </div>