Content Strategy
Content Creation
Graphic Design
Email Marketing
Events
Copywriting
Content Strategy
Content Creation
Copywriting
Graphic Designresume site text from canva
Contribute to TeslaCadena/test2 development by creating an account on GitHub.
github.com
<!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 Portfolio</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=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
scroll-behavior: smooth;
}
.playfair {
font-family: 'Playfair Display', serif;
}
.gradient-bg {
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}
.card {
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.portfolio-item {
transition: all 0.3s ease;
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-overlay {
opacity: 0;
transition: all 0.3s ease;
background: rgba(0, 0, 0, 0.7);
}
.tab-active {
color: #3b82f6;
border-bottom: 2px solid #3b82f6;
}
.animate-fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.headshot-container {
position: relative;
width: 280px;
height: 280px;
border-radius: 50%;
overflow: hidden;
border: 8px solid white;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
background: #f3f4f6;
}
.headshot-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
}
.timeline-item {
position: relative;
padding-left: 30px;
margin-bottom: 30px;
}
.timeline-item:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 14px;
height: 14px;
border-radius: 50%;
background: #3b82f6;
border: 3px solid #e0e7ff;
}
.timeline-item:after {
content: "";
position: absolute;
left: 6px;
top: 14px;
bottom: -30px;
width: 2px;
background: #e0e7ff;
}
.timeline-item:last-child:after {
display: none;
}
.skill-category {
transition: all 0.3s ease;
}
.skill-category:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-md fixed w-full z-10">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<a href="index.html" class="text-2xl font-bold playfair text-indigo-600">Tesla Cadena<span class="text-gray-800">.</span></a>
<div class="hidden md:flex space-x-8">
<a href="index.html" class="text-gray-700 hover:text-indigo-600 transition">Home</a>
<a href="index.html#about" class="text-gray-700 hover:text-indigo-600 transition">About</a>
<a href="index.html#portfolio" class="text-gray-700 hover:text-indigo-600 transition">Portfolio</a>
<a href="resume.html" class="text-indigo-600 font-medium">Resume</a>
<a href="index.html#testimonials" class="text-gray-700 hover:text-indigo-600 transition">Testimonials</a>
<a href="index.html#contact" class="text-gray-700 hover:text-indigo-600 transition">Contact</a>
</div>
<button id="mobile-menu-button" class="md:hidden text-gray-700">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg absolute w-full">
<div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
<a href="index.html" class="text-gray-700 hover:text-indigo-600 transition py-2">Home</a>
<a href="index.html#about" class="text-gray-700 hover:text-indigo-600 transition py-2">About</a>
<a href="index.html#portfolio" class="text-gray-700 hover:text-indigo-600 transition py-2">Portfolio</a>
<a href="resume.html" class="text-indigo-600 font-medium py-2">Resume</a>
<a href="index.html#testimonials" class="text-gray-700 hover:text-indigo-600 transition py-2">Testimonials</a>
<a href="index.html#contact" class="text-gray-700 hover:text-indigo-600 transition py-2">Contact</a>
</div>
</div>
</nav>
<!-- Resume Header -->
<section class="pt-24 pb-12 md:pt-32 md:pb-16 bg-gradient-to-br from-indigo-50 to-purple-50">
<div class="container mx-auto px-4">
<div class="text-center">
<h1 class="text-4xl md:text-5xl font-bold playfair mb-4 text-gray-800">Professional <span class="text-indigo-600">Resume</span></h1>
<p class="text-lg text-gray-600 max-w-3xl mx-auto">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 class="mt-8 flex justify-center space-x-4">
<a href="#" class="px-6 py-3 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition shadow-md flex items-center">
<i class="fas fa-download mr-2"></i> Download Resume
</a>
<a href="index.html#contact" class="px-6 py-3 border border-indigo-600 text-indigo-600 rounded-md hover:bg-indigo-50 transition">Contact Me</a>
</div>
</div>
</div>
</section>
<!-- Resume Content -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-5xl mx-auto">
<!-- Resume Tabs -->
<div class="mb-12 border-b border-gray-200">
<div class="flex flex-wrap -mb-px">
<button class="resume-tab tab-active mr-8 py-4 px-1 text-lg font-medium" data-tab="experience">Experience</button>
<button class="resume-tab mr-8 py-4 px-1 text-lg font-medium text-gray-500" data-tab="education">Education</button>
<button class="resume-tab mr-8 py-4 px-1 text-lg font-medium text-gray-500" data-tab="skills">Skills</button>
<button class="resume-tab py-4 px-1 text-lg font-medium text-gray-500" data-tab="awards">Awards & Development</button>
</div>
</div>
<!-- Tab Content -->
<div class="tab-content">
<!-- Experience Tab -->
<div id="experience-tab" class="resume-tab-content">
<div class="timeline">
<div class="timeline-item">
<div class="mb-2">
<span class="inline-block px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">09/2021 - Present</span>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-1">Lead Marketing Specialist</h3>
<h4 class="text-lg text-indigo-600 mb-3">Cybersoft Technologies</h4>
<div class="mb-4">
<h5 class="font-medium text-gray-700 mb-2">Accomplishments:</h5>
<ul class="list-disc pl-5 text-gray-600">
<li class="mb-2">Key contributor to brand launch at a national event, showcasing products to thousands of prospects</li>
<li class="mb-2">Established cross-departmental trade show processes, resulting in a 900% annual increase in shows</li>
<li class="mb-2">Coordinated customer events and promotions, resulting in a record-breaking 100% increase in attendance</li>
</ul>
</div>
<div>
<h5 class="font-medium text-gray-700 mb-2">Responsibilities:</h5>
<ul class="list-disc pl-5 text-gray-600">
<li class="mb-2">Manage nationwide marketing for 3 brands, 20+ solutions, to drive revenue generation</li>
<li class="mb-2">Develop and execute tailored campaigns per best practices and KPIs</li>
<li class="mb-2">Primary liaison for partner companies, including videographers, strategists, and advertising</li>
<li class="mb-2">Create collateral, including blogs, emails, videos, graphics, and advertisements</li>
<li class="mb-2">Manage monthly newsletter distributed to 22K+ prospects</li>
</ul>
</div>
</div>
<div class="timeline-item">
<div class="mb-2">
<span class="inline-block px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">05/2019 - 09/2021</span>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-1">Communications Specialist</h3>
<h4 class="text-lg text-indigo-600 mb-3">The Awty International School</h4>
<ul class="list-disc pl-5 text-gray-600">
<li class="mb-2">Lead the Strategic Marketing Team, managing advertising and sponsorship opportunities</li>
<li class="mb-2">Managed and created all assets for the annual admissions campaign</li>
<li class="mb-2">Created content for website, social, events, publications, and promotional materials</li>
<li class="mb-2">Collaborated with various departments to ensure brand consistency</li>
<li class="mb-2">Emergency communications using School Messenger and other outlets</li>
</ul>
</div>
<div class="timeline-item">
<div class="mb-2">
<span class="inline-block px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">08/2016 - 12/2018</span>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-1">Arts and Entertainment Editor</h3>
<h4 class="text-lg text-indigo-600 mb-3">Houstonian Newspaper</h4>
<ul class="list-disc pl-5 text-gray-600">
<li class="mb-2">Managed a team of four writers and two photographers</li>
<li class="mb-2">Conducted interviews, wrote and edited features, reviews, and entertainment news</li>
<li class="mb-2">Created newspaper layouts, incorporating advertisements</li>
</ul>
</div>
<div class="timeline-item">
<div class="mb-2">
<span class="inline-block px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">08/2018 - 12/2018</span>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-1">Producer Apprentice</h3>
<h4 class="text-lg text-indigo-600 mb-3">Suddenlink Cable Channel 7, SHSU</h4>
<ul class="list-disc pl-5 text-gray-600">
<li class="mb-2">Found newsworthy stories, wrote scripts, provided overlay images and weather graphics</li>
<li class="mb-2">Produced live broadcasts with light and sound designers, cameramen, and talent</li>
</ul>
</div>
<div class="timeline-item">
<div class="mb-2">
<span class="inline-block px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">08/2016 - 05/2017</span>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-1">Radio Talk Show Co-Host, Producer, Writer</h3>
<h4 class="text-lg text-indigo-600 mb-3">90.5 the Kat Radio Station</h4>
<ul class="list-disc pl-5 text-gray-600">
<li class="mb-2">Wrote scripts for an original radio show</li>
<li class="mb-2">Performed live, original hour-long broadcasts weekly</li>
<li class="mb-2">Mentored new DJs for their station shifts</li>
</ul>
</div>
</div>
</div>
<!-- Education Tab -->
<div id="education-tab" class="resume-tab-content hidden">
<div class="timeline">
<div class="timeline-item">
<div class="mb-2">
<span class="inline-block px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">Sam Houston State University</span>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-1">B.A. Mass Communications</h3>
<p class="text-gray-600 mb-2">Emphasis in Multi-Platform Journalism</p>
<div class="mt-6">
<h3 class="text-xl font-semibold text-gray-800 mb-1">B.F.A. Theatre</h3>
<p class="text-gray-600">Emphasis in Acting and Directing</p>
</div>
<div class="mt-8 bg-gray-50 p-6 rounded-lg border border-gray-100">
<h4 class="font-medium text-gray-700 mb-3">How My Education Shaped My Career</h4>
<p class="text-gray-600 mb-3">My dual background in Mass Communications and Theatre has provided me with a unique perspective in marketing and communications. The journalism training developed my storytelling abilities and attention to detail, while my theatre education enhanced my creativity, presentation skills, and ability to connect with audiences.</p>
<p class="text-gray-600">This interdisciplinary foundation allows me to approach marketing challenges with both analytical precision and creative flair, resulting in campaigns that are both strategic and engaging.</p>
</div>
</div>
</div>
</div>
<!-- Skills Tab -->
<div id="skills-tab" class="resume-tab-content hidden">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="skill-category bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-lg p-6 border border-indigo-200">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center mr-3">
<i class="fas fa-bullhorn text-white"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800">Marketing Expertise</h3>
</div>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-white text-indigo-700 rounded-full text-sm border border-indigo-200">Content Strategy</span>
<span class="px-3 py-1 bg-white text-indigo-700 rounded-full text-sm border border-indigo-200">Email Marketing</span>
<span class="px-3 py-1 bg-white text-indigo-700 rounded-full text-sm border border-indigo-200">Event Marketing</span>
<span class="px-3 py-1 bg-white text-indigo-700 rounded-full text-sm border border-indigo-200">Content Creation</span>
<span class="px-3 py-1 bg-white text-indigo-700 rounded-full text-sm border border-indigo-200">Copywriting</span>
<span class="px-3 py-1 bg-white text-indigo-700 rounded-full text-sm border border-indigo-200">Graphic Design</span>
</div>
</div>
<div class="skill-category bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-6 border border-purple-200">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center mr-3">
<i class="fas fa-chart-line text-white"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800">Marketing Platforms</h3>
</div>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-white text-purple-700 rounded-full text-sm border border-purple-200">Pardot (Salesforce)</span>
<span class="px-3 py-1 bg-white text-purple-700 rounded-full text-sm border border-purple-200">Google Analytics</span>
<span class="px-3 py-1 bg-white text-purple-700 rounded-full text-sm border border-purple-200">HubSpot</span>
<span class="px-3 py-1 bg-white text-purple-700 rounded-full text-sm border border-purple-200">Hootsuite</span>
<span class="px-3 py-1 bg-white text-purple-700 rounded-full text-sm border border-purple-200">Social Media</span>
</div>
</div>
<div class="skill-category bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-6 border border-blue-200">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center mr-3">
<i class="fas fa-pencil-alt text-white"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800">Design & Content</h3>
</div>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-white text-blue-700 rounded-full text-sm border border-blue-200">Adobe Creative Suite</span>
<span class="px-3 py-1 bg-white text-blue-700 rounded-full text-sm border border-blue-200">Photoshop</span>
<span class="px-3 py-1 bg-white text-blue-700 rounded-full text-sm border border-blue-200">InDesign</span>
<span class="px-3 py-1 bg-white text-blue-700 rounded-full text-sm border border-blue-200">Premiere</span>
<span class="px-3 py-1 bg-white text-blue-700 rounded-full text-sm border border-blue-200">Canva</span>
<span class="px-3 py-1 bg-white text-blue-700 rounded-full text-sm border border-blue-200">Descript</span>
<span class="px-3 py-1 bg-white text-blue-700 rounded-full text-sm border border-blue-200">Audacity</span>
<span class="px-3 py-1 bg-white text-blue-700 rounded-full text-sm border border-blue-200">GoToWebinar</span>
<span class="px-3 py-1 bg-white text-blue-700 rounded-full text-sm border border-blue-200">ClipChamp</span>
<span class="px-3 py-1 bg-white text-blue-700 rounded-full text-sm border border-blue-200">Loom</span>
<span class="px-3 py-1 bg-white text-blue-700 rounded-full text-sm border border-blue-200">Camtasia</span>
</div>
</div>
<div class="skill-category bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-6 border border-green-200">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center mr-3">
<i class="fas fa-globe text-white"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800">Web Management</h3>
</div>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-white text-green-700 rounded-full text-sm border border-green-200">WordPress</span>
<span class="px-3 py-1 bg-white text-green-700 rounded-full text-sm border border-green-200">Wix</span>
<span class="px-3 py-1 bg-white text-green-700 rounded-full text-sm border border-green-200">Finalsite</span>
<span class="px-3 py-1 bg-white text-green-700 rounded-full text-sm border border-green-200">Figma</span>
<span class="px-3 py-1 bg-white text-green-700 rounded-full text-sm border border-green-200">EventLeaf</span>
<span class="px-3 py-1 bg-white text-green-700 rounded-full text-sm border border-green-200">CVent</span>
</div>
</div>
<div class="skill-category bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg p-6 border border-amber-200">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-amber-500 flex items-center justify-center mr-3">
<i class="fas fa-chart-pie text-white"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800">Data & Reporting</h3>
</div>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-white text-amber-700 rounded-full text-sm border border-amber-200">Excel</span>
<span class="px-3 py-1 bg-white text-amber-700 rounded-full text-sm border border-amber-200">Google Sheets</span>
<span class="px-3 py-1 bg-white text-amber-700 rounded-full text-sm border border-amber-200">Google Data Studio</span>
<span class="px-3 py-1 bg-white text-amber-700 rounded-full text-sm border border-amber-200">Campaign Performance Reporting</span>
</div>
</div>
<div class="skill-category bg-gradient-to-br from-pink-50 to-pink-100 rounded-lg p-6 border border-pink-200">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center mr-3">
<i class="fas fa-tasks text-white"></i>
</div>
<h3 class="text-xl font-semibold text-gray-800">Administrative Tools</h3>
</div>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-white text-pink-700 rounded-full text-sm border border-pink-200">Microsoft Office</span>
<span class="px-3 py-1 bg-white text-pink-700 rounded-full text-sm border border-pink-200">Google Suite</span>
<span class="px-3 py-1 bg-white text-pink-700 rounded-full text-sm border border-pink-200">Notion</span>
<span class="px-3 py-1 bg-white text-pink-700 rounded-full text-sm border border-pink-200">Wrike</span>
<span class="px-3 py-1 bg-white text-pink-700 rounded-full text-sm border border-pink-200">Trello</span>
<span class="px-3 py-1 bg-white text-pink-700 rounded-full text-sm border border-pink-200">AI Tools</span>
</div>
</div>
</div>
</div>
<!-- Awards Tab -->
<div id="awards-tab" class="resume-tab-content hidden">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="text-2xl font-semibold text-gray-800 mb-6 playfair">Awards & Recognition</h3>
<div class="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-lg p-6 border border-indigo-100 mb-6">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
<i class="fas fa-award text-indigo-600 text-xl"></i>
</div>
<div>
<h4 class="font-semibold text-lg">Cybersoft's Unsung Hero</h4>
<p class="text-sm text-gray-600">2023</p>
</div>
</div>
<p class="text-gray-700 italic">"Consistently delivers high-quality, critical work and affects highly visible operations without fanfare."</p>
</div>
</div>
<div>
<h3 class="text-2xl font-semibold text-gray-800 mb-6 playfair">Professional Development</h3>
<div class="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-lg p-6 border border-indigo-100">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
<i class="fas fa-user-tie text-indigo-600 text-xl"></i>
</div>
<div>
<h4 class="font-semibold text-lg">American Marketing Association</h4>
<p class="text-sm text-gray-600">Member, 2024-Present</p>
</div>
</div>
<p class="text-gray-700">Active member of the premier professional association dedicated to the practice, teaching, and study of marketing.</p>
</div>
</div>
</div>
<div class="mt-12 bg-gray-50 p-6 rounded-lg border border-gray-200">
<h3 class="text-xl font-semibold text-gray-800 mb-4">Continuing Education</h3>
<p class="text-gray-600 mb-6">I am committed to continuous learning and professional growth. Some recent areas of focus include:</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded-lg border border-gray-100 shadow-sm">
<div class="flex items-center mb-3">
<i class="fas fa-chart-network text-indigo-600 mr-2"></i>
<h4 class="font-medium">Digital Marketing Trends</h4>
</div>
<p class="text-sm text-gray-600">Staying current with emerging platforms, technologies, and best practices in digital marketing.</p>
</div>
<div class="bg-white p-4 rounded-lg border border-gray-100 shadow-sm">
<div class="flex items-center mb-3">
<i class="fas fa-robot text-indigo-600 mr-2"></i>
<h4 class="font-medium">AI in Marketing</h4>
</div>
<p class="text-sm text-gray-600">Exploring applications of artificial intelligence and machine learning in marketing strategy and execution.</p>
</div>
<div class="bg-white p-4 rounded-lg border border-gray-100 shadow-sm">
<div class="flex items-center mb-3">
<i class="fas fa-users text-indigo-600 mr-2"></i>
<h4 class="font-medium">Leadership Development</h4>
</div>
<p class="text-sm text-gray-600">Enhancing team management and leadership skills to drive collaborative marketing initiatives.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section class="py-16 gradient-bg">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold text-white mb-6">Ready to Work Together?</h2>
<p class="text-white opacity-90 max-w-2xl mx-auto mb-8">I'm always open to discussing new projects, creative ideas, or opportunities to be part of your vision.</p>
<div class="flex justify-center space-x-4">
<a href="index.html#contact" class="px-8 py-3 bg-white text-indigo-600 rounded-md hover:bg-gray-100 transition shadow-md">Get In Touch</a>
<a href="index.html#portfolio" class="px-8 py-3 border border-white text-white rounded-md hover:bg-indigo-700 transition">View Portfolio</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<h3 class="text-2xl font-bold playfair">Tesla Cadena<span class="text-indigo-400">.</span></h3>
<p class="text-gray-400 mt-2">Marketing & Communications Leader</p>
</div>
<div class="flex flex-wrap justify-center md:justify-end gap-4">
<a href="index.html" class="text-gray-400 hover:text-white transition">Home</a>
<a href="index.html#about" class="text-gray-400 hover:text-white transition">About</a>
<a href="index.html#portfolio" class="text-gray-400 hover:text-white transition">Portfolio</a>
<a href="resume.html" class="text-white transition">Resume</a>
<a href="index.html#testimonials" class="text-gray-400 hover:text-white transition">Testimonials</a>
<a href="index.html#contact" class="text-gray-400 hover:text-white transition">Contact</a>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">© 2023 Tesla Cadena. All rights reserved.</p>
<div class="flex space-x-4">
<a href="https://www.linkedin.com/in/tesla-cadena/" target="_blank" class="text-gray-400 hover:text-white transition">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
</footer>
<script>
// Mobile Menu Toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu when clicking a link
const mobileLinks = mobileMenu.querySelectorAll('a');
mobileLinks.forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
// Resume Tab Functionality
const resumeTabs = document.querySelectorAll('.resume-tab');
const resumeTabContents = document.querySelectorAll('.resume-tab-content');
resumeTabs.forEach(tab => {
tab.addEventListener('click', () => {
// Update active tab
resumeTabs.forEach(t => {
t.classList.remove('tab-active');
t.classList.add('text-gray-500');
});
tab.classList.add('tab-active');
tab.classList.remove('text-gray-500');
// Show corresponding content
const tabId = tab.getAttribute('data-tab');
resumeTabContents.forEach(content => {
content.classList.add('hidden');
});
document.getElementById(`${tabId}-tab`).classList.remove('hidden');
});
});
</script>
</body>
</html>