-
Notifications
You must be signed in to change notification settings - Fork 0
/
art.html
296 lines (272 loc) · 17.3 KB
/
art.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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basel Shbita - Art</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/styles.css" rel="stylesheet" type="text/css" media="all">
<link rel="icon" type="image/png" href="images/myicon.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/2bcd4e2c08.js" crossorigin="anonymous"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KG4E7K5KKQ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-KG4E7K5KKQ');
</script>
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-static-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span>
<a id="logo_h2" href="index.html"><span style="color:#33cccc">Basel Shbita</span></a>
</span>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="projects.html">Academic</a></li>
<li><a href="art.html">Art</a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container center">
<div class="col-md-12">
<div class="col-md-3"></div>
<div class="col-md-6" style="border:1px solid black; ">
<p style="font-size: 0.9em; text-align: justify; margin-top: 10px;">
<b>Basel</b>’s art is a portal into his imagination - colored by the many identities, cultures, and experiences embedded within and around him. His art spans across different mediums, including: hand drawing, painting, and AI-driven artworks.
<br><br>
On a never-ending journey of discovery, Basel is inspired to find new ways to portray and amplify his expression.
</p>
</div>
</div>
<div><h3 style="text-align: left; color: #791E94;">Crypto Art</h3>
<h5 style="text-align: left; color: #7c7c7c;">digital artworks minted as NFTs (non-fungible tokens) on the Ethereum blockchain</h5><hr>
<div class="col-md-12">
<!-- NFT: The Endless Dream of Change -->
<div class="card col-md-4">
<a href="nft/nft_endlessdreamofchange.html" style="text-decoration:none" >
<ul class="list-group list-group-flush nftCard">
<li class="list-group-item">
<h5 class="card-title"><b><i>The Endless Dream of Change</i></b></h5>
</li>
<li class="list-group-item">
<img src="images/art/gifs/the_endless_dream_of_change.gif" />
</li>
<li class="list-group-item">
<p class="card-text" style="text-align: left"><b>AI work of art</b>, engineered in a unique style - using different AI techniques to alter, enhance, and control the output of each frame. A peculiar yet mesmerizing audio-visual experience traveling through a different world.<br><br>The 2-minute video is synced with an audio mixed by the author.</p>
</li>
<li class="list-group-item" style="overflow: auto">
<div style="width: 80%; float:right; text-align: right">
<img src="images/art/gifs/arrow.gif" width="20%" />
<b>available</b> as <span class="badge" style="background-color: #f9da4a; color: #000000">NFT</span>
</div>
</li>
</ul>
</a>
</div>
<!-- NFT: Stuck in a Truffle-loop -->
<div class="card col-md-4">
<a href="nft/nft_stuckinatruffleloop.html" style="text-decoration:none" >
<ul class="list-group list-group-flush nftCard">
<li class="list-group-item">
<h5 class="card-title"><b><i>Stuck in a Truffle-loop</i></b></h5>
</li>
<li class="list-group-item">
<img src="images/art/gifs/stuck_in_a_truffleloop.gif" />
</li>
<li class="list-group-item">
<p class="card-text" style="text-align: left"><b>Short video-loop</b>, hand-drawn frame-by-frame, visualizing the endless de- and re-composition of one's self.<br><br>The 1st collectible of a collection of transformational loops originating from other realms.</p>
</li>
<li class="list-group-item" style="overflow: auto">
<div style="width: 80%; float:right; text-align: right">
<img src="images/art/gifs/arrow.gif" width="20%" />
<b>available</b> as <span class="badge" style="background-color: #f9da4a; color: #000000">NFT</span>
</div>
</li>
</ul>
</a>
</div>
<!-- NFT: Dreams of Palestine -->
<div class="card col-md-4">
<a href="nft/nft_dreamsofpali.html" style="text-decoration:none" >
<ul class="list-group list-group-flush nftCard">
<li class="list-group-item">
<h5 class="card-title"><b><i>Dreams of Palestine</i></b></h5>
</li>
<li class="list-group-item">
<img src="images/art/gifs/dreams_of_pali.gif" />
</li>
<li class="list-group-item">
<p class="card-text" style="text-align: left"><b>AI work of art</b>, generated using machine learning generative algorithms fed with a short story describing one’s longing for Palestine.<br><br>With a mission to bring Palestinian presence into tech art, the video was featured in a physical art-installation in Palestine/Israel during December 2021.</p>
</li>
<li class="list-group-item" style="overflow: auto">
<div style="width: 80%; float:right; text-align: right">
<b>sold</b> as <span class="badge" style="background-color: #3cb371; color: #ffffff">NFT</span>
</div>
</li>
</ul>
</a>
<br>
</div>
</div>
</div>
<div><h3 style="text-align: left; color: #791E94;">AI-Generated Animation</h3>
<h5 style="text-align: left; color: #7c7c7c;">Animated videos created through the fusion of AI models with real footage. Each frame is generated individually resulting in captivating animations that push the boundaries of imagination</h5><hr>
<div class="card col-md-12">
<div class="card col-md-4">
<ul class="list-group list-group-flush nftCard">
<li class="list-group-item">
<h5 class="card-title"><b><i>AI Close Encounter</i></b></h5>
</li>
<li class="list-group-item">
<div style="padding:177.78% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/846203290?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="AI Close Encounter"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
</li>
<li class="list-group-item">
<p class="card-text" style="text-align: left">An AI-generated video capturing the essence of a truly special & otherworldly experience of a spontaneous gathering of friends in an unforgettable rooftop party in Hollywood.. <a href="https://vimeo.com/846203290" target="_blank">read more</a></p>
</li>
</ul>
</div>
<div class="card col-md-4">
<ul class="list-group list-group-flush nftCard">
<li class="list-group-item">
<h5 class="card-title"><b><i>Whispers of Santa Monica: AI's Journey to Serenity</i></b></h5>
</li>
<li class="list-group-item">
<div style="padding:177.78% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/846210167?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Whispers of Santa Monica: AI's Journey to Serenity"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
</li>
<li class="list-group-item">
<p class="card-text" style="text-align: left">An AI-generated video, taking you on a journey to a serene & ethereal world by integrating footage on the hills of the mesmerizing Pacific ocean at Santa Monica.. <a href="https://vimeo.com/846210167" target="_blank">read more</a></p>
</li>
</ul>
</div>
<div class="card col-md-4">
<ul class="list-group list-group-flush nftCard">
<li class="list-group-item">
<h5 class="card-title"><b><i>AI's Timeless Venture</i></b></h5>
</li>
<li class="list-group-item">
<div style="padding:177.78% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/846497764?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="AI's Timeless Venture"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
</li>
<li class="list-group-item">
<p class="card-text" style="text-align: left">AI-generated video. This one started with a casual kick of the ball in my friend’s backyard... <a href="https://vimeo.com/846497764" target="_blank">read more</a></p>
</li>
</ul>
</div>
</div>
<div class="card col-md-12">
<div class="card col-md-4">
<ul class="list-group list-group-flush nftCard">
<li class="list-group-item">
<h5 class="card-title"><b><i>AI Blurred Canvas</i></b></h5>
</li>
<li class="list-group-item">
<div style="padding:177.78% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/846225504?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="AI Blurred Canvas"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
</li>
<li class="list-group-item">
<p class="card-text" style="text-align: left">A mix of an AI-generated video with its source frames creating a video that blurs the lines between reality & “AI” realms... <a href="https://vimeo.com/846225504" target="_blank">read more</a></p>
</li>
</ul>
</div>
<div class="card col-md-4">
<ul class="list-group list-group-flush nftCard">
<li class="list-group-item">
<h5 class="card-title"><b><i>AI's Office Odyssey</i></b></h5>
</li>
<li class="list-group-item">
<div style="padding:177.78% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/846496502?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="AI's Office Odyssey"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
</li>
<li class="list-group-item">
<p class="card-text" style="text-align: left">An AI-generated video of a multi-dimensional journey generated from a video where I walk down the stairs from the 9th floor to the 5th floor... <a href="https://vimeo.com/846496502" target="_blank">read more</a></p>
</li>
</ul>
</div>
<div class="card col-md-4">
<ul class="list-group list-group-flush nftCard">
<li class="list-group-item">
<h5 class="card-title"><b><i>metaphysics of the exe</i></b></h5>
</li>
<li class="list-group-item">
<div style="padding:120% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/846548690?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="metaphysics of the exe"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
</li>
<li class="list-group-item">
<p class="card-text" style="text-align: left">AI-generated art piece that delves into the realms of the unknown. The creation process involved feeding a video of the artist dancing... <a href="https://vimeo.com/846548690" target="_blank">read more</a></p>
</li>
</ul>
</div>
</div>
</div>
<br>
<!-- todo: update other works -->
<div><h3 style="text-align: left; color: #791E94;">Animated Loops</h3>
<h5 style="text-align: left; color: #7c7c7c;">short animated videos & loops, frames designed digitally or drawn individually with drawing-pad or pencil/pen on paper</h5><hr>
<div class="gallery" id="gallery_animation"></div>
</div>
<br>
<div><h3 style="text-align: left; color: #791E94;">Painting</h3>
<h5 style="text-align: left; color: #7c7c7c;">mostly acrylic on canvas, sometimes collage elements (mixed media) are included</h5><hr>
<div class="gallery" id="gallery_painting"></div>
</div>
<br>
<div><h3 style="text-align: left; color: #791E94;">Graphic Design</h3>
<h5 style="text-align: left; color: #7c7c7c;">digital pop art collages & exploratory graphic designs</h5><hr>
<div class="gallery" id="gallery_graphicdesign"></div>
</div>
<br>
<div><h3 style="text-align: left; color: #791E94;">Creative Coding</h3>
<h5 style="text-align: left; color: #7c7c7c;">abstract/visual art generated with graphical and math code libraries</h5><hr>
<div class="gallery" id="gallery_creativecoding"></div>
</div>
<br>
<div><h3 style="text-align: left; color: #791E94;">Drawing</h3>
<h5 style="text-align: left; color: #7c7c7c;">sketches & figure drawings made with drawing-pad or pencil/pen on paper</h5><hr>
<div class="gallery" id="gallery_drawing"></div>
</div>
<br>
<div><h3 style="text-align: left; color: #791E94;">Plastic Arts</h3>
<h5 style="text-align: left; color: #7c7c7c;">3D sculpture from clay, concrete & gypsum</h5><hr>
<div class="gallery" id="gallery_plasticarts"></div>
</div>
<br>
<hr>
<div><p>looking for more? check out my art handles</p>
<a target="_blank" href="https://www.instagram.com/_baselart/"><div class="instagram_icon_css"></div></a> 
<a target="_blank" href="https://vimeo.com/shbita"><div class="vimeo_icon_css"></div></a> 
<a target="_blank" href="https://twitter.com/_baselart"><div class="twitter_icon_css"></div></a> 
<a target="_blank" href="https://rarible.com/basel"><div class="rarible_icon_css"></div></a> 
<a target="_blank" href="https://soundcloud.com/basels"><div class="soundcloud_icon_css"></div></a>
</div>
<footer class="footer">
<small>© 2024 Basel Shbita</small>
</footer>
</div>
<div id="popup">
<div class="col-md-12" style="height: 100%; width: 100%;">
<div class="card col-md-6" >
<img src="" alt="" id="selectedImage" style="height: 100%; width: 100%;">
</div>
<div class="card col-md-6">
<h1 class="galleryImgHeaderFont" id="selectedImageHeader"></h1>
<br>
<h2 class="galleryImgSubHeaderFont" id="selectedImageSubHeader"></h2>
<br>
<h2 class="galleryImgBodyFont" id="selectedImageBody"></h2>
</div>
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>