Skip to content

Commit a211abd

Browse files
RSTZZZRSTZZZ
committed
Updating splash-art to have the particle effect
1 parent 040865a commit a211abd

File tree

9 files changed

+245
-12
lines changed

9 files changed

+245
-12
lines changed

‎_includes/head/custom.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,4 +125,8 @@
125125
}
126126
</style>
127127

128-
{% endif %}
128+
{% endif %}
129+
130+
<!-- particles.js -->
131+
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
132+
<script src="/assets/js/particles-config.js"></script>

‎_includes/page__hero_particles.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{% if page.header.overlay_color or page.header.overlay_image %}
2+
{% capture overlay_style %}
3+
{% if page.header.overlay_image %}
4+
background-image: {% if page.header.overlay_filter %}{{ page.header.overlay_filter }},{% endif %}url('{{
5+
page.header.overlay_image | relative_url }}');
6+
background-position: center;
7+
background-size: cover;
8+
{% endif %}
9+
{% endcapture %}
10+
<div class="page__hero--overlay">
11+
12+
<div id="particles-js"></div>
13+
14+
15+
<div class="wrapper">
16+
<div class="page__title-container">
17+
{% if page.title %}
18+
<h1 class="page__title" itemprop="headline">
19+
{{ page.title | markdownify | remove: "<p>" | remove: "</p>" }}
20+
</h1>
21+
<div class="title-line"></div>
22+
{% endif %}
23+
{% if page.excerpt %}
24+
<p class="page__lead">{{ page.excerpt | markdownify | remove: "
25+
<p>" | remove: "</p>" }}</p>
26+
{% endif %}
27+
</div>
28+
<div class="page_overlay_image" style="{{ overlay_style | strip }}">
29+
</div>
30+
</div>
31+
</div>
32+
{% endif %}

‎_layouts/splash.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
layout: default
3+
---
4+
5+
{% if page.header.overlay_image %}
6+
{% include page__hero_particles.html %}
7+
{% endif %}
8+
9+
<div id="main" role="main">
10+
<article class="splash" itemscope itemtype="https://schema.org/CreativeWork">
11+
{% if page.title %}
12+
<meta itemprop="headline" content="{{ page.title | markdownify | strip_html | strip_newlines | escape_once }}">
13+
{% endif %}
14+
{% if page.excerpt %}
15+
<meta itemprop="description"
16+
content="{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
17+
{% if page.date %}
18+
<meta itemprop="datePublished" content="{{ page.date | date_to_xmlschema }}">{% endif %}
19+
{% if page.last_modified_at %}
20+
<meta itemprop="dateModified" content="{{ page.last_modified_at | date_to_xmlschema }}">{% endif %}
21+
22+
<section class="page__content" itemprop="text">
23+
{{ content }}
24+
</section>
25+
</article>
26+
</div>

‎_pages/home.md‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ permalink: /
33
title: " "
44
layout: splash
55
header:
6-
overlay_filter: rgba(221, 0, 118, 0.3)
76
overlay_image: /assets/images/trottier.webp
7+
overlay_filter: linear-gradient(rgba(255, 255, 255, 0.3), rgba(221, 0, 118, 0.3))
88
actions:
99
- label: "GitHub"
1010
url: "https://github.com/ComplexData-MILA"
@@ -25,9 +25,6 @@ row_research:
2525
excerpt: "We work on various topics and present our works in ML and NLP conferences and journals."
2626

2727
---
28-
{% comment %}
29-
Based on: <https://raw.githubusercontent.com/mmistakes/minimal-mistakes/master/docs/_pages/splash-page.md>
30-
{% endcomment %}
3128

3229
{% include research-directions.html category="research-directions"%}
3330

‎_research_directions/temporal-graph-learning.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ layout: splash
44
category: research-directions
55
order: 1
66
header:
7-
overlay_filter: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 1))
87
overlay_image: /assets/images/research_directions/temporal-graph-learning/banner.webp
8+
overlay_filter: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 1))
99
one-liner: "How can we advance machine learning methods to more effectively model and predict dynamic real-world networks and relationships within these time-evolving graphs?"
1010
excerpt: "Our team comprises experts in AI, data mining, social science, and public health, dedicated to advancing the analysis, prediction, and understanding of dynamic networks. We specialize in developing innovative models and creating realistic, robust benchmarks for state-of-the-art models and real-world applications of temporal graphs. Our work encompasses areas such as recommendation systems, fraud detection, disease modeling, and more."
1111

‎_sass/custom/particles.scss‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
.page__hero--overlay {
2+
position: relative;
3+
padding: 5em 1em 0 1em;
4+
clear: both;
5+
-webkit-animation: intro 0.3s both;
6+
animation: intro 0.3s both;
7+
-webkit-animation-delay: 0.25s;
8+
animation-delay: 0.25s;
9+
overflow: hidden;
10+
min-height: 400px;
11+
12+
&:before {
13+
content: '';
14+
position: absolute;
15+
top: 0;
16+
right: 0;
17+
bottom: 0;
18+
left: 0;
19+
opacity: 1;
20+
}
21+
22+
#particles-js {
23+
position: absolute;
24+
width: 100%;
25+
height: 95%;
26+
top: 0;
27+
left: 0;
28+
z-index: 1;
29+
background-color: #FAF9F6 !important;
30+
}
31+
32+
.wrapper {
33+
position: relative;
34+
z-index: 2;
35+
display: grid;
36+
grid-template-columns: 1fr 1fr;
37+
gap: 2em;
38+
align-items: center;
39+
width: 100%;
40+
max-width: 1200px;
41+
margin: 0 auto;
42+
43+
@media (min-width: 80em) {
44+
padding: 3em;
45+
}
46+
}
47+
48+
.page__title-container {
49+
transform: translate3d(0, 0, 0);
50+
opacity: 0;
51+
animation: fadeInUp 0.6s ease forwards;
52+
53+
.title-line {
54+
width: 100px;
55+
height: 4px;
56+
background-color: $primary-color;
57+
margin: 1em 0;
58+
}
59+
}
60+
61+
.page__title {
62+
font-size: $type-size-1;
63+
color: #000;
64+
margin: 0;
65+
line-height: 1.2;
66+
text-shadow: none;
67+
}
68+
69+
.page__lead {
70+
max-width: 100%;
71+
color: #000;
72+
margin-top: 1em;
73+
}
74+
75+
.page_overlay_image {
76+
height: 100%;
77+
min-height: 300px;
78+
}
79+
80+
81+
@media (max-width: 768px) {
82+
.wrapper {
83+
grid-template-columns: 1fr;
84+
text-align: center;
85+
padding: 1.5em;
86+
}
87+
88+
.title-line {
89+
margin: 1em auto;
90+
}
91+
92+
.header-image {
93+
margin-top: 2em;
94+
}
95+
}
96+
}
97+
98+
@keyframes fadeInUp {
99+
from {
100+
opacity: 0;
101+
transform: translate3d(0, 20px, 0);
102+
}
103+
104+
to {
105+
opacity: 1;
106+
transform: translate3d(0, 0, 0);
107+
}
108+
}

‎_sass/minimal-mistakes.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,4 +53,5 @@
5353
@import "custom/team-grid.scss";
5454
@import "custom/logo-grid.scss";
5555
@import "custom/display-highlighted-publications.scss";
56-
@import "custom/breadcrumbs.scss";
56+
@import "custom/breadcrumbs.scss";
57+
@import "custom/particles.scss";

‎assets/css/main-dark.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
1-
---
2-
# Keep this header for Jekyll to generate this as CSS
3-
---
4-
51
/*
62
In dark mode, used to replace: https://github.com/mmistakes/minimal-mistakes/blob/master/assets/css/main.scss
73
Source: https://github.com/mmistakes/minimal-mistakes/discussions/2033#discussioncomment-257421
84
*/
95

10-
@import "skins/dark.scss"; // Imports the light skin
6+
@import "skins/dark.scss"; // Imports the light skin
117
@import "minimal-mistakes"; // main partials

‎assets/js/particles-config.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
document.addEventListener('DOMContentLoaded', function() {
2+
particlesJS('particles-js', {
3+
"particles": {
4+
"number": {
5+
"value": 80,
6+
"density": {
7+
"enable": true,
8+
"value_area": 800
9+
}
10+
},
11+
"color": {
12+
"value": "#000000"
13+
},
14+
"shape": {
15+
"type": "circle"
16+
},
17+
"opacity": {
18+
"value": 0.6,
19+
"random": false
20+
},
21+
"size": {
22+
"value": 3,
23+
"random": true
24+
},
25+
"line_linked": {
26+
"enable": true,
27+
"distance": 150,
28+
"color": "#000000",
29+
"opacity": 0.4,
30+
"width": 1
31+
},
32+
"move": {
33+
"enable": true,
34+
"speed": 2,
35+
"direction": "none",
36+
"random": false,
37+
"straight": false,
38+
"out_mode": "out",
39+
"bounce": false
40+
}
41+
},
42+
"interactivity": {
43+
"detect_on": "canvas",
44+
"events": {
45+
"onhover": {
46+
"enable": true,
47+
"mode": "grab"
48+
},
49+
"onclick": {
50+
"enable": true,
51+
"mode": "push"
52+
},
53+
"resize": true
54+
},
55+
"modes": {
56+
"grab": {
57+
"distance": 140,
58+
"line_linked": {
59+
"opacity": 1
60+
}
61+
},
62+
"push": {
63+
"particles_nb": 4
64+
}
65+
}
66+
},
67+
"retina_detect": true
68+
});
69+
});

0 commit comments

Comments
 (0)