mirror of
https://github.com/Aroy-Art/Aroy-Art-Site.git
synced 2024-12-27 07:04:23 +01:00
Compare commits
35 commits
40262ccafe
...
349d183b1f
Author | SHA1 | Date | |
---|---|---|---|
|
349d183b1f | ||
1741078b3b | |||
2024a0daca | |||
7e26eaf70f | |||
dacbdafe1d | |||
0760141c58 | |||
c8f01b9d1f | |||
d778d83a26 | |||
fdc5aff9af | |||
c9aea406ff | |||
1bb77c3de5 | |||
3bce8b549a | |||
cdb8af38f8 | |||
e6ca230722 | |||
0d4eb1cb36 | |||
17a813deba | |||
|
34c9766777 | ||
|
70355e7b31 | ||
|
1f71ae6c57 | ||
|
c57b3fdfc5 | ||
|
5ddc94d467 | ||
|
ec299af327 | ||
|
e219c7b91e | ||
|
230443af77 | ||
|
67b112802c | ||
|
f539ee42fd | ||
|
6e0ce0265e | ||
|
12ab0e5b6c | ||
|
7e32989a7b | ||
|
9610b7f5b6 | ||
|
4110d963a5 | ||
|
a2e4ab0045 | ||
|
608903bae5 | ||
|
883748e826 | ||
|
fcbd3bcff1 |
8 changed files with 896 additions and 900 deletions
|
@ -12,6 +12,9 @@ enableInlineShortcodes: True
|
|||
|
||||
# Robot.txt file
|
||||
enableRobotsTXT: True
|
||||
|
||||
# Summary length
|
||||
summaryLength: 24
|
||||
#################################################################
|
||||
|
||||
|
||||
|
@ -170,15 +173,15 @@ menu:
|
|||
main:
|
||||
- name: Blog
|
||||
pre: ""
|
||||
url: blog
|
||||
url: blog/
|
||||
weight: 1
|
||||
- name: Portfolio
|
||||
pre: ""
|
||||
url: portfolio
|
||||
url: portfolio/
|
||||
weight: 2
|
||||
- name: About Me
|
||||
pre: ""
|
||||
url: about
|
||||
url: about/
|
||||
weight: 3
|
||||
- name: Contact
|
||||
pre: '#'
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
title: Docker & Compose Cheat Sheet
|
||||
description: This is my list of use full Docker commands.
|
||||
date: 2020-12-02T00:00:00.000Z
|
||||
lastmod: 2024-02-13T21:23:00.829Z
|
||||
lastmod: 2024-09-11T21:04:52.148Z
|
||||
image: /images/blog/Image-Docker-Command-Cheat-Sheet.png
|
||||
tags:
|
||||
- Cheat-Sheet
|
||||
|
@ -10,6 +10,7 @@ tags:
|
|||
- Docker
|
||||
- Linux
|
||||
slug: docker-compose-cheat-sheet
|
||||
draft: true
|
||||
---
|
||||
|
||||
# A list of docker commands
|
||||
|
|
|
@ -1,21 +1,15 @@
|
|||
---
|
||||
title: "Shebang #! Tutorial In Linux"
|
||||
description: ""
|
||||
|
||||
date: 2022-05-25T12:50:05.057Z
|
||||
lastmod: 2023-01-03T16:39:00.682Z
|
||||
|
||||
lastmod: 2024-09-11T21:10:00.957Z
|
||||
image: /images/blog/shebang.jpg
|
||||
|
||||
draft: false
|
||||
|
||||
tags:
|
||||
- Linux
|
||||
- Cheat-Sheet
|
||||
|
||||
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.
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Creating 360° Equirectangular Images with Hugin
|
||||
date: 2023-08-04T11:58:40.938Z
|
||||
lastmod: 2023-11-15T20:37:52.008Z
|
||||
lastmod: 2024-09-11T17:46:39.391Z
|
||||
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
|
||||
tags:
|
||||
|
@ -11,8 +11,6 @@ draft: false
|
|||
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.
|
||||
|
||||
First, start Hugin and after it starts go to the Interface menu and select Expert from there.
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Cyberpunk - Style Glitch Text Walkthrough
|
||||
date: 2024-07-23T18:35:26.560Z
|
||||
lastmod: 2024-07-24T20:43:47.560Z
|
||||
lastmod: 2024-09-11T20:48:16.374Z
|
||||
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!
|
||||
tags:
|
||||
|
@ -12,6 +12,23 @@ draft: false
|
|||
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>
|
||||
.post-single-content .hero {
|
||||
font-size: clamp(40px, 10vw, 100px);
|
||||
|
@ -27,6 +44,7 @@ slug: cyberpunk-style-glitch-text-walkthrough
|
|||
|
||||
.post-single-content .demo {
|
||||
height: 100px;
|
||||
margin: 0 20px 0 20px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
|
@ -503,10 +521,11 @@ slug: cyberpunk-style-glitch-text-walkthrough
|
|||
center no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
# The Effect
|
||||
## The Effect
|
||||
|
||||
This is how the complete effect looks like
|
||||
|
||||
{{< details "The Effect (What we are going to make)">}}
|
||||
<div class="hero-container">
|
||||
|
@ -515,25 +534,6 @@ slug: cyberpunk-style-glitch-text-walkthrough
|
|||
</div>
|
||||
{{< /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
|
||||
|
||||
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
|
||||
|
||||
Build out a set of clip-paths (I wrote up a <a href="/tools/randomly-generated-clip-path/">generator util</a> for this project)
|
||||
Build out a set of clip-paths (I wrote up a [generator util](/tools/randomly-generated-clip-path/) for this project)
|
||||
|
||||
**Example Path:**
|
||||
|
||||
|
|
BIN
static/img/avatar-100.png
Normal file
BIN
static/img/avatar-100.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 12 KiB |
BIN
static/img/avatar-512.png
Normal file
BIN
static/img/avatar-512.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 115 KiB |
|
@ -1 +1 @@
|
|||
Subproject commit 2c47cd338caf1f807f7c5e831009bd8d0a68d55b
|
||||
Subproject commit 8a56acab670e949152919c8201b837eca1300996
|
Loading…
Reference in a new issue