updates
This commit is contained in:
parent
a7d863d5c4
commit
6646654de0
151
functions/frontend/threeJsAnimations.js
Normal file
151
functions/frontend/threeJsAnimations.js
Normal file
@ -0,0 +1,151 @@
|
||||
import * as THREE from "three";
|
||||
|
||||
export default function threeJsAnimations() {
|
||||
const animationWrapper = document.getElementById("homepage-animation-wrapper");
|
||||
console.log(THREE);
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(75, animationWrapper.clientWidth / animationWrapper.clientHeight, 0.1, 1000);
|
||||
|
||||
const light = new THREE.PointLight(0xff0000, 1, 200);
|
||||
light.position.set(-1, -1, 5);
|
||||
|
||||
const ambientLight = new THREE.AmbientLight("#adb2d3");
|
||||
const pointLight = new THREE.PointLight(0xffffff, 1, 100);
|
||||
pointLight.position.set(10, 10, 10);
|
||||
const sphereSize = 1;
|
||||
const pointLightHelper = new THREE.PointLightHelper(pointLight, sphereSize);
|
||||
|
||||
// const spotLight = new THREE.SpotLight(0xffffff);
|
||||
// spotLight.position.set(10, 10, 10);
|
||||
// scene.add(spotLight);
|
||||
|
||||
// const spotLightHelper = new THREE.SpotLightHelper(spotLight);
|
||||
// scene.add(spotLightHelper);
|
||||
|
||||
const renderer = new THREE.WebGLRenderer();
|
||||
renderer.setSize(animationWrapper.clientWidth, animationWrapper.clientHeight);
|
||||
animationWrapper.appendChild(renderer.domElement);
|
||||
|
||||
const geometry = new THREE.BoxGeometry();
|
||||
|
||||
const material = new THREE.MeshPhongMaterial({
|
||||
// light
|
||||
// specular: "rgb(30, 33, 68)",
|
||||
// intermediate
|
||||
color: "rgb(30, 33, 68)",
|
||||
// dark
|
||||
// emissive: "rgb(30, 33, 68)",
|
||||
shininess: 50,
|
||||
wireframe: true,
|
||||
// map: THREE.ImageUtils.loadTexture("http://i.imgur.com/xCE2Br4.jpg?1"),
|
||||
});
|
||||
const cube = new THREE.Mesh(geometry, material);
|
||||
|
||||
const material2 = new THREE.MeshPhongMaterial({
|
||||
// light
|
||||
// specular: "rgb(30, 33, 68)",
|
||||
// intermediate
|
||||
color: "#1668e4",
|
||||
// dark
|
||||
// emissive: "rgb(30, 33, 68)",
|
||||
shininess: 50,
|
||||
wireframe: false,
|
||||
// map: THREE.ImageUtils.loadTexture("http://i.imgur.com/xCE2Br4.jpg?1"),
|
||||
});
|
||||
const cube2 = new THREE.Mesh(geometry, material2);
|
||||
cube2.position.x = window.innerWidth > 500 ? 1.5 : -0.5;
|
||||
cube2.position.y = window.innerWidth > 500 ? 1.5 : 1.8;
|
||||
cube2.position.z = -1;
|
||||
cube2.scale.x = 0.3;
|
||||
cube2.scale.y = 0.3;
|
||||
cube2.scale.z = 0.3;
|
||||
|
||||
const material3 = new THREE.MeshPhongMaterial({
|
||||
// light
|
||||
// specular: "rgb(30, 33, 68)",
|
||||
// intermediate
|
||||
color: "rgb(53, 65, 194)",
|
||||
// dark
|
||||
// emissive: "rgb(30, 33, 68)",
|
||||
shininess: 50,
|
||||
wireframe: false,
|
||||
// map: THREE.ImageUtils.loadTexture("http://i.imgur.com/xCE2Br4.jpg?1"),
|
||||
});
|
||||
const cube3 = new THREE.Mesh(geometry, material3);
|
||||
|
||||
scene.add(cube);
|
||||
scene.add(cube2);
|
||||
scene.add(cube3);
|
||||
scene.add(ambientLight);
|
||||
scene.add(light);
|
||||
scene.add(pointLight);
|
||||
scene.add(pointLightHelper);
|
||||
|
||||
cube3.position.x = -1.5;
|
||||
cube3.position.y = -1.5;
|
||||
cube3.position.z = -1;
|
||||
cube3.scale.x = 0.2;
|
||||
cube3.scale.y = 0.2;
|
||||
cube3.scale.z = 0.2;
|
||||
|
||||
camera.position.z = 2;
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
renderer.render(scene, camera);
|
||||
cube.rotation.x += 0.002;
|
||||
cube.rotation.y += 0.002;
|
||||
|
||||
cube2.rotation.x += 0.005;
|
||||
cube2.rotation.y += 0.005;
|
||||
|
||||
cube3.rotation.x += 0.01;
|
||||
cube3.rotation.y += 0.01;
|
||||
|
||||
scene.rotation.z += 0.0003;
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
window.addEventListener("mousemove", (e) => {
|
||||
let relMouseX = e.x - window.innerWidth / 2;
|
||||
let relMouseY = e.y - window.innerHeight / 2;
|
||||
// console.log("X pos: ", relMouseX);
|
||||
// console.log("Y pos: ", relMouseY);
|
||||
// console.log(e.y);
|
||||
relMouseX < 0 ? (cube.rotation.x += 0.003) : (cube.rotation.x += 0.003);
|
||||
relMouseY > 0 ? (cube.rotation.y += 0.003) : (cube.rotation.y += 0.003);
|
||||
|
||||
relMouseX < 0 ? (cube2.position.x += 0.001) : (cube2.position.x -= 0.001);
|
||||
relMouseY > 0 ? (cube2.position.y += 0.001) : (cube2.position.y -= 0.001);
|
||||
|
||||
relMouseX < 0 ? (cube3.position.x += 0.0007) : (cube3.position.x -= 0.0007);
|
||||
relMouseY > 0 ? (cube3.position.y += 0.0007) : (cube3.position.y -= 0.0007);
|
||||
|
||||
// relMouseX < 0 ? scene.rotateX(5) : scene.rotateX(-5);
|
||||
// relMouseY > 0 ? scene.rotateX(5) : scene.rotateX(-5);
|
||||
// relMouseX < 0 ? (scene.rotation.z += 0.005) : (scene.rotation.x += 0.005);
|
||||
// relMouseY > 0 ? (scene.rotation.y += 0.005) : (scene.rotation.y += 0.005);
|
||||
// cube.rotation.x += relMouseX / e.x;
|
||||
// cube.rotation.y += relMouseY / e.y;
|
||||
|
||||
// scene.rotation.x;
|
||||
});
|
||||
|
||||
window.addEventListener("resize", (e) => {
|
||||
renderer.setSize(animationWrapper.clientWidth, window.innerHeight);
|
||||
// animationWrapper.querySelector("canvas").width = animationWrapper.clientWidth;
|
||||
// animationWrapper.querySelector("canvas").height = animationWrapper.clientHeight;
|
||||
});
|
||||
|
||||
window.addEventListener("scroll", (e) => {
|
||||
if (window.scrollY > 100) {
|
||||
scene.remove(cube2);
|
||||
scene.remove(cube3);
|
||||
} else {
|
||||
scene.add(cube2);
|
||||
scene.add(cube3);
|
||||
}
|
||||
});
|
||||
}
|
@ -1,5 +1,5 @@
|
||||
import React, { Fragment } from 'react'
|
||||
import GeneralHeader from './GeneralHeader'
|
||||
import React, { Fragment } from 'react';
|
||||
import GeneralHeader from './GeneralHeader';
|
||||
|
||||
const GeneralLayout = ({ children }) => {
|
||||
return (
|
||||
|
6522
package-lock.json
generated
6522
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -10,7 +10,8 @@
|
||||
"dev": "next dev -p 5000",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
"lint": "next lint",
|
||||
"tailwind": "npx tailwindcss -i ./tailwind/tw_main.css -o ./styles/tw_main.css --watch"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -27,6 +28,10 @@
|
||||
"next": "^12.0.4",
|
||||
"nodemailer": "^6.7.2",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
"react-dom": "^17.0.2",
|
||||
"three": "^0.138.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"tailwindcss": "^3.0.23"
|
||||
}
|
||||
}
|
||||
|
@ -1,4 +1,5 @@
|
||||
import "../styles/main.css";
|
||||
import "../styles/tw_main.css";
|
||||
import { Fragment } from "react";
|
||||
import Script from "next/script";
|
||||
|
||||
|
@ -2,8 +2,13 @@ import React from 'react'
|
||||
import Head from 'next/head'
|
||||
import TextShuffler from '../components/actions/TextShuffler'
|
||||
import GeneralLayout from '../layouts/general_layout/GeneralLayout'
|
||||
import threeJsAnimations from '../functions/frontend/threeJsAnimations'
|
||||
|
||||
const about = () => {
|
||||
React.useEffect(() => {
|
||||
threeJsAnimations()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<GeneralLayout>
|
||||
<Head>
|
||||
@ -12,12 +17,13 @@ const about = () => {
|
||||
</Head>
|
||||
<h1><TextShuffler textInput="Ben of all trade, master of all!" /></h1>
|
||||
<span className='hero-sub-text'>
|
||||
<TextShuffler textInput="So the thing about me is: I want to know it all, I want to master it all: this has lead me to dig deep into almost every aspect of web design and development. But that's not the best thing about me: the best thing is I'm willing to learn and adapt at any point: there are so many languages and libraries these days: even in my quest to master it all, it is not possible to master all the available languages and libraries: but whichever knowledge is needed at any given time, I adapt and learn: very quickly too: I see this as the best skill anyone can have in this age." />
|
||||
<TextShuffler textInput="So the thing about me is: I want to know it all, I want to master it all: hence I've dug deep into almost every aspect of web design and development. In the process I've developed my most valuable skill: learnabiltiy: there are so many languages and libraries out there: about a dozen different ways to achieve the same result: even in my quest to master it all, it is not possible to master all the available languages, libraries and other web technologies: but whichever knowledge is needed at any given time, I adapt and learn: very quickly." />
|
||||
</span>
|
||||
<div className="hero-ctas-section">
|
||||
<a href='/documents/Benjamin_Toby_CV.pdf' download={ true }>See my resume</a>
|
||||
<a href='https://www.linkedin.com/in/benjamin-toby/' target="_blank">Linkedin</a>
|
||||
</div>
|
||||
<div className='fixed top-0 left-0 -z-10' id='homepage-animation-wrapper'></div>
|
||||
</GeneralLayout>
|
||||
)
|
||||
}
|
||||
|
@ -3,11 +3,17 @@ import Head from 'next/head'
|
||||
import TextShuffler from '../components/actions/TextShuffler'
|
||||
import submitContactForm from '../functions/frontend/submitContactForm'
|
||||
import GeneralLayout from '../layouts/general_layout/GeneralLayout'
|
||||
import threeJsAnimations from '../functions/frontend/threeJsAnimations'
|
||||
|
||||
const contact = () => {
|
||||
|
||||
let [success, setSuccess] = React.useState(false);
|
||||
|
||||
|
||||
React.useEffect(() => {
|
||||
threeJsAnimations()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<GeneralLayout>
|
||||
<Head>
|
||||
@ -28,6 +34,7 @@ const contact = () => {
|
||||
{ success === "Success" && <div className='message-response'>Success!!! <button onClick={ () => { window.location.reload() } }>Reload</button></div> }
|
||||
{ success === "Failed" && <div className='message-response failed'>Failed <button onClick={ () => { window.location.reload() } }>Reload</button></div> }
|
||||
</form>
|
||||
<div className='fixed top-0 left-0 -z-10' id='homepage-animation-wrapper'></div>
|
||||
</GeneralLayout>
|
||||
)
|
||||
}
|
||||
|
@ -1,9 +1,13 @@
|
||||
import Head from 'next/head'
|
||||
import React from 'react'
|
||||
import TextShuffler from '../components/actions/TextShuffler'
|
||||
import threeJsAnimations from '../functions/frontend/threeJsAnimations'
|
||||
import GeneralLayout from '../layouts/general_layout/GeneralLayout'
|
||||
|
||||
const index = () => {
|
||||
React.useEffect(() => {
|
||||
threeJsAnimations()
|
||||
}, [])
|
||||
return (
|
||||
<GeneralLayout>
|
||||
<Head>
|
||||
@ -18,6 +22,7 @@ const index = () => {
|
||||
<a href='/documents/Benjamin_Toby_CV.pdf' download={ true }>See my resume</a>
|
||||
<a href='https://www.linkedin.com/in/benjamin-toby/' target="_blank">Linkedin</a>
|
||||
</div>
|
||||
<div className='fixed top-0 left-0 -z-10' id='homepage-animation-wrapper'></div>
|
||||
</GeneralLayout>
|
||||
)
|
||||
}
|
||||
|
@ -3,10 +3,15 @@ import Head from 'next/head'
|
||||
import TextShuffler from '../components/actions/TextShuffler'
|
||||
import GeneralLayout from '../layouts/general_layout/GeneralLayout'
|
||||
import PortfolioEntry from '../components/PortfolioEntry'
|
||||
import threeJsAnimations from '../functions/frontend/threeJsAnimations'
|
||||
|
||||
const about = () => {
|
||||
const portfolioEntries = require("../components/portfolioEntries.json");
|
||||
|
||||
React.useEffect(() => {
|
||||
threeJsAnimations()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<GeneralLayout>
|
||||
<Head>
|
||||
@ -20,8 +25,8 @@ const about = () => {
|
||||
|
||||
<div className='portfolio-entries-block'>
|
||||
{ portfolioEntries.map(entry => <PortfolioEntry key={ entry.title } title={ entry.title } description={ entry.description } url={ entry.url } image={ entry.image } />) }
|
||||
|
||||
</div>
|
||||
<div className='fixed top-0 left-0 -z-10' id='homepage-animation-wrapper'></div>
|
||||
</GeneralLayout>
|
||||
)
|
||||
}
|
||||
|
@ -1,11 +1,14 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap");
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
/* overflow-x: hidden; */
|
||||
scroll-behavior: smooth;
|
||||
font-family: Helvetica;
|
||||
font-family: "Source Code Pro", Helvetica;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: #222;
|
||||
letter-spacing: -0.8px;
|
||||
}
|
||||
|
||||
* {
|
||||
@ -21,6 +24,7 @@ html {
|
||||
--sec-color-4: #adb2d3;
|
||||
--sec-color-5: #c2a878;
|
||||
--light-color-1: #ddd;
|
||||
--test-color: rgb(224, 64, 64);
|
||||
--transparent-white: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
@ -213,7 +217,7 @@ nav a:hover {
|
||||
.hero-ctas-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
margin-top: 40px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@ -305,6 +309,12 @@ textarea {
|
||||
border: 2px solid #d42222;
|
||||
}
|
||||
|
||||
#homepage-animation-wrapper {
|
||||
width: 150%;
|
||||
height: 100%;
|
||||
background-color: var(--dark-color);
|
||||
}
|
||||
|
||||
/* ###############################################################################################
|
||||
##################################################################################################
|
||||
##################################################################################################
|
||||
|
126
styles/tw_main.css
Normal file
126
styles/tw_main.css
Normal file
@ -0,0 +1,126 @@
|
||||
*, ::before, ::after {
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia:
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.top-4 {
|
||||
top: 1rem
|
||||
}
|
||||
|
||||
.left-4 {
|
||||
left: 1rem
|
||||
}
|
||||
|
||||
.right-4 {
|
||||
right: 1rem
|
||||
}
|
||||
|
||||
.top-0 {
|
||||
top: 0px
|
||||
}
|
||||
|
||||
.right-0 {
|
||||
right: 0px
|
||||
}
|
||||
|
||||
.left-0 {
|
||||
left: 0px
|
||||
}
|
||||
|
||||
.-z-10 {
|
||||
z-index: -10
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block
|
||||
}
|
||||
|
||||
.h-10 {
|
||||
height: 2.5rem
|
||||
}
|
||||
|
||||
.h-28 {
|
||||
height: 7rem
|
||||
}
|
||||
|
||||
.h-96 {
|
||||
height: 24rem
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.w-10 {
|
||||
width: 2.5rem
|
||||
}
|
||||
|
||||
.w-28 {
|
||||
width: 7rem
|
||||
}
|
||||
|
||||
.w-96 {
|
||||
width: 24rem
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.bg-slate-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(71 85 105 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.bg-red-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(220 38 38 / var(--tw-bg-opacity))
|
||||
}
|
31
tailwind.config.js
Normal file
31
tailwind.config.js
Normal file
@ -0,0 +1,31 @@
|
||||
module.exports = {
|
||||
content: ["./components/**/*.{html,js,jsx}", "./pages/**/*.jsx"],
|
||||
theme: {
|
||||
screens: {
|
||||
xs: "350px",
|
||||
sm: "450px",
|
||||
md: "600px",
|
||||
sl: "800px",
|
||||
lg: "976px",
|
||||
xl: "1200px",
|
||||
},
|
||||
// colors: {},
|
||||
fontFamily: {
|
||||
sans: ["Graphik", "sans-serif"],
|
||||
serif: ["Merriweather", "serif"],
|
||||
},
|
||||
// extend: {
|
||||
// spacing: {
|
||||
// 128: "32rem",
|
||||
// 144: "36rem",
|
||||
// },
|
||||
// borderRadius: {
|
||||
// "4xl": "2rem",
|
||||
// },
|
||||
// },
|
||||
},
|
||||
plugins: [],
|
||||
corePlugins: {
|
||||
preflight: false,
|
||||
},
|
||||
};
|
3
tailwind/tw_main.css
Normal file
3
tailwind/tw_main.css
Normal file
@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
Loading…
Reference in New Issue
Block a user