-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.php
233 lines (208 loc) · 11.8 KB
/
index.php
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
<?php
include_once($_SERVER["DOCUMENT_ROOT"] . "/src/bootstrap.php");
$site = Site::get();
$page = Page::get();
$headDescription = "Portfolio of Jahidul Pabel Islam, a Full Stack Developer in Web & Software based at Bognor Regis, West Sussex down in the South Coast of England.";
$pageData = [
"headDescription" => $headDescription,
"headerTitle" => "Jahidul Pabel Islam",
"headerDescription" => "Full Stack Developer",
];
$page->addPageData($pageData);
$page->renderHTMLHead();
$page->renderNav();
$page->renderHeader();
// Work out the time since I started to today
$yearsSinceStarted = getTimeDifference($site->getDateStarted(), getNowDateTime(), "%r%y");
?>
<section>
<div class="row home-hello">
<div class="container">
<h3 class="home-hello__text"><span class="home-hello__hello">Hello</span> there everyone!</h3>
<img class="home-hello__image" src="<?php echoWithAssetVersion("/assets/images/jahidul-pabel-islam-smart.jpg"); ?>" alt="Jahidul Pabel Islam Graduating" />
<img class="home-hello__image home-hello__logo" src="<?php echoWithAssetVersion("/assets/images/logos/jpi-inverted.png"); ?>" alt="Jahidul Pabel Islam's Logo" />
</div>
</div>
<div class="row home-intro">
<div class="container">
<p>Welcome to my portfolio, thanks for clicking on my website!</p>
</div>
</div>
<div class="row">
<div class="container">
<p>Most of my drive and passion lives in developing all kinds of software from websites to applications.</p>
<p>Always looking into new or upcoming languages and frameworks to learn how to improve ongoing projects while also expanding my knowledge.</p>
<p>
Currently working as a Web Developer at
<a class="link" href="https://d3r.com/" title="Link to D3R website." target="_blank" rel="noopener noreferrer">D3R</a>.
</p>
<p>
Reside in
<a class="link" href="https://goo.gl/maps/KEJgpYCxm6x" title="Link to map of Bognor Regis." target="_blank" rel="noopener noreferrer">West Sussex</a>, down in the south coast of England.
</p>
</div>
</div>
<div class="row">
<div class="container">
<p>
Here you will be able to look at all the <a class="link" href="<?php $site->echoURL("projects"); ?>">work</a>
I have completed over the last <?php echo $yearsSinceStarted; ?> years, <a class="link" href="<?php $site->echoURL("about"); ?>">learn about me</a> also
<a class="link" href="<?php $site->echoURL("contact"); ?>">contact me</a> for any enquiries or to just provide feedback.
</p>
<p>So, have a look around my ever-evolving portfolio, as I'm always looking to find different ways to improve my site by experimenting with new technologies and ideas here.</p>
</div>
</div>
</section>
<section class="row row--orange">
<div class="container">
<div class="workflow">
<?php
$workflowItems = [
[
"heading" => "Design",
"icon" => "design-icon.png",
"imageAlt" => "A image of a paintbrush on a desktop computer",
"description" => "<p>
My work only starts after the designer hands over finished designs.<br />
I mainly work from PSD's or flat image files designs.<br />
This is where I turn designs into pixel perfect sites/apps.
</p>",
],
[
"heading" => "Responsive",
"icon" => "responsive-icon.png",
"imageAlt" => "A image of various sized devices: Desktop computer, tablet & mobile phone",
"description" => "<p>
Aim to make all sites/apps usable on many different sized devices.<br />
By approach the styling form a mobile first point of view
</p>",
],
[
"heading" => "Code",
"icon" => "code-icon.png",
"imageAlt" => "A image showing code",
"description" => "<p>
I tend to develop custom and bespoke systems.<br />
But if the project requires I can use various frameworks or libraries to fulfill the necessary product.
</p>",
],
];
foreach ($workflowItems as $workflowItem) {
?>
<div class="workflow__item">
<h3 class="row__heading"><?php echo $workflowItem["heading"]; ?></h3>
<img class="workflow__image" src="<?php echoWithAssetVersion("/assets/images/" . $workflowItem["icon"]); ?>" alt="<?php echo $workflowItem["imageAlt"]; ?>" />
<div class="workflow__description">
<?php echo $workflowItem["description"]; ?>
</div>
</div>
<?php
}
?>
</div>
</div>
</section>
<section class="row latest-projects">
<h3 class="row__heading">Latest Projects</h3>
<i class="latest-projects__loading fas fa-spinner fa-spin fa-3x"></i>
<div class="slide-show latest-projects__slide-show" id="latest-projects">
<div class="slide-show__viewport">
<button type="button" class="slide-show__nav" data-slide-show-id="#latest-projects" data-direction="previous" data-colour="">
<span class="screen-reader-text">Navigate to the previous slide/image.</span>
<?php renderFile("/assets/images/previous.svg"); ?>
</button>
<div class="slide-show__slides" data-slide-show-id="#latest-projects"></div>
<button type="button" class="slide-show__nav" data-slide-show-id="#latest-projects" data-direction="next" data-colour="">
<span class="screen-reader-text">Navigate to the next slide/image.</span>
<?php renderFile("/assets/images/next.svg"); ?>
</button>
</div>
<div class="slide-show__bullets"></div>
</div>
<p class="feedback feedback--error latest-projects__error"></p>
<a class="button" href="<?php $site->echoURL("projects"); ?>">View More Work</a>
</section>
<section class="row row--dark-green">
<div class="container">
<div class="stats js-counters">
<?php
$baseSpeed = 1600;
$counts = (new File("/assets/counters.json"))->getArray();
$counterItems = [
[
"text" => "Years experience",
"number" => $yearsSinceStarted,
"speed" => $baseSpeed,
],
[
"text" => "Projects",
"number" => $counts["projects"] ?? 60,
"speed" => $baseSpeed + 600,
],
[
"text" => "Commits",
"number" => $counts["commits"] ?? 8500,
"speed" => $baseSpeed + 1000,
],
];
foreach ($counterItems as $counterItem) {
?>
<div class="stats__item">
<p class="row__heading stats__heading js-counter" data-to="<?php echo $counterItem["number"]; ?>" data-speed="<?php echo $counterItem["speed"]; ?>">
<?php echo $counterItem["number"]; ?>
</p>
<p class="stats__text"><?php echo $counterItem["text"]; ?></p>
</div>
<?php
}
?>
<div class="stats__item">
<p class="row__heading stats__heading js-seconds-on-site" data-current-second="0">0</p>
<p class="stats__text">Seconds on here</p>
</div>
</div>
</div>
</section>
<?php
$page->addJSTemplate(
"slide",
<<<HTML
<div class="slide-show__slide latest-project" id="slide-{{ id }}" data-slide-colour="{{ colour }}">
<img class="slide-show__image latest-project__image" src="{{ images.0.url }}" alt="Screen shot of {{ name }} Project" />
<div class="latest-project__info">
<div class="latest-project__info-content latest-project__info-content--{{ colour }}">
<div class="latest-project__header">
<h4 class="latest-project__title">{{ name }}</h4>
<time class="latest-project__date">{{ date }}</time>
</div>
<div class="latest-project__description">{{ short_description }}</div>
<div class="latest-project__links"></div>
</div>
</div>
</div>
HTML
);
$page->addJSTemplate(
"slide-bullet",
<<<HTML
<button type="button" class="slide-show__bullet slide-show__bullet--{{ colour }}" data-slide-show-id="#latest-projects" data-slide-id="#slide-{{ id }}">
</button>
HTML
);
$page->addJSGlobal("config", "projectsPerPage", 3);
$page->addJSGlobal("config", "jpiAPIEndpoint", \JPI\Utils\URL::removeTrailingSlash($site::getAPIEndpoint()));
$similarLinks = [
[
"title" => "Projects",
"url" => "projects",
"text" => "View My Work",
"colour" => "purple",
],
[
"title" => "About",
"url" => "about",
"text" => "Learn About Me",
"colour" => "red",
],
];
$page->renderFooter($similarLinks);