Skip to content

Commit 5a64942

Browse files
OudomMunintOudomMunint
authored
Merge pull request #101 from OudomMunint/dev
Dev => Main
2 parents bb0567b + e2a5845 commit 5a64942

File tree

10 files changed

+233
-80
lines changed

10 files changed

+233
-80
lines changed

‎.github/workflows/main.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,4 @@ jobs:
4545
uses: ncipollo/release-action@v1.14.0
4646
with:
4747
artifacts: "react-github-actions-build"
48-
tag: v1.5.6
48+
tag: v1.5.7

‎package-lock.json‎

Lines changed: 41 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: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"react-icons": "^4.3.1",
2020
"react-parallax-tilt": "^1.7.42",
2121
"react-pdf": "^7.7.3",
22+
"react-responsive": "^10.0.0",
2223
"react-router-dom": "^6.2.2",
2324
"react-tsparticles": "^1.42.2",
2425
"sass": "^1.63.6",

‎public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030

3131
<body>
3232
<noscript>You need to enable JavaScript to run this app.</noscript>
33+
<!-- <script src="//cdn.jsdelivr.net/npm/@triggerjs/trigger" defer></script> -->
3334
<div id="root"></div>
3435
<form name="contact" netlify netlify-honeypot="bot-field" hidden>
3536
<input type="text" name="name" />

‎src/components/About/AboutCard.js‎

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

‎src/components/About/Clients.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import nw from "../../Assets/nw.png";
77
import air from "../../Assets/air.png";
88
import tina from "../../Assets/tina.png";
99
import nag from "../../Assets/nag.png";
10+
// import { useEffect } from "react";
1011
// import {
1112
// DiJavascript1,
1213
// DiReact,

‎src/components/About/ScrollTrigger.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React from "react";
2+
import Card from "react-bootstrap/Card";
3+
import { useEffect } from "react";
4+
import { useMediaQuery } from "react-responsive";
5+
6+
function ScrollTrigger() {
7+
8+
const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1368 });
9+
const isDesktop = useMediaQuery({ minWidth: 1081 });
10+
const isDevelopment = process.env.NODE_ENV === "development";
11+
12+
useEffect(() => {
13+
let currentIntersectedElement = null;
14+
const observer = new IntersectionObserver((entries) => {
15+
entries.forEach((entry) => {
16+
if (entry.isIntersecting) {
17+
// Reset previous element
18+
// if (currentIntersectedElement && currentIntersectedElement !== entry.target) {
19+
// currentIntersectedElement.style.opacity = 0.1;
20+
// }
21+
entry.target.style.opacity = 1;
22+
currentIntersectedElement = entry.target;
23+
} else {
24+
entry.target.style.opacity = 0.1;
25+
if (currentIntersectedElement === entry.target) {
26+
currentIntersectedElement = null;
27+
}
28+
}
29+
});
30+
}, {
31+
// desktop and laptops options
32+
// threshold: 1,
33+
// rootMargin: "-150px",
34+
// Tablets options
35+
// threshold: 0.7,
36+
// rootMargin: "-50px",
37+
threshold: isTablet ? 0.5 : 1,
38+
rootMargin: isTablet ? "-200px" : "-150px",
39+
});
40+
41+
if (isDevelopment) { console.log(observer.thresholds, observer.rootMargin) }
42+
console.log(observer.thresholds, observer.rootMargin);
43+
console.log(window.innerWidth, window.innerHeight);
44+
45+
46+
document.querySelectorAll('.triggerSpan').forEach((element) => {
47+
element.style.opacity = 0.1;
48+
observer.observe(element);
49+
});
50+
51+
return () => observer.disconnect();
52+
}, [isTablet, isDesktop, isDevelopment]);
53+
54+
return (
55+
<Card className="quote-card-view">
56+
<Card.Body>
57+
<div id="aboutMe" className="body">
58+
<div className="triggerDiv" tg-name="_" tg-ref="container" tg-from="1" tg-to="8" tg-step="1">
59+
<section tg-name="_" tg-map="1,2,3,4,5,6,7,8,9,10: 1">
60+
<span className="triggerSpan" tg-name="opacity" tg-filter="2!" tg-follow="container">
61+
A University Of Newcastle Student Led Design Studio.
62+
</span>
63+
<br />
64+
<span className="triggerSpan" tg-name="opacity" tg-filter="3!" tg-follow="container">
65+
We work together with communities, governments, universities and select start-up businesses
66+
</span> <br />
67+
<span className="triggerSpan" tg-name="opacity" tg-filter="4!" tg-follow="container">
68+
We work on large scale projects from illustration and graphic design through to campaigns and creative consultancy.
69+
</span>
70+
<br />
71+
<span className="triggerSpan" tg-name="opacity" tg-filter="5!" tg-follow="container">
72+
Feel free to get in touch for an obligation free consultation. And everything from Aye! to Zed!
73+
</span>
74+
</section>
75+
</div>
76+
</div>
77+
</Card.Body>
78+
</Card>
79+
);
80+
}
81+
82+
export default ScrollTrigger;

‎src/components/AlertComponent.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState, useEffect, useCallback } from "react";
1+
// import React, { useState, useEffect, useCallback } from "react";
22

33
const hideAlert = () => {
44
const alertElement = document.querySelector(".alert-container");

‎src/components/Home/Home2.js‎

Lines changed: 69 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import Student from "../../Assets/home-main.svg"
44
import Tilt from "react-parallax-tilt";
55
import carl from "../../Assets/carl.svg"
66
import simone from "../../Assets/simone.svg"
7+
import ScrollTrigger from "../About/ScrollTrigger";
8+
import { useMediaQuery } from "react-responsive";
79

810
import {
911
// AiFillGithub,
@@ -18,50 +20,80 @@ import {
1820
// import myImg from "../../Assets/avatar.svg";
1921

2022
function Home2() {
23+
const isLargeScreen = useMediaQuery({ query: "(min-width: 768px)" });
24+
2125
return (
2226
<Container fluid className="home-about-section" id="about">
2327
<Container>
2428
<Row>
25-
<Col md={8} className="home-about-description">
26-
27-
<h1 className="home2H1" style={{ fontSize: "2.2em", width: "500px", textAlign: "left" }}>
28-
A University Of Newcastle <span className="purple"> Student Led </span> Design Studio.
29-
</h1>
30-
<p className="home-about-body" style={{width: "500px", textAlign: "left", fontSize: "2.2em" }}>
31-
<br />
32-
<br />We work together with
33-
<i>
34-
<b className="purple"> communities, governments, universities and select start-up businesses </b>
35-
</i>
36-
<br />
37-
<br />
38-
We work on large scale projects from&nbsp;
39-
<i>
40-
<b className="purple">llustration and graphic design </b> through to{" "}
41-
<b className="purple">
42-
campaigns and creative consultancy.
43-
</b>
44-
</i>
45-
<br />
46-
<br />
47-
Feel free to get in touch for an <b className="purple">obligation free consultation.</b> And everything from
48-
<i>
49-
<b className="purple">
50-
{" "}
51-
Aye!
52-
</b>
53-
</i>
54-
&nbsp;to
55-
<i>
56-
<b className="purple"> Zed!</b>
57-
</i>
58-
</p>
59-
</Col>
29+
{!isLargeScreen && (
30+
<Col md={8} className="home-about-description">
31+
<h1
32+
className="home2H1"
33+
style={{
34+
fontSize: "2.2em",
35+
width: "500px",
36+
textAlign: "left",
37+
}}
38+
>
39+
A University Of Newcastle{" "}
40+
<span className="purple"> Student Led </span> Design Studio.
41+
</h1>
42+
<p
43+
className="home-about-body"
44+
style={{
45+
width: "500px",
46+
textAlign: "left",
47+
fontSize: "2.2em",
48+
}}
49+
>
50+
<br />
51+
<br />
52+
We work together with
53+
<i>
54+
<b className="purple">
55+
{" "}
56+
communities, governments, universities and select start-up
57+
businesses{" "}
58+
</b>
59+
</i>
60+
<br />
61+
<br />
62+
We work on large scale projects from&nbsp;
63+
<i>
64+
<b className="purple">llustration and graphic design </b>{" "}
65+
through to{" "}
66+
<b className="purple">campaigns and creative consultancy.</b>
67+
</i>
68+
<br />
69+
<br />
70+
Feel free to get in touch for an{" "}
71+
<b className="purple">obligation free consultation.</b> And
72+
everything from
73+
<i>
74+
<b className="purple"> Aye!</b>
75+
</i>
76+
&nbsp;to
77+
<i>
78+
<b className="purple"> Zed!</b>
79+
</i>
80+
</p>
81+
</Col>
82+
)}
83+
84+
{!isLargeScreen && (
6085
<Col md={4} className="myAvtar">
6186
<Tilt>
62-
<img src={Student} className="img-fluid" alt="avatar" style={{ minHeight: "450px" }}/>
87+
<img
88+
src={Student}
89+
className="img-fluid"
90+
alt="avatar"
91+
style={{ minHeight: "450px" }}
92+
/>
6393
</Tilt>
64-
</Col>
94+
</Col>)}
95+
96+
{isLargeScreen && <ScrollTrigger className="scroll-trigger" />}
6597
</Row>
6698
</Container>
6799
{/* about end */}

0 commit comments

Comments
 (0)