update main page to use hbs for portfolio

This commit is contained in:
Nikola Petrov
2024-01-26 20:46:29 +01:00
parent 4c6290a599
commit 07cd4bff3a
3 changed files with 47 additions and 176 deletions

View File

@@ -139,7 +139,7 @@
<ul class="navbar-list">
<li class="navbar-item">
<button class="navbar-link active" data-nav-link>About</button>
<button class="navbar-link active" data-nav-link>About</button>
</li>
<li class="navbar-item">
@@ -147,9 +147,9 @@
</li>
{{!-- <li class="navbar-item">
<li class="navbar-item">
<button class="navbar-link" data-nav-link>Portfolio</button>
</li> --}}
</li>
</ul>
</nav>
@@ -158,7 +158,7 @@
- #ABOUT
-->
<article class="about active" data-page="about">
<article class="about active" data-page="about">
<header>
<h2 class="h2 article-title">About me</h2>
@@ -371,17 +371,11 @@
<button class="active" data-filter-btn>All</button>
</li>
{{#each categorys}}
<li class="filter-item">
<button data-filter-btn>Web design</button>
</li>
<li class="filter-item">
<button data-filter-btn>Applications</button>
</li>
<li class="filter-item">
<button data-filter-btn>Web development</button>
<button data-filter-btn>{{this}}</button>
</li>
{{/each}}
</ul>
@@ -402,187 +396,36 @@
<li class="select-item">
<button data-select-item>All</button>
</li>
{{#each categorys}}
<li class="select-item">
<button data-select-item>Web design</button>
<button data-select-item>{{this}}</button>
</li>
<li class="select-item">
<button data-select-item>Applications</button>
</li>
<li class="select-item">
<button data-select-item>Web development</button>
</li>
{{/each}}
</ul>
</div>
<ul class="project-list">
<li class="project-item active" data-filter-item data-category="web development">
<a href="#">
{{#each entry}}
<li class="project-item active" data-filter-item data-category="{{category}}">
<a href="{{link}}">
<figure class="project-img">
<div class="project-item-icon-box">
<ion-icon name="eye-outline"></ion-icon>
</div>
<img src="/images/logo.png" alt="finance" loading="lazy">
<img src="{{img}}" loading="lazy">
</figure>
<h3 class="project-title">Finance</h3>
<h3 class="project-title">{{title}}</h3>
<p class="project-category">Web development</p>
<p class="project-category">{{des}}</p>
</a>
</li>
<li class="project-item active" data-filter-item data-category="web development">
<a href="#">
<figure class="project-img">
<div class="project-item-icon-box">
<ion-icon name="eye-outline"></ion-icon>
</div>
<img src="/images/logo.png" alt="orion" loading="lazy">
</figure>
<h3 class="project-title">Orion</h3>
<p class="project-category">Web development</p>
</a>
</li>
<li class="project-item active" data-filter-item data-category="web design">
<a href="#">
<figure class="project-img">
<div class="project-item-icon-box">
<ion-icon name="eye-outline"></ion-icon>
</div>
<img src="/images/logo.png" alt="fundo" loading="lazy">
</figure>
<h3 class="project-title">Fundo</h3>
<p class="project-category">Web design</p>
</a>
</li>
<li class="project-item active" data-filter-item data-category="applications">
<a href="#">
<figure class="project-img">
<div class="project-item-icon-box">
<ion-icon name="eye-outline"></ion-icon>
</div>
<img src="/images/logo.png" alt="brawlhalla" loading="lazy">
</figure>
<h3 class="project-title">Brawlhalla</h3>
<p class="project-category">Applications</p>
</a>
</li>
<li class="project-item active" data-filter-item data-category="web design">
<a href="#">
<figure class="project-img">
<div class="project-item-icon-box">
<ion-icon name="eye-outline"></ion-icon>
</div>
<img src="/images/logo.png" alt="dsm." loading="lazy">
</figure>
<h3 class="project-title">DSM.</h3>
<p class="project-category">Web design</p>
</a>
</li>
<li class="project-item active" data-filter-item data-category="web design">
<a href="#">
<figure class="project-img">
<div class="project-item-icon-box">
<ion-icon name="eye-outline"></ion-icon>
</div>
<img src="/images/logo.png" alt="MetaSpark" loading="lazy">
</figure>
<h3 class="project-title">MetaSpark</h3>
<p class="project-category">Web design</p>
</a>
</li>
<li class="project-item active" data-filter-item data-category="web development">
<a href="#">
<figure class="project-img">
<div class="project-item-icon-box">
<ion-icon name="eye-outline"></ion-icon>
</div>
<img src="/images/logo.png" alt="summary" loading="lazy">
</figure>
<h3 class="project-title">Summary</h3>
<p class="project-category">Web development</p>
</a>
</li>
<li class="project-item active" data-filter-item data-category="applications">
<a href="#">
<figure class="project-img">
<div class="project-item-icon-box">
<ion-icon name="eye-outline"></ion-icon>
</div>
<img src="/images/logo.png" alt="task manager" loading="lazy">
</figure>
<h3 class="project-title">Task Manager</h3>
<p class="project-category">Applications</p>
</a>
</li>
<li class="project-item active" data-filter-item data-category="web development">
<a href="#">
<figure class="project-img">
<div class="project-item-icon-box">
<ion-icon name="eye-outline"></ion-icon>
</div>
<img src="/images/logo.png" alt="arrival" loading="lazy">
</figure>
<h3 class="project-title">Arrival</h3>
<p class="project-category">Web development</p>
</a>
</li>
{{/each}}
</ul>
</section>