Skip to content

Commit 8ceb0c2

Browse files
trsctrtrsctr
authored
Merge pull request #13 from trsctr/chore/11-cleanup-docs-ui
Clean Up Codebase and Write Documentation for UI Components
2 parents 0a8b067 + 9775e2d commit 8ceb0c2

38 files changed

+1374
-692
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"dompurify": "^3.2.3",
1818
"react": "^18.3.1",
1919
"react-dom": "^18.3.1",
20+
"tailwind-merge": "^2.6.0",
2021
"three": "^0.171.0",
2122
"vite-plugin-glsl": "^1.3.1"
2223
},

‎src/App.tsx‎

Lines changed: 52 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,58 @@
11
import React from 'react';
22
import About from './components/About';
3-
import Header from './components/Header';
4-
import MeshCanvas from './components/MeshCanvas';
5-
import BackgroundCanvas from './components/BackgroundCanvas';
6-
import ContactFormModal from './components/modal/ContactForm/ContactFormModal';
7-
3+
import Header from './components/common/Header';
4+
import MeshCanvas from './components/canvas/MeshCanvas';
5+
import BackgroundCanvas from './components/canvas/BackgroundCanvas';
6+
import ContactFormModal from './components/contact-form/ContactFormModal';
7+
8+
/**
9+
* App Component
10+
*
11+
* The main component that renders the entire application/site.
12+
*
13+
*/
814
const App: React.FC = () => {
9-
return (
10-
<div className="w-full h-full bg-gradient-to-b from-background-top to-black">
11-
{/* Main container with flex layout */}
12-
<div className=" top-0 left-0 w-full h-full fixed">
13-
<BackgroundCanvas />
14-
</div>
15-
16-
<div className="min-h-screen flex flex-col lg:flex-row items-center justify-center w-full">
17-
18-
{/* Header section (visible on medium screens and up) */}
19-
<div className="absolute top-0 left-0 p-5 hidden md:block">
20-
<Header text="trsctr.github.io" textSize="text-2xl" className="tracking-widest font-mono z-20" hasGradient />
21-
</div>
22-
23-
24-
<div className="flex flex-col lg:flex-row items-center justify-center lg:justify-between w-full h-full relative">
25-
26-
{/* Textbox section */}
27-
<div className="flex-1 p-5 z-30">
28-
<About title="Hello, my name is Otto" imageUrl="/assets/photo.jpg" imageOnRight>
29-
<p className="mb-2">I'm an aspiring software developer 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">Photo by <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/>
36-
</div>
37-
38-
{/* 3D Mesh section */}
39-
<div className="flex-1 p-5 flex justify-center -mt-20 lg:mt-0 z-0">
40-
<div className="relative min-w-[200px] w-full max-w-[800px] h-auto aspect-[1/1]">
41-
<MeshCanvas />
42-
</div>
43-
</div>
44-
</div>
45-
</div>
46-
47-
</div>
48-
);
15+
return (
16+
<div className="w-full h-full bg-gradient-to-b from-background-top to-black">
17+
{/* Main container with flex layout */}
18+
19+
{ /* Add animation:
20+
- Loading animation displayed while still loading
21+
- Fade-in animation for the entire page
22+
*/}
23+
24+
{/* Background canvas */}
25+
<div className=" top-0 left-0 w-full h-full fixed">
26+
<BackgroundCanvas />
27+
</div>
28+
29+
<div className="min-h-screen flex flex-col lg:flex-row items-center justify-center w-full">
30+
31+
{/* Page url at top left of the page (visible on medium screens and up) */}
32+
<div className="absolute top-0 left-0 p-5 hidden md:block">
33+
<Header text="trsctr.github.io" textSize="text-2xl" hasGradient className="tracking-widest font-mono z-20" />
34+
</div>
35+
36+
37+
<div className="flex flex-col lg:flex-row items-center justify-center lg:justify-between w-full h-full relative">
38+
39+
{/* Textbox section */}
40+
<div className="flex-1 p-5 z-30">
41+
<About/>
42+
<ContactFormModal/>
43+
</div>
44+
45+
{/* 3D Mesh section */}
46+
<div className="flex-1 p-5 flex justify-center -mt-20 lg:mt-0 z-0">
47+
<div className="relative min-w-[200px] w-full max-w-[800px] h-auto aspect-[1/1]">
48+
<MeshCanvas />
49+
</div>
50+
</div>
51+
</div>
52+
</div>
53+
54+
</div>
55+
);
4956
};
5057

5158
export default App;

‎src/components/About.tsx‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,43 @@
11
import React from 'react';
2-
import ContentBox from './ContentBox';
3-
import Header from './Header';
4-
import Footer from './Footer';
5-
import TextImageBox from './TextImageBox'
2+
import ContentBox from './layout/ContentBox';
3+
import Footer from './layout/Footer';
4+
import TextImageBox from './layout/TextImageBox'
5+
import useModal from '../hooks/useModal';
6+
import Header from './common/Header';
7+
import { cn } from '../utils/cn';
68

7-
interface AboutProps {
8-
title?: string;
9-
imageUrl?: string;
10-
imageOnRight?: boolean;
11-
children?: React.ReactNode;
12-
}
9+
const About: React.FC = ( ) => {
10+
const { toggleModal } = useModal();
11+
const linkStyle = 'transition-all text-primary hover:text-accent focus:text-accent';
1312

14-
/*
15-
* A component that displays an about section with an image.
16-
*
17-
* @param title The title of the about section.
18-
* @param imageUrl The URL of the image to display.
19-
* @param imageOnRight Whether to display the image on the right side of the text box.
20-
* @param children The content to display in the about section.
21-
*/
22-
const About: React.FC<AboutProps> = ( {title, imageUrl, children, imageOnRight = false}) => {
2313
return (
24-
<div className="md:absolute flex left-0 top-0 md:top-1/4 md:left-32 w-full md:w-9/12 max-w-[900px]">
25-
<ContentBox className="rounded-lg shadow-lg">
26-
{title && <Header text={title} hasGradient/>}
14+
<ContentBox containerClassName='md:absolute flex left-0 top-0 md:top-1/4 md:left-32 w-full md:w-9/12 max-w-[900px]'
15+
contentClassName='bg-background opacity-80 relative p-4 flex justify-center rounded-lg shadow-lg'>
16+
<Header text="Hello, my name is Otto" hasGradient/>
17+
<TextImageBox imageUrl='/assets/photo.jpg' imageOnRight>
18+
<p className="mb-2">I'm an aspiring software developer with a background in audio engineering and tech support, passionate about creative coding.</p>
19+
<p>I recently completed my core studies at <a href="http://hive.fi" className={linkStyle} target="_blank">Hive Helsinki</a>, where I gained hands-on experience in programming with C and C++. </p>
20+
<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>
21+
<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>
22+
<p className="mt-2">Photo by <a href="https://www.instagram.com/diego_j_videos_and_photography/" className={linkStyle} target="_blank">Diego James</a>.</p>
23+
</TextImageBox>
24+
<Footer>
25+
<li>
26+
<a href="http://github.com/trsctr/trsctr.github.io" target="_blank" className={cn(linkStyle, 'me-4 md:me-12')}>Source code</a>
27+
</li>
28+
<li>
29+
<a href="http://github.com/trsctr" target="_blank" className={cn(linkStyle, 'me-4 md:me-12')}>GitHub</a>
30+
</li>
2731

28-
29-
<TextImageBox imageUrl={imageUrl} imageOnRight={imageOnRight}>
30-
31-
{children}
32-
</TextImageBox>
33-
<Footer/>
32+
<li>
33+
<a href="http://linkedin.com/in/otto-andelin" target="_blank" className={cn(linkStyle, 'me-4 md:me-12')}>LinkedIn</a>
34+
</li>
35+
<li >
36+
<a href="#" onClick={toggleModal} className={linkStyle}>Contact</a>
37+
</li>
38+
</Footer>
3439
</ContentBox>
35-
</div>
3640
);
37-
};
41+
};
3842

39-
export default About;
43+
export default About;

‎src/components/BackgroundCanvas.tsx‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎src/components/ContentBox.tsx‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎src/components/Footer.tsx‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

0 commit comments

Comments
 (0)