-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdata-analytics-portfolio.html
254 lines (223 loc) · 17 KB
/
data-analytics-portfolio.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<!-- Font Awesome Icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Core Theme CSS (includes Bootstrap) -->
<link href="css/styles.css" rel="stylesheet" />
<!-- Add your SEO JavaScript file -->
<script src="js/seo.js"></script> <!-- Load your seo.js here -->
<title>Guy Orlov | Data Analytics Portfolio</title>
<link href="css/portfolio.css" rel="stylesheet" /> <!-- Link to the new CSS file -->
</head>
<body id="page-top" class="home-page">
<!-- Navigation -->
<div id="navbar-placeholder"></div>
<!-- Page Content -->
<div class="container-fluid p-0">
<section id="portfolio" aria-labelledby="portfolio-title" style="padding: 50px 20px;">
<div class="container text-center">
<h2 id="portfolio-title" class="service-title">Portfolio</h2>
<p class="lead text-muted">Showcasing my work in data analysis, visualisation, and storytelling.</p>
<!-- Tags for filtering projects -->
<div id="tags">
<span class="tag" onclick="filterProjects('powerbi')">Power BI</span>
<span class="tag" onclick="filterProjects('sql')">SQL</span>
<span class="tag" onclick="filterProjects('tableau')">Tableau</span>
<span class="tag" onclick="filterProjects('excel')">Excel</span>
<span class="tag" onclick="filterProjects('figma')">Figma</span>
<span class="tag" onclick="filterProjects('canva')">Canva</span>
<span class="tag" onclick="filterProjects('all')">Show All</span>
</div>
<div class="row justify-content-center" id="project-boxes">
<!-- Project 1 -->
<div class="col-md-4 project powerbi figma">
<div class="service-box">
<img src="img/Project_1.png" alt="Power BI Dashboard showcasing economic inactivity of disabled people" class="img-fluid" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="img/Project_1.png" data-bs-title="Inactivity of Disabled People | POWER BI"/>
<h3 class="modal-title" id="imageModalLabel"></h3>
<p>The dashboard focuses on the economic inactivity of disabled people, providing key insights for educators and training providers.</p>
</div>
</div>
<!-- Project 2 -->
<div class="col-md-4 project tableau">
<div class="service-box">
<img src="img/madmenseries.png" alt="Mad Men Series Tableau Project" class="img-fluid" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="img/madmenseries.png" data-bs-title="Mad Men Series | TABLEAU"/>
<h3 class="modal-title" id="imageModalLabel"></h3>
<p>My first Tableau project, involving data cleaning, Power Query, and dashboard design with Figma.</p>
</div>
</div>
<!-- Project 3 -->
<div class="col-md-4 project powerbi figma">
<div class="service-box">
<img src="img/Project_2.png" alt="Deaf Together Report | POWER BI" class="img-fluid" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="img/Project_2.png" data-bs-title="Deaf Together Report | POWER BI"/>
<h3 class="modal-title" id="imageModalLabel"></h3>
<p>A project for Deaf Together Wales 2023 to highlight the inclusion of deaf people through events and activities.</p>
</div>
</div>
<!-- Project 4 -->
<div class="col-md-4 project powerbi figma">
<div class="service-box">
<img src="img/Project_4.png" alt="LEGO Revenue Analysis | Power BI Dashboard" class="img-fluid" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="img/Project_4.png" data-bs-title="LEGO Revenue Analysis | Power BI Dashboard"/>
<h3 class="modal-title" id="imageModalLabel"></h3>
<p>Explore an engaging Power BI dashboard showcasing LEGO's revenue data. See how LEGO made money over the years with visually compelling insights.</p>
</div>
</div>
<!-- Project 5 -->
<div class="col-md-4 project powerbi figma">
<div class="service-box">
<img src="img/Project_5.png" alt="Mark Chagall | Power BI Dashboard" class="img-fluid" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="img/Project_5.png" data-bs-title="Mark Chagall | Power BI Dashboard" />
<h3 class="modal-title" id="imageModalLabel"></h3>
<p>Discover a Power BI dashboard exploring notable works from Marc Chagall's collection. Dive into his artistry through engaging and interactive data visualisation.</p>
</div>
</div>
<!-- Project 6 -->
<div class="col-md-4 project powerbi figma">
<div class="service-box">
<img src="img/Project_6.png" alt="Ballon d'Or Winners List | Power BI Dashboard" class="img-fluid" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="img/Project_6.png" data-bs-title="Ballon d'Or Winners List | Power BI Dashboard" />
<h3 class="modal-title" id="imageModalLabel"></h3>
<p>Explore a Power BI project showcasing the complete list of Ballon d'Or winners. Dive into the history of football's greatest players with engaging data insights.</p>
</div>
</div>
<!-- Project 7 -->
<div class="col-md-4 project powerbi figma">
<div class="service-box">
<img src="img/Project_13.png" alt="Aston Villa Player Profile | Power BI Dashboard" class="img-fluid" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="img/Project_13.png" data-bs-title="Aston Villa Player Profile | Power BI Dashboard" />
<h3 class="modal-title" id="imageModalLabel"></h3>
<p>Explore detailed player profiles for Aston Villa with a focus on the 2024/2025 season. This interactive Power BI dashboard highlights key player statistics, match performance, and season trends, providing insights into the team's key contributors and their impact throughout the campaign.</p>
</div>
</div>
<!-- Project 8 -->
<div class="col-md-4 project powerbi figma">
<div class="service-box">
<img src="img/Project_16.png" alt="Southgate Records | Power BI Dashboard" class="img-fluid" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="img/Project_16.png" data-bs-title="Southgate Records | Power BI Dashboard" />
<h3 class="modal-title" id="imageModalLabel"></h3>
<p>Discover Gareth Southgate's journey as England manager through an interactive Power BI dashboard. Analyse match statistics, win rates, and key milestones that define his tenure, offering engaging insights into England's performance under his leadership.</p>
</div>
</div>
<!-- Project 9 -->
<div class="col-md-4 project powerbi figma">
<div class="service-box">
<img src="img/project_8.png" alt="Spain Wins 2024 Euro | Power BI Dashboard" class="img-fluid" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="img/project_8.png" data-bs-title="Spain Wins 2024 Euro | Power BI Dashboard" />
<h3 class="modal-title" id="imageModalLabel"></h3>
<p>Celebrate Spain's triumph in the 2024 UEFA European Championship with this interactive Power BI dashboard. Each player profile is displayed in a detailed field tooltip, showcasing key metrics such as player valuation, role, age, and other relevant stats, offering in-depth insights into the squad's performance and contributions throughout the tournament.</p>
</div>
</div>
<!-- Project 10 -->
<div class="col-md-4 project powerbi figma">
<div class="service-box">
<img src="img/Project_10.png" alt="British Sign Language Alphabet | Power BI Dashboard" class="img-fluid" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="img/Project_10.png" data-bs-title="British Sign Language Alphabet | Power BI Dashboard" />
<h3 class="modal-title" id="imageModalLabel"></h3>
<p>Enhance your understanding of British Sign Language (BSL) with this interactive tool that displays each letter of the alphabet in BSL. View before-and-after images to help you learn the handshapes and gestures for each letter, improving your ability to communicate in sign language effectively.</p>
</div>
</div>
<!-- Project 11 -->
<div class="col-md-4 project powerbi figma">
<div class="service-box">
<img src="img/project_7.png" alt="Lazio SS Champions League 1999/2000 | Power BI Dashboard" class="img-fluid" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="img/project_7.png" data-bs-title="Lazio SS Champions League 1999/2000 | Power BI Dashboard" />
<h3 class="modal-title" id="imageModalLabel"></h3>
<p>Relive Lazio SS's memorable 1999/2000 UEFA Champions League campaign with this Panini sticker-style Power BI dashboard. Explore player profiles, match highlights, and key moments from their journey, presented in a fun, collectible sticker style. The interactive design offers a nostalgic and engaging way to celebrate the team's historic season.</p>
</div>
</div>
<!-- Project 12 -->
<div class="col-md-4 project powerbi figma">
<div class="service-box">
<img src="img/Project_17.png" alt="UK & Ireland Euro 2028 Host stadiums | Power BI Dashboard" class="img-fluid" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="img/Project_17.png" data-bs-title="UK & Ireland Euro 2028 Host stadiums | Power BI Dashboard" />
<h3 class="modal-title" id="imageModalLabel"></h3>
<p>This interactive Power BI dashboard provides a comprehensive overview of the UK & Ireland's host stadiums for the Euro 2028 tournament. Featuring detailed insights on each stadium's location, capacity, and historical significance, the dashboard allows users to explore the venues through intuitive charts and maps.</p>
</div>
</div>
<!-- Project 13 -->
<div class="col-md-4 project powerbi figma">
<div class="service-box">
<img src="img/NRCPD.png" alt="NRCPD | Power BI Dashboard" class="img-fluid" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="img/NRCPD.png" data-bs-title="NRCPD | Power BI Dashboard" />
<h3 class="modal-title" id="imageModalLabel"></h3>
<p>This report shows how many complaints have been made to the NRCPD and details the duration and resolution of each case.</p>
</div>
</div>
<!-- Project 14 -->
<div class="col-md-4 project powerbi canva">
<div class="service-box">
<img src="img/Project_18.png" alt="CV | Power BI Dashboard" class="img-fluid" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="img/Project_18.png" data-bs-title="CV | Power BI Dashboard" />
<h3 class="modal-title" id="imageModalLabel"></h3>
<p>CV Dashboard to show my work experience and other sections</p>
</div>
</div>
<!-- Project 15 -->
<div class="col-md-4 project powerbi figma">
<div class="service-box">
<img src="img/Project_19.png" alt="Despicable Me Films| Power BI Dashboard" class="img-fluid" data-bs-toggle="modal" data-bs-target="#imageModal" data-bs-img="img/Project_19.png" data-bs-title="Despicable Me Films | Power BI Dashboard" />
<h3 class="modal-title" id="imageModalLabel"></h3>
<p>Despicable Me Films - Comprehensive Data Across Several Pages for Each Film</p>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Modal for displaying full-size image -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="imageModalLabel">Project</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="" alt="Full-size Image" id="modalImage" class="img-fluid" />
</div>
</div>
</div>
</div>
<!-- JavaScript to update the modal title dynamically -->
<script>
// When an image is clicked
$('#imageModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // The image that was clicked
var title = button.data('bs-title'); // Get the title from the data-bs-title attribute
var imgSrc = button.data('bs-img'); // Get the image source
var modal = $(this);
modal.find('.modal-title').text(title); // Set the modal title
modal.find('#modalImage').attr('src', imgSrc); // Set the image source in the modal
});
</script>
<!-- JavaScript to load the navigation and handle modal -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Load the navigation dynamically from nav.html
fetch('/nav.html')
.then(response => response.text())
.then(data => {
document.getElementById('navbar-placeholder').innerHTML = data;
});
// Bootstrap modal event listener
const imageModal = document.getElementById('imageModal');
imageModal.addEventListener('show.bs.modal', function (event) {
const button = event.relatedTarget; // Button that triggered the modal
const imgSrc = button.getAttribute('data-bs-img'); // Extract info from data-* attributes
const modalImage = imageModal.querySelector('#modalImage');
console.log('Modal Image Source:', imgSrc); // Debugging log
modalImage.src = imgSrc; // Update the modal's content
});
// Function to filter projects based on tag selection
function filterProjects(tag) {
const projects = document.querySelectorAll('.project');
projects.forEach(project => {
if (tag === 'all' || project.classList.contains(tag)) {
project.style.display = 'block';
} else {
project.style.display = 'none';
}
});
}
</script>
</body>
</html>