<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tesla Cadena - Marketing & Communications Expert</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">
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
body {
font-family: 'Montserrat', sans-serif;
scroll-behavior: smooth;
background-color: #f9fafb;
}
h1, h2, h3, h4 {
font-family: 'Playfair Display', serif;
}
.section-title {
position: relative;
display: inline-block;
}
.section-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 3px;
background-color: #3b82f6;
}
.timeline-item {
position: relative;
padding-left: 30px;
margin-bottom: 30px;
}
.timeline-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 2px;
background-color: #e0e7ff;
}
.timeline-item::after {
content: '';
position: absolute;
left: -4px;
top: 8px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #3b82f6;
}
.skill-pill {
transition: all 0.3s ease;
}
.skill-pill:hover {
transform: translateY(-3px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.tab-button {
transition: all 0.3s ease;
}
.tab-button.active {
background: linear-gradient(to right, #3b82f6, #8b5cf6);
color: white;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.contact-icon {
transition: all 0.3s ease;
}
.contact-icon:hover {
transform: scale(1.2);
color: #8b5cf6;
}
.gradient-bg {
background: linear-gradient(to right, #3b82f6, #8b5cf6);
}
</style>
</head>
<body>
<!-- Header Section -->
<header class="gradient-bg text-white py-16 px-4 md:px-0">
<div class="container mx-auto max-w-5xl">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="md:w-2/3 mb-8 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold tracking-wider mb-2">TESLA CADENA</h1>
<h2 class="text-xl md:text-2xl font-light mb-6">MARKETING AND COMMUNICATIONS EXPERT</h2>
<p class="text-lg opacity-90 leading-relaxed">
Dynamic marketing & communications expert with a proven track record of driving significant ROI, enhancing brand visibility, and optimizing efficiency through strategic B2B and B2C campaigns.
</p>
</div>
<div class="md:w-1/3 flex flex-col items-center">
<div class="w-48 h-48 rounded-full bg-white/20 flex items-center justify-center mb-4 overflow-hidden">
<svg class="w-32 h-32 text-white/80" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="flex space-x-4">
<a href="tel:9564548717" class="contact-icon">
<i class="fas fa-phone text-xl bg-white/10 w-10 h-10 rounded-full flex items-center justify-center"></i>
</a>
<a href="mailto:teslacadena@yahoo.com" class="contact-icon">
<i class="fas fa-envelope text-xl bg-white/10 w-10 h-10 rounded-full flex items-center justify-center"></i>
</a>
<a href="https://tesla-cadena.notion.site" target="_blank" class="contact-icon">
<i class="fas fa-globe text-xl bg-white/10 w-10 h-10 rounded-full flex items-center justify-center"></i>
</a>
<a href="https://linkedin.com/in/tesla-cadena" target="_blank" class="contact-icon">
<i class="fab fa-linkedin-in text-xl bg-white/10 w-10 h-10 rounded-full flex items-center justify-center"></i>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- Navigation Tabs -->
<div class="bg-white shadow-md sticky top-0 z-10">
<div class="container mx-auto max-w-5xl">
<div class="flex overflow-x-auto py-2 px-4 md:px-0">
<button class="tab-button active whitespace-nowrap px-5 py-2 rounded-md mr-2 font-medium" data-tab="experience">Experience</button>
<button class="tab-button whitespace-nowrap px-5 py-2 rounded-md mr-2 font-medium" data-tab="skills">Skills</button>
<button class="tab-button whitespace-nowrap px-5 py-2 rounded-md mr-2 font-medium" data-tab="education">Education</button>
<button class="tab-button whitespace-nowrap px-5 py-2 rounded-md mr-2 font-medium" data-tab="awards">Awards</button>
<button class="tab-button whitespace-nowrap px-5 py-2 rounded-md font-medium" data-tab="development">Professional Development</button>
</div>
</div>
</div>
<!-- Main Content -->
<main class="container mx-auto max-w-5xl py-12 px-4 md:px-0">
<!-- Experience Section -->
<section id="experience" class="tab-content active mb-16">
<h2 class="section-title text-3xl font-bold mb-12">EXPERIENCE</h2>
<div class="timeline-item">
<div class="mb-2">
<h3 class="text-xl font-bold text-indigo-600">LEAD MARKETING SPECIALIST</h3>
<div class="flex justify-between items-center">
<p class="text-lg font-medium">Cybersoft Technologies</p>
<p class="text-gray-600">09/2021 – Present</p>
</div>
</div>
<div class="mb-4">
<h4 class="font-semibold mb-2">Accomplishments</h4>
<ul class="list-disc pl-5 space-y-1 text-gray-700">
<li>Key contributor to brand launch at a national event, showcasing products to thousands of prospects</li>
<li>Established cross-departmental trade show processes, resulting in a 900% annual increase in shows</li>
<li>Coordinated customer events and promotions, resulting in a record-breaking 100% increase in attendance</li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-2">Responsibilities</h4>
<ul class="list-disc pl-5 space-y-1 text-gray-700">
<li>Manage nationwide marketing for 3 brands, 20+ solutions, to drive revenue generation</li>
<li>Develop and execute tailored campaigns per best practices and KPIs</li>
<li>Primary liaison for partner companies, including videographers, strategists, and advertising</li>
<li>Create collateral, including blogs, emails, videos, graphics, and advertisements</li>
<li>Manage monthly newsletter distributed to 22K+ prospects</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="mb-2">
<h3 class="text-xl font-bold text-indigo-600">COMMUNICATIONS SPECIALIST</h3>
<div class="flex justify-between items-center">
<p class="text-lg font-medium">The Awty International School</p>
<p class="text-gray-600">05/2019 – 09/2021</p>
</div>
</div>
<ul class="list-disc pl-5 space-y-1 text-gray-700">
<li>Lead the Strategic Marketing Team, managing advertising and sponsorship opportunities</li>
<li>Managed and created all assets for the annual admissions campaign</li>
<li>Created content for website, social, events, publications, and promotional materials</li>
<li>Collaborated with various departments to ensure brand consistency</li>
<li>Emergency communications using School Messenger and other outlets</li>
</ul>
</div>
<div class="timeline-item">
<div class="mb-2">
<h3 class="text-xl font-bold text-indigo-600">ARTS AND ENTERTAINMENT EDITOR</h3>
<div class="flex justify-between items-center">
<p class="text-lg font-medium">Houstonian Newspaper</p>
<p class="text-gray-600">08/2016 – 12/2018</p>
</div>
</div>
<ul class="list-disc pl-5 space-y-1 text-gray-700">
<li>Managed a team of four writers and two photographers</li>
<li>Conducted interviews, wrote and edited features, reviews, and entertainment news</li>
<li>Created newspaper layouts, incorporating advertisements</li>
</ul>
</div>
<div class="timeline-item">
<div class="mb-2">
<h3 class="text-xl font-bold text-indigo-600">PRODUCER APPRENTICE</h3>
<div class="flex justify-between items-center">
<p class="text-lg font-medium">Suddenlink Cable Channel 7, SHSU</p>
<p class="text-gray-600">08/2018 – 12/2018</p>
</div>
</div>
<ul class="list-disc pl-5 space-y-1 text-gray-700">
<li>Found newsworthy stories, wrote scripts, provided overlay images and weather graphics</li>
<li>Produced live broadcasts with light and sound designers, cameramen, and talent</li>
</ul>
</div>
<div class="timeline-item">
<div class="mb-2">
<h3 class="text-xl font-bold text-indigo-600">RADIO TALK SHOW CO-HOST, PRODUCER, WRITER</h3>
<div class="flex justify-between items-center">
<p class="text-lg font-medium">90.5 the Kat Radio Station</p>
<p class="text-gray-600">08/2016 – 05/2017</p>
</div>
</div>
<ul class="list-disc pl-5 space-y-1 text-gray-700">
<li>Wrote scripts for an original radio show</li>
<li>Performed live, original hour-long broadcasts weekly</li>
<li>Mentored new DJs for their station shifts</li>
</ul>
</div>
</section>
<!-- Skills Section -->
<section id="skills" class="tab-content mb-16">
<h2 class="section-title text-3xl font-bold mb-12">SKILLS</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-xl font-bold mb-4 text-indigo-600">Expertise</h3>
<div class="flex flex-wrap gap-2">
<span class="skill-pill bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">Content Strategy</span>
<span class="skill-pill bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">Email Marketing</span>
<span class="skill-pill bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">Event Marketing</span>
<span class="skill-pill bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">Content Creation</span>
<span class="skill-pill bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">Copywriting</span>
<span class="skill-pill bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">Graphic Design</span>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-xl font-bold mb-4 text-purple-600">Marketing Platforms</h3>
<div class="flex flex-wrap gap-2">
<span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full">Pardot (Salesforce)</span>
<span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full">Google Analytics</span>
<span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full">HubSpot</span>
<span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full">Hootsuite</span>
<span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full">Social Media</span>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-xl font-bold mb-4 text-pink-600">Design & Content</h3>
<div class="flex flex-wrap gap-2">
<span class="skill-pill bg-pink-100 text-pink-800 px-3 py-1 rounded-full">Adobe Creative Suite</span>
<span class="skill-pill bg-pink-100 text-pink-800 px-3 py-1 rounded-full">Photoshop</span>
<span class="skill-pill bg-pink-100 text-pink-800 px-3 py-1 rounded-full">InDesign</span>
<span class="skill-pill bg-pink-100 text-pink-800 px-3 py-1 rounded-full">Premiere</span>
<span class="skill-pill bg-pink-100 text-pink-800 px-3 py-1 rounded-full">Canva</span>
<span class="skill-pill bg-pink-100 text-pink-800 px-3 py-1 rounded-full">Descript</span>
<span class="skill-pill bg-pink-100 text-pink-800 px-3 py-1 rounded-full">Audacity</span>
<span class="skill-pill bg-pink-100 text-pink-800 px-3 py-1 rounded-full">GoToWebinar</span>
<span class="skill-pill bg-pink-100 text-pink-800 px-3 py-1 rounded-full">ClipChamp</span>
<span class="skill-pill bg-pink-100 text-pink-800 px-3 py-1 rounded-full">Loom</span>
<span class="skill-pill bg-pink-100 text-pink-800 px-3 py-1 rounded-full">Camtasia</span>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-xl font-bold mb-4 text-green-600">Web Management</h3>
<div class="flex flex-wrap gap-2">
<span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full">WordPress</span>
<span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full">Wix</span>
<span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full">Finalsite</span>
<span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full">Figma</span>
<span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full">EventLeaf</span>
<span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full">CVent</span>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-xl font-bold mb-4 text-teal-600">Data & Reporting</h3>
<div class="flex flex-wrap gap-2">
<span class="skill-pill bg-teal-100 text-teal-800 px-3 py-1 rounded-full">Excel</span>
<span class="skill-pill bg-teal-100 text-teal-800 px-3 py-1 rounded-full">Google Sheets</span>
<span class="skill-pill bg-teal-100 text-teal-800 px-3 py-1 rounded-full">Google Data Studio</span>
<span class="skill-pill bg-teal-100 text-teal-800 px-3 py-1 rounded-full">Campaign Performance Reporting</span>
</div>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<h3 class="text-xl font-bold mb-4 text-amber-600">Administrative Tools</h3>
<div class="flex flex-wrap gap-2">
<span class="skill-pill bg-amber-100 text-amber-800 px-3 py-1 rounded-full">Microsoft Office</span>
<span class="skill-pill bg-amber-100 text-amber-800 px-3 py-1 rounded-full">Google Suite</span>
<span class="skill-pill bg-amber-100 text-amber-800 px-3 py-1 rounded-full">Notion</span>
<span class="skill-pill bg-amber-100 text-amber-800 px-3 py-1 rounded-full">Wrike</span>
<span class="skill-pill bg-amber-100 text-amber-800 px-3 py-1 rounded-full">Trello</span>
<span class="skill-pill bg-amber-100 text-amber-800 px-3 py-1 rounded-full">AI Tools</span>
</div>
</div>
</div>
</section>
<!-- Education Section -->
<section id="education" class="tab-content mb-16">
<h2 class="section-title text-3xl font-bold mb-12">EDUCATION</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
<div class="flex items-center mb-4">
<div class="gradient-bg p-3 rounded-full mr-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path>
</svg>
</div>
<h3 class="text-xl font-bold">B.A. Mass Communications</h3>
</div>
<p class="text-gray-700 mb-2">Emphasis in Multi-Platform Journalism</p>
<p class="text-gray-600 font-medium">Sam Houston State University</p>
</div>
<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
<div class="flex items-center mb-4">
<div class="gradient-bg p-3 rounded-full mr-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"></path>
</svg>
</div>
<h3 class="text-xl font-bold">B.F.A. Theatre</h3>
</div>
<p class="text-gray-700 mb-2">Emphasis in Acting and Directing</p>
<p class="text-gray-600 font-medium">Sam Houston State University</p>
</div>
</div>
</section>
<!-- Awards Section -->
<section id="awards" class="tab-content mb-16">
<h2 class="section-title text-3xl font-bold mb-12">AWARDS</h2>
<div class="bg-white rounded-lg shadow-md p-8 hover:shadow-lg transition-shadow">
<div class="flex items-center mb-4">
<div class="bg-amber-500 p-3 rounded-full mr-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path>
</svg>
</div>
<div>
<h3 class="text-xl font-bold">Cybersoft's Unsung Hero</h3>
<p class="text-gray-600">2023</p>
</div>
</div>
<div class="pl-16">
<p class="text-gray-700 italic">"Consistently delivers high-quality, critical work and affects highly visible operations without fanfare."</p>
</div>
</div>
</section>
<!-- Professional Development Section -->
<section id="development" class="tab-content mb-16">
<h2 class="section-title text-3xl font-bold mb-12">PROFESSIONAL DEVELOPMENT</h2>
<div class="bg-white rounded-lg shadow-md p-8 hover:shadow-lg transition-shadow">
<div class="flex items-center">
<div class="gradient-bg p-3 rounded-full mr-4">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</div>
<div>
<h3 class="text-xl font-bold">American Marketing Association Member</h3>
<p class="text-gray-600">2024-Present</p>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-8 px-4 md:px-0">
<div class="container mx-auto max-w-5xl">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<h2 class="text-2xl font-bold">TESLA CADENA</h2>
<p class="text-gray-400">Marketing and Communications Expert</p>
</div>
<div class="flex space-x-6">
<a href="tel:9564548717" class="hover:text-indigo-400 transition-colors">
<i class="fas fa-phone mr-2"></i>956-454-8717
</a>
<a href="mailto:teslacadena@yahoo.com" class="hover:text-indigo-400 transition-colors">
<i class="fas fa-envelope mr-2"></i>teslacadena@yahoo.com
</a>
</div>
</div>
<div class="mt-6 text-center text-gray-400 text-sm">
<p>© 2024 Tesla Cadena. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Tab functionality
const tabButtons = document.querySelectorAll('.tab-button');
const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {
button.addEventListener('click', () => {
const tabId = button.getAttribute('data-tab');
// Remove active class from all buttons and contents
tabButtons.forEach(btn => btn.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));
// Add active class to current button and content
button.classList.add('active');
document.getElementById(tabId).classList.add('active');
});
});
// Skill pill animation
const skillPills = document.querySelectorAll('.skill-pill');
skillPills.forEach(pill => {
pill.addEventListener('mouseover', () => {
pill.style.transform = 'translateY(-3px)';
});
pill.addEventListener('mouseout', () => {
pill.style.transform = 'translateY(0)';
});
});
</script>
</body>
</html>