Skip to content

Commit

Permalink
search functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ferase
Ferase committed Apr 26, 2024
1 parent ae5df82 commit 6a5ef6a
Show file tree
Hide file tree
Showing 12 changed files with 247 additions and 107 deletions.
2 changes: 1 addition & 1 deletion inktrinket_v2/404.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
<div class="grid-main">
<div>
<div class="q-mark q-mark__l">?</div>
<a href="index.html"><img src="img/error.png" alt="inktrinket go home" data-invert-dark="true"></a>
<a href="index.html" aria-label="Return to home page"><img src="img/error.png" alt="inktrinket go home" data-invert-dark="true"></a>
<div class="q-mark q-mark__r">?</div>
<h1>404?</h1>
</div>
Expand Down
18 changes: 9 additions & 9 deletions inktrinket_v2/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,23 +57,23 @@
<div class="site_frame frame_right" data-invert-dark="true"></div>

<!-- Night Light -->
<input id="night-light" type="checkbox"><label id="night-light-label" for="night-light" data-invert-dark="true"></label>
<input id="night-light" type="checkbox" aria-label="Toggle color theme"><label id="night-light-label" for="night-light" data-invert-dark="true"></label>

<!-- Heading -->
<header class="header_flex">
<header class="header_flex" aria-label="Site header">
<nav>
<ul class="header_nav_grid">
<li><a href="index.html"><img class="header_icon" src="svg/inktrinket_logo_v2.svg" alt="inktrinket go home" data-invert-dark="true"></a></li>
<li><a href="about.html">about</a></li>
<li class="header_nav_hover_list">
<li><a href="/index.html" aria-label="Return to home page"><img class="header_icon" src="/svg/inktrinket_logo_v2.svg" alt="inktrinket go home" data-invert-dark="true"></a></li>
<li><a href="/about.html" aria-label="About page">about</a></li>
<li class="header_nav_hover_list" aria-label="Portfolio">
<p>portfolio</p>
<ul class="header_portfolio_fold">
<li><a href="portfolio.html">professional</a></li>
<li><a href="portfolio.html">personal</a></li>
<li><a href="/portfolio.html" aria-label="Professional portfolio">professional</a></li>
<li><a href="/portfolio.html" aria-label="Personal work portfolio">personal</a></li>
</ul>
</li>
<li><a href="commissions.html">commissions</a></li>
<li><a href="contact.html">contact</a></li>
<li><a href="/commissions.html" aria-label="Commissions page">commissions</a></li>
<li><a href="/contact.html" aria-label="Contact page">contact</a></li>
</ul>
</nav>
</header>
Expand Down
18 changes: 9 additions & 9 deletions inktrinket_v2/commissions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,23 +284,23 @@
<div class="site_frame frame_right" data-invert-dark="true"></div>

<!-- Night Light -->
<input id="night-light" type="checkbox"><label id="night-light-label" for="night-light" data-invert-dark="true"></label>
<input id="night-light" type="checkbox" aria-label="Toggle color theme"><label id="night-light-label" for="night-light" data-invert-dark="true"></label>

<!-- Heading -->
<header class="header_flex">
<header class="header_flex" aria-label="Site header">
<nav>
<ul class="header_nav_grid">
<li><a href="index.html"><img class="header_icon" src="svg/inktrinket_logo_v2.svg" alt="inktrinket go home" data-invert-dark="true"></a></li>
<li><a href="about.html">about</a></li>
<li class="header_nav_hover_list">
<li><a href="/index.html" aria-label="Return to home page"><img class="header_icon" src="/svg/inktrinket_logo_v2.svg" alt="inktrinket go home" data-invert-dark="true"></a></li>
<li><a href="/about.html" aria-label="About page">about</a></li>
<li class="header_nav_hover_list" aria-label="Portfolio">
<p>portfolio</p>
<ul class="header_portfolio_fold">
<li><a href="portfolio.html">professional</a></li>
<li><a href="portfolio.html">personal</a></li>
<li><a href="/portfolio.html" aria-label="Professional portfolio">professional</a></li>
<li><a href="/portfolio.html" aria-label="Personal work portfolio">personal</a></li>
</ul>
</li>
<li><a href="commissions.html">commissions</a></li>
<li><a href="contact.html">contact</a></li>
<li><a href="/commissions.html" aria-label="Commissions page">commissions</a></li>
<li><a href="/contact.html" aria-label="Contact page">contact</a></li>
</ul>
</nav>
</header>
Expand Down
18 changes: 9 additions & 9 deletions inktrinket_v2/contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,23 +89,23 @@
<div class="site_frame frame_right" data-invert-dark="true"></div>

<!-- Night Light -->
<input id="night-light" type="checkbox"><label id="night-light-label" for="night-light" data-invert-dark="true"></label>
<input id="night-light" type="checkbox" aria-label="Toggle color theme"><label id="night-light-label" for="night-light" data-invert-dark="true"></label>

<!-- Heading -->
<header class="header_flex">
<header class="header_flex" aria-label="Site header">
<nav>
<ul class="header_nav_grid">
<li><a href="index.html"><img class="header_icon" src="svg/inktrinket_logo_v2.svg" alt="inktrinket go home" data-invert-dark="true"></a></li>
<li><a href="about.html">about</a></li>
<li class="header_nav_hover_list">
<li><a href="/index.html" aria-label="Return to home page"><img class="header_icon" src="/svg/inktrinket_logo_v2.svg" alt="inktrinket go home" data-invert-dark="true"></a></li>
<li><a href="/about.html" aria-label="About page">about</a></li>
<li class="header_nav_hover_list" aria-label="Portfolio">
<p>portfolio</p>
<ul class="header_portfolio_fold">
<li><a href="portfolio.html">professional</a></li>
<li><a href="portfolio.html">personal</a></li>
<li><a href="/portfolio.html" aria-label="Professional portfolio">professional</a></li>
<li><a href="/portfolio.html" aria-label="Personal work portfolio">personal</a></li>
</ul>
</li>
<li><a href="commissions.html">commissions</a></li>
<li><a href="contact.html">contact</a></li>
<li><a href="/commissions.html" aria-label="Commissions page">commissions</a></li>
<li><a href="/contact.html" aria-label="Contact page">contact</a></li>
</ul>
</nav>
</header>
Expand Down
16 changes: 16 additions & 0 deletions inktrinket_v2/core.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ a:link,a:hover,a:visited,a:invalid{color: var(--clr-darkest);}
nav ul{list-style: none;}
body,html{scrollbar-width: none; color: var(--clr-darkest); background-color: var(--clr-lightest);}
input:focus{outline: none;}
iframe{border: none;}



Expand Down Expand Up @@ -107,6 +108,21 @@ hr{



/* Button ------------------------ */

button{
border: solid 2px var(--clr-darkest);
border-radius: var(--space-smallest);
padding: calc(var(--space-small) / 3);
color: var(--clr-lightest);
background-color: var(--clr-darkest);
font-family: "peridot-pe-variable", sans-serif;
font-variation-settings: "wght" 400, "wdth" 100, "ital" 0;
font-size: var(--txt-h6);
}



/* Site borders ------------------------ */

.site_frame{
Expand Down
18 changes: 9 additions & 9 deletions inktrinket_v2/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,23 +151,23 @@
<div class="site_frame frame_right" data-invert-dark="true"></div>

<!-- Night Light -->
<input id="night-light" type="checkbox"><label id="night-light-label" for="night-light" data-invert-dark="true"></label>
<input id="night-light" type="checkbox" aria-label="Toggle color theme"><label id="night-light-label" for="night-light" data-invert-dark="true"></label>

<!-- Heading -->
<header class="header_flex">
<header class="header_flex" aria-label="Site header">
<nav>
<ul class="header_nav_grid">
<li><a href="index.html"><img class="header_icon" src="svg/inktrinket_logo_v2.svg" alt="inktrinket go home" data-invert-dark="true"></a></li>
<li><a href="about.html">about</a></li>
<li class="header_nav_hover_list">
<li><a href="/index.html" aria-label="Return to home page"><img class="header_icon" src="/svg/inktrinket_logo_v2.svg" alt="inktrinket go home" data-invert-dark="true"></a></li>
<li><a href="/about.html" aria-label="About page">about</a></li>
<li class="header_nav_hover_list" aria-label="Portfolio">
<p>portfolio</p>
<ul class="header_portfolio_fold">
<li><a href="portfolio.html">professional</a></li>
<li><a href="portfolio.html">personal</a></li>
<li><a href="/portfolio.html" aria-label="Professional portfolio">professional</a></li>
<li><a href="/portfolio.html" aria-label="Personal work portfolio">personal</a></li>
</ul>
</li>
<li><a href="commissions.html">commissions</a></li>
<li><a href="contact.html">contact</a></li>
<li><a href="/commissions.html" aria-label="Commissions page">commissions</a></li>
<li><a href="/contact.html" aria-label="Contact page">contact</a></li>
</ul>
</nav>
</header>
Expand Down
75 changes: 45 additions & 30 deletions inktrinket_v2/portfolio.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,25 +26,6 @@
text-align: center;
}

input[type="text"]{
max-width: 100%;
width: 50%;
height: var(--space-small);
background-color: var(--clr-lightest);
border: solid 3px var(--clr-darkest);
border-radius: var(--space-smallest);
place-self: center;
padding: var(--space-smallest);

font-family: "peridot-pe-variable", sans-serif;
font-variation-settings: "wght" 400, "wdth" 100, "slnt" 0;
font-size: var(--txt-h5);
}
input[type="text"]:focus{
border: solid 3px var(--clr-darkest);
border-color: var(--clr-darkest);
}

.grid-main__pagination{
display: grid;
grid-template-columns: 1fr;
Expand All @@ -60,6 +41,36 @@
list-style: none;
}

#search{
max-height: var(--space-small);
display: grid;
gap: var(--space-smallest);
grid-auto-flow: column;
align-items: center;
max-width: 60%;
margin-inline: auto;
}
#search-bar{
max-width: 100%;
height: var(--space-large);
background-color: var(--clr-lightest);
border: solid 3px var(--clr-darkest);
border-radius: var(--space-smallest);
padding: var(--space-smallest);

font-family: "peridot-pe-variable", sans-serif;
font-variation-settings: "wght" 400, "wdth" 100, "slnt" 0;
font-size: var(--txt-h5);
}
#search-bar:focus{
border: solid 3px var(--clr-darkest);
border-color: var(--clr-darkest);
}
#search-submit{
height: 100%;
cursor: pointer;
}

.v-card{
display: grid;
text-align: center;
Expand Down Expand Up @@ -135,35 +146,39 @@
<div class="site_frame frame_right" data-invert-dark="true"></div>

<!-- Night Light -->
<input id="night-light" type="checkbox"><label id="night-light-label" for="night-light" data-invert-dark="true"></label>
<input id="night-light" type="checkbox" aria-label="Toggle color theme"><label id="night-light-label" for="night-light" data-invert-dark="true"></label>

<!-- Heading -->
<header class="header_flex">
<header class="header_flex" aria-label="Site header">
<nav>
<ul class="header_nav_grid">
<li><a href="index.html"><img class="header_icon" src="svg/inktrinket_logo_v2.svg" alt="inktrinket go home" data-invert-dark="true"></a></li>
<li><a href="about.html">about</a></li>
<li class="header_nav_hover_list">
<li><a href="/index.html" aria-label="Return to home page"><img class="header_icon" src="/svg/inktrinket_logo_v2.svg" alt="inktrinket go home" data-invert-dark="true"></a></li>
<li><a href="/about.html" aria-label="About page">about</a></li>
<li class="header_nav_hover_list" aria-label="Portfolio">
<p>portfolio</p>
<ul class="header_portfolio_fold">
<li><a href="portfolio.html">professional</a></li>
<li><a href="portfolio.html">personal</a></li>
<li><a href="/portfolio.html" aria-label="Professional portfolio">professional</a></li>
<li><a href="/portfolio.html" aria-label="Personal work portfolio">personal</a></li>
</ul>
</li>
<li><a href="commissions.html">commissions</a></li>
<li><a href="contact.html">contact</a></li>
<li><a href="/commissions.html" aria-label="Commissions page">commissions</a></li>
<li><a href="/contact.html" aria-label="Contact page">contact</a></li>
</ul>
</nav>
</header>

<div class="grid-main">
<section class="grid-main__a">
<h1>Portfolio Title</h1>
<input type="text">
<h1>portfolio title</h1>
<div id="search">
<input id="search-bar" type="text" aria-label="Search bar">
<button id="search-submit">submit</button>
</div>
</section>

<main class="grid-main__pagination">
<ul id="paginated-list">

</ul>
<nav class="pagination-container">
<button class="pagination-button" id="prev-button" title="Previous page" aria-label="Previous page">
Expand Down
54 changes: 54 additions & 0 deletions inktrinket_v2/portfolio/main_portfolio.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
{
"project1": {
"title": "Project Title",
"tags": [
"tag1",
"tag2",
"tag3",
"tag4"
],
"videos": [
"f9ZOBYzTpUQ"
],
"images": [
{
"image": "01.png",
"title": "First image"
},
{
"image": "02.png",
"title": "Second image"
},
{
"image": "03.png",
"title": "Third image"
}
]
},
"project2": {
"title": "Project Title",
"tags": [
"tag5",
"tag6",
"tag7",
"tag8"
],
"videos": [
"pr7Z7ntzoUY"
],
"images": [
{
"image": "01.png",
"title": "First image"
},
{
"image": "02.png",
"title": "Second image"
},
{
"image": "03.png",
"title": "Third image"
}
]
}
}
22 changes: 14 additions & 8 deletions inktrinket_v2/portfolio/proj_page.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
const path = window.location.pathname;
const project = path.substring(path.lastIndexOf("/", path.lastIndexOf("/") - 1), path.lastIndexOf("/")).slice(1);

const portfolioGallery = document.getElementById("grid-main__hero-gallery");
const heroVideo = document.getElementById("hero-video");
const heroImage = document.getElementById("hero-image");
Expand All @@ -11,20 +14,23 @@ var reelItems = [];

// Parse JSON
const processJSON = async() => {
await fetch("./data.json")
await fetch("/portfolio/main_portfolio.json")
.then((res) => {
if (!res.ok) {
throw new Error(`HTTP error! Status: ${res.status}`);
}
return res.json();
})
.then((data) => {
for(let i = 0; i < data["videos"].length; i++){
createReelVideo(data["videos"][i]);
};
for(let j = 0; j < data["images"].length; j++){
createReelImage(data["images"][j]["image"], data["images"][j]["title"]);
};
let getVideos = data[project]["videos"];
let getImages = data[project]["images"];

getVideos.forEach((video) => {
createReelVideo(video);
});
getImages.forEach((image) => {
createReelImage(image["image"], image["title"]);
});
})
.catch((error) =>
console.error("Unable to fetch data:", error));
Expand Down Expand Up @@ -90,6 +96,6 @@ const setReelActive = (num) => {
window.addEventListener("load", async () => {
await processJSON();
reelItems = document.querySelectorAll(".reel-item");
console.log(reelItems);

setReelActive(0);
});
Loading

0 comments on commit 6a5ef6a

Please sign in to comment.