working on the skills (commiting to see if the
font-awesome icon is shown on the server)
This commit is contained in:
Karma Riuk
parent
6df4f40afd
commit
65e99b27ea
@ -758,6 +758,36 @@ section {
|
||||
/*--------------------------------------------------------------
|
||||
# My Skills
|
||||
--------------------------------------------------------------*/
|
||||
.skills #skills-filters {
|
||||
list-style: none;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.skills #skills-filters li {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin: 0 10px 10px 10px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
padding: 7px 10px;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-color);
|
||||
transition: all 0.3s ease-in-out;
|
||||
border: 2px solid var(--border);
|
||||
}
|
||||
|
||||
.skills #skills-filters li:hover,
|
||||
.skills #skills-filters li.filter-active {
|
||||
color: #f3a200;
|
||||
border-color: var(--highlight);
|
||||
}
|
||||
|
||||
.skills .skill-item {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.skills .icon-box {
|
||||
padding: 30px;
|
||||
position: relative;
|
||||
@ -769,11 +799,19 @@ section {
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.skills .icon-box p {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.skills .icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 20px auto;
|
||||
padding-top: 17px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
/* padding-top: 17px; */
|
||||
/* display: inline-block; */
|
||||
/* text-align: center; */
|
||||
border-radius: 50%;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
@ -787,6 +825,11 @@ section {
|
||||
color: var(--highlight);
|
||||
}
|
||||
|
||||
.skills .icon img {
|
||||
max-height: 36px;
|
||||
max-width: 36px;
|
||||
}
|
||||
|
||||
.skills .title {
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
|
||||
BIN
assets/img/arch.png
Normal file
BIN
assets/img/arch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
assets/img/docker.png
Normal file
BIN
assets/img/docker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
assets/img/htmlcss.png
Normal file
BIN
assets/img/htmlcss.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
BIN
assets/img/neovim.png
Normal file
BIN
assets/img/neovim.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
assets/img/tsjs.png
Normal file
BIN
assets/img/tsjs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@ -5,7 +5,7 @@
|
||||
* Author: BootstrapMade.com
|
||||
* License: https://bootstrapmade.com/license/
|
||||
*/
|
||||
(function() {
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
@ -117,7 +117,7 @@
|
||||
/**
|
||||
* Mobile nav toggle
|
||||
*/
|
||||
on("click", ".mobile-nav-toggle", function(e) {
|
||||
on("click", ".mobile-nav-toggle", function (e) {
|
||||
select("#navbar").classList.toggle("navbar-mobile");
|
||||
this.classList.toggle("bi-list");
|
||||
this.classList.toggle("bi-x");
|
||||
@ -129,13 +129,13 @@
|
||||
on(
|
||||
"click",
|
||||
".navbar .dropdown > a",
|
||||
function(e) {
|
||||
function (e) {
|
||||
if (select("#navbar").classList.contains("navbar-mobile")) {
|
||||
e.preventDefault();
|
||||
this.nextElementSibling.classList.toggle("dropdown-active");
|
||||
}
|
||||
},
|
||||
true,
|
||||
true
|
||||
);
|
||||
|
||||
/**
|
||||
@ -144,7 +144,7 @@
|
||||
on(
|
||||
"click",
|
||||
".scrollto",
|
||||
function(e) {
|
||||
function (e) {
|
||||
if (select(this.hash)) {
|
||||
e.preventDefault();
|
||||
|
||||
@ -158,7 +158,7 @@
|
||||
scrollto(this.hash);
|
||||
}
|
||||
},
|
||||
true,
|
||||
true
|
||||
);
|
||||
|
||||
/**
|
||||
@ -181,7 +181,7 @@
|
||||
new Waypoint({
|
||||
element: skill,
|
||||
offset: "100%",
|
||||
handler: function(direction) {
|
||||
handler: function (direction) {
|
||||
let progress = skill.querySelectorAll(".progress-bar");
|
||||
progress.forEach((el) => {
|
||||
let percent =
|
||||
@ -214,10 +214,39 @@
|
||||
},
|
||||
});
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
/**
|
||||
* Skills isotope and filter
|
||||
*/
|
||||
let skillsContainer = select(".skills-container");
|
||||
if (skillsContainer) {
|
||||
let skillsIsotope = new Isotope(skillsContainer, {
|
||||
itemSelector: ".skill-item",
|
||||
});
|
||||
|
||||
let skillsFilters = select("#skills-filters li", true);
|
||||
|
||||
on(
|
||||
"click",
|
||||
"#skills-filters li",
|
||||
function (e) {
|
||||
e.preventDefault();
|
||||
skillsFilters.forEach(function (el) {
|
||||
el.classList.remove("filter-active");
|
||||
});
|
||||
this.classList.add("filter-active");
|
||||
|
||||
skillsIsotope.arrange({
|
||||
filter: this.getAttribute("data-filter"),
|
||||
});
|
||||
},
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Porfolio isotope and filter
|
||||
*/
|
||||
window.addEventListener("load", () => {
|
||||
let portfolioContainer = select(".portfolio-container");
|
||||
if (portfolioContainer) {
|
||||
let portfolioIsotope = new Isotope(portfolioContainer, {
|
||||
@ -229,9 +258,9 @@
|
||||
on(
|
||||
"click",
|
||||
"#portfolio-flters li",
|
||||
function(e) {
|
||||
function (e) {
|
||||
e.preventDefault();
|
||||
portfolioFilters.forEach(function(el) {
|
||||
portfolioFilters.forEach(function (el) {
|
||||
el.classList.remove("filter-active");
|
||||
});
|
||||
this.classList.add("filter-active");
|
||||
@ -240,13 +269,13 @@
|
||||
filter: this.getAttribute("data-filter"),
|
||||
});
|
||||
},
|
||||
true,
|
||||
true
|
||||
);
|
||||
}
|
||||
// let horizontal_aoss = document.querySelectorAll("[data-aos~='left'], [data-aos~='right']")
|
||||
if (window.matchMedia("(max-width: 768px)").matches) {
|
||||
let horizontal_aoss = document.querySelectorAll(
|
||||
`[data-aos$="left"], [data-aos$="right"]`,
|
||||
`[data-aos$="left"], [data-aos$="right"]`
|
||||
);
|
||||
horizontal_aoss.forEach((el) => el.setAttribute("data-aos", "fade-up"));
|
||||
}
|
||||
|
||||
9
assets/vendor/font-awesome/fontawesome.min.css
vendored
Normal file
9
assets/vendor/font-awesome/fontawesome.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
133
index.html
133
index.html
@ -27,6 +27,7 @@
|
||||
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
|
||||
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
|
||||
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="assets/vendor/font-awesome/fontawesome.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Template Main CSS File -->
|
||||
<link href="assets/css/style.css" rel="stylesheet">
|
||||
@ -358,45 +359,137 @@
|
||||
<h2>My Skills</h2>
|
||||
<p>Sit sint consectetur velit quisquam cupiditate impedit suscipit alias</p>
|
||||
</div>
|
||||
<ul id="skills-filters" class="d-flex justify-content-center">
|
||||
<li data-filter="*" class="filter-active">All</li>
|
||||
<li data-filter=".filter-prod">Productivity</li>
|
||||
<li data-filter=".filter-lang">Languages</li>
|
||||
<li data-filter=".filter-frame">Frameworks</li>
|
||||
<li data-filter=".filter-web">Web</li>
|
||||
</ul>
|
||||
|
||||
<!-- TODO: check the filter & link of each thing (normally the first
|
||||
line should be good) -->
|
||||
<div class="skills-container">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
|
||||
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="bx bxl-dribbble"></i></div>
|
||||
<h4 class="title"><a href="">Lorem Ipsum</a></h4>
|
||||
<p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias
|
||||
excepturi sint occaecati cupiditate non provident</p>
|
||||
<div class="icon">
|
||||
<img src="assets/img/neovim.png" alt="neovim-logo" />
|
||||
</div>
|
||||
<h4 class="title"><a href="https://neovim.io">Neovim</a></h4>
|
||||
<p class="description">
|
||||
Neovim is a versatile text editor that's become
|
||||
an integral part of my workflow. It
|
||||
offers customization, plugin support, and version control integration, making it a
|
||||
reliable tool for my coding and writing tasks.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
|
||||
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="bx bx-file"></i></div>
|
||||
<h4 class="title"><a href="">Sed ut perspiciatis</a></h4>
|
||||
<p class="description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur</p>
|
||||
<div class="icon">
|
||||
<img src="assets/img/arch.png" alt="arch-linux-logo" />
|
||||
</div>
|
||||
<h4 class="title"><a href="https://archlinux.org">Arch Linux</a></h4>
|
||||
<p class="description">Arch Linux is a minimalist, user-centric operating system that
|
||||
I've
|
||||
come to appreciate. It's not for everyone, but if you value control and enjoy
|
||||
crafting
|
||||
your system to suit your needs, it's a solid choice. With a rolling release model
|
||||
and a
|
||||
wealth of user-contributed packages, Arch Linux offers a clean slate to build your
|
||||
computing environment.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
|
||||
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="bx bx-tachometer"></i></div>
|
||||
<h4 class="title"><a href="">Magni Dolores</a></h4>
|
||||
<p class="description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum</p>
|
||||
<div class="icon">
|
||||
<img src="assets/img/docker.png" alt="docker-logo" />
|
||||
</div>
|
||||
<h4 class="title"><a href="https://www.docker.com">Docker</a></h4>
|
||||
<p class="description">Docker is a practical tool for managing containers, which I find
|
||||
quite handy. It simplifies application deployment and scaling by encapsulating
|
||||
applications and their dependencies. With Docker, you can create, test, and deploy
|
||||
applications consistently, making it a valuable addition to any developer's toolkit.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
|
||||
<div class="col-md-6 col-lg-3
|
||||
mb-5 skill-item filter-web">
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="bx bx-world"></i></div>
|
||||
<h4 class="title"><a href="">Nemo Enim</a></h4>
|
||||
<p class="description">At vero eos et accusamus et iusto odio dignissimos ducimus qui
|
||||
blanditiis praesentium voluptatum deleniti atque</p>
|
||||
<div class="icon"><i class="bx bx-server"></i></div>
|
||||
<h4 class="title"><a href="">Server Management</a></h4>
|
||||
<p class="description">Since 2018, I've been diving into the world of server
|
||||
administration,
|
||||
experimenting with various hardware setups. It's been an enriching journey that's
|
||||
expanded my technical horizons. I've come to appreciate the art of keeping servers
|
||||
running smoothly and securely. Additionally, delving into DevOps activities has
|
||||
allowed
|
||||
me to bridge the gap between development and operations, streamlining processes and
|
||||
improving overall efficiency.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
|
||||
<div class="icon-box">
|
||||
<div class="icon"><i class="fa fa-masks-theater"></i></div>
|
||||
<h4 class="title"><a href="https://neovim.io">Javascript / Typescript</a></h4>
|
||||
<p class="description">
|
||||
Neovim is a versatile text editor that's become
|
||||
an integral part of my workflow. It
|
||||
offers customization, plugin support, and version control integration, making it a
|
||||
reliable tool for my coding and writing tasks.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
|
||||
<div class="icon-box">
|
||||
<div class="icon">
|
||||
<img src="assets/img/tsjs.png" alt="neovim-logo" />
|
||||
</div>
|
||||
<h4 class="title"><a href="https://neovim.io">Javascript / Typescript</a></h4>
|
||||
<p class="description">
|
||||
Neovim is a versatile text editor that's become
|
||||
an integral part of my workflow. It
|
||||
offers customization, plugin support, and version control integration, making it a
|
||||
reliable tool for my coding and writing tasks.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
|
||||
<div class="icon-box">
|
||||
<div class="icon">
|
||||
<img src="assets/img/neovim.png" alt="neovim-logo" />
|
||||
</div>
|
||||
<h4 class="title"><a href="https://neovim.io">Neovim</a></h4>
|
||||
<p class="description">
|
||||
Neovim is a versatile text editor that's become
|
||||
an integral part of my workflow. It
|
||||
offers customization, plugin support, and version control integration, making it a
|
||||
reliable tool for my coding and writing tasks.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
|
||||
<div class="icon-box">
|
||||
<div class="icon">
|
||||
<img src="assets/img/neovim.png" alt="neovim-logo" />
|
||||
</div>
|
||||
<h4 class="title"><a href="https://neovim.io">Neovim</a></h4>
|
||||
<p class="description">
|
||||
Neovim is a versatile text editor that's become
|
||||
an integral part of my workflow. It
|
||||
offers customization, plugin support, and version control integration, making it a
|
||||
reliable tool for my coding and writing tasks.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section><!-- End My Services Section -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user