Skip to content

Commit 0fadb01

Browse files
schubert-daschubert-da
committed
added kaggle 22 section
1 parent 91081d4 commit 0fadb01

File tree

4 files changed

+153
-6
lines changed

4 files changed

+153
-6
lines changed

‎src/components/works-section/WorksSection.svelte

+7-4
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
1111
import WorksUndp from './works/WorksUNDP.svelte';
1212
import WorksSummit from "./works/WorksSummit.svelte";
13+
import WorksKaggle22 from './works/WorksKaggle22.svelte';
1314
1415
let index, offset, progress;
1516
</script>
@@ -25,12 +26,14 @@
2526
<div slot="foreground">
2627
<WorksSummit index={0} scrollInfo={{index, offset, progress}}/>
2728
<WorksUndp index={1} scrollInfo={{index, offset, progress}}/>
29+
<WorksKaggle22 index={2} scrollInfo={{index, offset, progress}}/>
2830
</div>
29-
</Scroller>
30-
<Summit />
31-
<Undp />
31+
</Scroller>
32+
33+
<!-- <Summit /> -->
34+
<!-- <Undp /> -->
3235
<B2P />
33-
<Kaggle22 />
36+
<!-- <Kaggle22 /> -->
3437
<!-- <Kaggle /> -->
3538
</div>
3639

‎src/components/works-section/works/WorksKaggle22.svelte

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<script>
2+
export let index = 0;
3+
export let scrollInfo;
4+
5+
function computeImageScroll( start, scrollSpeed, currentIndex, reverse = false ) {
6+
if(index !== currentIndex || scrollInfo.offset <= 0) {
7+
return start;
8+
}
9+
else {
10+
let reverseMultiplier = reverse === false ? 1: -1;
11+
return start - scrollInfo.offset * scrollSpeed * reverseMultiplier;
12+
}
13+
}
14+
15+
let hideBodySection = true;
16+
17+
function toggleBodySection(){
18+
hideBodySection = !hideBodySection;
19+
}
20+
21+
</script>
22+
<div
23+
id="project-container-{index}"
24+
class="work-container--redesign"
25+
class:active={index === scrollInfo.index}
26+
>
27+
<div class="work-header" on:click={()=> toggleBodySection()}>
28+
<div class="image-container">
29+
<div class="image-track image-track-1">
30+
<img
31+
src="/projects/Kaggle22/line-chart.png"
32+
alt="stacked bar charts for UNDP project"
33+
style="transform: translate(-40%, {computeImageScroll( 150, 300, scrollInfo.index)}px);"
34+
/>
35+
</div>
36+
<div class="image-track image-track-2">
37+
<img
38+
src="/projects/Kaggle22/area-bi.png"
39+
alt="tile chart for UNDP project"
40+
style="transform: translate(-34%, {computeImageScroll( -400, 300, scrollInfo.index, true)}px);"
41+
/>
42+
</div>
43+
</div>
44+
45+
<div class="text-container">
46+
<div class="title">
47+
<h2>State of Low-Code in Data</h2>
48+
</div>
49+
<div class="subtitle">
50+
Winning entry for the Kaggle Machine Learning and Data Science
51+
Survey 2022 competition, where I looked at how data professionals
52+
were using low-code tools to quickly build and deploy data
53+
pipelines without the need for complex code.
54+
</div>
55+
</div>
56+
</div>
57+
58+
{#if hideBodySection === false}
59+
<div class="work-body">
60+
61+
<div class="body-section">
62+
<div class="section-desc">
63+
<a class="site-link"
64+
href="https://schubert-da.github.io/undp/"
65+
target="_blank"
66+
rel="noreferrer">View project</a
67+
>
68+
</div>
69+
</div>
70+
71+
<div class="body-section">
72+
<div class="section-title">
73+
<h2>BRIEF</h2>
74+
</div>
75+
<div class="section-desc">
76+
For my Kaggle ML and DS Survey 2022 submission, I looked at
77+
how data professionals were using low-code tools to quickly
78+
build and deploy data pipelines without the need for complex
79+
code.
80+
</div>
81+
</div>
82+
83+
<div class="body-section">
84+
<div class="section-title">
85+
<h2>MY APPROACH</h2>
86+
</div>
87+
<div class="section-desc">
88+
This competition entry won a runner-up spot in the
89+
competition. It used data from various low-code trend
90+
industry reports as well as Kaggle survey data to look into
91+
the usage of these tools.
92+
<br /><br />
93+
94+
</div>
95+
</div>
96+
97+
<div class="body-section">
98+
<img
99+
src="/projects/Kaggle22/table.png"
100+
alt="tile chart for UNDP project"
101+
/>
102+
</div>
103+
104+
<div class="body-section">
105+
<div class="section-title">
106+
<h2>TOOLS</h2>
107+
</div>
108+
<div class="section-desc">
109+
The notebook contains graphs in Python(with Plotly), with
110+
more involved graphs and tables using <strong>Markdown</strong>
111+
+ <strong>CSS</strong>. The graphs created with CSS (eg. the above tables)
112+
were created with HTML elements, inspired by how Svelte uses data to
113+
c
114+
</div>
115+
</div>
116+
</div>
117+
{/if}
118+
</div>
119+
120+
<style lang="scss">
121+
.work-container--redesign {
122+
.image-track-1 {
123+
background-color: #fff;
124+
}
125+
126+
.image-track-2 {
127+
background-color: #fff;
128+
}
129+
}
130+
</style>

‎src/components/works-section/works/WorksSummit.svelte

+7
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,13 @@
102102
</div>
103103
</div>
104104

105+
<div class="body-section">
106+
<img
107+
src="/projects/Summit/summit-bar-chart.png"
108+
alt="bar chart for the world dataviz prize project"
109+
/>
110+
</div>
111+
105112
<div class="body-section">
106113
<div class="section-title">
107114
<h2>TOOLS</h2>

‎src/styles/components.scss

+9-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ div[id^="project-container-"].work-container--redesign {
1919
}
2020
}
2121
}
22-
2322
.work-header {
2423
padding: 25px;
2524
background-color: #fefefe;
@@ -30,13 +29,21 @@ div[id^="project-container-"].work-container--redesign {
3029
flex-direction: row;
3130
justify-content: space-between;
3231
align-items: center;
32+
33+
transition: all 2s ease-in;
3334

3435
cursor: pointer;
3536

3637
box-shadow:
3738
rgba(0, 0, 0, 0.25) 0px 14px 28px,
3839
rgba(0, 0, 0, 0.22) 0px 10px 10px;
3940

41+
transition: background-color 0.2s ease-in-out;
42+
&:hover {
43+
background-color: #f6f6f6;
44+
transform: scale(1.003);
45+
}
46+
4047
.text-container {
4148
width: 30%;
4249

@@ -59,7 +66,7 @@ div[id^="project-container-"].work-container--redesign {
5966
--track-padding: 3px;
6067

6168
height: 70vmin;
62-
border: 1px solid #666;
69+
border: 2px solid #666;
6370
width: calc(50% - var(--track-padding));
6471
overflow: hidden;
6572

0 commit comments

Comments
 (0)