updates

.github/workflows/build-latex.yml

@@ -37,7 +37,7 @@ jobs:
           node-version: '12'
       
       - name: Build READM.md
-        run: node readme/index.js > README.md
+        run: node scripts/readme.js > README.md
 
       - uses: EndBug/add-and-commit@v7
         with:

.gitignore

@@ -2,3 +2,8 @@
 /*.log
 /out
 /.next
+/latex/**/*.aux
+/latex/**/*.log
+/latex/**/*.in
+/latex/**/*.pdf
+/latex/_markdown_*

components/Background/index.tsx

@@ -1,131 +1,99 @@
 // https://redstapler.co/cool-nebula-background-effect-three-js/
 
+// https://redstapler.co/cool-nebula-background-effect-three-js/
+
 import * as THREE from 'three';
-import { Canvas, useFrame, useThree } from '@react-three/fiber';
+import React, { useEffect } from 'react';
-import React, { useEffect, useMemo, useState } from 'react';
 
-interface CloudProps {
+const setup = () => {
-  texture: THREE.Texture;
+  let scene, camera, renderer;
-  position: [number, number, number];
+  let cloudParticles = [];
-  rotation: {
+
-    x: number;
+  function init() {
-    y: number;
+    scene = new THREE.Scene();
-    z: number;
+    camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,1,1000);
-  };
+    camera.position.z = 1;
+    camera.rotation.x = 1.16;
+    camera.rotation.y = -0.12;
+    camera.rotation.z = 0.27;
+    let ambient = new THREE.AmbientLight(0x555555);
+    scene.add(ambient);
+    renderer = new THREE.WebGLRenderer();
+    renderer.setSize(window.innerWidth,window.innerHeight);
+    scene.fog = new THREE.FogExp2(0x03544e, 0.001);
+    renderer.setClearColor(scene.fog.color);
+    renderer.domElement.style.position = 'fixed';
+    renderer.domElement.style.top = '0';
+    renderer.domElement.style.left = '0';
+    renderer.domElement.style.width = '100%';
+    renderer.domElement.style.height = '100%';
+    renderer.domElement.style.zIndex = -1;
+    renderer.domElement.style.opacity = 1;
+
+    document.body.appendChild(renderer.domElement);
+    addParticles();
+    addLights();
+    render();
   }
 
-const initialClouds = new Array(30).fill(undefined).map((_, i) => ({
+  const addParticles = () => {
-  name: `id_${i}`,
+    let loader = new THREE.TextureLoader();
-  position: [
+    loader.load("/images/smoke.png", (texture) => {
+      const cloudGeo = new THREE.PlaneBufferGeometry(500,500);
+      const cloudMaterial = new THREE.MeshLambertMaterial({
+        map:texture,
+        transparent: true
+      });
+      for(let p=0; p<50; p++) {
+        let cloud = new THREE.Mesh(cloudGeo, cloudMaterial);
+        cloud.position.set(
           Math.random()*800 -400,
           500,
-    Math.random() * 500 - 500,
+          Math.random()*500-500
-  ] as [number, number, number],
-  rotation: {
-    x: 1.16,
-    y: -0.12,
-    z: Math.random() * 2 * Math.PI,
-  },
-}));
-
-const Cloud: React.FC<CloudProps> = ({ texture, position, rotation }) => {
-  return (
-    <mesh position={position} rotation={[ rotation.x, rotation.y, rotation.z ]}>
-      <planeBufferGeometry args={[500, 500]} />
-      <meshLambertMaterial opacity={.5} map={texture} transparent={true} />
-    </mesh>
         );
+        cloud.rotation.x = 1.16;
+        cloud.rotation.y = -0.12;
+        cloud.rotation.z = Math.random()*2*Math.PI;
+        cloud.material.opacity = 0.55;
+        cloudParticles.push(cloud);
+        scene.add(cloud);
+      }
+    });
+  }
+
+  const addLights = () => {
+    let directionalLight = new THREE.DirectionalLight(0xff8c19);
+    directionalLight.position.set(0,0,1);
+    scene.add(directionalLight);
+
+    let orangeLight = new THREE.PointLight(0xcc6600,50,450,1.7);
+    orangeLight.position.set(200,300,100);
+    scene.add(orangeLight);
+    let redLight = new THREE.PointLight(0xd8547e,50,450,1.7);
+    redLight.position.set(100,300,100);
+    scene.add(redLight);
+    let blueLight = new THREE.PointLight(0x3677ac,50,450,1.7);
+    blueLight.position.set(300,300,200);
+    scene.add(blueLight);
   };
 
-const Clouds: React.FC<{}> = () => {
+  function render() {
-  const { camera } = useThree();
+    cloudParticles.forEach(p => {
-  const loader = useMemo(() => new THREE.TextureLoader(), []);
+      p.rotation.z -=0.001;
-  const [texture, setTexture] = useState<THREE.Texture | undefined>();
-  const [clouds, setClouds] = useState(initialClouds);
-
-  useEffect(() => {
-    console.log(camera);
-    camera.rotateX(1.16);
-    camera.rotateY(-0.12);
-    camera.rotateZ(0.27);
-  }, []);
-
-  useEffect(() => {
-    loader.load('images/smoke.png', (loadedTexture) => {
-      setTexture(loadedTexture);
     });
-  }, []);
+    renderer.render(scene,camera);
-
+    requestAnimationFrame(render);
-  useFrame(() => {
-    setClouds(current => current.map(c => ({
-      ...c,
-      rotation: {
-        ...c.rotation,
-        z: c.rotation.z -= 0.001,
-      }
-    })));
-  });
-
-  if (!texture) {
-    return <></>;
   }
 
-  return (
+  init();
-    <>
+};
-      {clouds.map((cloud) => (
-        <Cloud
-          key={cloud.name}
-          texture={texture}
-          position={cloud.position}
-          rotation={cloud.rotation}
-        />
-      ))}
-    </>
-  )
-}
-
-const style = {
-  width: '100%',
-  height: '100%',
-  top: 0,
-  left: 0,
-  position: 'fixed' as any,
-  zIndex: -1,
-}
 
 const Background: React.FC<{}> = () => {
-  const fog = useMemo(() => new THREE.FogExp2(0x03544e, 0.001), []);
-  const [aspect, setAspect] = useState(global.window ? window.innerWidth / window.innerHeight : 1);
-  if (!global.window) {
-    return <Canvas style={style}><></></Canvas>
-  }
   useEffect(() => {
-    const update = () => {
+    setup();
-      setAspect(window.innerWidth / window.innerHeight);
-    };
-    window.addEventListener('resize', update);
-    return () => {
-      window.removeEventListener('resize', update);
-    }
   }, []);
-  return (
+  return <></>  
-    <Canvas style={style}>
-      <color attach="background" args={[0x03544e]} />
-      <scene fog={fog}>
-        <perspectiveCamera
-          args={[60, aspect, 1, 1000]}
-          aspect={aspect}
-          position={[0, 0, 0]}
-        />
-        <ambientLight args={[0x555555]} />
-        <directionalLight args={[0xff8c19]} position={[0,0,1]} />
-        <pointLight args={[0xcc6600, 50, 450, 1.7]} position={[200,300,100]} />
-        <pointLight args={[0xd8547e, 50, 450, 1.7]} position={[100,300,100]} />
-        <pointLight args={[0x3677ac, 50, 450, 1.7]} position={[300,300,200]} />
-        <Clouds />
-      </scene>
-    </Canvas>
-  );
 };
 
 export default Background;
+

components/Me.tsx

@@ -13,8 +13,8 @@ const Wrapper = styled.div`
 
 const ImageWrapper = styled.div`
   border-radius: 50%;
-  border: solid 30px rgba(255, 255, 255, .5);
+  border: solid 10px rgba(255, 255, 255, .5);
-  box-shadow: 0 0 35px rgba(255, 255, 255, .5);
+  box-shadow: 0 0 35px rgba(0, 0, 0, .5);
   overflow: hidden;
   width: 100%;
   max-width: 360px;
@@ -60,7 +60,7 @@ const Divider = styled.div`
 const Me: React.FC<{}> = () => (
   <Wrapper>
     <ImageWrapper>
-      <Image layout="fill" {...image} />
+      <Image layout="fill" src={image.src} blurDataURL={image.blurDataURL} />
       <Spacer />
     </ImageWrapper>
     <Title>Morten Olsen</Title>

data.json

@@ -2,7 +2,7 @@
   "type": "info",
   "data": {
     "name": "Morten Olsen",
-    "image": "assets/me.jpg",
+    "image": "public/images/me.jpg",
     "info": [{
       "name": "E-mail",
       "value": "hello@buy-me.coffee"

scripts/build-latex.sh

@@ -3,8 +3,9 @@
 FORMAT=$1; shift
 
 docker run \
+  --workdir "/var/texlive/latex" \
   --user "$UID:$GID" \
   --net=none \
   -v $(pwd):/var/texlive \
-  blang/latex:ubuntu
+  blang/latex:ubuntu \
-  lualatex "latex/$FORMAT.tex"
+  lualatex "$FORMAT.tex"