mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-04-28 09:46:52 +02:00
Add new blog components and post
This commit is contained in:
GitHub
parent
b35ad08052
commit
a352600428
16 changed files with 440 additions and 5 deletions
128
content/blog/scambox/002-crypto-ideas.mdx
Normal file
128
content/blog/scambox/002-crypto-ideas.mdx
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
---
|
||||
section: scambox
|
||||
language: en
|
||||
title: Kevins Great Crypto Ideas
|
||||
url: crypto-ideas
|
||||
platform: telegram
|
||||
tags: [crypto]
|
||||
published: 2022-02-05 15:00:00
|
||||
author:
|
||||
name: Kevin Kandlbinder
|
||||
---
|
||||
|
||||
import Chatbox from "../../../src/components/scambox/Chatbox.tsx";
|
||||
import Chatmsg from "../../../src/components/scambox/Chatmsg.tsx";
|
||||
import Chatnotice from "../../../src/components/scambox/Chatnotice.tsx";
|
||||
import Chatblah from "../../../src/components/scambox/Chatblah.tsx";
|
||||
|
||||
Today I want to tell you the story of a business investor, amazing ideas, unregulated organ trading and ghosting.
|
||||
So put on your seatbelts, grab your popcorn, we're jumping right into the chat-log!
|
||||
|
||||
<Chatbox open="bottom">
|
||||
<Chatmsg name="Megan">
|
||||
Hello
|
||||
</Chatmsg>
|
||||
<Chatmsg dir="out" name="Kevin">
|
||||
Hi
|
||||
</Chatmsg>
|
||||
<Chatmsg name="Megan">
|
||||
How's it going?
|
||||
</Chatmsg>
|
||||
<Chatmsg dir="out" name="Kevin">
|
||||
Can't complain, how about you?
|
||||
</Chatmsg>
|
||||
</Chatbox>
|
||||
|
||||
I love when scammers do small talk. You can always notice how forced and fake it feels.
|
||||
Wasting time here is the most fun, because they just want to get to their scammy part, but have to warm you up first.
|
||||
|
||||
<Chatbox open="both">
|
||||
<Chatmsg name="Megan">
|
||||
I'm doing great too. I'm from New Jersey, where are you from?
|
||||
</Chatmsg>
|
||||
<Chatmsg dir="out" name="Kevin">
|
||||
Oh I'm from Germany, but I've got family in NJ!
|
||||
</Chatmsg>
|
||||
</Chatbox>
|
||||
|
||||
It's not immoral to lie to scammer... right?
|
||||
|
||||
<Chatbox open="both">
|
||||
<Chatmsg name="Megan">
|
||||
Where does your family live?
|
||||
</Chatmsg>
|
||||
<Chatmsg dir="out" name="Kevin">
|
||||
Just south of Philly
|
||||
</Chatmsg>
|
||||
<Chatmsg name="Megan">
|
||||
I work at the coca cola company, but I'm also investing in crypto. What about you?
|
||||
</Chatmsg>
|
||||
<Chatmsg dir="out" name="Kevin">
|
||||
I do not work at the coca cola company.
|
||||
</Chatmsg>
|
||||
<Chatmsg name="Megan">
|
||||
Where do you work?
|
||||
</Chatmsg>
|
||||
<Chatmsg dir="out" name="Kevin">
|
||||
I work at a nightclub as a barkeeper
|
||||
</Chatmsg>
|
||||
<Chatmsg name="Megan">
|
||||
Do you make good money with that?
|
||||
</Chatmsg>
|
||||
<Chatmsg dir="out" name="Kevin">
|
||||
Can't complain, I recently inherited a huge sum of money
|
||||
</Chatmsg>
|
||||
<Chatmsg name="Megan">
|
||||
Have you thought about any business?
|
||||
</Chatmsg>
|
||||
</Chatbox>
|
||||
|
||||
Oh Megan, you would not *believe* just how many amazing business ideas I have...
|
||||
|
||||
<Chatbox open="both">
|
||||
<Chatmsg dir="out" name="Kevin">
|
||||
Ok, hear me out...
|
||||
<hr/>
|
||||
Vapes, but cats and dogs can use them!
|
||||
</Chatmsg>
|
||||
<Chatmsg name="Megan">
|
||||
That sounds like a great idea.
|
||||
</Chatmsg>
|
||||
</Chatbox>
|
||||
|
||||
No it absolutely does not, but she can't say that because she still wants me to invest in her crypto scam. 🙂
|
||||
|
||||
<Chatbox open="both">
|
||||
<Chatmsg name="Megan">
|
||||
Have you ever thought about crypto?
|
||||
</Chatmsg>
|
||||
<Chatmsg dir="out" name="Kevin">
|
||||
Actually I have. That is another business idea of mine
|
||||
<hr/>
|
||||
Organs, but they're NFTs! Right now there's the legal donation system, illegal black markets, everything is not very transparent.
|
||||
Now imagine every organ was an NFT!<br/><br/>
|
||||
Democratizing the Organ market one transaction at a time.
|
||||
</Chatmsg>
|
||||
</Chatbox>
|
||||
|
||||
At this point Megan was ready to launch into her whole crypto spiel, and I just kinda tuned out.
|
||||
But appearently my idea would work perfectly with her investment opportunity!
|
||||
|
||||
<Chatbox open="top">
|
||||
<Chatmsg name="Megan">
|
||||
<Chatblah/><Chatblah/><Chatblah/>crypto investment<Chatblah/><Chatblah/> and I love NFTs <Chatblah/> looking into minting some. <Chatblah/><Chatblah/><Chatblah/><Chatblah/> and your NFTs could work with that! <Chatblah/><Chatblah/><Chatblah/><Chatblah/><Chatblah/> with my investment company based in Denmark!
|
||||
</Chatmsg>
|
||||
<Chatmsg dir="out" name="Kevin">
|
||||
Denmark? That's really close to where I live. Where exactly is the company, so I can go there and give them the money directly?
|
||||
</Chatmsg>
|
||||
<Chatmsg name="Megan">
|
||||
What do you mean? There is no need to travel
|
||||
</Chatmsg>
|
||||
<Chatmsg dir="out" name="Kevin">
|
||||
Oh it's no problem. It's really not far, and we can save on transaction fees if I bring the money directly!
|
||||
</Chatmsg>
|
||||
<Chatnotice>Megan has cleared the chat</Chatnotice>
|
||||
</Chatbox>
|
||||
|
||||
Weird... Looks like Megan did not want me to visit her amazing investment company in Denmark... 😢
|
||||
|
||||
|
|
@ -91,7 +91,16 @@
|
|||
}
|
||||
},
|
||||
"sections": "Rubriken",
|
||||
"posts": "Beiträge"
|
||||
"posts": "Beiträge",
|
||||
"scambox": {
|
||||
"chatbox": {
|
||||
"begin": "Beginn der Chataufzeichnung",
|
||||
"end": "Ende der Chataufzeichnung",
|
||||
"interrupt": "Unterbrechung der Chataufzeichnung",
|
||||
"resume": "Fortsetzung der Chataufzeichnung",
|
||||
"says": "sagt:"
|
||||
}
|
||||
}
|
||||
},
|
||||
"not_found": {
|
||||
"title": "Nicht Gefunden",
|
||||
|
|
|
|||
|
|
@ -91,7 +91,16 @@
|
|||
}
|
||||
},
|
||||
"sections": "Sections",
|
||||
"posts": "Posts"
|
||||
"posts": "Posts",
|
||||
"scambox": {
|
||||
"chatbox": {
|
||||
"begin": "Begin of chat-log",
|
||||
"resume": "Continuation of chat-log",
|
||||
"interrupt": "Interruption of chat-log",
|
||||
"end": "End of chat-log",
|
||||
"says": "says:"
|
||||
}
|
||||
}
|
||||
},
|
||||
"not_found": {
|
||||
"title": "Not Found",
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@
|
|||
"@icons-pack/react-simple-icons": "4.6.1",
|
||||
"@mdx-js/mdx": "1.6.22",
|
||||
"@mdx-js/react": "1.6.22",
|
||||
"@react-hook/media-query": "^1.1.1",
|
||||
"@types/animejs": "^3.1.4",
|
||||
"@types/node": "17.0.14",
|
||||
"@types/react": "17.0.39",
|
||||
"@types/react-dom": "17.0.11",
|
||||
|
|
@ -58,6 +60,7 @@
|
|||
"hamburger-react": "2.4.1",
|
||||
"i18next": "21.6.10",
|
||||
"locale": "0.1.0",
|
||||
"lodash": "^4.17.21",
|
||||
"lucide-react": "0.16.29",
|
||||
"prop-types": "15.8.1",
|
||||
"react": "17.0.2",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@use "sass:map";
|
||||
|
||||
$layoutWidth: 1200px;
|
||||
$layoutWidth: 1100px;
|
||||
$layoutPadding: 20px;
|
||||
|
||||
$mainFont: "Fira Code", monospace;
|
||||
|
|
|
|||
58
src/components/scambox/Chatblah.tsx
Normal file
58
src/components/scambox/Chatblah.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import React, { useEffect, useRef, useState } from "react";
|
||||
import anime, { AnimeTimelineInstance } from "animejs";
|
||||
import _uniqueId from 'lodash/uniqueId';
|
||||
import {useMediaQuery} from '@react-hook/media-query'
|
||||
|
||||
|
||||
import * as styles from "./Chatbox.module.scss";
|
||||
|
||||
const Chatblah = () => {
|
||||
const animeRef = useRef<AnimeTimelineInstance>(null)
|
||||
const [myId,] = useState(_uniqueId)
|
||||
const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)")
|
||||
|
||||
useEffect(() => {
|
||||
if(typeof window === "undefined") return; // Don't run on static build
|
||||
if(reduceMotion) return; // Don't run the animation for users who prefer reduced motion
|
||||
|
||||
const speed = 0.25;
|
||||
const delay = anime.random(100/speed, 1000/speed);
|
||||
|
||||
animeRef.current = anime.timeline({
|
||||
targets: "#chatblah-"+myId,
|
||||
loop: true,
|
||||
easing: "easeInOutSine"
|
||||
})
|
||||
|
||||
const tl = animeRef.current
|
||||
|
||||
tl.add({
|
||||
duration: 250/speed,
|
||||
opacity: [0, .25],
|
||||
easing: "linear"
|
||||
}, delay).add({
|
||||
duration: 1000/speed,
|
||||
rotate: [anime.random(-5, 5)+"deg", anime.random(-10, 10)+"deg"],
|
||||
translateY: [0, anime.random(0, -2)+"px"],
|
||||
translateX: [0, anime.random(-2, 2)+"px"],
|
||||
}, delay).add({
|
||||
duration: 500/speed,
|
||||
opacity: [.25, 0],
|
||||
easing: "linear"
|
||||
}, delay+(500/speed))
|
||||
|
||||
return () => {
|
||||
if(animeRef.current) {
|
||||
animeRef.current.pause();
|
||||
animeRef.current = null;
|
||||
}
|
||||
}
|
||||
}, [myId, reduceMotion])
|
||||
|
||||
|
||||
return <div className={styles.chatBlah} id={"chatblah-"+myId}>
|
||||
<span>blah</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Chatblah
|
||||
138
src/components/scambox/Chatbox.module.scss
Normal file
138
src/components/scambox/Chatbox.module.scss
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
@use "sass:math";
|
||||
@use "sass:map";
|
||||
@import "../../globals";
|
||||
|
||||
.screenReader {
|
||||
opacity: 0.001;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chatbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $layoutPadding;
|
||||
margin: $layoutPadding (-$layoutPadding);
|
||||
background-color: rgba(gray, 0.1);
|
||||
border-radius: 10px;
|
||||
|
||||
&.openBottom {
|
||||
border-radius: 10px 10px 0 0;
|
||||
margin-bottom: 20px;
|
||||
background-image: linear-gradient(
|
||||
to top,
|
||||
$background,
|
||||
transparent 20px
|
||||
);
|
||||
}
|
||||
|
||||
&.openBoth {
|
||||
border-radius: 0;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
background-image: linear-gradient(to top, $background, transparent 20px),
|
||||
linear-gradient(to bottom, $background, transparent 20px);
|
||||
}
|
||||
|
||||
&.openTop {
|
||||
border-radius: 0 0 10px 10px;
|
||||
margin-top: 20px;
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
$background,
|
||||
transparent 20px
|
||||
);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
&.openBottom {
|
||||
background-image: linear-gradient(
|
||||
to top,
|
||||
$lightBackground,
|
||||
transparent 20px
|
||||
);
|
||||
}
|
||||
|
||||
&.openBoth {
|
||||
background-image: linear-gradient(
|
||||
to top,
|
||||
$lightBackground,
|
||||
transparent 20px
|
||||
),
|
||||
linear-gradient(to bottom, $lightBackground, transparent 20px);
|
||||
}
|
||||
|
||||
&.openTop {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
$lightBackground,
|
||||
transparent 20px
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chatnotice {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
margin: math.div($layoutPadding, 2) $layoutPadding;
|
||||
|
||||
> span {
|
||||
max-width: 500px;
|
||||
opacity: 0.75;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.chatmsg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin: 0 $layoutPadding;
|
||||
|
||||
align-items: flex-start;
|
||||
|
||||
--msg-color: #{map.get($theme, "blue")};
|
||||
|
||||
&.alignRight {
|
||||
align-items: flex-end;
|
||||
|
||||
--msg-color: #{$accentColor};
|
||||
}
|
||||
|
||||
.name {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.chatbubble {
|
||||
position: relative;
|
||||
padding: math.div($layoutPadding, 2) $layoutPadding;
|
||||
border-radius: 10px;
|
||||
border: thin solid var(--msg-color);
|
||||
max-width: 700px;
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
margin: math.div($layoutPadding, 2) (-$layoutPadding);
|
||||
border: none;
|
||||
border-top: thin solid var(--msg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chatBlah {
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
opacity: 0.25;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
11
src/components/scambox/Chatbox.module.scss.d.ts
vendored
Normal file
11
src/components/scambox/Chatbox.module.scss.d.ts
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
export const alignRight: string;
|
||||
export const chatBlah: string;
|
||||
export const chatbox: string;
|
||||
export const chatbubble: string;
|
||||
export const chatmsg: string;
|
||||
export const chatnotice: string;
|
||||
export const name: string;
|
||||
export const openBoth: string;
|
||||
export const openBottom: string;
|
||||
export const openTop: string;
|
||||
export const screenReader: string;
|
||||
20
src/components/scambox/Chatbox.tsx
Normal file
20
src/components/scambox/Chatbox.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import * as styles from "./Chatbox.module.scss";
|
||||
|
||||
type ChatboxProps = {
|
||||
open?: string
|
||||
}
|
||||
|
||||
const Chatbox = ({children, open}: React.PropsWithChildren<ChatboxProps>) => {
|
||||
const {t} = useTranslation();
|
||||
|
||||
return <div className={styles.chatbox + (open === "top" ? " " + styles.openTop : "") + (open === "bottom" ? " " + styles.openBottom : "") + (open === "both" ? " " + styles.openBoth : "")}>
|
||||
<span className={styles.screenReader}>-- {open === "top" || open === "both" ? t("blog.scambox.chatbox.resume") : t("blog.scambox.chatbox.begin")} --</span>
|
||||
{children}
|
||||
<span className={styles.screenReader}>-- {open === "bottom" || open === "both" ? t("blog.scambox.chatbox.interrupt") : t("blog.scambox.chatbox.end")} --</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Chatbox
|
||||
27
src/components/scambox/Chatmsg.tsx
Normal file
27
src/components/scambox/Chatmsg.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import * as styles from "./Chatbox.module.scss"
|
||||
|
||||
type ChatmsgProps = {
|
||||
name?: string,
|
||||
timestamp?: string,
|
||||
color?: string,
|
||||
dir: string
|
||||
}
|
||||
|
||||
const Chatmsg = (props: React.PropsWithChildren<ChatmsgProps>) => {
|
||||
const {t} = useTranslation();
|
||||
|
||||
return <div className={styles.chatmsg + (props.dir === "out" ? " " + styles.alignRight : "")}>
|
||||
{props.name && <span className={styles.name}>{props.name}<span className={styles.screenReader}> {t("blog.scambox.chatbox.says")}</span></span>}
|
||||
<div className={styles.chatbubble}>
|
||||
<div>
|
||||
{props.children}
|
||||
</div>
|
||||
{props.timestamp && <span>{props.timestamp}</span>}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Chatmsg
|
||||
11
src/components/scambox/Chatnotice.tsx
Normal file
11
src/components/scambox/Chatnotice.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import React from "react";
|
||||
|
||||
import * as styles from "./Chatbox.module.scss"
|
||||
|
||||
const Chatnotice = (props: React.PropsWithChildren<{}>) => {
|
||||
return <div className={styles.chatnotice}>
|
||||
<span>{props.children}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default Chatnotice
|
||||
|
|
@ -4,6 +4,11 @@
|
|||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
body,
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import {
|
|||
Phone,
|
||||
} from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMediaQuery } from "@react-hook/media-query";
|
||||
//import * as particleConfig from "./index.particles.json";
|
||||
|
||||
export const query = graphql`
|
||||
|
|
@ -62,9 +63,11 @@ export const query = graphql`
|
|||
|
||||
const IndexPage = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)")
|
||||
|
||||
React.useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
if (reduceMotion) return;
|
||||
|
||||
anime({
|
||||
targets: [
|
||||
|
|
@ -95,7 +98,7 @@ const IndexPage = (props) => {
|
|||
/*if (typeof window !== "undefined")
|
||||
// eslint-disable-next-line no-undef
|
||||
window.setTimeout(loadTsParticles, 1000);*/
|
||||
}, []);
|
||||
}, [reduceMotion]);
|
||||
|
||||
let meta = props.data.site.siteMetadata;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@
|
|||
|
||||
.postSection {
|
||||
flex-grow: 1;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
|
||||
> article {
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const BlogPost = ({ data }) => {
|
|||
<script type="application/ld+json">
|
||||
{JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "NewsArticle",
|
||||
"@type": "BlogPosting",
|
||||
headline: data.mdx.frontmatter.title,
|
||||
datePublished: data.mdx.frontmatter.publishedIso,
|
||||
dateModified: data.mdx.frontmatter.publishedIso,
|
||||
|
|
@ -30,6 +30,7 @@ const BlogPost = ({ data }) => {
|
|||
{
|
||||
"@type": "Person",
|
||||
name: data.mdx.frontmatter.author.name,
|
||||
url: "https://kevink.dev/blog/"
|
||||
},
|
||||
],
|
||||
})}
|
||||
|
|
|
|||
10
yarn.lock
10
yarn.lock
|
|
@ -1997,6 +1997,11 @@
|
|||
schema-utils "^2.6.5"
|
||||
source-map "^0.7.3"
|
||||
|
||||
"@react-hook/media-query@^1.1.1":
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@react-hook/media-query/-/media-query-1.1.1.tgz#7fc4e52591784a39be924b62b4270ae3e18ec578"
|
||||
integrity sha512-VM14wDOX5CW5Dn6b2lTiMd79BFMTut9AZj2+vIRT3LCKgMCYmdqruTtzDPSnIVDQdtxdPgtOzvU9oK20LopuOw==
|
||||
|
||||
"@sideway/address@^4.1.0":
|
||||
version "4.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.2.tgz#811b84333a335739d3969cfc434736268170cad1"
|
||||
|
|
@ -2076,6 +2081,11 @@
|
|||
resolved "https://registry.yarnpkg.com/@turist/time/-/time-0.0.2.tgz#32fe0ce708ea0f4512776bd313409f1459976dda"
|
||||
integrity sha512-qLOvfmlG2vCVw5fo/oz8WAZYlpe5a5OurgTj3diIxJCdjRHpapC+vQCz3er9LV79Vcat+DifBjeAhOAdmndtDQ==
|
||||
|
||||
"@types/animejs@^3.1.4":
|
||||
version "3.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@types/animejs/-/animejs-3.1.4.tgz#92f90d1c800b9041b64a7da9da0e68e690146b0e"
|
||||
integrity sha512-WUjeFT2SXd6intfE6cg6eL1jk/JL88JqM2gC4WqO4iHLmbCvHUq6aoLK13lGpDWs4FtS2PHoYraJZ0dEx99Dyg==
|
||||
|
||||
"@types/cacheable-request@^6.0.1":
|
||||
version "6.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/cacheable-request/-/cacheable-request-6.0.2.tgz#c324da0197de0a98a2312156536ae262429ff6b9"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue