Add more modular content for site

This commit is contained in:
2024-06-10 15:31:56 +01:00
parent b7c92f717e
commit a1abb8af68
20 changed files with 876 additions and 27 deletions

9
_includes/about.md Normal file
View File

@@ -0,0 +1,9 @@
I'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media.
I enjoy
turning complex problems into simple, beautiful and intuitive designs.
My job is to build your website so that it is functional and user-friendly but at the same time attractive.
Moreover, I
add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring
across your
message and identity in the most creative way. I created web design for many famous brand companies.

23
_includes/head.html Normal file
View File

@@ -0,0 +1,23 @@
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vCard - Personal Portfolio</title>
<!--
- favicon
-->
<link rel="shortcut icon" href="./assets/images/logo.ico" type="image/x-icon">
<!--
- custom css link
-->
<link rel="stylesheet" href="./assets/css/style.css">
<!--
- google font link
-->
<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=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>

14
_includes/navbar.html Normal file
View File

@@ -0,0 +1,14 @@
<nav class="navbar">
<ul class="navbar-list">
{% for subpage in site.subpages %}
<li class="navbar-item">
<!-- <button class="navbar-link{% if page.permalink == subpage.url %} active{% endif %}" data-nav-link>{{ subpage.title }}</button> -->
<a class="navbar-link{% if page.permalink == subpage.url %} active{% endif %}" href="{{ subpage.url }}">{{ subpage.title }}</a>
</li>
{% endfor %}
</ul>
</nav>

93
_includes/sidebar.html Normal file
View File

@@ -0,0 +1,93 @@
<aside class="sidebar" data-sidebar>
<div class="sidebar-info">
<figure class="avatar-box">
<img src="./assets/images/my-avatar.png" alt="{{ site.data.profile.name }}" width="80">
</figure>
<div class="info-content">
<h1 class="name" title="{{ site.data.profile.name }}">{{ site.data.profile.name }}</h1>
<p class="title">{{ site.data.profile.description }}</p>
</div>
<button class="info_more-btn" data-sidebar-btn>
<span>Show Contacts</span>
<ion-icon name="chevron-down"></ion-icon>
</button>
</div>
<div class="sidebar-info_more">
<div class="separator"></div>
<ul class="contacts-list">
<li class="contact-item">
<div class="icon-box">
<ion-icon name="mail-outline"></ion-icon>
</div>
<div class="contact-info">
<p class="contact-title">Email</p>
<a href="mailto:{{ site.data.profile.email }}" class="contact-link">{{ site.data.profile.email }}</a>
</div>
</li>
{% if site.data.profile.phone %}
<li class="contact-item">
<div class="icon-box">
<ion-icon name="phone-portrait-outline"></ion-icon>
</div>
<div class="contact-info">
<p class="contact-title">Phone</p>
<a href="tel:{{ site.data.profile.phone | replace ' ', '' }}" class="contact-link">{{ site.data.profile.phone }}</a>
</div>
</li>
{% endif %}
{% if site.data.profile.location %}
<li class="contact-item">
<div class="icon-box">
<ion-icon name="location-outline"></ion-icon>
</div>
<div class="contact-info">
<p class="contact-title">Location</p>
<address>{{ site.data.profile.location }}</address>
</div>
</li>
{% endif %}
</ul>
<div class="separator"></div>
<ul class="social-list">
{% for social-item in site.data.profile.socials %}
<li class="social-item">
<a href="{{ social-item.link }}" class="social-link">
<ion-icon name="logo-{{ social-item.icon }}"></ion-icon>
</a>
</li>
{% endfor %}
</ul>
</div>
</aside>