fix(resume): simplified React code

2026-03-24 00:36:39 +01:00
parent 21c4f321f3
commit 1052dac49c
1 changed files with 81 additions and 107 deletions
@@ -1,31 +1,23 @@
 "use client";

-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import BackToMC from "@/components/mission-control/BackToMC";

 export default function ResumeBuilderPage() {
-  const [isClient, setIsClient] = useState(false);
-
  useEffect(() => {
-    setIsClient(true);
+    // Load the resume script after component mounts
+    const script = document.createElement("script");
+    script.src = "/resume-builder.js";
+    script.async = true;
+    document.body.appendChild(script);
  }, []);

-  if (!isClient) {
-    return (
-      <div className="min-h-screen bg-slate-950 text-white">
-        <BackToMC />
-        <div className="p-8 text-center">
-          <p className="text-slate-400">Loading Resume Builder...</p>
-        </div>
-      </div>
-    );
-  }
-
  return (
-    <div className="min-h-screen bg-slate-200 text-white">
+    <div className="min-h-screen bg-slate-200">
      <BackToMC />
      
-      <style jsx global>{`
+      {/* Include the styles inline */}
+      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
        
        :root {
@@ -34,14 +26,6 @@ export default function ResumeBuilderPage() {
          --accent-blue: #2563eb;
        }

-        body { 
-          font-family: 'Roboto', sans-serif;
-          background-color: #e5e7eb;
-          -webkit-print-color-adjust: exact;
-          margin: 0;
-          padding: 0;
-        }
-
        .resume-page {
          width: 850px;
          min-height: 1100px;
@@ -171,17 +155,17 @@ export default function ResumeBuilderPage() {
      `}</style>

      {/* Toolbar */}
-      <div className="sticky top-0 z-50 bg-slate-800 border-b border-slate-700 px-6 py-3 flex items-center justify-between">
+      <div className="sticky top-0 z-50 bg-gray-800 px-6 py-3 flex items-center justify-between">
        <div className="flex items-center gap-4">
-          <h1 className="font-bold text-lg text-blue-400">Haitham's Resume Manager</h1>
+          <h1 className="font-bold text-lg text-blue-400">Haitham&apos;s Resume Manager</h1>
          <select id="resumeSelect" className="bg-gray-700 text-white px-3 py-1 rounded border border-gray-600 outline-none">
          </select>
        </div>
        <div className="flex gap-2">
-          <button onClick={createNewProfile} className="bg-blue-600 hover:bg-blue-700 px-4 py-1 rounded text-sm font-medium transition">New Version</button>
-          <button onClick={saveCurrentProfile} className="bg-green-600 hover:bg-green-700 px-4 py-1 rounded text-sm font-medium transition">Save Changes</button>
-          <button onClick={() => window.print()} className="bg-gray-600 hover:bg-gray-700 px-4 py-1 rounded text-sm font-medium transition">Print to PDF</button>
-          <button onClick={deleteProfile} className="bg-red-600 hover:bg-red-700 px-4 py-1 rounded text-sm font-medium transition">Delete</button>
+          <button id="btnNew" className="bg-blue-600 hover:bg-blue-700 px-4 py-1 rounded text-sm font-medium transition">New Version</button>
+          <button id="btnSave" className="bg-green-600 hover:bg-green-700 px-4 py-1 rounded text-sm font-medium transition">Save Changes</button>
+          <button id="btnPrint" className="bg-gray-600 hover:bg-gray-700 px-4 py-1 rounded text-sm font-medium transition">Print to PDF</button>
+          <button id="btnDelete" className="bg-red-600 hover:bg-red-700 px-4 py-1 rounded text-sm font-medium transition">Delete</button>
        </div>
      </div>

@@ -189,10 +173,10 @@ export default function ResumeBuilderPage() {
      <div className="resume-page mt-20">
        {/* Sidebar */}
        <div className="sidebar">
-          <div className="circle-frame" onClick={() => document.getElementById('photoInput')?.click()}>
+          <div className="circle-frame" id="photoFrame">
            <img id="userPhoto" src="Resume.jpg" alt="Haitham Khalifa" />
            <div className="photo-edit-overlay no-print">EDIT PHOTO</div>
-            <input type="file" id="photoInput" className="hidden" accept="image/*" onChange={handlePhotoUpload} />
+            <input type="file" id="photoInput" className="hidden" accept="image/*" />
          </div>

          <h1 id="userName" contentEditable suppressContentEditableWarning className="text-2xl font-black text-center text-gray-900 mb-8 tracking-tighter uppercase leading-none">HAITHAM KHALIFA</h1>
@@ -337,49 +321,53 @@ export default function ResumeBuilderPage() {
        </div>
      </div>

+      {/* JavaScript */}
      <script dangerouslySetInnerHTML={{ __html: `
-        // Data Structure
        let resumes = JSON.parse(localStorage.getItem('haitham_resumes_v2') || '{}');
        let currentProfileName = localStorage.getItem('haitham_current_profile_v2') || 'Main Resume';

-        const initialContent = {
-          name: "HAITHAM KHALIFA",
-          photo: "Resume.jpg",
-          phone: "+34 614 821 331",
-          email: "Haitham@Khalifa.se",
-          linkedin: "linkedin.com/in/haithamekhalifa/",
-          location: "Málaga, Spain",
-          about: document.getElementById('aboutMe')?.innerText || '',
-          education: document.getElementById('educationList')?.innerHTML || '',
-          skills: document.getElementById('skillsList')?.innerHTML || '',
-          language: document.getElementById('languageList')?.innerHTML || '',
-          experience: document.getElementById('experienceContainer')?.innerHTML || ''
-        };
+        const getEl = (id) => document.getElementById(id);

-        function init() {
+        const getInitialContent = () => ({
+          name: getEl('userName')?.innerText || '',
+          photo: getEl('userPhoto')?.src || '',
+          phone: getEl('userPhone')?.innerText || '',
+          email: getEl('userEmail')?.innerText || '',
+          linkedin: getEl('userLinkedin')?.innerText || '',
+          location: getEl('userLocation')?.innerText || '',
+          about: getEl('aboutMe')?.innerText || '',
+          education: getEl('educationList')?.innerHTML || '',
+          skills: getEl('skillsList')?.innerHTML || '',
+          language: getEl('languageList')?.innerHTML || '',
+          experience: getEl('experienceContainer')?.innerHTML || ''
+        });
+
+        const init = () => {
          if (Object.keys(resumes).length === 0) {
-            resumes['Main Resume'] = { ...initialContent };
+            resumes['Main Resume'] = getInitialContent();
            saveToDisk();
          }
          updateSelect();
          loadProfile(currentProfileName);
-        }
+        };

-        function handlePhotoUpload(input) {
+        const handlePhotoUpload = (input) => {
          const file = input.files[0];
          if (file) {
            const reader = new FileReader();
-            reader.onload = function(e) {
-              const base64Image = e.target.result;
-              document.getElementById('userPhoto').src = base64Image;
+            reader.onload = (e) => {
+              getEl('userPhoto').src = e.target.result;
              saveCurrentProfile();
            };
            reader.readAsDataURL(file);
          }
-        }
+        };

-        function updateSelect() {
-          const select = document.getElementById('resumeSelect');
+        getEl('photoInput')?.addEventListener('change', (e) => handlePhotoUpload(e.target));
+        getEl('photoFrame')?.addEventListener('click', () => getEl('photoInput')?.click());
+
+        const updateSelect = () => {
+          const select = getEl('resumeSelect');
          if (!select) return;
          select.innerHTML = '';
          Object.keys(resumes).forEach(name => {
@@ -389,47 +377,35 @@ export default function ResumeBuilderPage() {
            if (name === currentProfileName) opt.selected = true;
            select.appendChild(opt);
          });
-        }
+        };

-        function loadProfile(name) {
+        const loadProfile = (name) => {
          const p = resumes[name] || resumes[Object.keys(resumes)[0]];
          if (!p) return;
          currentProfileName = name;
          localStorage.setItem('haitham_current_profile_v2', name);

-          document.getElementById('userName').innerText = p.name || '';
-          document.getElementById('userPhoto').src = p.photo || "Resume.jpg";
-          document.getElementById('userPhone').innerText = p.phone || '';
-          document.getElementById('userEmail').innerText = p.email || '';
-          document.getElementById('userLinkedin').innerText = p.linkedin || '';
-          document.getElementById('userLocation').innerText = p.location || '';
-          document.getElementById('aboutMe').innerText = p.about || '';
-          document.getElementById('educationList').innerHTML = p.education || '';
-          document.getElementById('skillsList').innerHTML = p.skills || '';
-          document.getElementById('languageList').innerHTML = p.language || '';
-          document.getElementById('experienceContainer').innerHTML = p.experience || '';
-        }
+          getEl('userName').innerText = p.name || '';
+          getEl('userPhoto').src = p.photo || 'Resume.jpg';
+          getEl('userPhone').innerText = p.phone || '';
+          getEl('userEmail').innerText = p.email || '';
+          getEl('userLinkedin').innerText = p.linkedin || '';
+          getEl('userLocation').innerText = p.location || '';
+          getEl('aboutMe').innerText = p.about || '';
+          getEl('educationList').innerHTML = p.education || '';
+          getEl('skillsList').innerHTML = p.skills || '';
+          getEl('languageList').innerHTML = p.language || '';
+          getEl('experienceContainer').innerHTML = p.experience || '';
+        };

-        function saveCurrentProfile() {
-          resumes[currentProfileName] = {
-            name: document.getElementById('userName')?.innerText || '',
-            photo: document.getElementById('userPhoto')?.src || '',
-            phone: document.getElementById('userPhone')?.innerText || '',
-            email: document.getElementById('userEmail')?.innerText || '',
-            linkedin: document.getElementById('userLinkedin')?.innerText || '',
-            location: document.getElementById('userLocation')?.innerText || '',
-            about: document.getElementById('aboutMe')?.innerText || '',
-            education: document.getElementById('educationList')?.innerHTML || '',
-            skills: document.getElementById('skillsList')?.innerHTML || '',
-            language: document.getElementById('languageList')?.innerHTML || '',
-            experience: document.getElementById('experienceContainer')?.innerHTML || ''
-          };
+        const saveCurrentProfile = () => {
+          resumes[currentProfileName] = getInitialContent();
          saveToDisk();
          showStatus('Changes Saved');
-        }
+        };

-        function createNewProfile() {
-          const name = prompt("Name this version (e.g., Geely IT Manager):");
+        const createNewProfile = () => {
+          const name = prompt('Name this version (e.g., Geely IT Manager):');
          if (name && !resumes[name]) {
            resumes[name] = { ...resumes[currentProfileName] };
            currentProfileName = name;
@@ -437,12 +413,12 @@ export default function ResumeBuilderPage() {
            updateSelect();
            loadProfile(name);
          } else if (resumes[name]) {
-            alert("This name already exists.");
+            alert('This name already exists.');
          }
-        }
+        };

-        function deleteProfile() {
-          if (Object.keys(resumes).length <= 1) return alert("You need at least one profile.");
+        const deleteProfile = () => {
+          if (Object.keys(resumes).length <= 1) return alert('You need at least one profile.');
          if (confirm('Delete "' + currentProfileName + '"?')) {
            delete resumes[currentProfileName];
            currentProfileName = Object.keys(resumes)[0];
@@ -450,14 +426,14 @@ export default function ResumeBuilderPage() {
            updateSelect();
            loadProfile(currentProfileName);
          }
-        }
+        };

-        function saveToDisk() {
+        const saveToDisk = () => {
          localStorage.setItem('haitham_resumes_v2', JSON.stringify(resumes));
-        }
+        };

-        function showStatus(msg) {
-          const btn = document.querySelector('button[onclick="saveCurrentProfile()"]');
+        const showStatus = (msg) => {
+          const btn = getEl('btnSave');
          if (!btn) return;
          const original = btn.textContent;
          btn.textContent = msg;
@@ -466,17 +442,15 @@ export default function ResumeBuilderPage() {
            btn.textContent = original;
            btn.style.backgroundColor = '';
          }, 2000);
-        }
+        };

-        document.addEventListener('DOMContentLoaded', function() {
-          const select = document.getElementById('resumeSelect');
-          if (select) {
-            select.addEventListener('change', (e) => {
-              loadProfile(e.target.value);
-            });
-          }
-          init();
-        });
+        getEl('btnNew')?.addEventListener('click', createNewProfile);
+        getEl('btnSave')?.addEventListener('click', saveCurrentProfile);
+        getEl('btnDelete')?.addEventListener('click', deleteProfile);
+        getEl('btnPrint')?.addEventListener('click', () => window.print());
+        getEl('resumeSelect')?.addEventListener('change', (e) => loadProfile(e.target.value));
+
+        document.addEventListener('DOMContentLoaded', init);
      `}} />
    </div>
  );