generated from TryGhost/Starter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.hbs
190 lines (172 loc) · 8.47 KB
/
index.hbs
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
{{!< default}}
<div class="lg:grid lg:grid-cols-12 lg:gap-8 fade-in-point">
<!-- Match tags are used to build the layout that you can select in the backend -->
<div
class="sm:text-center {{#match @custom.homepage_layout "Full Width"}} md:w-full col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 lg:text-center {{/match}} {{#match @custom.homepage_layout "With Video(s)"}} md:max-w-2xl lg:col-span-6 lg:text-left{{/match}} md:mx-auto "
>
<div class="container flex flex-col items-center px-5 py-12 mx-auto md:flex-row">
<div class="flex flex-col items-center mb-16 text-center lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 md:items-start md:text-left md:mb-0">
<h1 class="mb-4 text-3xl font-extrabold text-white sm:text-4xl">
{{@custom.homepage_text}}
</h1>
<p class="mb-8 leading-relaxed">
{{{@custom.homepage_text_with_html}}}
</p>
</div>
<div class="w-2/5 lg:w-2/5 md:w-2/5 sm:w-1/2">
<img class="object-cover object-center rounded " alt="hero" src="{{#if @site.cover_image}}{{@site.cover_image}}{{else}}{{asset 'images/default.jpg'}}{{/if}}">
</div>
</div>
<div class="px-5 py-12 mx-auto fade-in-point">
<div class="mb-20 text-center">
<h1 class="mb-4 text-2xl font-bold text-center text-white sm:text-3xl">Who am I?</h1>
<p class="mx-auto text-base leading-relaxed xl:w-2/4 lg:w-3/4">Dive deep into the journey of Alessandro: a fusion of software developer prowess, content creation expertise, and a passion for sharing insights. Explore the essence behind Nexus Nook and the mind that powers its innovation.</p>
</div>
<div class="flex flex-wrap -mx-2 lg:w-4/5 sm:mx-auto sm:mb-2">
<div class="w-full p-2 sm:w-1/2 fade-in-point ">
<div class="flex items-center h-full p-4 border-2 border-solid rounded border-graySecondary">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="flex-shrink-0 w-6 h-6 mr-4 text-primary" viewBox="0 0 24 24">
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
<path d="M22 4L12 14.01l-3-3"></path>
</svg>
<span class="font-medium text-white title-font">Laravel Mastery</span>
</div>
</div>
<div class="w-full p-2 sm:w-1/2 fade-in-point">
<div class="flex items-center h-full p-4 border-2 border-solid rounded border-graySecondary">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="flex-shrink-0 w-6 h-6 mr-4 text-primary" viewBox="0 0 24 24">
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
<path d="M22 4L12 14.01l-3-3"></path>
</svg>
<span class="font-medium text-white title-font">PHP & Python</span>
</div>
</div>
<div class="w-full p-2 sm:w-1/2 fade-in-point">
<div class="flex items-center h-full p-4 border-2 border-solid rounded border-graySecondary">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="flex-shrink-0 w-6 h-6 mr-4 text-primary" viewBox="0 0 24 24">
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
<path d="M22 4L12 14.01l-3-3"></path>
</svg>
<span class="font-medium text-white title-font">Javascript & VueJS Expertise</span>
</div>
</div>
<div class="w-full p-2 sm:w-1/2 fade-in-point">
<div class="flex items-center h-full p-4 border-2 border-solid rounded border-graySecondary">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="flex-shrink-0 w-6 h-6 mr-4 text-primary" viewBox="0 0 24 24">
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
<path d="M22 4L12 14.01l-3-3"></path>
</svg>
<span class="font-medium text-white title-font">Server Management</span>
</div>
</div>
<div class="w-full p-2 sm:w-1/2 fade-in-point">
<div class="flex items-center h-full p-4 border-2 border-solid rounded border-graySecondary">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="flex-shrink-0 w-6 h-6 mr-4 text-primary" viewBox="0 0 24 24">
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
<path d="M22 4L12 14.01l-3-3"></path>
</svg>
<span class="font-medium text-white title-font">Research-Driven approach</span>
</div>
</div>
<div class="w-full p-2 sm:w-1/2 fade-in-point">
<div class="flex items-center h-full p-4 border-2 border-solid rounded border-graySecondary">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" class="flex-shrink-0 w-6 h-6 mr-4 text-primary" viewBox="0 0 24 24">
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"></path>
<path d="M22 4L12 14.01l-3-3"></path>
</svg>
<span class="font-medium text-white title-font">Full-Stack Development</span>
</div>
</div>
</div>
</div>
<div class="fade-in-point">
{{> subscribe}}
</div>
{{#if @custom.featured_posts_in_homepage}}
{{> featured}}
{{/if}}
</div>
</div>
{{#match @custom.homepage_layout "With Video(s)"}}
<div
class="relative mt-2 md:mt-12 sm:max-w-lg sm:mx-auto lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center"
>
<div class="relative w-full mx-auto rounded-lg">
{{#if @custom.youtube_video_1_id}}
<div class="mb-4">
<div class="youtube-player" class="" data-id="{{@custom.youtube_video_1_id}}"></div>
</div>
{{/if}}
{{#if @custom.youtube_video_2_id}}
<div class="youtube-player" class="" data-id="{{@custom.youtube_video_2_id}}"></div>
{{/if}}
</div>
</div>
</div>
{{#if @custom.featured_posts_in_homepage}}
{{> featured}}
{{/if}}
{{/match}}
<script>
document.addEventListener("DOMContentLoaded", function () {
const fadeInPoints = document.querySelectorAll(".fade-in-point");
console.log(fadeInPoints);
const options = {
rootMargin: "-100px 0px -70px 0px",
threshold: 0,
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// Fade in when entering viewport
entry.target.style.opacity = "1";
entry.target.style.transform = "translateY(0)";
} else {
// Fade out when exiting viewport
entry.target.style.opacity = "0";
entry.target.style.transform = "translateY(20px)";
}
});
}, options);
fadeInPoints.forEach((point) => {
observer.observe(point);
});
});
// functions to use the thumbnail as image and not load the whole YouTube video when loading the webpage
function labnolIframe(div) {
var iframe = document.createElement('iframe');
iframe.setAttribute(
'src',
'https://www.youtube.com/embed/' + div.dataset.id + '?autoplay=1&rel=0'
);
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allowfullscreen', '1');
iframe.setAttribute(
'allow',
'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
);
div.parentNode.replaceChild(iframe, div);
}
function initYouTubeVideos() {
var playerElements = document.getElementsByClassName('youtube-player');
for (var n = 0; n < playerElements.length; n++) {
var videoId = playerElements[n].dataset.id;
var div = document.createElement('div');
div.setAttribute('data-id', videoId);
var thumbNode = document.createElement('img');
thumbNode.src = '//i.ytimg.com/vi/ID/hqdefault.jpg'.replace(
'ID',
videoId
);
div.appendChild(thumbNode);
var playButton = document.createElement('div');
playButton.setAttribute('class', 'play');
div.appendChild(playButton);
div.onclick = function () {
labnolIframe(this);
};
playerElements[n].appendChild(div);
}
}
document.addEventListener('DOMContentLoaded', initYouTubeVideos);
</script>