Add more modular content for site
This commit is contained in:
241
_subpages/01-about.md
Normal file
241
_subpages/01-about.md
Normal file
@@ -0,0 +1,241 @@
|
||||
---
|
||||
title: About
|
||||
permalink: /
|
||||
---
|
||||
|
||||
<section class="about-text">
|
||||
{% capture about %}{% include about.md %}{% endcapture %}
|
||||
{{ about | markdownify }}
|
||||
</section>
|
||||
|
||||
|
||||
<!--
|
||||
- service
|
||||
-->
|
||||
|
||||
<section class="service">
|
||||
|
||||
<h3 class="h3 service-title">What I'm Doing</h3>
|
||||
|
||||
<ul class="service-list">
|
||||
|
||||
{% for service-item in site.data.current-projects %}
|
||||
<li class="service-item">
|
||||
|
||||
<div class="service-icon-box">
|
||||
<img src="{{ service-item.icon }}" alt="{{ service-item.icon_alt }}" width="40">
|
||||
</div>
|
||||
|
||||
<div class="service-content-box">
|
||||
<h4 class="h4 service-item-title">{{ service-item.title }}</h4>
|
||||
|
||||
<p class="service-item-text">
|
||||
{{ service-item.description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!--
|
||||
- testimonials
|
||||
-->
|
||||
|
||||
<section class="testimonials">
|
||||
|
||||
<h3 class="h3 testimonials-title">Testimonials</h3>
|
||||
|
||||
<ul class="testimonials-list has-scrollbar">
|
||||
|
||||
<li class="testimonials-item">
|
||||
<div class="content-card" data-testimonials-item>
|
||||
|
||||
<figure class="testimonials-avatar-box">
|
||||
<img src="./assets/images/avatar-1.png" alt="Daniel lewis" width="60" data-testimonials-avatar>
|
||||
</figure>
|
||||
|
||||
<h4 class="h4 testimonials-item-title" data-testimonials-title>Daniel lewis</h4>
|
||||
|
||||
<div class="testimonials-text" data-testimonials-text>
|
||||
<p>
|
||||
Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
|
||||
lot of experience
|
||||
and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
|
||||
consectetur adipiscing
|
||||
elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="testimonials-item">
|
||||
<div class="content-card" data-testimonials-item>
|
||||
|
||||
<figure class="testimonials-avatar-box">
|
||||
<img src="./assets/images/avatar-2.png" alt="Jessica miller" width="60" data-testimonials-avatar>
|
||||
</figure>
|
||||
|
||||
<h4 class="h4 testimonials-item-title" data-testimonials-title>Jessica miller</h4>
|
||||
|
||||
<div class="testimonials-text" data-testimonials-text>
|
||||
<p>
|
||||
Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
|
||||
lot of experience
|
||||
and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
|
||||
consectetur adipiscing
|
||||
elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="testimonials-item">
|
||||
<div class="content-card" data-testimonials-item>
|
||||
|
||||
<figure class="testimonials-avatar-box">
|
||||
<img src="./assets/images/avatar-3.png" alt="Emily evans" width="60" data-testimonials-avatar>
|
||||
</figure>
|
||||
|
||||
<h4 class="h4 testimonials-item-title" data-testimonials-title>Emily evans</h4>
|
||||
|
||||
<div class="testimonials-text" data-testimonials-text>
|
||||
<p>
|
||||
Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
|
||||
lot of experience
|
||||
and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
|
||||
consectetur adipiscing
|
||||
elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="testimonials-item">
|
||||
<div class="content-card" data-testimonials-item>
|
||||
|
||||
<figure class="testimonials-avatar-box">
|
||||
<img src="./assets/images/avatar-4.png" alt="Henry william" width="60" data-testimonials-avatar>
|
||||
</figure>
|
||||
|
||||
<h4 class="h4 testimonials-item-title" data-testimonials-title>Henry william</h4>
|
||||
|
||||
<div class="testimonials-text" data-testimonials-text>
|
||||
<p>
|
||||
Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
|
||||
lot of experience
|
||||
and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
|
||||
consectetur adipiscing
|
||||
elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!--
|
||||
- testimonials modal
|
||||
-->
|
||||
|
||||
<div class="modal-container" data-modal-container>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<section class="testimonials-modal">
|
||||
|
||||
<button class="modal-close-btn" data-modal-close-btn>
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
|
||||
<div class="modal-img-wrapper">
|
||||
<figure class="modal-avatar-box">
|
||||
<img src="./assets/images/avatar-1.png" alt="Daniel lewis" width="80" data-modal-img>
|
||||
</figure>
|
||||
|
||||
<img src="./assets/images/icon-quote.svg" alt="quote icon">
|
||||
</div>
|
||||
|
||||
<div class="modal-content">
|
||||
|
||||
<h4 class="h3 modal-title" data-modal-title>Daniel lewis</h4>
|
||||
|
||||
<time datetime="2021-06-14">14 June, 2021</time>
|
||||
|
||||
<div data-modal-text>
|
||||
<p>
|
||||
Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
|
||||
lot of experience
|
||||
and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
|
||||
consectetur adipiscing
|
||||
elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!--
|
||||
- clients
|
||||
-->
|
||||
|
||||
<section class="clients">
|
||||
|
||||
<h3 class="h3 clients-title">Clients</h3>
|
||||
|
||||
<ul class="clients-list has-scrollbar">
|
||||
|
||||
<li class="clients-item">
|
||||
<a href="#">
|
||||
<img src="./assets/images/logo-1-color.png" alt="client logo">
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="clients-item">
|
||||
<a href="#">
|
||||
<img src="./assets/images/logo-2-color.png" alt="client logo">
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="clients-item">
|
||||
<a href="#">
|
||||
<img src="./assets/images/logo-3-color.png" alt="client logo">
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="clients-item">
|
||||
<a href="#">
|
||||
<img src="./assets/images/logo-4-color.png" alt="client logo">
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="clients-item">
|
||||
<a href="#">
|
||||
<img src="./assets/images/logo-5-color.png" alt="client logo">
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="clients-item">
|
||||
<a href="#">
|
||||
<img src="./assets/images/logo-6-color.png" alt="client logo">
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
91
_subpages/02-resume.md
Normal file
91
_subpages/02-resume.md
Normal file
@@ -0,0 +1,91 @@
|
||||
---
|
||||
title: Resume
|
||||
permalink: /resume
|
||||
---
|
||||
|
||||
<section class="timeline">
|
||||
|
||||
<div class="title-wrapper">
|
||||
<div class="icon-box">
|
||||
<ion-icon name="book-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<h3 class="h3">Education</h3>
|
||||
</div>
|
||||
|
||||
<ol class="timeline-list">
|
||||
|
||||
{% for education-item in site.data.education %}
|
||||
<li class="timeline-item">
|
||||
|
||||
<h4 class="h4 timeline-item-title">{{ education-item.institution }}</h4>
|
||||
|
||||
<span>{{ education-item.start_year }} — {{ education-item.end_year }} ({{ education-item.grade }})</span>
|
||||
|
||||
<p class="timeline-text">
|
||||
{{ education-item.description }}
|
||||
</p>
|
||||
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="timeline">
|
||||
|
||||
<div class="title-wrapper">
|
||||
<div class="icon-box">
|
||||
<ion-icon name="book-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<h3 class="h3">Experience</h3>
|
||||
</div>
|
||||
|
||||
<ol class="timeline-list">
|
||||
|
||||
{% for experience-item in site.data.experience %}
|
||||
<li class="timeline-item">
|
||||
|
||||
<h4 class="h4 timeline-item-title">{{ experience-item.job_title }}{% if experience-item.company %}, {{ experience-item.company }}{% endif %}</h4>
|
||||
|
||||
<span>{{ experience-item.start_year }} — {{ experience-item.end_year }}</span>
|
||||
|
||||
{% if experience-item.description %}
|
||||
<p class="timeline-text">
|
||||
{{ experience-item.description }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
</ol>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="skill">
|
||||
|
||||
<h3 class="h3 skills-title">My skills</h3>
|
||||
|
||||
<ul class="skills-list content-card">
|
||||
|
||||
{% for skill in site.data.skills %}
|
||||
<li class="skills-item">
|
||||
|
||||
<div class="title-wrapper">
|
||||
<h5 class="h5">{{ skill.name }}</h5>
|
||||
<data value="{{ skill.value }}">{{ skill.value }}%</data>
|
||||
</div>
|
||||
|
||||
<div class="skill-progress-bg">
|
||||
<div class="skill-progress-fill" style="width: {{ skill.value }}%;"></div>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
76
_subpages/03-portfolio.md
Normal file
76
_subpages/03-portfolio.md
Normal file
@@ -0,0 +1,76 @@
|
||||
---
|
||||
title: Portfolio
|
||||
permalink: /portfolio
|
||||
---
|
||||
|
||||
<section class="projects">
|
||||
|
||||
<ul class="filter-list">
|
||||
|
||||
<li class="filter-item">
|
||||
<button class="active" data-filter-btn>All</button>
|
||||
</li>
|
||||
|
||||
{% assign tags = site.data.portfolio | map: "tag" | uniq %}
|
||||
{% for tag in tags %}
|
||||
<li class="filter-item">
|
||||
<button data-filter-btn>{{ tag }}</button>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="filter-select-box">
|
||||
|
||||
<button class="filter-select" data-select>
|
||||
|
||||
<div class="select-value" data-selecct-value>Select category</div>
|
||||
|
||||
<div class="select-icon">
|
||||
<ion-icon name="chevron-down"></ion-icon>
|
||||
</div>
|
||||
|
||||
</button>
|
||||
|
||||
<ul class="select-list">
|
||||
|
||||
<li class="select-item">
|
||||
<button data-select-item>All</button>
|
||||
</li>
|
||||
|
||||
{% assign tags = site.data.portfolio | map: "tag" | uniq %}
|
||||
{% for tag in tags %}
|
||||
<li class="select-item">
|
||||
<button data-select-item>{{ tag }}</button>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<ul class="project-list">
|
||||
|
||||
{% for project-item in site.data.portfolio %}
|
||||
<li class="project-item active" data-filter-item data-category="{{ project-item.tag | downcase }}">
|
||||
<a href="{{ project-item.link }}">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="{{ project-item.image }}" alt="{{ project-item.image_alt }}" loading="lazy">
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">{{ project-item.title }}</h3>
|
||||
|
||||
<p class="project-category">{{ project-item.tag }}</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
@@ -51,21 +51,21 @@ permalink: /photos
|
||||
|
||||
<ul class="project-list">
|
||||
|
||||
{% for project-item in site.data.photos %}
|
||||
<li class="project-item active" data-filter-item data-category="{{ project-item.tag | downcase }}">
|
||||
<a href="{{ project-item.link }}">
|
||||
{% for photo-item in site.data.photos %}
|
||||
<li class="project-item active" data-filter-item data-category="{{ photo-item.tag | downcase }}">
|
||||
<a href="{{ photo-item.link }}">
|
||||
|
||||
<figure class="project-img">
|
||||
<div class="project-item-icon-box">
|
||||
<ion-icon name="eye-outline"></ion-icon>
|
||||
</div>
|
||||
|
||||
<img src="/assets/photos/{{ project-item.file }}" alt="{{ project-item.alt }}" loading="lazy">
|
||||
<img src="/assets/photos/{{ photo-item.file }}" alt="{{ photo-item.alt }}" loading="lazy" data-photos-image>
|
||||
</figure>
|
||||
|
||||
<h3 class="project-title">{{ project-item.tag }}</h3>
|
||||
<h3 class="project-title" data-photos-alt>{{ photo-item.alt }}</h3>
|
||||
|
||||
<p class="project-category">{{ project-item.tag }}</p>
|
||||
<p class="project-category" data-photos-tag>{{ photo-item.tag }}</p>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
@@ -74,3 +74,43 @@ permalink: /photos
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
<div class="modal-container" data-modal-container>
|
||||
|
||||
<div class="overlay" data-overlay></div>
|
||||
|
||||
<section class="photos-modal">
|
||||
|
||||
<button class="modal-close-btn" data-modal-close-btn>
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
|
||||
<div class="modal-img-wrapper">
|
||||
<figure class="modal-avatar-box">
|
||||
<img src="./assets/images/avatar-1.png" alt="Daniel lewis" width="80" data-modal-img>
|
||||
</figure>
|
||||
|
||||
<img src="./assets/images/icon-quote.svg" alt="quote icon">
|
||||
</div>
|
||||
|
||||
<div class="modal-content">
|
||||
|
||||
<h4 class="h3 modal-title" data-modal-title>Daniel lewis</h4>
|
||||
|
||||
<time datetime="2021-06-14">14 June, 2021</time>
|
||||
|
||||
<div data-modal-text>
|
||||
<p>
|
||||
Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
|
||||
lot of experience
|
||||
and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
|
||||
consectetur adipiscing
|
||||
elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user