-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
225 lines (200 loc) · 10.7 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="title" content="Dynamic Portfolio - Feguens">
<meta name="description" content="Dynamic Portfolio, made from Muuri and PhotoSwipe JavaScript libraries. It's a dynamic gallery or content viewer with sorting and many other options.">
<meta name="keywords" content="dynamic portfolio, gallery, portfolio, javascript, muuri, photoswipe, js, feguens, poitevien">
<meta name="robots" content="index, follow">
<meta name="language" content="English">
<meta name="author" content="Feguens Poitevien">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel="manifest" href="img/favicon/site.webmanifest">
<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://dynamic-portfolio.pages.dev/">
<meta property="og:title" content="Dynamic Portfolio - Feguens">
<meta property="og:description" content="Dynamic Portfolio, made from Muuri and PhotoSwipe JavaScript libraries. It's a dynamic gallery or content viewer with sorting and many other options.">
<meta property="og:image" content="https://dynamic-portfolio.pages.dev/img/og-picture.jpg">
<!-- Open Graph / Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://dynamic-portfolio.pages.dev/">
<meta property="twitter:title" content="Dynamic Portfolio - Feguens">
<meta property="twitter:description" content="Dynamic Portfolio, made from Muuri and PhotoSwipe JavaScript libraries. It's a dynamic gallery or content viewer with sorting and many other options.">
<meta property="twitter:image" content="https://dynamic-portfolio.pages.dev/img/og-picture.jpg">
<title>Dynamic Portfolio - Feguens</title>
<link rel="stylesheet" href="css/plugins.styles.css">
<link rel="stylesheet" href="css/main.styles.css">
<link rel="icon" type="image/x-icon" href="img/favicon/favicon.ico">
</head>
<body>
<div class="github-icon">
<a href="https://github.com/feguino/dynamic-portfolio" target="_blank" rel="noopener" title="GitHub Repository">
<img src="./img/github.png" alt="Fork me on GitHub">
</a>
</div>
<div class="container">
<div class="row">
<div class="gallery-header">
<h1 class="header-title">Dynamic Portfolio</h1>
<p class="header-description">My name is Feguens, I'm a computer engineer and web developer. <br>
<span class="">This project is a dymanic portfolio that can be integrated in any website and will work across any browser, made with 2 amazing javascript libraries: Muuri and Photoswipe</span></p>
</div>
<div class="gallery-search">
<form action="">
<input type="text" class="gallery-search-bar" placeholder="Search pictures...">
</form>
</div>
<div class="gallery-filters">
<button type="button" class="filter-button active">All</button>
<button type="button" class="filter-button">People</button>
<button type="button" class="filter-button">Cities</button>
<button type="button" class="filter-button">Nature</button>
<button type="button" class="filter-button">Animals</button>
<button type="button" class="filter-button">Technology</button>
</div>
<div class="gallery-grid">
<figure class="item" data-tag="mountains rivers nature trees" data-category="nature">
<a class="gallery-item" href="img/img-2400.jpg" data-pswp-width="1875" data-pswp-height="2500" target="_blank" rel="noopener">
<div class="img-content">
<img class="gallery-img" src="img/img-2400.jpg" alt="Picture 1"/>
<div class="overlay"></div>
</div>
<figcaption class="hidden-caption-content">
<p>Picture 1</p>
<small>This is a beautiful lake.</small>
</figcaption>
</a>
</figure>
<figure class="item" data-tag="black white green grass panda" data-category="animals">
<a class="gallery-item" href="img/img-2500.jpg" data-pswp-width="1920" data-pswp-height="1200" target="_blank" rel="noopener">
<div class="img-content">
<img class="gallery-img" src="img/img-2500.jpg" alt="Picture 2" />
<div class="overlay"></div>
</div>
<figcaption class="hidden-caption-content">
<p>Picture 2</p>
<small>A nice forest found in internet.</small>
</figcaption>
</a>
</figure>
<figure class="item" data-tag="clouds sky heaven grass people mountains" data-category="nature">
<a class="gallery-item" href="img/img-2600.jpg" data-pswp-width="2500" data-pswp-height="1666" target="_blank" rel="noopener">
<div class="img-content">
<img class="gallery-img" src="img/img-2600.jpg" alt="Picture 3"/>
<div class="overlay"></div>
</div>
<figcaption class="hidden-caption-content">
<p>Picture 3</p>
<small>An amazing mountain range.</small>
</figcaption>
</a>
</figure>
<figure class="item" data-tag="computer phone iphone laptop coffee headphones watch technology" data-category="people technology">
<a class="gallery-item" href="img/graphic-design-1.jpg" data-pswp-width="2475" data-pswp-height="2475" target="_blank" rel="noopener">
<div class="img-content">
<img class="gallery-img" src="img/graphic-design-1.jpg" alt="Picture 4">
<div class="overlay"></div>
</div>
<figcaption class="hidden-caption-content">
<p>Picture 4</p>
<small>Working on designing and creating multimedia components.</small>
</figcaption>
</a>
</figure>
<figure class="item" data-tag="tecnology coding web developer computer" data-category="technology">
<a class="gallery-item" href="img/web-dev-2.jpg" data-pswp-width="1280" data-pswp-height="854" target="_blank" rel="noopener">
<div class="img-content">
<img class="gallery-img" src="img/web-dev-2.jpg" alt="Picture 5">
<div class="overlay"></div>
</div>
<figcaption class="hidden-caption-content">
<p>Picture 5</p>
<small>Working on web development and coding software</small>
</figcaption>
</a>
</figure>
<figure class="item" data-tag="man people photography nature trees mountains" data-category="people nature">
<a class="gallery-item" href="img/photography-3.jpg" data-pswp-width="1280" data-pswp-height="854" target="_blank" rel="noopener">
<div class="img-content">
<img class="gallery-img" src="img/photography-3.jpg"" alt="Picture 6">
<div class="overlay"></div>
</div>
<figcaption class="hidden-caption-content">
<p>Picture 6</p>
<small>Nothing better than being in the nature.</small>
</figcaption>
</a>
</figure>
<figure class="item" data-tag="people woman photograph" data-category="people">
<a class="gallery-item" href="img/photography-1.jpg" data-pswp-width="1280" data-pswp-height="854" target="_blank" rel="noopener">
<div class="img-content">
<img class="gallery-img" src="img/photography-1.jpg" alt="Picture 7">
<div class="overlay"></div>
</div>
<figcaption class="hidden-caption-content">
<p>Picture 7</p>
<small>A woman taking her best shot.</small>
</figcaption>
</a>
</figure>
<figure class="item" data-tag="web technology computer" data-category="technology">
<a class="gallery-item" href="img/web-dev-4.jpeg" data-pswp-width="2000" data-pswp-height="1333" target="_blank" rel="noopener">
<div class="img-content">
<img class="gallery-img" src="img/web-dev-4.jpeg" alt="Picture 8">
<div class="overlay"></div>
</div>
<figcaption class="hidden-caption-content">
<p>Picture 8</p>
<small>Coding is even easier than walking.</small>
</figcaption>
</a>
</figure>
<figure class="item" data-tag="city car buildings" data-category="cities">
<a class="gallery-item" href="img/logo-1.jpg" data-pswp-width="1920" data-pswp-height="1080" target="_blank" rel="noopener">
<div class="img-content">
<img class="gallery-img" src="img/logo-1.jpg" alt="Picture 9">
<div class="overlay"></div>
</div>
<figcaption class="hidden-caption-content">
<p>Picture 9</p>
<small>The look of a beautiful city at night.</small>
</figcaption>
</a>
</figure>
</div>
</div>
</div>
<!--
<figure class="item" data-tag="" data-category="">
<a class="gallery-item" href="" data-pswp-width="" data-pswp-height="" target="_blank" rel="noopener">
<div class="img-content">
<img class="gallery-img" src="" alt="">
<div class="overlay"></div>
</div>
<figcaption class="hidden-caption-content">
<p></p>
<small></small>
</figcaption>
</a>
</figure>
-->
<footer class="container">
<div class="row">
<div class="footer-content">
<p>Designed with <span style="color:red">❤</span> by <a href="https://github.com/feguino" target="_blank" rel="noopener">Feguens Poitevien</a></p>
<small>Copyright © October 2022 | All Rights Reserved.</small>
</div>
</div>
</footer>
<script src="js/plugins.min.js"></script>
<script src="js/main.script.js"></script>
</body>
</html>