Skip to content

Commit 08d6b5f

Browse files
trsctrtrsctr
authored
Merge pull request #8 from trsctr/feat/contactmodal
Feat/contactmodal
2 parents 149231d + 3ac9f14 commit 08d6b5f

20 files changed

+588
-32
lines changed

‎.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,9 @@ dist-ssr
2222
*.njsproj
2323
*.sln
2424
*.sw?
25+
26+
# OS or Editor files
27+
.env
28+
29+
# personal notes
30+
TODO.md

‎index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
<html lang="en" class="bg-black">
33
<head>
44
<meta charset="UTF-8" />
5-
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Oton internet</title>
6+
<title>trsctr.github.io</title>
87
</head>
98
<body style="margin: 0; padding: 0">
109
<div id="root"></div>

‎package-lock.json‎

Lines changed: 27 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,11 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@emailjs/browser": "^4.4.1",
1314
"@react-three/drei": "^9.120.4",
1415
"@react-three/fiber": "^8.17.10",
1516
"clsx": "^2.1.1",
17+
"dompurify": "^3.2.3",
1618
"react": "^18.3.1",
1719
"react-dom": "^18.3.1",
1820
"three": "^0.171.0",

‎src/App.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
11
import React from 'react';
22
import About from './components/About';
33
import Header from './components/Header';
4-
import Scene from './components/Scene';
5-
import BackgroundShader from './components/BackgroundShader';
6-
import { Canvas } from '@react-three/fiber';
4+
import MeshCanvas from './components/MeshCanvas';
5+
import BackgroundCanvas from './components/BackgroundCanvas';
6+
import ContactFormModal from './components/modal/ContactForm/ContactFormModal';
77

88
const App: React.FC = () => {
99
return (
1010
<div className="w-full h-full bg-gradient-to-b from-background-top to-black">
1111
{/* Main container with flex layout */}
1212
<div className=" top-0 left-0 w-full h-full fixed">
13-
<Canvas className="w-full h-full opacity-30">
14-
<BackgroundShader />
15-
</Canvas>
13+
<BackgroundCanvas />
1614
</div>
1715

1816
<div className="min-h-screen flex flex-col lg:flex-row items-center justify-center w-full">
@@ -27,19 +25,20 @@ const App: React.FC = () => {
2725

2826
{/* Textbox section */}
2927
<div className="flex-1 p-5 z-30">
30-
<About title="Hello, my name is Otto" imageUrl="/assets/photo.jpg" imageOnRight>
31-
<p className="mb-2">This is my webpage.</p>
32-
<p>There are many like it, but this one is mine.</p>
33-
<p className="mt-2">Something something something about something and I like cats and good music.</p>
34-
<p className="mt-2">Lorem ipsum dolor shit Valmet. Shiggity shiggity schwa. Hello world. Bla bla bla. Is this shader heavy.</p>
35-
<p className="mt-2">Lässyn lässyn lää läpäti lää</p>
36-
</About>
28+
<About title="Hello, my name is Otto" imageUrl="/assets/photo.jpg" imageOnRight>
29+
<p className="mb-2">I'm a software engineer with a background in audio engineering and tech support, passionate about creative coding.</p>
30+
<p>I recently completed my core studies at <a href="http://hive.fi" className="text-primary hover:text-accent transition-all" target="_blank">Hive Helsinki</a>, where I gained hands-on experience in programming with C and C++. </p>
31+
<p className="mt-2">I built this page so I could have some fun with React, Tailwind, and Three.js, and showcase my projects in the future.</p>
32+
<p className="mt-2">Hope you like what you see! Feel free to interact with that mesh, check out my work and connect with me on LinkedIn or GitHub.</p>
33+
<p className="mt-2">The photo on the right was taken by fellow Hive student <a href="https://www.instagram.com/diego_j_videos_and_photography/" className="text-primary hover:text-accent transition-all" target="_blank">Diego James</a>.</p>
34+
</About>
35+
<ContactFormModal/>
3736
</div>
3837

39-
{/* Canvas section */}
38+
{/* 3D Mesh section */}
4039
<div className="flex-1 p-5 flex justify-center -mt-20 lg:mt-0 z-0">
4140
<div className="relative min-w-[200px] w-full max-w-[800px] h-auto aspect-[1/1]">
42-
<Scene />
41+
<MeshCanvas />
4342
</div>
4443
</div>
4544
</div>

src/components/BackgroundShader.tsx renamed to src/components/BackgroundCanvas.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { useFrame } from '@react-three/fiber';
1+
import { Canvas, useFrame } from '@react-three/fiber';
22
import { ShaderMaterial, Vector2 } from 'three';
3-
import { useMemo, useRef } from 'react';
3+
import { useMemo, useRef, memo } from 'react';
44
import vertexShader from '@/shaders/BackgroundVertex.glsl';
55
import fragmentShader from '@/shaders/BackgroundFragment.glsl';
66

@@ -36,4 +36,10 @@ const BackgroundShader = () => {
3636
);
3737
};
3838

39-
export default BackgroundShader;
39+
const BackgroundCanvas = memo(() => (
40+
<Canvas className="w-full h-full opacity-30">
41+
<BackgroundShader />
42+
</Canvas>
43+
));
44+
45+
export default BackgroundCanvas;

‎src/components/Footer.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
11
import React from 'react';
2-
2+
import useModal from './modal/useModal';
33
/*
44
* A component that displays the footer of the page.
55
*/
66

77
const Footer: React.FC = () => {
8+
const { toggleModal } = useModal();
9+
810
return (
9-
<footer className="bg-transparent">
10-
<div className="mx-auto w-full pt-2 md:pt-5 md:flex md:items-center md:justify-between">
11-
<ul className="flex flex-wrap items-center mt-3 text-sm font-medium text-primary sm:mt-0">
11+
<footer className="bg-transparent">
12+
<div className="mx-auto w-full pt-2 md:pt-5 lg:pt-2 md:flex md:items-center md:justify-between">
13+
<ul className=" flex flex-wrap items-center mt-3 text-sm font-medium text-primary sm:mt-0">
1214
<li>
13-
<a href="http://github.com/trsctr/trsctr.github.io" className="hover:underline hover:text-accent me-4 md:me-12">Source code</a>
15+
<a href="http://github.com/trsctr/trsctr.github.io" target="_blank" className="transition-all hover:text-accent me-4 md:me-12">Source code</a>
1416
</li>
1517
<li>
16-
<a href="http://github.com/trsctr" className="hover:underline hover:text-accent me-4 md:me-12">GitHub</a>
18+
<a href="http://github.com/trsctr" target="_blank" className="transition-all hover:text-accent me-4 md:me-12">GitHub</a>
1719
</li>
1820

1921
<li>
20-
<a href="#" className="hover:underline hover:text-accent me-4 md:me-12">LinkedIn</a>
22+
<a href="http://linkedin.com/in/otto-andelin" target="_blank" className="transition-all hover:text-accent me-4 md:me-12">LinkedIn</a>
2123
</li>
22-
<li>
23-
<a href="#" className="hover:underline hover:text-accent">Contact</a>
24+
<li >
25+
<a href="#" onClick={toggleModal} className="transition-all text-center hover:text-accent">Contact</a>
2426
</li>
2527
</ul>
2628
</div>

src/components/Scene.tsx renamed to src/components/MeshCanvas.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Canvas } from "@react-three/fiber";
33
import MorphingMesh from "./MorphingMesh";
44
import { PerspectiveCamera } from "@react-three/drei";
55

6-
const Scene: React.FC = () => {
6+
const MeshCanvas: React.FC = () => {
77
return (
88
<Canvas
99
gl={{ antialias: true, alpha: true }}
@@ -17,4 +17,4 @@ const Scene: React.FC = () => {
1717
);
1818
};
1919

20-
export default Scene;
20+
export default MeshCanvas;

‎src/components/Spinner.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
3+
4+
const Spinner: React.FC = () => {
5+
return (
6+
<div className="text-center align-middle">
7+
<div role="status">
8+
<svg aria-hidden="true" className="inline w-20 h-20 text-gray-600 animate-spin fill-secondary" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
9+
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
10+
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
11+
</svg>
12+
<span className="sr-only">Loading...</span>
13+
</div>
14+
</div>
15+
16+
)
17+
};
18+
19+
export default Spinner;

‎src/components/TextImageBox.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ interface TextImageBoxProps {
1010
const TextImage: React.FC<Pick<TextImageBoxProps, 'imageUrl' | 'altText'>> = ({ imageUrl, altText = "Image"}) => {
1111
return (
1212
<div className="w-full sm:flex flex-shrink-0 justify-center md:block md:w-1/4 mx-4 mb-0 lg:mb-4">
13-
<img src={`${imageUrl}`} alt={altText} className="w-full max-w-[250px] md:max-w-[200px] mx-auto justify-center rounded-md opacity-60" />
13+
<img src={`${imageUrl}`} alt={altText} className="w-full max-w-[250px] md:max-w-[200px] mx-auto justify-center rounded-md opacity-100" />
1414
</div>
1515
)
1616
};

0 commit comments

Comments
 (0)