<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Company name</title>
<!--💡UPDATE: Add favicon -->
<link rel="icon" type="images/png" href="images/[Link]">
<link rel="apple-touch-icon" href="images/[Link]">
<!-- Google Fonts for Elegant Typography -->
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Lato:wght@300;400;700&family=Playfair+Display:wght@500;700&display=swap"
rel="stylesheet">
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="[Link]
[Link]">
<!-- Your Stylesheet -->
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- HEADER SECTION -->
<header>
<div class="container">
<!--💡UPDATE: Change to name and title-->
<h1>Name</h1>
<p> Storyteller</p>
<div class="social-links">
<!--💡UPDATE: Add your social media links and CV file-->
<a href="[Link] target="_blank" title="LinkedIn"><i
class="fab fa-linkedin"></i></a>
<a href="[Link] target="_blank" title="GitHub"><i class="fab fa-
github"></i></a>
<a href="assets/carols .pdf" download title="Download CV"><i class="fas fa-file-arrow-
down"></i></a>
</div>
</div>
</header>
<!-- NAVIGATION -->
<nav>
<div class="container">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<!-- ABOUT SECTION -->
<section id="about" class="section">
<div class="container">
<h2>About Me</h2>
<div class="about-content">
<!--💡UPDATE: Change the image to own profile photo in images/-->
<img src="images/[Link]" alt="Carolls" class="profile-photo">
<div class="about-text">
<!--💡UPDATE: Write own 'About Me' -->
<p> I am the story teller.</p>
<p> I like storytelling alot😂</p>
</div>
</div>
</div>
</section>
<!-- PROJECTS SECTION -->
<section id="projects" class="section">
<div class="container">
<h2>My Projects</h2>
<div class="projects-grid">
<!--💡UPDATE: Replace this with own project. Add as many as you like!-->
<!-- Project 1 -->
<div class="project-card">
<!--💡UPDATE: Add a preview image of your project to images/ -->
<img src="images/Screenshot 2026-02-27 [Link]" alt="Project One Preview">
<div class="project-card-content">
<h3>Cookies Sales Tracker</h3>
<p>A Cookies Fulfillment and Sales Tracker dashboard that monitors order value,
shipped quantities, and customer data with trends and country-wise sales insights.
Built using Microsoft Power BI with interactive charts and tables.</p>
<div class="project-buttons">
<!--💡UPDATE: Add link to project's code/documentation on GitHub-->
<a href="[GITHUB_PROJECT_URL]" target="_blank"
class="btn">Documentation</a>
<!--💡UPDATE: Add link to live dashboard (e.g., Power BI, Tableau Public)-->
<a href="[LIVE_DASHBOARD_URL]" target="_blank" class="btn btn-
secondary">View Dashboard</a>
</div>
</div>
</div>
<!-- Project 2 -->
<div class="project-card">
<img src="images/biscuits [Link]" alt="Project Two Preview">
<div class="project-card-content">
<h3>Biscuit Sales Dashboard</h3>
<p>Analyzing revenue, expenses, quantity, and profit with detailed trends by month
and day etc, to support business decisions.</p>
<div class="project-buttons">
<a href="[GITHUB_PROJECT_URL]" target="_blank"
class="btn">Documentation</a>
<a href="[LIVE_DASHBOARD_URL]" target="_blank" class="btn btn-
secondary">View Dashboard</a>
</div>
</div>
</div>
<!-- Project 3 -->
<div class="project-card">
<img src="images/Screenshot 2026-01-06 [Link]" alt="Project Three Preview">
<div class="project-card-content">
<h3>Sales Volume 2021-2022</h3>
<p>An interactive dashboard providing key insights into sales trends, top products,
and
regional performance using Power BI and Excel to drive informed business
decisions.</p>
<div class="project-buttons">
<a href="[GITHUB_PROJECT_URL]" target="_blank"
class="btn">Documentation</a>
<a href="[LIVE_DASHBOARD_URL]" target="_blank" class="btn btn-
secondary">View Dashboard</a>
</div>
</div>
</div>
<!-- Project 4 -->
<div class="project-card">
<img src="images/sales and [Link]" alt="Project Four Preview">
<div class="project-card-content">
<h3>ABZ Sales and Profit Report</h3>
<p>An interactive Sales and Profit Dashboard that tracks revenue, profit, and trends
to support data-driven decisions.
Built using Microsoft Excel with charts, pivot tables, and slicers..</p>
<div class="project-buttons">
<a href="[GITHUB_PROJECT_URL]" target="_blank"
class="btn">Documentation</a>
<a href="[LIVE_DASHBOARD_URL]" target="_blank" class="btn btn-
secondary">View Dashboard</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SKILLS SECTION -->
<section id="skills" class="section">
<div class="container">
<h2>Technical Skillset</h2>
<div class="skills-table">
<!--💡UPDATE: Customize your skills in each category-->
<!-- Column 1: Data Visualization -->
<div class="skill-column">
<div class="skill-header">
<i class="fas fa-chart-pie"></i>
<h3>Data Visualization</h3>
</div>
<ul class="skill-list">
<li>Power BI</li>
<li>R Programming</li>
<li>Excel Dashboards</li>
</ul>
</div>
<!-- Column 2: Data Analysis -->
<div class="skill-column">
<div class="skill-header">
<i class="fas fa-search-plus"></i>
<h3>Data Analysis</h3>
</div>
<ul class="skill-list">
<li>SQL</li>
<li>Advanced Excel</li>
<li>Google Sheets</li>
</ul>
</div>
<!-- Column 3: Data Modeling & ETL -->
<div class="skill-column">
<div class="skill-header">
<i class="fas fa-cogs"></i>
<h3>Data Modeling and ETL</h3>
</div>
<ul class="skill-list">
<li>Power Query (M)</li>
<li>DAX</li>
<li>Star Schema Design</li>
<li>ETL Processes</li>
</ul>
</div>
</div>
</div>
</section>
<!-- CONTACT FORM SECTION -->
<section id="contact" class="section">
<div class="container">
<h2>Send me a message</h2>
<!--💡UPDATE: Go to [Link] and replace the email with own-->
<form action="[Link] method="POST"
class="contact-form">
<p> Interested in collaborating or have questions about my work? I'd love to hear from
you!</p>
<!-- Form Fields -->
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Your name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Your email" required>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" name="subject" id="subject" placeholder="Subject" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" id="message" rows="6" placeholder="Your message"
required></textarea>
</div>
<!-- Submit Button -->
<button type="submit" class="btn">Send Message</button>
</form>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="container">
<!--💡UPDATE: Change the year and your name-->
<p>© 2026 carolls. All rights reserved.</p>
</div>
</footer>
<script src="assets/js/[Link]"></script>
</body>
</html>