From 238d5bb7683698b2485804bbfee36bff4e6427ac Mon Sep 17 00:00:00 2001 From: Morten Olsen Date: Fri, 27 Aug 2021 21:01:01 +0200 Subject: [PATCH] updates --- .github/workflows/build-latex.yml | 2 +- .gitignore | 5 + components/Background/index.tsx | 200 +++++++++++++----------------- components/Me.tsx | 6 +- data.json | 2 +- scripts/build-latex.sh | 5 +- 6 files changed, 97 insertions(+), 123 deletions(-) diff --git a/.github/workflows/build-latex.yml b/.github/workflows/build-latex.yml index 83a4cf4..2b6964e 100644 --- a/.github/workflows/build-latex.yml +++ b/.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: diff --git a/.gitignore b/.gitignore index d5a3271..c87fa2f 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,8 @@ /*.log /out /.next +/latex/**/*.aux +/latex/**/*.log +/latex/**/*.in +/latex/**/*.pdf +/latex/_markdown_* diff --git a/components/Background/index.tsx b/components/Background/index.tsx index 01aa74d..db40e20 100644 --- a/components/Background/index.tsx +++ b/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, useMemo, useState } from 'react'; +import React, { useEffect } from 'react'; -interface CloudProps { - texture: THREE.Texture; - position: [number, number, number]; - rotation: { - x: number; - y: number; - z: number; +const setup = () => { + let scene, camera, renderer; + let cloudParticles = []; + + function init() { + scene = new THREE.Scene(); + 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 addParticles = () => { + let loader = new THREE.TextureLoader(); + 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 + ); + 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 initialClouds = new Array(30).fill(undefined).map((_, i) => ({ - name: `id_${i}`, - position: [ - Math.random() * 800 - 400, - 500, - Math.random() * 500 - 500, - ] as [number, number, number], - rotation: { - x: 1.16, - y: -0.12, - z: Math.random() * 2 * Math.PI, - }, -})); + function render() { + cloudParticles.forEach(p => { + p.rotation.z -=0.001; + }); + renderer.render(scene,camera); + requestAnimationFrame(render); + } -const Cloud: React.FC = ({ texture, position, rotation }) => { - return ( - - - - - ); + init(); }; -const Clouds: React.FC<{}> = () => { - const { camera } = useThree(); - const loader = useMemo(() => new THREE.TextureLoader(), []); - const [texture, setTexture] = useState(); - 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); - }); - }, []); - - useFrame(() => { - setClouds(current => current.map(c => ({ - ...c, - rotation: { - ...c.rotation, - z: c.rotation.z -= 0.001, - } - }))); - }); - - if (!texture) { - return <>; - } - - return ( - <> - {clouds.map((cloud) => ( - - ))} - - ) -} - -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 <> - } useEffect(() => { - const update = () => { - setAspect(window.innerWidth / window.innerHeight); - }; - window.addEventListener('resize', update); - return () => { - window.removeEventListener('resize', update); - } + setup(); }, []); - return ( - - - - - - - - - - - - - ); + return <> }; export default Background; + diff --git a/components/Me.tsx b/components/Me.tsx index 4b44b41..dfc11e2 100644 --- a/components/Me.tsx +++ b/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); - box-shadow: 0 0 35px rgba(255, 255, 255, .5); + border: solid 10px 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<{}> = () => ( - + Morten Olsen diff --git a/data.json b/data.json index 87157f8..e77a859 100644 --- a/data.json +++ b/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" diff --git a/scripts/build-latex.sh b/scripts/build-latex.sh index 308139c..f090650 100755 --- a/scripts/build-latex.sh +++ b/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 - lualatex "latex/$FORMAT.tex" + blang/latex:ubuntu \ + lualatex "$FORMAT.tex"