Compare commits

..

1 commit

Author SHA1 Message Date
Aroy-Art
40262ccafe
Merge db2f456635 into 34c9766777 2024-07-24 22:49:40 +02:00
8 changed files with 900 additions and 896 deletions

View file

@ -12,9 +12,6 @@ enableInlineShortcodes: True
# Robot.txt file # Robot.txt file
enableRobotsTXT: True enableRobotsTXT: True
# Summary length
summaryLength: 24
################################################################# #################################################################
@ -173,15 +170,15 @@ menu:
main: main:
- name: Blog - name: Blog
pre: "" pre: ""
url: blog/ url: blog
weight: 1 weight: 1
- name: Portfolio - name: Portfolio
pre: "" pre: ""
url: portfolio/ url: portfolio
weight: 2 weight: 2
- name: About Me - name: About Me
pre: "" pre: ""
url: about/ url: about
weight: 3 weight: 3
- name: Contact - name: Contact
pre: '#' pre: '#'

View file

@ -2,7 +2,7 @@
title: Docker & Compose Cheat Sheet title: Docker & Compose Cheat Sheet
description: This is my list of use full Docker commands. description: This is my list of use full Docker commands.
date: 2020-12-02T00:00:00.000Z date: 2020-12-02T00:00:00.000Z
lastmod: 2024-09-11T21:04:52.148Z lastmod: 2024-02-13T21:23:00.829Z
image: /images/blog/Image-Docker-Command-Cheat-Sheet.png image: /images/blog/Image-Docker-Command-Cheat-Sheet.png
tags: tags:
- Cheat-Sheet - Cheat-Sheet
@ -10,7 +10,6 @@ tags:
- Docker - Docker
- Linux - Linux
slug: docker-compose-cheat-sheet slug: docker-compose-cheat-sheet
draft: true
--- ---
# A list of docker commands # A list of docker commands

View file

@ -1,15 +1,21 @@
--- ---
title: "Shebang #! Tutorial In Linux" title: "Shebang #! Tutorial In Linux"
description: "" description: ""
date: 2022-05-25T12:50:05.057Z date: 2022-05-25T12:50:05.057Z
lastmod: 2024-09-11T21:10:00.957Z lastmod: 2023-01-03T16:39:00.682Z
image: /images/blog/shebang.jpg image: /images/blog/shebang.jpg
draft: false draft: false
tags: tags:
- Linux - Linux
- Cheat-Sheet - Cheat-Sheet
slug: shebang-tutorial-linux slug: shebang-tutorial-linux
--- ---
# Shebang #! Tutorial In Linux
In computing and Linux the shebang is a character sequence that consists of `#` and `!`. Simply the shebang is expressed as `#!`. The shebang is also called sha-bang, hashbang, pound-bang, and hash-pling. The shebang is used to specify an interpreter for script files. Linux is popular with its script files and scripting languages like Bash, ZSH, Python, Perl, PHP, etc. The shebang is used to specify the interpreter type and location. When a script file is called the first line contains the shebang with the interpreter path. In computing and Linux the shebang is a character sequence that consists of `#` and `!`. Simply the shebang is expressed as `#!`. The shebang is also called sha-bang, hashbang, pound-bang, and hash-pling. The shebang is used to specify an interpreter for script files. Linux is popular with its script files and scripting languages like Bash, ZSH, Python, Perl, PHP, etc. The shebang is used to specify the interpreter type and location. When a script file is called the first line contains the shebang with the interpreter path.

View file

@ -1,7 +1,7 @@
--- ---
title: Creating 360° Equirectangular Images with Hugin title: Creating 360° Equirectangular Images with Hugin
date: 2023-08-04T11:58:40.938Z date: 2023-08-04T11:58:40.938Z
lastmod: 2024-09-11T17:46:39.391Z lastmod: 2023-11-15T20:37:52.008Z
image: /images/blog/2023-08-04-creating-360°-equirectangular-images-with-hugin/ExampleEqui.jpg image: /images/blog/2023-08-04-creating-360°-equirectangular-images-with-hugin/ExampleEqui.jpg
description: Creating equirectangular images from 6 separate cube map images using Hugin description: Creating equirectangular images from 6 separate cube map images using Hugin
tags: tags:
@ -11,6 +11,8 @@ draft: false
slug: creating-360-equirectangular-images-hugin slug: creating-360-equirectangular-images-hugin
--- ---
# Creating 360° Equirectangular Images with Hugin
We can use [Hugin](https://hugin.sourceforge.io/) to create an equirectangular image from a six-image cube. For ease of keeping track of things, it is recommended that you name the files back, front, left, right, down, and up. We can use [Hugin](https://hugin.sourceforge.io/) to create an equirectangular image from a six-image cube. For ease of keeping track of things, it is recommended that you name the files back, front, left, right, down, and up.
First, start Hugin and after it starts go to the Interface menu and select Expert from there. First, start Hugin and after it starts go to the Interface menu and select Expert from there.

View file

@ -1,7 +1,7 @@
--- ---
title: Cyberpunk - Style Glitch Text Walkthrough title: Cyberpunk-Style Glitch Text Walkthrough
date: 2024-07-23T18:35:26.560Z date: 2024-07-23T18:35:26.560Z
lastmod: 2024-09-11T20:48:16.374Z lastmod: 2024-07-24T20:43:47.560Z
image: /images/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough/Peek 2024-07-24 22-34.gif image: /images/blog/2024-07-23-cyberpunk-style-glitch-text-walkthrough/Peek 2024-07-24 22-34.gif
description: Discover how to create a cyberpunk-style glitch text effect using pure CSS. This guide covers text layering, clip-paths, and animations for a dynamic, futuristic look. Dive in and start glitching! description: Discover how to create a cyberpunk-style glitch text effect using pure CSS. This guide covers text layering, clip-paths, and animations for a dynamic, futuristic look. Dive in and start glitching!
tags: tags:
@ -12,23 +12,6 @@ draft: false
slug: cyberpunk-style-glitch-text-walkthrough slug: cyberpunk-style-glitch-text-walkthrough
--- ---
This came out of a 24-hour work sprint to replicate some sophisticated video VFX and to make it more flexible.
There's a lot of pieces that go into an effect like this. What follows is an outline of the animations and VFX concepts, all in pure css :)
**Core principles:**
* Keep the text legible most of the time
* Don't throw too many glitches in per second. Give it space to breathe
* Whitespace never hurt anyone
* Blurs & glows lend a feeling of realism in dark environments (queue neon)
---
{{< toc >}}
---
<style> <style>
.post-single-content .hero { .post-single-content .hero {
font-size: clamp(40px, 10vw, 100px); font-size: clamp(40px, 10vw, 100px);
@ -44,7 +27,6 @@ There's a lot of pieces that go into an effect like this. What follows is an out
.post-single-content .demo { .post-single-content .demo {
height: 100px; height: 100px;
margin: 0 20px 0 20px;
background: #fff; background: #fff;
} }
@ -521,11 +503,10 @@ There's a lot of pieces that go into an effect like this. What follows is an out
center no-repeat; center no-repeat;
background-size: cover; background-size: cover;
} }
</style> </style>
## The Effect # The Effect
This is how the complete effect looks like
{{< details "The Effect (What we are going to make)">}} {{< details "The Effect (What we are going to make)">}}
<div class="hero-container"> <div class="hero-container">
@ -534,6 +515,25 @@ This is how the complete effect looks like
</div> </div>
{{< /details >}} {{< /details >}}
## Walkthrough
This came out of a 24-hour work sprint to replicate some sophisticated video VFX in to make it more flexible.
There's a lot of pieces that go into an effect like this. What follows is an outline of the animations and VFX concepts, all in pure css :)
**Core principles:**
* Keep the text legible most of the time
* Don't throw too many glitches in per second. Give it space to breathe
* Whitespace never hurt anyone
* Blurs & glows lend a feeling of realism in dark environments (queue neon)
---
{{< toc >}}
---
## Layers ## Layers
Create multiple layers to play with. For this example I'll use `::before` & `::after` elements, but this could just as easily be multiple div's overlapped, or whatever. Create multiple layers to play with. For this example I'll use `::before` & `::after` elements, but this could just as easily be multiple div's overlapped, or whatever.
@ -572,7 +572,7 @@ Create multiple layers to play with. For this example I'll use `::before` & `::a
## Paths ## Paths
Build out a set of clip-paths (I wrote up a [generator util](/tools/randomly-generated-clip-path/) for this project) Build out a set of clip-paths (I wrote up a <a href="/tools/randomly-generated-clip-path/">generator util</a> for this project)
**Example Path:** **Example Path:**

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 115 KiB

@ -1 +1 @@
Subproject commit 8a56acab670e949152919c8201b837eca1300996 Subproject commit 2c47cd338caf1f807f7c5e831009bd8d0a68d55b