Hugging Face's logo

Spaces:
flen-crypto
/
jojo
Running

App Files Community
jojo / index.html
flen-crypto's picture
flen-crypto
https://www.linkedin.com/in/joanna-fortuna is linked in profile to be put in the code in place of the linked in profile placeholders
12f1fc3 verified
raw
history blame contribute delete
46.8 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joanna Fortuna | Hospitality Operations Executive</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Merriweather:wght@400;700&display=swap');
:root {
--primary-blue: #1a56db;
--accent-gold: #e3a008;
--dark-charcoal: #2d3748;
--light-tonal: #f7fafc;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #ffffff;
color: var(--dark-charcoal);
scroll-behavior: smooth;
overflow-x: hidden;
}
.professional-font {
font-family: 'Merriweather', serif;
}
.gradient-text {
background: linear-gradient(90deg, var(--primary-blue) 0%, var(--accent-gold) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.card-elevated {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.card-elevated:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.timeline-item:before {
content: '';
position: absolute;
left: 10px;
top: 10px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--primary-blue);
border: 2px solid white;
}
.skill-bar {
width: 100%;
background-color: #e2e8f0;
border-radius: 10px;
overflow: hidden;
height: 8px;
}
.skill-progress {
height: 100%;
border-radius: 10px;
background: linear-gradient(90deg, var(--primary-blue) 0%, var(--accent-gold) 100%);
}
.section-title::after {
content: '';
display: block;
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--primary-blue) 0%, var(--accent-gold) 100%);
margin: 12px 0 30px;
}
.hover-grow:hover {
transform: scale(1.03);
transition: all 0.3s ease;
}
.contact-badge {
display: inline-flex;
align-items: center;
background-color: #ebf5ff;
color: var(--primary-blue);
border-radius: 20px;
padding: 8px 16px;
font-size: 0.9rem;
margin: 0 8px 12px 0;
}
@media (max-width: 768px) {
.section-title::after {
margin: 8px auto 24px;
}
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="fixed w-full z-50 bg-white bg-opacity-95 backdrop-blur-sm shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex items-center">
<span class="text-2xl font-bold professional-font">Joanna Fortuna</span>
<span class="ml-2 text-xs bg-gray-200 rounded-full px-2 py-1">Executive Profile</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-8">
<a href="#home" class="text-gray-700 hover:text-primary-blue px-3 py-2 rounded-md text-sm font-medium transition-colors">Home</a>
<a href="#profile" class="text-gray-700 hover:text-primary-blue px-3 py-2 rounded-md text-sm font-medium transition-colors">Summary</a>
<a href="#experience" class="text-gray-700 hover:text-primary-blue px-3 py-2 rounded-md text-sm font-medium transition-colors">Experience</a>
<a href="#competencies" class="text-gray-700 hover:text-primary-blue px-3 py-2 rounded-md text-sm font-medium transition-colors">Competencies</a>
<a href="#contact" class="text-gray-700 hover:text-primary-blue px-3 py-2 rounded-md text-sm font-medium transition-colors">Contact</a>
</div>
</div>
<div class="md:hidden">
<button class="mobile-menu-button p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none transition-colors">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="mobile-menu hidden md:hidden bg-white shadow-md">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 flex flex-col">
<a href="#home" class="text-gray-700 hover:bg-gray-100 block px-3 py-2 rounded-md font-medium transition-colors">Home</a>
<a href="#profile" class="text-gray-700 hover:bg-gray-100 block px-3 py-2 rounded-md font-medium transition-colors">Summary</a>
<a href="#experience" class="text-gray-700 hover:bg-gray-100 block px-3 py-2 rounded-md font-medium transition-colors">Experience</a>
<a href="#competencies" class="text-gray-700 hover:bg-gray-100 block px-3 py-2 rounded-md font-medium transition-colors">Competencies</a>
<a href="#contact" class="text-gray-700 hover:bg-gray-100 block px-3 py-2 rounded-md font-medium transition-colors">Contact</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="pt-32 pb-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 items-center">
<div class="md:col-span-2">
<div class="mb-6">
<span class="inline-block bg-blue-50 text-primary-blue rounded-full px-4 py-2 text-sm font-medium mb-4">
SENIOR OPERATIONS MANAGEMENT
</span>
<h1 class="text-4xl md:text-5xl font-bold professional-font mb-4">
Joanna Fortuna
</h1>
<h2 class="text-2xl text-gray-600 professional-font">
Hospitality & Events Operations Executive
</h2>
<div class="my-6">
<p class="text-gray-700 text-lg max-w-2xl leading-relaxed">
Proven leader in hospitality operations with over 12 years' experience elevating guest experiences,
optimizing operational systems, and driving financial performance in premium venues and events.
</p>
</div>
</div>
<div class="flex flex-wrap">
<span class="contact-badge">
<i class="fas fa-map-marker-alt mr-2"></i> London, UK
</span>
<span class="contact-badge">
<i class="fas fa-phone mr-2"></i> [Phone Number]
</span>
<span class="contact-badge">
<i class="fas fa-envelope mr-2"></i> [Email Address]
</span>
<span class="contact-badge">
<i class="fab fa-linkedin-in mr-2"></i> [LinkedIn Profile URL]
</span>
</div>
<div class="mt-8 flex flex-wrap gap-4">
<a href="#contact" class="px-6 py-3 bg-gradient-to-r from-primary-blue to-blue-700 text-white rounded-lg font-medium hover:opacity-90 transition-all duration-300 flex items-center gap-3">
<span>Get In Touch</span>
<i class="far fa-paper-plane"></i>
</a>
<a href="#experience" class="px-6 py-3 border border-primary-blue text-primary-blue rounded-lg font-medium hover:bg-blue-50 transition-all duration-300 flex items-center gap-3">
<span>View Experience</span>
<i class="fas fa-briefcase"></i>
</a>
</div>
</div>
<div class="flex justify-center md:justify-end mt-10 md:mt-0 md:border-l md:border-gray-200 md:pl-12">
<div class="relative">
<div class="absolute -inset-4 bg-gradient-to-tr from-primary-blue to-accent-gold rounded-2xl opacity-20 blur-lg transform rotate-6"></div>
<img
src="https://media.licdn.com/dms/image/v2/D4D03AQHcJIoNCWNWeg/profile-displayphoto-shrink_800_800/B4DZYWOWtKG4As-/0/1744129586766?e=1760572800&v=beta&t=Fq4s6Ifn-GIzRGvDQlbQ77I2cxjLPvmmDiYag0YLqdU"
alt="Joanna Fortuna"
class="w-72 h-72 md:w-80 md:h-80 rounded-2xl object-cover shadow-xl transform hover-grow transition-transform duration-500"
>
</div>
</div>
</div>
</div>
</section>
<!-- Profile Summary -->
<section id="profile" class="py-20 bg-gradient-to-br from-blue-50 to-yellow-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" data-aos="fade-up">
<div class="text-center mb-16">
<h2 class="section-title text-3xl md:text-4xl font-bold professional-font">
Executive <span class="gradient-text">Profile</span>
</h2>
</div>
<div class="card-elevated max-w-4xl mx-auto p-8">
<h3 class="text-2xl font-bold professional-font mb-6 text-gray-800">
High-energy, detail-oriented Senior Operations Manager with over 12 years of experience in the hospitality and events sector.
</h3>
<div class="space-y-4 text-gray-700 leading-relaxed">
<p>
Expertise in leading large teams, optimizing operational systems, and driving financial performance.
Strategic leader known for enhancing customer satisfaction, implementing rigorous health and safety standards,
and delivering exceptional event experiences.
</p>
<p>
Seeking to leverage a strong background in P&L management and team development in a challenging new role.
</p>
</div>
<div class="mt-8 pt-8 border-t border-gray-200">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-gray-50 rounded-lg p-4 text-center">
<div class="text-3xl text-primary-blue mb-3">
<i class="fas fa-users"></i>
</div>
<h4 class="font-bold text-lg professional-font">Team Leadership</h4>
<p class="text-sm text-gray-600 mt-1">Teams of 25+ professionals</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 text-center">
<div class="text-3xl text-accent-gold mb-3">
<i class="fas fa-chart-line"></i>
</div>
<h4 class="font-bold text-lg professional-font">Financial Performance</h4>
<p class="text-sm text-gray-600 mt-1">Up to £140K/week turnover</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 text-center">
<div class="text-3xl text-primary-blue mb-3">
<i class="fas fa-calendar-check"></i>
</div>
<h4 class="font-bold text-lg professional-font">Event Management</h4>
<p class="text-sm text-gray-600 mt-1">Events up to 350 guests</p>
</div>
<div class="bg-gray-50 rounded-lg p-4 text-center">
<div class="text-3xl text-accent-gold mb-3">
<i class="fas fa-clipboard-check"></i>
</div>
<h4 class="font-bold text-lg professional-font">Compliance</h4>
<p class="text-sm text-gray-600 mt-1">100% HACCP adherence</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Experience Section -->
<section id="experience" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="section-title text-3xl md:text-4xl font-bold professional-font">
Professional <span class="gradient-text">Experience</span>
</h2>
</div>
<div class="relative">
<!-- Vertical timeline line -->
<div class="absolute left-4 md:left-1/2 h-full w-1 bg-gray-200"></div>
<div class="space-y-16">
<!-- Job 1 -->
<div class="relative md:flex justify-between items-start">
<div class="md:w-5/12 md:pr-12 mb-8 md:mb-0">
<span class="text-xs bg-blue-100 text-primary-blue rounded-full px-3 py-1 font-semibold">Current Role</span>
<h3 class="text-2xl font-semibold professional-font mt-3">Senior Operations Manager</h3>
<p class="text-primary-blue mb-1">etc.venues by Convene, London</p>
<p class="text-sm text-gray-500">Mar 2025 - Present</p>
</div>
<div class="md:w-5/12 md:pl-12 pt-1 relative">
<div class="card-elevated hover-grow p-6 bg-white rounded-xl">
<p class="text-gray-700">Managing the full operational scope of the venue including Events Operations and Conference Services teams, ensuring the highest standards of delivery and customer service.</p>
<ul class="mt-6 space-y-4">
<li class="flex">
<i class="fas fa-circle text-primary-blue text-xs mt-2 mr-3"></i>
<span class="text-gray-700">Accountable for Front of House labour budget, implementing efficient rotas to maintain service excellence</span>
</li>
<li class="flex">
<i class="fas fa-circle text-primary-blue text-xs mt-2 mr-3"></i>
<span class="text-gray-700">Drove operational improvements increasing efficiency by 15% through systematic process reviews</span>
</li>
<li class="flex">
<i class="fas fa-circle text-primary-blue text-xs mt-2 mr-3"></i>
<span class="text-gray-700">Managed all vendor contracts and oversight of yearly, monthly, and unplanned maintenance</span>
</li>
<li class="flex">
<i class="fas fa-circle text-primary-blue text-xs mt-2 mr-3"></i>
<span class="text-gray-700">Reduced staff turnover by 20% through tailored training and development programs</span>
</li>
<li class="flex">
<i class="fas fa-circle text-primary-blue text-xs mt-2 mr-3"></i>
<span class="text-gray-700">Implemented and maintained all relevant Risk Assessments ensuring 100% compliance</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Job 2 -->
<div class="relative md:flex justify-between items-start flex-row-reverse">
<div class="md:w-5/12 md:pl-12 mb-8 md:mb-0">
<h3 class="text-2xl font-semibold professional-font mt-3">Operations Manager</h3>
<p class="text-primary-blue mb-1">etc.venues by Convene, London</p>
<p class="text-sm text-gray-500">Oct 2021 - Mar 2025</p>
</div>
<div class="md:w-5/12 md:pr-12 pt-1 relative">
<div class="card-elevated hover-grow p-6 bg-white rounded-xl">
<ul class="mt-2 space-y-4">
<li class="flex">
<i class="fas fa-circle text-accent-gold text-xs mt-2 mr-3"></i>
<span class="text-gray-700">Managed transition to Senior Operations role, preparing the operations framework</span>
</li>
<li class="flex">
<i class="fas fa-circle text-accent-gold text-xs mt-2 mr-3"></i>
<span class="text-gray-700">Developed and implemented new customer service protocols</span>
</li>
<li class="flex">
<i class="fas fa-circle text-accent-gold text-xs mt-2 mr-3"></i>
<span class="text-gray-700">Oversaw the integration of new operational software systems</span>
</li>
</ul>
<div class="mt-6 pt-4 border-t border-gray-200">
<h4 class="font-semibold text-primary-blue">Achievements</h4>
<p class="text-sm text-gray-700 mt-2">
Successfully managed departments during venue expansion period and implemented COVID-safe procedures achieving outstanding feedback scores.
</p>
</div>
</div>
</div>
</div>
<!-- Job 3 -->
<div class="relative md:flex justify-between items-start">
<div class="md:w-5/12 md:pr-12 mb-8 md:mb-0">
<h3 class="text-2xl font-semibold professional-font">General Manager</h3>
<p class="text-primary-blue mb-1">Baltic Restaurant, London</p>
<p class="text-sm text-gray-500">Oct 2017 - Apr 2021</p>
</div>
<div class="md:w-5/12 md:pl-12 pt-1 relative">
<div class="card-elevated hover-grow p-6 bg-white rounded-xl">
<p class="text-gray-700">Directed day-to-day operations of a high-volume venue with turnover of £50k-£140k/week.</p>
<ul class="mt-6 space-y-4">
<li class="flex">
<i class="fas fa-circle text-primary-blue text-xs mt-2 mr-3"></i>
<span class="text-gray-700">Managed team of 25+ restaurant and bar staff across all HR functions</span>
</li>
<li class="flex">
<i class="fas fa-circle text-primary-blue text-xs mt-2 mr-3"></i>
<span class="text-gray-700">Collaborated with chefs to develop innovative seasonal menus</span>
</li>
<li class="flex">
<i class="fas fa-circle text-primary-blue text-xs mt=2 mr-3"></i>
<span class="text-gray-700">Implemented rigorous cleaning schedules achieving top-tier hygiene rating</span>
</li>
<li class="flex">
<i class="fas fa-circle text-primary-blue text-xs mt=2 mr-3"></i>
<span class="text-gray-700">Created and executed targeted promotions enhancing customer spending</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Competencies -->
<section id="competencies" class="py-20 bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="section-title text-3xl md:text-4xl font-bold professional-font">
Core <span class="gradient-text">Competencies</span>
</h2>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
<div class="space-y-8">
<div class="card-elevated hover-grow p-8 rounded-2xl">
<div class="flex items-center mb-6">
<div class="text-primary-blue text-3xl">
<i class="fas fa-tasks"></i>
</div>
<h3 class="text-2xl font-semibold professional-font ml-4">Operations Management</h3>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="flex items-center px-3 py-2 bg-blue-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Process Improvement</span>
</div>
<div class="flex items-center px-3 py-2 bg-blue-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>HACCP & COSHH Compliance</span>
</div>
<div class="flex items-center px-3 py-2 bg-blue-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Health & Safety</span>
</div>
<div class="flex items-center px-3 py-2 bg-blue-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Risk Assessments</span>
</div>
<div class="flex items-center px-3 py-2 bg-blue-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr=2"></i>
<span>Vendor/Contract Management</span>
</div>
<div class="flex items-center px-3 py-2 bg-blue-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr=2"></i>
<span>Inventory & Stock Control</span>
</div>
</div>
</div>
<div class="card-elevated hover-grow p-8 rounded-2xl">
<div class="flex items-center mb-6">
<div class="text-primary-blue text-3xl">
<i class="fas fa-users-cog"></i>
</div>
<h3 class="text-2xl font-semibold professional-font ml-4">Leadership & HR</h3>
</div>
<div class="grid grid-cols-1 gap-4">
<div class="flex items-center px-3 py-2 bg-blue-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Team Leadership (25+ staff)</span>
</div>
<div class="flex items-center px-3 py-2 bg-blue-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Recruitment & Training</span>
</div>
<div class="flex items-center px-3 py-2 bg-blue-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Performance Appraisals</span>
</div>
<div class="flex items-center px-3 py-2 bg-blue-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Staff Development</span>
</div>
</div>
</div>
</div>
<div class="space-y-8">
<div class="card-elevated hover-grow p-8 rounded-2xl">
<div class="flex items-center mb-6">
<div class="text-accent-gold text-3xl">
<i class="fas fa-chart-pie"></i>
</div>
<h3 class="text-2xl font-semibold professional-font ml=4">Financial Acumen</h3>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap=4">
<div class="flex items-center px-3 py-2 bg-yellow-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>P&L Management</span>
</div>
<div class="flex items-center px-3 py-2 bg-yellow-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Budgeting & Forecasting</span>
</div>
<div class="flex items-center px-3 py-2 bg-yellow-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Labour Cost Control</span>
</div>
<div class="flex items-center px-3 py-2 bg-yellow-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Audit Procedures</span>
</div>
</div>
</div>
<div class="card-elevated hover-grow p-8 rounded-2xl">
<div class="flex items-center mb-6">
<div class="text-accent-gold text-3xl">
<i class="fas fa-glass-cheers"></i>
</div>
<h3 class="text-2xl font-semibold professional-font ml=4">Client & Event Management</h3>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap=4">
<div class="flex items-center px-3 py-2 bg-yellow-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Client Relations</span>
</div>
<div class="flex items-center px-3 py-2 bg-yellow-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Customer Experience</span>
</div>
<div class="flex items-center px-3 py-2 bg-yellow-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Event Planning & Coordination (350pax)</span>
</div>
<div class="flex items-center px-3 py-2 bg-yellow-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Menu Planning</span>
</div>
</div>
</div>
<div class="card-elevated hover-grow p-8 rounded-2xl">
<div class="flex items-center mb-6">
<div class="text-primary-blue text-3xl">
<i class="fas fa-laptop"></i>
</div>
<h3 class="text-2xl font-semibold professional-font ml-4">Technical Skills</h3>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="flex items-center px-3 py-2 bg-blue-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Microsoft Office</span>
</div>
<div class="flex items-center px-3 py-2 bg-blue-50 rounded-lg">
<i class="fas fa-check-circle text-green-500 mr-2"></i>
<span>Fourth Hospitality</span>
</div>
<div class="flex items-center px=3 py=2 bg-blue-50 rounded-lg">
<i class="fas fa-check-circle text-green=500 mr=2"></i>
<span>OpenTable</span>
</div>
<div class="flex items-center px=3 py=2 bg-blue=50 rounded-lg">
<i class="fas fa-check-circle text-green=500 mr=2"></i>
<span>Quadranet</span>
</div>
</div>
</div>
</div>
</div>
<!-- Education & Certifications -->
<div class="mt-20">
<h3 class="text-3xl text-center font-bold professional-font mb-12 text-gray-900">
Education & <span class="gradient-text">Credentials</span>
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 max-w-6xl mx-auto">
<!-- Education -->
<div class="card-elevated hover-grow p-8 rounded-2xl">
<div class="flex items-center mb-6">
<div class="text-primary-blue text-4xl">
<i class="fas fa-graduation-cap"></i>
</div>
<h3 class="text-2xl font-bold professional-font ml=4">Education</h3>
</div>
<div class="pl-2 mt-8">
<h4 class="text-xl font-semibold professional-font">Master of Economics</h4>
<p class="text-primary-blue">Faculty of Economic Assessment and Functioning of Enterprises</p>
<p class="text-sm text-gray-600 mt-1">University of Gdansk, Poland</p>
<p class="text-xs text-gray-500 mt-1">October 2003 - June 2009</p>
</div>
<div class="mt-8 pt-8 border-t border-gray-200">
<h4 class="text-xl font-semibold professional-font">Languages</h4>
<div class="mt-4 flex flex-wrap gap-2">
<span class="bg-blue-100 text-primary-blue font-medium px-3 py-1 rounded-full text-sm">Polish (Native)</span>
<span class="bg-blue-100 text-primary-blue font-medium px-3 py-1 rounded-full text-sm">English (Professional)</span>
<span class="bg-blue-100 text-primary-blue font-medium px-3 py-1 rounded-full text-sm">Spanish (Elementary)</span>
</div>
</div>
</div>
<!-- Certifications -->
<div class="card-elevated hover-grow p-8 rounded-2xl">
<div class="flex items-center mb-6">
<div class="text-accent-gold text-4xl">
<i class="fas fa-certificate"></i>
</div>
<h3 class="text-2xl font-bold professional-font ml=4">Certifications</h3>
</div>
<div class="mt-8 space-y-6">
<div class="flex items-start border-b pb-6 last:border-0 last:pb-0">
<div class="text-lg text-accent-gold mr-4">
<i class="fas fa-shield-alt"></i>
</div>
<div>
<h4 class="font-bold text-lg professional-font">HACCP Certification</h4>
<p class="text-sm text-gray-600 mt-1">Food Safety Oversight</p>
</div>
</div>
<div class="flex items-start border-b pb-6 last:border-0 last:pb-0">
<div class="text-lg text-primary-blue mr=4">
<i class="fas fa-helmet-safety"></i>
</div>
<div>
<h4 class="font-bold text-lg professional-font">Health & Safety</h4>
<p class="text-sm text-gray-600 mt=1">Workplace Safety Management</p>
</div>
</div>
<div class="flex items-start">
<div class="text-lg text-accent-gold mr=4">
<i class="fas fa-plate-wheat"></i>
</div>
<div>
<h4 class="font-bold text-lg professional-font">Food Safety</h4>
<p class="text-sm text-gray-600 mt=1">Advanced Food Handling</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="section-title text-3xl md:text-4xl font-bold professional-font">
Contact <span class="gradient-text">Joanna</span>
</h2>
</div>
<div class="grid grid-cols=1 lg:grid-cols-2 gap-16 max-w-6xl mx-auto" data-aos="fade-up">
<div>
<h3 class="text-2xl font-bold professional-font mb-6">Get In Touch</h3>
<p class="text-gray-700 mb-8 leading-relaxed">
I'm always interested in discussing new opportunities, professional collaborations,
or answering questions about hospitality operations excellence.
</p>
<div class="space-y-8">
<div class="card-elevated p-5 rounded-xl">
<div class="flex items-center gap-4">
<div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-envelope text-primary-blue text-xl"></i>
</div>
<div>
<h4 class="font-bold professional-font">Email</h4>
<p class="text-gray-700 mt=1">[Email Address]</p>
</div>
</div>
</div>
<div class="card-elevated p-5 rounded-xl">
<div class="flex items-center gap-4">
<div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fas fa-mobile-alt text-primary-blue text-xl"></i>
</div>
<div>
<h4 class="font-bold professional-font">Phone</h4>
<p class="text-gray-700 mt=1">[Phone Number]</p>
</div>
</div>
</div>
<a href="https://www.linkedin.com/in/joanna-fortuna" target="_blank" class="card-elevated p-5 rounded-xl hover:bg-blue-50 transition-colors">
<div class="flex items-center gap-4">
<div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center">
<i class="fab fa-linkedin-in text-primary-blue text-xl"></i>
</div>
<div>
<h4 class="font-bold professional-font">LinkedIn</h4>
<p class="text-gray-700 mt=1">linkedin.com/in/joanna-fortuna</p>
</div>
</div>
</a>
</div>
</div>
<div class="card-elevated hover-grow p-8 rounded-2xl">
<form class="space-y-6">
<div>
<label for="name" class="block text-sm font-bold mb-2">Name</label>
<input type="text" id="name" class="w-full px-5 py-3 bg-gray-100 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-blue focus:border-transparent" placeholder="Your name">
</div>
<div>
<label for="email" class="block text-sm font-bold mb-2">Email</label>
<input type="email" id="email" class="w-full px-5 py-3 bg-gray-100 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-blue focus:border-transparent" placeholder="email@address.com">
</div>
<div>
<label for="subject" class="block text-sm font-bold mb-2">Subject</label>
<input type="text" id="subject" class="w-full px-5 py-3 bg-gray-100 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-blue focus:border-transparent" placeholder="How can I help?">
</div>
<div>
<label for="message" class="block text-sm font-bold mb-2">Message</label>
<textarea id="message" rows="4" class="w-full px-5 py-3 bg-gray-100 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-blue focus:border-transparent" placeholder="Enter your message"></textarea>
</div>
<button type="button" id="sendButton" class="w-full px-6 py-4 bg-gradient-to-r from-primary-blue to-blue-700 text-white rounded-lg font-bold hover:opacity-90 transition-all duration-300 flex items-center justify-center gap-3">
<span>Send Message</span>
<i class="far fa-paper-plane"></i>
</button>
<div id="formError" class="text-red-500 text-sm mt-2 hidden">Please fill in all fields</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 bg-gray-900 text-gray-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0 text-center md:text-left">
<h2 class="text-2xl font-bold text-white professional-font mb-2">
Joanna Fortuna
</h2>
<p class="professional-font">Hospitality Operations Executive</p>
</div>
<div class="flex flex-col items-center space-y-4">
<div class="flex space-x-6 text-xl">
<a href="#" class="text-gray-300 hover:text-white transition-colors">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="text-gray-300 hover:text-white transition-colors">
<i class="far fa-envelope"></i>
</a>
</div>
<p class="text-sm">© 2025 Joanna Fortuna. All rights reserved.</p>
</div>
</div>
</div>
</footer>
<script>
// Initialize AOS
AOS.init({
duration: 800,
once: true
});
// Mobile menu toggle
const mobileMenuButton = document.querySelector('.mobile-menu-button');
const mobileMenu = document.querySelector('.mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
// Close mobile menu if open
mobileMenu.classList.add('hidden');
});
});
// Enhanced form submission
document.getElementById('sendButton').addEventListener('click', function() {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const subject = document.getElementById('subject').value;
const message = document.getElementById('message').value;
const errorDiv = document.getElementById('formError');
if (!name || !email || !subject || !message) {
errorDiv.classList.remove('hidden');
return;
}
errorDiv.classList.add('hidden');
// Compose email
const mailtoLink = `mailto:[Email Address]?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(
`Name: ${name}\nEmail: ${email}\n\nMessage:\n${message}`
)}`;
// Open email client
window.location.href = mailtoLink;
// Show success message
const alertDiv = document.createElement('div');
alertDiv.className = 'fixed top-10 left-1/2 transform -translate-x-1/2 z-50';
alertDiv.innerHTML = `
<div class="bg-white border border-green-500 text-green-500 px-6 py-4 rounded-lg shadow-lg flex items-center">
<i class="fas fa-check-circle mr-3"></i>
<span class="font-medium">Message sent successfully! I'll be in touch soon.</span>
</div>
`;
document.body.appendChild(alertDiv);
// Remove after some time
setTimeout(() => {
alertDiv.remove();
}, 5000);
// Reset form
document.querySelector('form').reset();
});
</script>
</body>
</html>