diff --git a/app/mission-control/resume/page.tsx b/app/mission-control/resume/page.tsx index 7e6e9a9..a340e21 100644 --- a/app/mission-control/resume/page.tsx +++ b/app/mission-control/resume/page.tsx @@ -1,171 +1,221 @@ "use client"; -import { useState } from "react"; +import { useState, useEffect } from "react"; import BackToMC from "@/components/mission-control/BackToMC"; -interface Experience { - id: string; - title: string; - company: string; - period: string; - location: string; - description: string; -} - -interface Education { - id: string; - degree: string; - school: string; - year: string; - location: string; -} - -interface Skill { - id: string; +interface ResumeData { name: string; + phone: string; + email: string; + linkedin: string; + location: string; + about: string; + education: { degree: string; school: string; year: string }[]; + skills: string[]; + languages: string[]; + experience: { + title: string; + company: string; + period: string; + location: string; + description: string[]; + }[]; + photoUrl: string; } -export default function ResumeBuilderPage() { - const [activeTab, setActiveTab] = useState<"edit" | "preview">("edit"); - - // Personal Info - const [personalInfo, setPersonalInfo] = useState({ - name: "HAITHAM KHALIFA", - title: "Senior Full-Stack Developer & Entrepreneur", - email: "Haitham@Khalifa.se", - phone: "+34 614 821 331", - location: "Málaga, Spain", - linkedin: "linkedin.com/in/haithamekhalifa/", - website: "haithamkhalifa.com", - summary: "A results-oriented leader with 15+ years of experience in driving e-commerce growth, optimizing online platforms, and implementing successful digital marketing strategies. Proven ability to increase online sales, improve customer engagement, and manage cross-functional teams to achieve business objectives." - }); - - // Experience - const [experiences, setExperiences] = useState([ +const initialResume: ResumeData = { + name: "HAITHAM KHALIFA", + phone: "+34 614 821 331", + email: "Haitham@Khalifa.se", + linkedin: "linkedin.com/in/haithamekhalifa/", + location: "Málaga, Spain", + about: "A results-oriented leader with 15+ years of experience in driving e-commerce growth, optimizing online platforms, and implementing successful digital marketing strategies. Proven ability to increase online sales, improve customer engagement, and manage cross-functional teams to achieve business objectives.", + education: [ + { degree: "Intensive Software Development Academy", school: "Lund University", year: "Sweden, Lund - 2019" }, + { degree: "Bachelor of Computer Science", school: "Modern Academy Maadi", year: "Egypt, Cairo - 2001 - 2006" } + ], + skills: ["E-commerce Strategy", "Digital Marketing", "SEO/SEM", "Product Ownership", "Team Leadership"], + languages: ["Arabic", "English", "Swedish"], + experience: [ { - id: "1", title: "Product Owner & IT Consultant", company: "Protein.com", period: "2020-2025", location: "Sweden, Malmö", - description: "• Managed product backlog to drive e-commerce sales.\n• Developed/executed SEO strategies (+20% organic traffic).\n• Implemented/managed MarTech for e-commerce performance.\n• Drove Agile practices.\n• Utilized data analytics to optimize e-commerce growth.\n• Managed product data feeds." - } - ]); - - // Education - const [education, setEducation] = useState([ - { - id: "1", - degree: "Intensive Software Development Academy", - school: "Lund University", - year: "2019", - location: "Sweden, Lund" + description: [ + "Managed product backlog to drive e-commerce sales.", + "Developed/executed SEO strategies (+20% organic traffic).", + "Implemented/managed MarTech for e-commerce performance.", + "Drove Agile practices.", + "Utilized data analytics to optimize e-commerce growth.", + "Managed product data feeds." + ] }, { - id: "2", - degree: "Bachelor of Computer Science", - school: "Modern Academy Maadi", - year: "2001 - 2006", - location: "Egypt, Cairo" + title: "Founder & CEO", + company: "HostPioneers.com", + period: "2012-2021", + location: "Denmark, Copenhagen", + description: [ + "Led e-commerce platform development/optimization.", + "Implemented MarTech to drive engagement/revenue.", + "Developed/executed e-commerce marketing strategies.", + "Managed all aspects of the online business.", + "Executed e-commerce marketing (SEO, email, social).", + "Oversaw customer journey." + ] + }, + { + title: "Social Media Manager (Volunteer)", + company: "Danish Red Cross - Newtimes.dk", + period: "2013-2016", + location: "Denmark", + description: [ + "EU-funded project to raise awareness of asylum seekers and policymakers.", + "Developed and managed the website, enhancing SEO and user engagement.", + "Wrote articles and managed social media to increase brand visibility." + ] + }, + { + title: "C.I.O Deputy", + company: "Cayenne Technologies", + period: "2007-2012", + location: "Egypt, Cairo", + description: [ + "Web Business Manager & Deputy Chief Information Officer.", + "Managed projects in the web technology department.", + "Developed and presented web projects to clients and stakeholders.", + "Installed and supported web servers and applications.", + "Improved website traffic and SEO scores for clients." + ] } - ]); + ], + photoUrl: "" +}; - // Skills - const [skills, setSkills] = useState([ - { id: "1", name: "E-commerce Strategy" }, - { id: "2", name: "Digital Marketing" }, - { id: "3", name: "SEO/SEM" }, - { id: "4", name: "Product Ownership" }, - { id: "5", name: "Team Leadership" } - ]); +export default function ResumeBuilderPage() { + const [activeTab, setActiveTab] = useState<"edit" | "preview">("edit"); + const [versions, setVersions] = useState(["Main Resume"]); + const [currentVersion, setCurrentVersion] = useState("Main Resume"); + const [resume, setResume] = useState(initialResume); + const [photoPreview, setPhotoPreview] = useState(""); - // Languages - const [languages, setLanguages] = useState([ - { id: "1", name: "Arabic" }, - { id: "2", name: "English" }, - { id: "3", name: "Swedish" } - ]); + // Load from localStorage on mount + useEffect(() => { + const saved = localStorage.getItem('haitham_resumes_v2'); + if (saved) { + try { + const data = JSON.parse(saved); + const keys = Object.keys(data); + if (keys.length > 0) { + setVersions(keys); + setCurrentVersion(keys[0]); + setResume(data[keys[0]]); + if (data[keys[0]].photoUrl) { + setPhotoPreview(data[keys[0]].photoUrl); + } + } + } catch (e) { + console.error("Failed to load saved resumes", e); + } + } + }, []); - // Versions - const [versions, setVersions] = useState(["Default"]); - const [currentVersion, setCurrentVersion] = useState("Default"); - - // CRUD operations - const addExperience = () => { - setExperiences([...experiences, { - id: Date.now().toString(), - title: "New Position", - company: "Company", - period: "2023-Present", - location: "City, Country", - description: "• Key responsibility.\n• Achievement." - }]); + const saveToDisk = () => { + const saved = localStorage.getItem('haitham_resumes_v2'); + let allResumes: Record = {}; + if (saved) { + try { + allResumes = JSON.parse(saved); + } catch (e) {} + } + allResumes[currentVersion] = { ...resume, photoUrl: photoPreview }; + localStorage.setItem('haitham_resumes_v2', JSON.stringify(allResumes)); + localStorage.setItem('haitham_current_profile_v2', currentVersion); }; - const removeExperience = (id: string) => { - setExperiences(experiences.filter(e => e.id !== id)); + const loadProfile = (name: string) => { + const saved = localStorage.getItem('haitham_resumes_v2'); + if (saved) { + try { + const data = JSON.parse(saved); + if (data[name]) { + setResume(data[name]); + setPhotoPreview(data[name].photoUrl || ""); + setCurrentVersion(name); + } + } catch (e) {} + } }; - const updateExperience = (id: string, field: keyof Experience, value: string) => { - setExperiences(experiences.map(e => e.id === id ? { ...e, [field]: value } : e)); + const handlePhotoUpload = (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (file) { + const reader = new FileReader(); + reader.onload = (event) => { + const url = event.target?.result as string; + setPhotoPreview(url); + setResume({ ...resume, photoUrl: url }); + }; + reader.readAsDataURL(file); + } }; - const addEducation = () => { - setEducation([...education, { - id: Date.now().toString(), - degree: "New Degree", - school: "University", - year: "2020 - 2024", - location: "City, Country" - }]); - }; - - const removeEducation = (id: string) => { - setEducation(education.filter(e => e.id !== id)); - }; - - const updateEducation = (id: string, field: keyof Education, value: string) => { - setEducation(education.map(e => e.id === id ? { ...e, [field]: value } : e)); - }; - - const addSkill = () => { - setSkills([...skills, { id: Date.now().toString(), name: "New Skill" }]); - }; - - const removeSkill = (id: string) => { - setSkills(skills.filter(s => s.id !== id)); - }; - - const updateSkill = (id: string, name: string) => { - setSkills(skills.map(s => s.id === id ? { ...s, name } : s)); - }; - - const addLanguage = () => { - setLanguages([...languages, { id: Date.now().toString(), name: "New Language" }]); - }; - - const removeLanguage = (id: string) => { - setLanguages(languages.filter(l => l.id !== id)); - }; - - const updateLanguage = (id: string, name: string) => { - setLanguages(languages.map(l => l.id === id ? { ...l, name } : l)); - }; - - const saveVersion = () => { - const name = prompt("Enter version name:", `Resume - ${currentVersion}`); + const createNewProfile = () => { + const name = prompt("Name this version (e.g., Geely IT Manager):"); if (name && !versions.includes(name)) { + const newResume = { ...resume, photoUrl: photoPreview }; + const saved = localStorage.getItem('haitham_resumes_v2'); + let allResumes: Record = {}; + if (saved) { + try { + allResumes = JSON.parse(saved); + } catch (e) {} + } + allResumes[name] = newResume; + localStorage.setItem('haitham_resumes_v2', JSON.stringify(allResumes)); setVersions([...versions, name]); setCurrentVersion(name); + setResume(newResume); + } else if (name && versions.includes(name)) { + alert("This name already exists."); } }; - const loadVersion = (version: string) => { - setCurrentVersion(version); + const deleteProfile = () => { + if (versions.length <= 1) return alert("You need at least one profile."); + if (confirm(`Delete "${currentVersion}"?`)) { + const saved = localStorage.getItem('haitham_resumes_v2'); + let allResumes: Record = {}; + if (saved) { + try { + allResumes = JSON.parse(saved); + } catch (e) {} + } + delete allResumes[currentVersion]; + localStorage.setItem('haitham_resumes_v2', JSON.stringify(allResumes)); + const remaining = Object.keys(allResumes); + if (remaining.length > 0) { + setVersions(remaining); + loadProfile(remaining[0]); + } + } }; - const handlePrint = () => { - window.print(); + const showStatus = (msg: string) => { + alert(msg); + }; + + const updateExperience = (index: number, field: keyof typeof resume.experience[0], value: string) => { + const newExp = [...resume.experience]; + newExp[index] = { ...newExp[index], [field]: value }; + setResume({ ...resume, experience: newExp }); + }; + + const updateEducation = (index: number, field: string, value: string) => { + const newEdu = [...resume.education]; + newEdu[index] = { ...newEdu[index], [field]: value }; + setResume({ ...resume, education: newEdu }); }; return ( @@ -176,50 +226,52 @@ export default function ResumeBuilderPage() {

Haitham's Resume Manager

-
- - -
-
-
-
+
+ - + +
+ {/* Tabs */} +
+ + +
+ {activeTab === "edit" ? (
{/* Personal Info */} @@ -230,17 +282,17 @@ export default function ResumeBuilderPage() { setPersonalInfo({...personalInfo, name: e.target.value})} + value={resume.name} + onChange={(e) => setResume({...resume, name: e.target.value})} className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white" />
- + setPersonalInfo({...personalInfo, title: e.target.value})} + value={resume.phone} + onChange={(e) => setResume({...resume, phone: e.target.value})} className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white" />
@@ -248,26 +300,8 @@ export default function ResumeBuilderPage() { setPersonalInfo({...personalInfo, email: e.target.value})} - className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white" - /> - -
- - setPersonalInfo({...personalInfo, phone: e.target.value})} - className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white" - /> -
-
- - setPersonalInfo({...personalInfo, location: e.target.value})} + value={resume.email} + onChange={(e) => setResume({...resume, email: e.target.value})} className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white" />
@@ -275,44 +309,74 @@ export default function ResumeBuilderPage() { setPersonalInfo({...personalInfo, linkedin: e.target.value})} + value={resume.linkedin} + onChange={(e) => setResume({...resume, linkedin: e.target.value})} + className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white" + /> + +
+ + setResume({...resume, location: e.target.value})} + className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white" + /> +
+
+ +