JosephFerano/ferano.io-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: JosephFerano:4662979fa6fa906e34e2146656d66faf36c550a3
Branches Tags
JosephFerano:master
...
compare: JosephFerano:90b5f3cda1580a6a499bf44d5d08959be7b97be3
Branches Tags
JosephFerano:master

2 Commits
4662979fa6 ... 90b5f3cda1

Author SHA1 Message Date
Joseph Ferano
90b5f3cda1 Setting up an showcase gallery 2023-08-22 15:17:27 +07:00
Joseph Ferano
0ffd168d18 Experimenting with new background 2023-08-22 15:17:11 +07:00
29 changed files with 320 additions and 79 deletions
Show Stats Expand all files Collapse all files

159
gallery.html Normal file
View File

@ -0,0 +1,159 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ferano.io | Showcase</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div id="topbar"></div>
<!-- <div class="overlay-gradient"></div> -->
<svg class="o-grad" xmlns='http://www.w3.org/2000/svg'>
<filter id='noiseFilter'>
<feTurbulence
type='fractalNoise'
baseFrequency='6.29'
numOctaves='3'
stitchTiles='stitch'/>
</filter>
</svg>
<div id="content">
<div class="content-topbar" id="content-topbar-4"></div>
<div id="content-body">
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/01.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/02.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/03.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/04.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/05.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/06.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/07.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/08.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/09.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/10.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/11.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/12.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/13.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/14.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/15.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/16.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/17.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/18.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/19.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/20.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/21.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/22.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/23.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/24.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/25.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://ferano.io">
<img src="./gallery/thumbs/gallery-thumbs/26.PNG" alt="Some Project" width="200" height="150">
</a>
</div>
</div>
</body>
</html>

17
index.html
View File

@ -10,7 +10,24 @@
<link href="https://fonts.googleapis.com/css2?family=Playfair:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<div id="topbar"></div>
<!-- <div class="overlay-gradient"></div> -->
<svg class="o-grad" xmlns='http://www.w3.org/2000/svg'>
<filter id='noiseFilter'>
<feTurbulence
type='fractalNoise'
baseFrequency='6.29'
numOctaves='3'
stitchTiles='stitch'/>
</filter>
</svg>
<div id="content">
<div class="content-topbar" id="content-topbar-4"></div>
<!-- <div class="content-topbar" id="content-topbar-2"></div> -->
<!-- <div class="content-topbar" id="content-topbar-3"></div> -->
<!-- <div class="content-topbar" id="content-topbar-4"></div> -->
<!-- <div class="content-topbar" id="content-topbar-5"></div> -->
<div id="content-body">
<h1>Joseph Ferano</h1>
<hr>
<!-- <a href="https://blog.ferano.io">blog</a> -->

77
main.css
View File

@ -1,10 +1,70 @@
#topbar {
position: absolute;
top: 0;
left: 0;
background-color: #594F4F;
width: 100%;
height: 12px;
}
.content-topbar {
width: 600px;
height: 20px;
margin: -24px;
}
#content-topbar-1 { background-color: hsla(84,91%,87%, 0.9); }
#content-topbar-2 { background-color: hsla(134,52%,75%,0.9); }
#content-topbar-3 { background-color: hsla(177,43%,47%,0.9); }
#content-topbar-4 { background-color: hsla(190,21%,42%,0.9); }
#content-topbar-5 { background-color: hsla(0,6%,33%, 0.9); }
/* #E5FCC2, 5%) 0%, */
/* #9DE0AD, 5%) 20%, */
/* #45ADA8, 5%) 30%, */
/* #547980, 5%) 40%, */
/* #594F4F, 5%) 60%, */
/* #594F4F, 5%) 100%) */
body {
background-color: #f1faee;
margin: 0;
overflow: hidden;
}
.o-grad {
position: absolute;
top: 0;
left: 0;
pointer-events: none; /* Allow clicks to reach underlying content */
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: url(#noiseFilter);
opacity: 0.25; /* Adjust the opacity value as needed */
z-index: -1;
mix-blend-mode: difference;
}
body {
background: linear-gradient(
180deg,
hsla(84, 91%, 87%, 0.8) 0%,
hsla(134, 52%, 75%, 0.8) 20%,
hsla(177, 43%, 47%, 0.8) 30%,
hsla(190, 21%, 42%, 0.8) 40%,
hsla(0, 6%, 25%, 0.8) 60%,
hsla(0, 6%, 25%, 1) 100%
) no-repeat;
background-color: hsla(0, 6%, 25%, 1);
margin: 20px auto;
max-width: 600px;
line-height: 1.6;
font-size: 18px;
color: #444;
color: #4f5b66;
padding: 10px 20px;
}
@ -14,21 +74,27 @@ p {
padding: 0px;
}
div.gallery {
float: left;
margin: -10px;
width: 200px;
}
span {
font-family: 'Playfair', serif;
}
#content {
background-color: #fff;
background-color: hsla(84, 20%, 99%, 1);
padding: 24px;
}
hr {
color: #777;
color: hsla(134, 52%, 75%, 1);
}
h1, h2, h3 {
color: #457b9d;
color: hsla(190, 21%, 36%, 1);
line-height: 1.6;
margin-top: 40px;
margin-bottom: 10px;
@ -66,4 +132,3 @@ a:active {
a:visited {
color: #666;
}

BIN
thumbs/01.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
thumbs/02.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
thumbs/03.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
thumbs/04.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
thumbs/05.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
thumbs/06.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

BIN
thumbs/07.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
thumbs/08.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
thumbs/09.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
thumbs/10.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
thumbs/11.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
thumbs/12.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
thumbs/13.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
thumbs/14.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
thumbs/15.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
thumbs/16.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
thumbs/17.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
thumbs/18.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
thumbs/19.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
thumbs/20.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
thumbs/21.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
thumbs/22.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
thumbs/23.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
thumbs/24.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
thumbs/25.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
thumbs/26.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB