mirror of
https://github.com/morten-olsen/morten-olsen.github.io.git
synced 2026-02-08 01:46:28 +01:00
Updated ui
This commit is contained in:
Morten Olsen
96
components/Background/index.tsx
Normal file
96
components/Background/index.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
// https://redstapler.co/cool-nebula-background-effect-three-js/
|
||||
|
||||
import * as THREE from 'three';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
function render() {
|
||||
cloudParticles.forEach(p => {
|
||||
p.rotation.z -=0.001;
|
||||
});
|
||||
renderer.render(scene,camera);
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
|
||||
init();
|
||||
};
|
||||
|
||||
const Background: React.FC<{}> = () => {
|
||||
useEffect(() => {
|
||||
setup();
|
||||
}, []);
|
||||
return <></>
|
||||
};
|
||||
|
||||
export default Background;
|
||||
@@ -3,16 +3,24 @@ import styled from 'styled-components';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
display-direction: column;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
`;
|
||||
|
||||
const Image = styled.div<{ src: string }>`
|
||||
border: 30px #efefef solid;
|
||||
width: 360px;
|
||||
const ImageWrapper = styled.div`
|
||||
border-radius: 50%;
|
||||
border: solid 15px rgba(255, 255, 255, .5);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, .5);
|
||||
overflow: hidden;
|
||||
margin: 0 40px;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
`;
|
||||
|
||||
const Image = styled.div<{ src: string }>`
|
||||
width: 100%;
|
||||
background: url('${({ src }) => src}');
|
||||
background-size: cover;
|
||||
`;
|
||||
@@ -21,11 +29,46 @@ const Spacer = styled.div`
|
||||
padding-bottom: 100%;
|
||||
`;
|
||||
|
||||
const Title = styled.h1`
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
font-size: 28px;
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
text-shadow:
|
||||
0 0 5px rgba(255, 255, 255, .5);
|
||||
0 0 10px rgba(0, 0, 0, .5);
|
||||
margin-bottom: 0px;
|
||||
`;
|
||||
|
||||
const SubTitle = styled.h2`
|
||||
text-transform: uppercase;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
text-shadow:
|
||||
0 0 5px rgba(255, 255, 255, .5);
|
||||
0 0 10px rgba(0, 0, 0, .5);
|
||||
`;
|
||||
|
||||
const Divider = styled.div`
|
||||
margin-top: 70px;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, .5);
|
||||
box-shadow: 0 0 30px rgba(255, 255, 255, .7);
|
||||
`;
|
||||
|
||||
const Me: React.FC<{}> = () => (
|
||||
<Wrapper>
|
||||
<Image src="/images/me.jpg">
|
||||
<Spacer />
|
||||
</Image>
|
||||
<ImageWrapper>
|
||||
<Image src="/images/me.jpg">
|
||||
<Spacer />
|
||||
</Image>
|
||||
</ImageWrapper>
|
||||
<Title>Morten Olsen</Title>
|
||||
<SubTitle>“...One part genius, on part crazy”</SubTitle>
|
||||
<Divider />
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
|
||||
@@ -21,8 +21,8 @@ const Image = styled.div<{ src: string }>`
|
||||
background: url('${({ src }) => src}');
|
||||
background-size: cover;
|
||||
margin-right: 10px;
|
||||
filter: grayscale(100%);
|
||||
transition: all .8s;
|
||||
filter: grayscale(100%) invert();
|
||||
`;
|
||||
|
||||
const Wrapper = styled.div`
|
||||
@@ -42,15 +42,19 @@ const ItemWrapper = styled.a`
|
||||
width: 220px;
|
||||
height: 100px;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 0 5px rgba(255, 255, 255, .5);
|
||||
|
||||
&:hover > div {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
box-shadow: 0 0 35px rgba(0, 0, 0, .3);
|
||||
|
||||
&> div {
|
||||
filter: grayscale(100%) invert();
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -10,11 +10,13 @@
|
||||
"particlesjs": "^2.2.3",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"styled-components": "^5.3.1"
|
||||
"styled-components": "^5.3.1",
|
||||
"three": "^0.131.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^17.0.19",
|
||||
"@types/styled-components": "^5.1.12",
|
||||
"@types/three": "^0.131.0",
|
||||
"babel-plugin-styled-components": "^1.13.2",
|
||||
"typescript": "^4.3.5"
|
||||
}
|
||||
|
||||
@@ -1,40 +1,20 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import React from 'react';
|
||||
import Head from 'next/head';
|
||||
import Background from '../components/Background';
|
||||
import Me from '../components/Me';
|
||||
import Social from '../components/Social';
|
||||
|
||||
const Canvas = styled.canvas`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
widht: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
`;
|
||||
|
||||
const Frontpage: React.FC<{}> = () => {
|
||||
useEffect(() => {
|
||||
const run = async () => {
|
||||
const { default: Particles } = await import('particlesjs');
|
||||
Particles.init({
|
||||
selector: '.background',
|
||||
connectParticles: true,
|
||||
color: '#dddddd',
|
||||
maxParticles: 200,
|
||||
});
|
||||
console.log(Particles);
|
||||
};
|
||||
run();
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Morten Olsen</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap" rel="stylesheet" />
|
||||
</Head>
|
||||
<Background />
|
||||
<Me />
|
||||
<Canvas className="background" />
|
||||
<Social
|
||||
sites={[{
|
||||
title: 'Github',
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 176 33" style="enable-background:new 0 0 176 33;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
.st1{fill:#9FEF00;}
|
||||
.st1{fill:#000;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M48.2,22.4v-4.6c0-0.2-0.1-0.3-0.3-0.3h-4c-0.2,0-0.3,0.1-0.3,0.3v4.6c0,0.2-0.1,0.3-0.3,0.3h-2.4 c-0.2,0-0.3-0.1-0.3-0.3V10.6c0-0.2,0.1-0.3,0.3-0.3h2.4c0.2,0,0.3,0.1,0.3,0.3v4.1c0,0.2,0.1,0.3,0.3,0.3h4c0.2,0,0.3-0.1,0.3-0.3 v-4.1c0-0.2,0.1-0.3,0.3-0.3H51c0.2,0,0.3,0.1,0.3,0.3v11.9c0,0.2-0.1,0.3-0.3,0.3h-2.4C48.4,22.7,48.2,22.6,48.2,22.4z"/>
|
||||
@@ -19,4 +19,4 @@
|
||||
</g>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<path class="st1" d="M28.6,9.3C28.6,9.3,28.6,9.3,28.6,9.3c0-0.3-0.1-0.6-0.4-0.8c0,0,0,0,0,0c0,0,0,0-0.1-0.1c0,0-0.1,0-0.1-0.1 c0,0,0,0,0,0L15.6,1.2c0,0-0.1,0-0.1,0C15.3,1,15.1,1,14.9,1c-0.1,0-0.2,0-0.3,0.1c-0.1,0-0.1,0.1-0.2,0.1L2,8.3c0,0,0,0,0,0 c0,0,0,0,0,0c0,0,0,0,0,0C1.8,8.4,1.7,8.5,1.7,8.6c0,0,0,0,0,0C1.5,8.8,1.4,9,1.4,9.3c0,0,0,0,0,0c0,0,0,0,0,0v14.3 c0,0.4,0.2,0.8,0.6,1l12.4,7.2c0,0,0,0,0.1,0c0,0,0,0,0,0c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0,0c0.1,0,0.2,0,0.2,0s0.2,0,0.2,0 c0,0,0,0,0,0c0.1,0,0.1,0,0.2-0.1c0,0,0,0,0,0c0,0,0,0,0.1,0l12.4-7.2c0.4-0.2,0.6-0.6,0.6-1L28.6,9.3C28.6,9.4,28.6,9.3,28.6,9.3z M6.3,8.9L14.7,4c0.2-0.1,0.4-0.1,0.5,0l8.4,4.9c0.4,0.2,0.4,0.7,0,0.9l-8.4,4.9c-0.2,0.1-0.4,0.1-0.5,0L6.3,9.8 C5.9,9.6,5.9,9.1,6.3,8.9z M13.5,27.4c0,0.4-0.4,0.7-0.8,0.5L4.3,23C4.1,22.9,4,22.7,4,22.5v-9.7c0-0.4,0.4-0.7,0.8-0.5l8.4,4.9 c0.2,0.1,0.3,0.3,0.3,0.5V27.4z M25.9,22.5c0,0.2-0.1,0.4-0.3,0.5l-8.4,4.9c-0.4,0.2-0.8-0.1-0.8-0.5v-9.7c0-0.2,0.1-0.4,0.3-0.5 l8.4-4.9c0.4-0.2,0.8,0.1,0.8,0.5V22.5z"/>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 333333 333333" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"><path d="M322831 117669l-25376 33059-2-2-17596 37756-4-2-9020 40667-203391-45092-2 2 9020-40681 203308 45065-188724-88000v-2l17606-37772 188714 87992L132160 23894 150493 0h18967l153372 117669zM62501 229173h208330v41665l-208330-4v-41661z" fill="#f48024"/><path fill="#bcbbbb" d="M333333 208338v124995H0V208338h41665v83330h250003v-83330z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 333333 333333" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"><path d="M322831 117669l-25376 33059-2-2-17596 37756-4-2-9020 40667-203391-45092-2 2 9020-40681 203308 45065-188724-88000v-2l17606-37772 188714 87992L132160 23894 150493 0h18967l153372 117669zM62501 229173h208330v41665l-208330-4v-41661z" fill="#000"/><path fill="#000" d="M333333 208338v124995H0V208338h41665v83330h250003v-83330z"/></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 559 B After Width: | Height: | Size: 554 B |
BIN
public/images/smoke.png
Normal file
BIN
public/images/smoke.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
10
yarn.lock
10
yarn.lock
@@ -266,6 +266,11 @@
|
||||
"@types/react" "*"
|
||||
csstype "^3.0.2"
|
||||
|
||||
"@types/three@^0.131.0":
|
||||
version "0.131.0"
|
||||
resolved "https://registry.yarnpkg.com/@types/three/-/three-0.131.0.tgz#98f59887b05f71e665cf2fbdf04e0e4ceb9f89b6"
|
||||
integrity sha512-4VCtsDi6mIId96GcGKG91e2Y6VwU2T0u/YB7vCFJh1kXik93arxn7l9tVZHo1LXOtgCJJDdC+e1fwf2Vu/4ySw==
|
||||
|
||||
anser@1.4.9:
|
||||
version "1.4.9"
|
||||
resolved "https://registry.yarnpkg.com/anser/-/anser-1.4.9.tgz#1f85423a5dcf8da4631a341665ff675b96845760"
|
||||
@@ -1974,6 +1979,11 @@ supports-color@^8.0.0:
|
||||
dependencies:
|
||||
has-flag "^4.0.0"
|
||||
|
||||
three@^0.131.3:
|
||||
version "0.131.3"
|
||||
resolved "https://registry.yarnpkg.com/three/-/three-0.131.3.tgz#406fd210c603ca9154937ae3582996fbfd3cb716"
|
||||
integrity sha512-VkZAv8ZTJqiE/fyEmoWLxcNHImpVcjqW7RO0GzMu3tRpwO0KUvK9pjTmJzJcAbc51BOeB2G38zh80yjHTbP8gQ==
|
||||
|
||||
timers-browserify@2.0.12, timers-browserify@^2.0.4:
|
||||
version "2.0.12"
|
||||
resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.12.tgz#44a45c11fbf407f34f97bccd1577c652361b00ee"
|
||||
|
||||
Reference in New Issue
Block a user