diff --git a/app/mission-control/resume/page.tsx b/app/mission-control/resume/page.tsx index a340e21..c354592 100644 --- a/app/mission-control/resume/page.tsx +++ b/app/mission-control/resume/page.tsx @@ -1,716 +1,483 @@ "use client"; -import { useState, useEffect } from "react"; +import { useEffect, useState } from "react"; import BackToMC from "@/components/mission-control/BackToMC"; -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; -} - -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: [ - { - title: "Product Owner & IT Consultant", - company: "Protein.com", - period: "2020-2025", - location: "Sweden, Malmö", - 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." - ] - }, - { - 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: "" -}; - 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(""); + const [isClient, setIsClient] = useState(false); - // 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); - } - } + setIsClient(true); }, []); - 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 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 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 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 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 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 }); - }; + if (!isClient) { + return ( +
+ +
+

Loading Resume Builder...

+
+
+ ); + } return ( -
+
+ + {/* Toolbar */}
-

Haitham's Resume Manager

-
- - - - + + + +
- {/* Tabs */} -
- - -
+ {/* Resume Container */} +
+ {/* Sidebar */} +
+
document.getElementById('photoInput')?.click()}> + Haitham Khalifa +
EDIT PHOTO
+ +
- {activeTab === "edit" ? ( -
- {/* Personal Info */} -
-

👤 Personal Information

-
+

HAITHAM KHALIFA

+ + {/* Contact */} +
+
+ 📞 + +34 614 821 331 +
+
+ ✉️ + Haitham@Khalifa.se +
+
+ in + linkedin.com/in/haithamekhalifa/ +
+
+ 📍 + Málaga, Spain +
+
+ +
+

About Me

+
+ 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

+
- - setResume({...resume, name: e.target.value})} - className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white" - /> +

Intensive Software Development Academy

+

Lund University

+

Sweden, Lund - 2019

- - setResume({...resume, phone: e.target.value})} - className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white" - /> -
-
- - setResume({...resume, email: e.target.value})} - className="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white" - /> -
-
- - 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" - /> -
-
- -