working on the skills (commiting to see if the

font-awesome icon is shown on the server)
This commit is contained in:
Karma Riuk 2023-09-21 14:55:51 +02:00
parent 6df4f40afd
commit 65e99b27ea
9 changed files with 467 additions and 293 deletions

View File

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

BIN
assets/img/neovim.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

BIN
assets/img/tsjs.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -5,290 +5,319 @@
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
(function() {
"use strict";
(function () {
"use strict";
/**
* Easy selector helper function
*/
const select = (el, all = false) => {
el = el.trim();
if (all) {
return [...document.querySelectorAll(el)];
} else {
return document.querySelector(el);
}
};
/**
* Easy event listener function
*/
const on = (type, el, listener, all = false) => {
let selectEl = select(el, all);
if (selectEl) {
if (all) {
selectEl.forEach((e) => e.addEventListener(type, listener));
} else {
selectEl.addEventListener(type, listener);
}
}
};
/**
* Easy on scroll event listener
*/
const onscroll = (el, listener) => {
el.addEventListener("scroll", listener);
};
/**
* Navbar links active state on scroll
*/
let navbarlinks = select("#navbar .scrollto", true);
const navbarlinksActive = () => {
let position = window.scrollY + 200;
navbarlinks.forEach((navbarlink) => {
if (!navbarlink.hash) return;
let section = select(navbarlink.hash);
if (!section) return;
if (
position >= section.offsetTop &&
position <= section.offsetTop + section.offsetHeight
) {
navbarlink.classList.add("active");
} else {
navbarlink.classList.remove("active");
}
});
};
window.addEventListener("load", navbarlinksActive);
onscroll(document, navbarlinksActive);
/**
* Scrolls to an element with header offset
*/
const scrollto = (el) => {
let header = select("#header");
let offset = header.offsetHeight;
if (!header.classList.contains("header-scrolled")) {
offset -= 20;
}
let elementPos = select(el).offsetTop;
window.scrollTo({
top: elementPos - offset,
behavior: "smooth",
});
};
/**
* Toggle .header-scrolled class to #header when page is scrolled
*/
let selectHeader = select("#header");
if (selectHeader) {
const headerScrolled = () => {
if (window.scrollY > 100) {
selectHeader.classList.add("header-scrolled");
} else {
selectHeader.classList.remove("header-scrolled");
}
};
window.addEventListener("load", headerScrolled);
onscroll(document, headerScrolled);
/**
* Easy selector helper function
*/
const select = (el, all = false) => {
el = el.trim();
if (all) {
return [...document.querySelectorAll(el)];
} else {
return document.querySelector(el);
}
};
/**
* Back to top button
*/
let backtotop = select(".back-to-top");
if (backtotop) {
const toggleBacktotop = () => {
if (window.scrollY > 100) {
backtotop.classList.add("active");
} else {
backtotop.classList.remove("active");
}
};
window.addEventListener("load", toggleBacktotop);
onscroll(document, toggleBacktotop);
/**
* Easy event listener function
*/
const on = (type, el, listener, all = false) => {
let selectEl = select(el, all);
if (selectEl) {
if (all) {
selectEl.forEach((e) => e.addEventListener(type, listener));
} else {
selectEl.addEventListener(type, listener);
}
}
};
/**
* Mobile nav toggle
*/
on("click", ".mobile-nav-toggle", function(e) {
select("#navbar").classList.toggle("navbar-mobile");
this.classList.toggle("bi-list");
this.classList.toggle("bi-x");
/**
* Easy on scroll event listener
*/
const onscroll = (el, listener) => {
el.addEventListener("scroll", listener);
};
/**
* Navbar links active state on scroll
*/
let navbarlinks = select("#navbar .scrollto", true);
const navbarlinksActive = () => {
let position = window.scrollY + 200;
navbarlinks.forEach((navbarlink) => {
if (!navbarlink.hash) return;
let section = select(navbarlink.hash);
if (!section) return;
if (
position >= section.offsetTop &&
position <= section.offsetTop + section.offsetHeight
) {
navbarlink.classList.add("active");
} else {
navbarlink.classList.remove("active");
}
});
};
window.addEventListener("load", navbarlinksActive);
onscroll(document, navbarlinksActive);
/**
* Scrolls to an element with header offset
*/
const scrollto = (el) => {
let header = select("#header");
let offset = header.offsetHeight;
if (!header.classList.contains("header-scrolled")) {
offset -= 20;
}
let elementPos = select(el).offsetTop;
window.scrollTo({
top: elementPos - offset,
behavior: "smooth",
});
};
/**
* Toggle .header-scrolled class to #header when page is scrolled
*/
let selectHeader = select("#header");
if (selectHeader) {
const headerScrolled = () => {
if (window.scrollY > 100) {
selectHeader.classList.add("header-scrolled");
} else {
selectHeader.classList.remove("header-scrolled");
}
};
window.addEventListener("load", headerScrolled);
onscroll(document, headerScrolled);
}
/**
* Back to top button
*/
let backtotop = select(".back-to-top");
if (backtotop) {
const toggleBacktotop = () => {
if (window.scrollY > 100) {
backtotop.classList.add("active");
} else {
backtotop.classList.remove("active");
}
};
window.addEventListener("load", toggleBacktotop);
onscroll(document, toggleBacktotop);
}
/**
* Mobile nav toggle
*/
on("click", ".mobile-nav-toggle", function (e) {
select("#navbar").classList.toggle("navbar-mobile");
this.classList.toggle("bi-list");
this.classList.toggle("bi-x");
});
/**
* Mobile nav dropdowns activate
*/
on(
"click",
".navbar .dropdown > a",
function (e) {
if (select("#navbar").classList.contains("navbar-mobile")) {
e.preventDefault();
this.nextElementSibling.classList.toggle("dropdown-active");
}
},
true
);
/**
* Scrool with ofset on links with a class name .scrollto
*/
on(
"click",
".scrollto",
function (e) {
if (select(this.hash)) {
e.preventDefault();
let navbar = select("#navbar");
if (navbar.classList.contains("navbar-mobile")) {
navbar.classList.remove("navbar-mobile");
let navbarToggle = select(".mobile-nav-toggle");
navbarToggle.classList.toggle("bi-list");
navbarToggle.classList.toggle("bi-x");
}
scrollto(this.hash);
}
},
true
);
/**
* Scroll with ofset on page load with hash links in the url
*/
window.addEventListener("load", () => {
if (window.location.hash) {
if (select(window.location.hash)) {
scrollto(window.location.hash);
}
}
});
/**
* Skills animation
*/
let skillsContent = select(".progress", true);
if (skillsContent) {
skillsContent.forEach((skill) => {
new Waypoint({
element: skill,
offset: "100%",
handler: function (direction) {
let progress = skill.querySelectorAll(".progress-bar");
progress.forEach((el) => {
let percent =
100 *
(+el.getAttribute("aria-valuenow") /
(+el.getAttribute("aria-valuemax") -
+el.getAttribute("aria-valuemin")));
el.style.width = percent + "%";
});
},
});
});
}
/**
* Testimonials slider
*/
new Swiper(".testimonials-slider", {
speed: 600,
loop: true,
autoplay: {
delay: 10000,
disableOnInteraction: false,
},
slidesPerView: "auto",
pagination: {
el: ".swiper-pagination",
type: "bullets",
clickable: true,
},
});
window.addEventListener("load", () => {
/**
* Mobile nav dropdowns activate
* Skills isotope and filter
*/
on(
let skillsContainer = select(".skills-container");
if (skillsContainer) {
let skillsIsotope = new Isotope(skillsContainer, {
itemSelector: ".skill-item",
});
let skillsFilters = select("#skills-filters li", true);
on(
"click",
".navbar .dropdown > a",
function(e) {
if (select("#navbar").classList.contains("navbar-mobile")) {
e.preventDefault();
this.nextElementSibling.classList.toggle("dropdown-active");
}
"#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,
);
/**
* Scrool with ofset on links with a class name .scrollto
*/
on(
"click",
".scrollto",
function(e) {
if (select(this.hash)) {
e.preventDefault();
let navbar = select("#navbar");
if (navbar.classList.contains("navbar-mobile")) {
navbar.classList.remove("navbar-mobile");
let navbarToggle = select(".mobile-nav-toggle");
navbarToggle.classList.toggle("bi-list");
navbarToggle.classList.toggle("bi-x");
}
scrollto(this.hash);
}
},
true,
);
/**
* Scroll with ofset on page load with hash links in the url
*/
window.addEventListener("load", () => {
if (window.location.hash) {
if (select(window.location.hash)) {
scrollto(window.location.hash);
}
}
});
/**
* Skills animation
*/
let skillsContent = select(".progress", true);
if (skillsContent) {
skillsContent.forEach((skill) => {
new Waypoint({
element: skill,
offset: "100%",
handler: function(direction) {
let progress = skill.querySelectorAll(".progress-bar");
progress.forEach((el) => {
let percent =
100 *
(+el.getAttribute("aria-valuenow") /
(+el.getAttribute("aria-valuemax") -
+el.getAttribute("aria-valuemin")));
el.style.width = percent + "%";
});
},
});
});
true
);
}
/**
* Testimonials slider
*/
new Swiper(".testimonials-slider", {
speed: 600,
loop: true,
autoplay: {
delay: 10000,
disableOnInteraction: false,
},
slidesPerView: "auto",
pagination: {
el: ".swiper-pagination",
type: "bullets",
clickable: true,
},
});
/**
* Porfolio isotope and filter
*/
window.addEventListener("load", () => {
let portfolioContainer = select(".portfolio-container");
if (portfolioContainer) {
let portfolioIsotope = new Isotope(portfolioContainer, {
itemSelector: ".portfolio-item",
});
let portfolioContainer = select(".portfolio-container");
if (portfolioContainer) {
let portfolioIsotope = new Isotope(portfolioContainer, {
itemSelector: ".portfolio-item",
});
let portfolioFilters = select("#portfolio-flters li", true);
let portfolioFilters = select("#portfolio-flters li", true);
on(
"click",
"#portfolio-flters li",
function(e) {
e.preventDefault();
portfolioFilters.forEach(function(el) {
el.classList.remove("filter-active");
});
this.classList.add("filter-active");
on(
"click",
"#portfolio-flters li",
function (e) {
e.preventDefault();
portfolioFilters.forEach(function (el) {
el.classList.remove("filter-active");
});
this.classList.add("filter-active");
portfolioIsotope.arrange({
filter: this.getAttribute("data-filter"),
});
},
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"]`,
);
horizontal_aoss.forEach((el) => el.setAttribute("data-aos", "fade-up"));
}
AOS.init();
});
/**
* Initiate portfolio lightbox
*/
const portfolioLightbox = GLightbox({
selector: ".portfolio-lightbox",
});
/**
* Portfolio details slider
*/
new Swiper(".portfolio-details-slider", {
speed: 400,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
portfolioIsotope.arrange({
filter: this.getAttribute("data-filter"),
});
},
pagination: {
el: ".swiper-pagination",
type: "bullets",
clickable: true,
},
});
if (localStorage.getItem("theme") == "light") {
toggleDarkMode();
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"]`
);
horizontal_aoss.forEach((el) => el.setAttribute("data-aos", "fade-up"));
}
AOS.init();
});
/**
* Initiate portfolio lightbox
*/
const portfolioLightbox = GLightbox({
selector: ".portfolio-lightbox",
});
/**
* Portfolio details slider
*/
new Swiper(".portfolio-details-slider", {
speed: 400,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
type: "bullets",
clickable: true,
},
});
if (localStorage.getItem("theme") == "light") {
toggleDarkMode();
}
})();
function toggleDarkMode() {
let dark_indicator = document.querySelector("#navbar i");
dark_indicator.classList.toggle("bi-moon-stars-fill");
dark_indicator.classList.toggle("bi-sun-fill");
let dark_indicator = document.querySelector("#navbar i");
dark_indicator.classList.toggle("bi-moon-stars-fill");
dark_indicator.classList.toggle("bi-sun-fill");
document.body.classList.toggle("dark");
document.body.classList.toggle("dark");
let theme = document.body.classList.contains("dark") ? "dark" : "light";
document.documentElement.style.setProperty("color-scheme", theme);
localStorage.setItem("theme", theme);
let theme = document.body.classList.contains("dark") ? "dark" : "light";
document.documentElement.style.setProperty("color-scheme", theme);
localStorage.setItem("theme", theme);
}

File diff suppressed because one or more lines are too long

View File

@ -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,47 +359,139 @@
<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>
<div class="row">
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
<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>
<!-- 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 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 class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
<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="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
<div class="icon-box">
<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>
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
<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="col-md-6 col-lg-3 mb-5 skill-item filter-prod">
<div class="icon-box">
<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>
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
<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="col-md-6 col-lg-3
mb-5 skill-item filter-web">
<div class="icon-box">
<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>
</div>
</section><!-- End My Services Section -->
<!-- ======= Testimonials Section ======= -->