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

10
.gitignore vendored
View File

@@ -1,7 +1,5 @@
_site/ _site
.sass-cache/ .sass-cache
.jekyll-cache/ .jekyll-cache
.jekyll-metadata .jekyll-metadata
# Ignore folders generated by Bundler vendor
.bundle/
vendor/

25
404.html Normal file
View File

@@ -0,0 +1,25 @@
---
permalink: /404.html
layout: default
---
<style type="text/css" media="screen">
.container {
margin: 10px auto;
max-width: 600px;
text-align: center;
}
h1 {
margin: 30px 0;
font-size: 4em;
line-height: 1;
letter-spacing: -1px;
}
</style>
<div class="container">
<h1>404</h1>
<p><strong>Page not found :(</strong></p>
<p>The requested page could not be found.</p>
</div>

33
Gemfile Normal file
View File

@@ -0,0 +1,33 @@
source "https://rubygems.org"
# Hello! This is where you manage which Jekyll version is used to run.
# When you want to use a different version, change it below, save the
# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
#
# bundle exec jekyll serve
#
# This will help ensure the proper Jekyll version is running.
# Happy Jekylling!
gem "jekyll", "~> 4.3.3"
# This is the default theme for new Jekyll sites. You may change this to anything you like.
gem "minima", "~> 2.5"
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
# uncomment the line below. To upgrade, run `bundle update github-pages`.
# gem "github-pages", group: :jekyll_plugins
# If you have any plugins, put them here!
group :jekyll_plugins do
gem "jekyll-feed", "~> 0.12"
end
# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
# and associated library.
platforms :mingw, :x64_mingw, :mswin, :jruby do
gem "tzinfo", ">= 1", "< 3"
gem "tzinfo-data"
end
# Performance-booster for watching directories on Windows
gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
# do not have a Java counterpart.
gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]

100
Gemfile.lock Normal file
View File

@@ -0,0 +1,100 @@
GEM
remote: https://rubygems.org/
specs:
addressable (2.8.6)
public_suffix (>= 2.0.2, < 6.0)
colorator (1.1.0)
concurrent-ruby (1.3.3)
em-websocket (0.5.3)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0)
eventmachine (1.2.7)
ffi (1.17.0)
ffi (1.17.0-arm64-darwin)
ffi (1.17.0-x86_64-darwin)
forwardable-extended (2.6.0)
google-protobuf (3.25.3)
google-protobuf (3.25.3-arm64-darwin)
google-protobuf (3.25.3-x86_64-darwin)
google-protobuf (3.25.3-x86_64-linux)
http_parser.rb (0.8.0)
i18n (1.14.5)
concurrent-ruby (~> 1.0)
jekyll (4.3.3)
addressable (~> 2.4)
colorator (~> 1.0)
em-websocket (~> 0.5)
i18n (~> 1.0)
jekyll-sass-converter (>= 2.0, < 4.0)
jekyll-watch (~> 2.0)
kramdown (~> 2.3, >= 2.3.1)
kramdown-parser-gfm (~> 1.0)
liquid (~> 4.0)
mercenary (>= 0.3.6, < 0.5)
pathutil (~> 0.9)
rouge (>= 3.0, < 5.0)
safe_yaml (~> 1.0)
terminal-table (>= 1.8, < 4.0)
webrick (~> 1.7)
jekyll-feed (0.17.0)
jekyll (>= 3.7, < 5.0)
jekyll-sass-converter (3.0.0)
sass-embedded (~> 1.54)
jekyll-seo-tag (2.8.0)
jekyll (>= 3.8, < 5.0)
jekyll-watch (2.2.1)
listen (~> 3.0)
kramdown (2.4.0)
rexml
kramdown-parser-gfm (1.1.0)
kramdown (~> 2.0)
liquid (4.0.4)
listen (3.9.0)
rb-fsevent (~> 0.10, >= 0.10.3)
rb-inotify (~> 0.9, >= 0.9.10)
mercenary (0.4.0)
minima (2.5.1)
jekyll (>= 3.5, < 5.0)
jekyll-feed (~> 0.9)
jekyll-seo-tag (~> 2.1)
pathutil (0.16.2)
forwardable-extended (~> 2.6)
public_suffix (5.0.5)
rake (13.2.1)
rb-fsevent (0.11.2)
rb-inotify (0.11.1)
ffi (~> 1.0)
rexml (3.2.9)
strscan
rouge (4.2.1)
safe_yaml (1.0.5)
sass-embedded (1.69.5)
google-protobuf (~> 3.23)
rake (>= 13.0.0)
sass-embedded (1.69.5-arm64-darwin)
google-protobuf (~> 3.23)
sass-embedded (1.69.5-x86_64-darwin)
google-protobuf (~> 3.23)
strscan (3.1.0)
terminal-table (3.0.2)
unicode-display_width (>= 1.1.1, < 3)
unicode-display_width (2.5.0)
webrick (1.8.1)
PLATFORMS
arm64-darwin
ruby
x86_64-darwin
x86_64-linux
DEPENDENCIES
http_parser.rb (~> 0.6.0)
jekyll (~> 4.3.3)
jekyll-feed (~> 0.12)
minima (~> 2.5)
tzinfo (>= 1, < 3)
tzinfo-data
wdm (~> 0.1.1)
BUNDLED WITH
2.5.11

62
_config.yml Normal file
View File

@@ -0,0 +1,62 @@
# Welcome to Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely edit after that. If you find
# yourself editing this file very often, consider using Jekyll's data files
# feature for the data you need to update frequently.
#
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
#
# If you need help with YAML syntax, here are some quick references for you:
# https://learn-the-web.algonquindesign.ca/topics/markdown-yaml-cheat-sheet/#yaml
# https://learnxinyminutes.com/docs/yaml/
#
# Site settings
# These are used to personalize your new site. If you look in the HTML files,
# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
# You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}.
title: Matthew Grove
description: >- # this means to ignore newlines until "baseurl:"
Write an awesome description for your new site here. You can edit this
line in _config.yml. It will appear in your document head meta (for
Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog
url: "https://mgrove.uk" # the base hostname & protocol for your site, e.g. http://example.com
defaults:
- scope:
path: ""
type: subpages
values:
layout: default
collections:
subpages:
output: true
# Build settings
# theme: minima
# plugins:
# - jekyll-feed
# Exclude from processing.
# The following items will not be processed, by default.
# Any item listed under the `exclude:` key here will be automatically added to
# the internal "default list".
#
# Excluded items can be processed by explicitly listing the directories or
# their entries' file path in the `include:` list.
#
# exclude:
# - .sass-cache/
# - .jekyll-cache/
# - gemfiles/
# - Gemfile
# - Gemfile.lock
# - node_modules/
# - vendor/bundle/
# - vendor/cache/
# - vendor/gems/
# - vendor/ruby/

View File

@@ -0,0 +1,4 @@
- title: Web design
icon: /assets/images/icon-design.svg
icon_alt: design icon
description: The most modern and high-quality design made at a professional level.

10
_data/education.yml Normal file
View File

@@ -0,0 +1,10 @@
- institution: University of Southampton
grade: 1:1, predicted
start_year: 2022
end_year: Present
description: MEng Computer Science with Cyber Security, with a current focus on Cyber Security and Digital Forensics.
- institution: Reading School
grade: A*A*A*A
start_year: 2020
end_year: 2022
description: A Levels in Computer Science, Physics, Mathematics, and Further Mathematics. Cadet Warrant Officer in the school's Combined Cadet Force, and Lord Lieutenant's Cadet. Ran a Robotics Club, competing on the international stage.

5
_data/experience.yml Normal file
View File

@@ -0,0 +1,5 @@
- job_title: Student Ambassador
company: University of Southampton
start_year: 2022
end_year: Present
description:

View File

@@ -1,15 +1,15 @@
- file: .png - file: DSC_0217.jpg
tag: Military tag: Portrait
alt: Blog 1 alt: Black and white portrait photo with sunlight shining on one half of the face
- file: /assets/images/blog-2.jpg - file: Album-Cover.jpg
tag: Activity tag: Portrait
alt: Blog 2 alt: A woman sat on a bench in the dark, with two flourescent lines of light horizontally across the image
- file: /assets/images/blog-3.jpg - file: 2023-02-05-16-26-31_018.jpg
tag: Activity tag: Portrait
alt: Blog 3 alt: A man stood by a metal fence on the beach, looking at the ocean
- file: /assets/images/avatar-3.png - file: DSC_0570.jpg
tag: Military tag: Portrait
alt: Blog 3 alt: The silhouette of a man in the sunset, holding a necklace around his neck
- file: /assets/images/avatar-3.png - file: 2023-02-05-16-11-35_017.jpg
tag: Test tag: Portrait
alt: Blog 3 alt: A man sat on raised rocks on the beach, in the sun

5
_data/portfolio.yml Normal file
View File

@@ -0,0 +1,5 @@
- title: Finance
link: '#'
tag: Web development
image: /assets/images/project-1.jpg
image_alt: finance

12
_data/profile.yml Normal file
View File

@@ -0,0 +1,12 @@
name: Matthew Grove
email: me@mgrove.uk
description: Computer Science student and Cyber Security/Software Engineer
location: Southampton, UK
phone:
github_username: mgrove36
linkedin_username: mgrove36
socials:
- link: https://github.com/mgrove36
icon: github
- link: https://linkedin.com/in/mgrove36
icon: linkedin

8
_data/skills.yml Normal file
View File

@@ -0,0 +1,8 @@
- name: Web design
value: 80
- name: Graphic design
value: 70
- name: Branding
value: 90
- name: WordPress
value: 50

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>

241
_subpages/01-about.md Normal file
View 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
View 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
View 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>

View File

@@ -51,21 +51,21 @@ permalink: /photos
<ul class="project-list"> <ul class="project-list">
{% for project-item in site.data.photos %} {% for photo-item in site.data.photos %}
<li class="project-item active" data-filter-item data-category="{{ project-item.tag | downcase }}"> <li class="project-item active" data-filter-item data-category="{{ photo-item.tag | downcase }}">
<a href="{{ project-item.link }}"> <a href="{{ photo-item.link }}">
<figure class="project-img"> <figure class="project-img">
<div class="project-item-icon-box"> <div class="project-item-icon-box">
<ion-icon name="eye-outline"></ion-icon> <ion-icon name="eye-outline"></ion-icon>
</div> </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> </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> </a>
</li> </li>
@@ -74,3 +74,43 @@ permalink: /photos
</ul> </ul>
</section> </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>