haitham/hostpioneers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add all demos (ristorante 6 templates), CRM, diagrams, resumes, batch CSVs

Browse Source
This commit is contained in:
Horus AI
2026-04-24 12:58:02 +02:00
parent 51d7df0f26
commit 9406bdc06b
19 changed files with 7092 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Resume.html
+466
View File
@@ -0,0 +1,466 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Haitham's Resume Manager</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
:root {
--sidebar-gray: #f3f3f3;
--accent-dark: #1a1a1a;
--accent-blue: #2563eb;
}
body {
font-family: 'Roboto', sans-serif;
background-color: #e5e7eb;
-webkit-print-color-adjust: exact;
}
/* Resume Styling */
.resume-page {
width: 850px;
min-height: 1100px;
background: white;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
margin: 2rem auto;
display: flex;
}
.sidebar {
width: 280px;
background-color: var(--sidebar-gray);
padding: 2.5rem 1.5rem;
}
.main-content {
flex: 1;
padding: 3.5rem 3rem;
background: white;
}
.circle-frame {
width: 176px;
height: 176px;
border-radius: 9999px;
border: 10px solid #e2e2e2;
overflow: hidden;
margin: 0 auto 2rem;
background: #d1d1d1;
position: relative;
group: hover;
}
.circle-frame img {
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-edit-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
cursor: pointer;
color: white;
font-size: 0.8rem;
font-weight: bold;
}
.circle-frame:hover .photo-edit-overlay {
opacity: 1;
}
.section-header {
font-size: 1.1rem;
font-weight: 700;
color: var(--accent-dark);
border-bottom: 1px solid #ccc;
padding-bottom: 4px;
margin-bottom: 12px;
text-transform: capitalize;
}
.main-header {
font-size: 1.6rem;
font-weight: 800;
letter-spacing: 0.15em;
color: var(--accent-dark);
border-bottom: 2px solid var(--accent-dark);
padding-bottom: 8px;
margin-bottom: 24px;
text-transform: uppercase;
}
[contenteditable="true"] {
outline: none;
border: 1px dashed transparent;
transition: border 0.2s;
}
[contenteditable="true"]:hover {
border: 1px dashed #3b82f6;
background-color: rgba(59, 130, 246, 0.05);
}
[contenteditable="true"]:focus {
background-color: white;
border: 1px solid #3b82f6;
}
.experience-dot {
position: absolute;
left: -9px;
top: 6px;
width: 16px;
height: 16px;
background-color: #333;
border: 3px solid white;
border-radius: 9999px;
z-index: 10;
}
.experience-dot-sub {
background-color: #999;
}
/* Toolbar Styling */
.toolbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: #1f2937;
color: white;
display: flex;
align-items: center;
padding: 0 2rem;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
@media print {
.no-print, .toolbar, .photo-edit-overlay { display: none !important; }
body { background: white; padding: 0; margin: 0; }
.resume-page { margin: 0; box-shadow: none; width: 100%; }
[contenteditable="true"]:hover { border-color: transparent; background: transparent; }
}
</style>
</head>
<body class="pt-20 pb-10">
<!-- Toolbar -->
<div class="toolbar flex justify-between no-print">
<div class="flex items-center gap-4">
<h1 class="font-bold text-lg text-blue-400">Haitham's Resume Manager</h1>
<select id="resumeSelect" class="bg-gray-700 text-white px-3 py-1 rounded border border-gray-600 outline-none">
<!-- Profiles will load here -->
</select>
</div>
<div class="flex gap-2">
<button onclick="createNewProfile()" class="bg-blue-600 hover:bg-blue-700 px-4 py-1 rounded text-sm font-medium transition">New Version</button>
<button onclick="saveCurrentProfile()" class="bg-green-600 hover:bg-green-700 px-4 py-1 rounded text-sm font-medium transition">Save Changes</button>
<button onclick="window.print()" class="bg-gray-600 hover:bg-gray-700 px-4 py-1 rounded text-sm font-medium transition">Print to PDF</button>
<button onclick="deleteProfile()" class="bg-red-600 hover:bg-red-700 px-4 py-1 rounded text-sm font-medium transition">Delete</button>
</div>
</div>
<!-- Resume Container -->
<div id="resumeRoot" class="resume-page">
<!-- Sidebar -->
<div class="sidebar">
<div class="circle-frame" onclick="document.getElementById('photoInput').click()">
<img id="userPhoto" src="Resume.jpg" alt="Haitham Khalifa" onerror="this.src='https://via.placeholder.com/180?text=Photo'">
<div class="photo-edit-overlay no-print">EDIT PHOTO</div>
<input type="file" id="photoInput" class="hidden" accept="image/*" onchange="handlePhotoUpload(this)">
</div>
<h1 id="userName" contenteditable="true" class="text-2xl font-black text-center text-gray-900 mb-8 tracking-tighter uppercase leading-none">HAITHAM KHALIFA</h1>
<!-- Contact -->
<div class="space-y-3 text-[11px] text-gray-700 mb-10">
<div class="flex items-center gap-3">
<span class="w-5 h-5 flex items-center justify-center bg-gray-800 text-white rounded-full text-[10px]">📞</span>
<span contenteditable="true" id="userPhone" class="font-medium">+34 614 821 331</span>
</div>
<div class="flex items-center gap-3">
<span class="w-5 h-5 flex items-center justify-center bg-gray-800 text-white rounded-full text-[10px]">✉️</span>
<span contenteditable="true" id="userEmail" class="font-medium">Haitham@Khalifa.se</span>
</div>
<div class="flex items-center gap-3">
<span class="w-5 h-5 flex items-center justify-center bg-gray-800 text-white rounded-full text-[10px] font-bold">in</span>
<span contenteditable="true" id="userLinkedin" class="font-medium">linkedin.com/in/haithamekhalifa/</span>
</div>
<div class="flex items-center gap-3">
<span class="w-5 h-5 flex items-center justify-center bg-gray-800 text-white rounded-full text-[10px]">📍</span>
<span contenteditable="true" id="userLocation" class="font-medium">Málaga, Spain</span>
</div>
</div>
<div class="mb-10">
<h2 class="section-header">About Me</h2>
<div id="aboutMe" contenteditable="true" class="text-[10px] leading-relaxed text-gray-600 font-medium text-justify">
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.
</div>
</div>
<div class="mb-10">
<h2 class="section-header">Education</h2>
<div id="educationList" contenteditable="true" class="space-y-4">
<div>
<p class="text-[11px] font-bold text-gray-800 leading-tight">Intensive Software Development Academy</p>
<p class="text-[10px] text-gray-600">Lund University</p>
<p class="text-[9px] text-gray-400 font-bold">Sweden, Lund - 2019</p>
</div>
<div>
<p class="text-[11px] font-bold text-gray-800 leading-tight">Bachelor of Computer Science</p>
<p class="text-[10px] text-gray-600">Modern Academy Maadi</p>
<p class="text-[9px] text-gray-400 font-bold">Egypt, Cairo 2001 - 2006</p>
</div>
</div>
</div>
<div class="mb-10">
<h2 class="section-header">Skills</h2>
<div id="skillsList" contenteditable="true" class="text-[11px] text-gray-700 space-y-2 font-medium">
• E-commerce Strategy<br>
• Digital Marketing<br>
• SEO/SEM<br>
• Product Ownership<br>
• Team Leadership
</div>
</div>
<div>
<h2 class="section-header">Language</h2>
<div id="languageList" contenteditable="true" class="text-[11px] text-gray-700 space-y-1 font-medium">
• Arabic<br>
• English<br>
• Swedish
</div>
</div>
</div>
<!-- Main Experience -->
<div class="main-content">
<h2 class="main-header">Experience</h2>
<div id="experienceContainer" contenteditable="true" class="space-y-10">
<!-- Protein.com -->
<div class="relative pl-8 border-l-2 border-gray-200 pb-2">
<div class="experience-dot"></div>
<div class="flex justify-between items-baseline mb-1">
<h3 class="text-lg font-bold text-gray-800 leading-none">Product Owner & IT Consultant</h3>
<span class="text-xs font-bold text-gray-400">2020-2025</span>
</div>
<p class="text-sm font-bold text-blue-600 mb-3">Protein.com | Sweden, Malmö</p>
<div class="text-[11px] text-gray-600 space-y-1.5 leading-snug">
• Managed product backlog to drive e-commerce sales.<br>
• Developed/executed SEO strategies (+20% organic traffic).<br>
• Implemented/managed MarTech for e-commerce performance.<br>
• Drove Agile practices.<br>
• Utilized data analytics to optimize e-commerce growth.<br>
• Managed product data feeds.
</div>
</div>
<!-- HostPioneers -->
<div class="relative pl-8 border-l-2 border-gray-200 pb-2">
<div class="experience-dot experience-dot-sub"></div>
<div class="flex justify-between items-baseline mb-1">
<h3 class="text-lg font-bold text-gray-800 leading-none">Founder & CEO</h3>
<span class="text-xs font-bold text-gray-400">2012-2021</span>
</div>
<p class="text-sm font-bold text-blue-600 mb-3">HostPioneers.com | Denmark, Copenhagen</p>
<div class="text-[11px] text-gray-600 space-y-1.5 leading-snug">
• Led e-commerce platform development/optimization.<br>
• Implemented MarTech to drive engagement/revenue.<br>
• Developed/executed e-commerce marketing strategies.<br>
• Managed all aspects of the online business.<br>
• Executed e-commerce marketing (SEO, email, social).<br>
• Oversaw customer journey.
</div>
</div>
<!-- Red Cross -->
<div class="relative pl-8 border-l-2 border-gray-200 pb-2">
<div class="experience-dot experience-dot-sub"></div>
<div class="flex justify-between items-baseline mb-1">
<h3 class="text-lg font-bold text-gray-800 leading-none">Social Media Manager (Volunteer)</h3>
<span class="text-xs font-bold text-gray-400">2013-2016</span>
</div>
<p class="text-sm font-bold text-blue-600 mb-3">Danish Red Cross - Newtimes.dk</p>
<div class="text-[11px] text-gray-600 space-y-1.5 leading-snug">
• EU-funded project to raise awareness of asylum seekers and policymakers.<br>
• Developed and managed the website, enhancing SEO and user engagement.<br>
• Wrote articles and managed social media to increase brand visibility.
</div>
</div>
<!-- Cayenne -->
<div class="relative pl-8 border-l-2 border-gray-200 pb-2">
<div class="experience-dot experience-dot-sub"></div>
<div class="flex justify-between items-baseline mb-1">
<h3 class="text-lg font-bold text-gray-800 leading-none">C.I.O Deputy</h3>
<span class="text-xs font-bold text-gray-400">2007-2012</span>
</div>
<p class="text-sm font-bold text-blue-600 mb-3">Cayenne Technologies | Egypt, Cairo</p>
<div class="text-[11px] text-gray-600 space-y-1.5 leading-snug">
• Web Business Manager & Deputy Chief Information Officer.<br>
• Managed projects in the web technology department.<br>
• Developed and presented web projects to clients and stakeholders.<br>
• Installed and supported web servers and applications.<br>
• Improved website traffic and SEO scores for clients.
</div>
</div>
</div>
</div>
</div>
<script>
// 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: "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: document.getElementById('educationList').innerHTML,
skills: document.getElementById('skillsList').innerHTML,
language: document.getElementById('languageList').innerHTML,
experience: document.getElementById('experienceContainer').innerHTML
};
function init() {
if (Object.keys(resumes).length === 0) {
resumes['Main Resume'] = { ...initialContent };
saveToDisk();
}
updateSelect();
loadProfile(currentProfileName);
}
function 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;
// Auto-save photo to current profile
saveCurrentProfile();
};
reader.readAsDataURL(file);
}
}
function updateSelect() {
const select = document.getElementById('resumeSelect');
select.innerHTML = '';
Object.keys(resumes).forEach(name => {
const opt = document.createElement('option');
opt.value = name;
opt.textContent = name;
if (name === currentProfileName) opt.selected = true;
select.appendChild(opt);
});
}
function loadProfile(name) {
const p = resumes[name] || resumes[Object.keys(resumes)[0]];
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 || initialContent.language;
document.getElementById('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
};
saveToDisk();
showStatus('Changes Saved');
}
function createNewProfile() {
const name = prompt("Name this version (e.g., Geely IT Manager):");
if (name && !resumes[name]) {
resumes[name] = { ...resumes[currentProfileName] };
currentProfileName = name;
saveToDisk();
updateSelect();
loadProfile(name);
} else if (resumes[name]) {
alert("This name already exists.");
}
}
function 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];
saveToDisk();
updateSelect();
loadProfile(currentProfileName);
}
}
function saveToDisk() {
localStorage.setItem('haitham_resumes_v2', JSON.stringify(resumes));
}
function showStatus(msg) {
const btn = document.querySelector('button[onclick="saveCurrentProfile()"]');
const original = btn.textContent;
btn.textContent = msg;
btn.style.backgroundColor = '#059669';
setTimeout(() => {
btn.textContent = original;
btn.style.backgroundColor = '';
}, 2000);
}
document.getElementById('resumeSelect').addEventListener('change', (e) => {
loadProfile(e.target.value);
});
init();
</script>
</body>
</html>