From bdaa6b64c506bc8bfb664f48b1abd3cff3f9ccbd Mon Sep 17 00:00:00 2001 From: Juthatip McDevitt Date: Tue, 23 Apr 2024 16:28:50 -0500 Subject: [PATCH] updated responsive --- awwwards_ss1/README.md | 3 +- awwwards_ss1/src/App.jsx | 2 - awwwards_ss1/src/components/About.jsx | 29 ++-- awwwards_ss1/src/components/Eyes.jsx | 8 +- .../src/components/FeaturedProjects.jsx | 164 +++++++----------- awwwards_ss1/src/components/Footer.jsx | 32 ++-- awwwards_ss1/src/components/Hero.jsx | 24 +-- awwwards_ss1/src/components/Navbar.jsx | 11 +- awwwards_ss1/src/components/Ready.jsx | 14 +- awwwards_ss1/src/components/ScrollDown.jsx | 9 - awwwards_ss1/src/components/TextAnimation.jsx | 4 +- awwwards_ss1/src/index.css | 8 +- 12 files changed, 126 insertions(+), 182 deletions(-) delete mode 100644 awwwards_ss1/src/components/ScrollDown.jsx diff --git a/awwwards_ss1/README.md b/awwwards_ss1/README.md index 32e416d..819fd9e 100644 --- a/awwwards_ss1/README.md +++ b/awwwards_ss1/README.md @@ -1,5 +1,4 @@ # In this project, we recreate the design of OCHI design (https://ochi.design/) by using Vite + React. #### Start project --> npm run dev -# -P.S. This is a non-responsive website + diff --git a/awwwards_ss1/src/App.jsx b/awwwards_ss1/src/App.jsx index 9b933ce..169b77a 100644 --- a/awwwards_ss1/src/App.jsx +++ b/awwwards_ss1/src/App.jsx @@ -7,7 +7,6 @@ import FeaturedProjects from "./components/FeaturedProjects" import Footer from "./components/Footer" import Ready from "./components/Ready" import LocomotiveScroll from 'locomotive-scroll'; -import ScrollDown from "./components/ScrollDown" @@ -18,7 +17,6 @@ const App = () => {
- diff --git a/awwwards_ss1/src/components/About.jsx b/awwwards_ss1/src/components/About.jsx index a81daf0..6dd4eea 100644 --- a/awwwards_ss1/src/components/About.jsx +++ b/awwwards_ss1/src/components/About.jsx @@ -4,23 +4,22 @@ const About = () => { return ( -
+
-

Ochi is a strategic partner for fast-growing tech businesses that need to raise funds, sell products, +

Ochi is a strategic partner for fast-growing tech businesses that need to raise funds, sell products, explain complex ideas, and hire great people.

+
-
- -
-
What you can expect:
-
-
+
+
What you can expect:
+
+

We create tailored presentations to help you persuade your colleagues, clients, or investors. Whether it’s live or digital, delivered for one or a hundred people.


We believe the mix of strategy and design (with a bit of coffee) is what makes your message clear, convincing, and captivating.

-
+

S:

Instagram

Behance

@@ -32,15 +31,15 @@ const About = () => {
-
-
-

Our approach:

+
+
+

Our approach:

-
+
diff --git a/awwwards_ss1/src/components/Eyes.jsx b/awwwards_ss1/src/components/Eyes.jsx index 93c651f..2736c30 100644 --- a/awwwards_ss1/src/components/Eyes.jsx +++ b/awwwards_ss1/src/components/Eyes.jsx @@ -22,17 +22,17 @@ const Eyes = () => {
-

play

+

play

-
+
-

play

+

play

-
+
diff --git a/awwwards_ss1/src/components/FeaturedProjects.jsx b/awwwards_ss1/src/components/FeaturedProjects.jsx index c7cabee..e5414f2 100644 --- a/awwwards_ss1/src/components/FeaturedProjects.jsx +++ b/awwwards_ss1/src/components/FeaturedProjects.jsx @@ -12,230 +12,184 @@ const FeaturedProjects = () => { featureTop[index].start({y: "100%"}) } - const featurebottom = [useAnimation(), useAnimation()] - const handleHoverTextStart = (index) => { - featurebottom[index].start({y: "0"}) - } - const handleHoverTextEnd = (index) => { - featurebottom[index].start({y: "100%"}) - } - - return ( -
-
-

Feature projects

+
+
+

Feature projects

-
+
-
-
+
+

fyde

- handleHoverStart(0)} onHoverEnd={() => handleHoverEnd(0)} className=" h-[80vh] relative"> -

+ handleHoverStart(0)} onHoverEnd={() => handleHoverEnd(0)} className="w-[95vw] h[95vh] md:w-full md:h-[40vh] xl:h-[65vh] 2xl:h-[80vh] relative"> +

{"fyde".split('').map((item, index) => {item})}

+

fyde

- audit - copywriting - sales desk - slides design + audit + copywriting + sales desk + slides design

vise

- handleHoverStart(1)} onHoverEnd={() => handleHoverEnd(1)} className="h-[80vh] relative"> -

+ handleHoverStart(1)} onHoverEnd={() => handleHoverEnd(1)} className="w-[95vw] h[95vh] md:w-full md:h-[40vh] xl:h-[65vh] 2xl:h-[80vh] relative"> +

{"vise".split('').map((item, index) => {item})}

+

vise

- agency - company presentations + agency + company presentations
-

- +
- -
-
-
-

trawa

- handleHoverTextStart(0)} onHoverEnd={() => handleHoverTextEnd(0)} className=" h-[80vh] relative"> -

- {"trawa".split('').map((item, index) => {item})} -

-
- -
-
-
- brand identity - design research - investor desk -
-
- -
-

Premium Blend

- handleHoverTextStart(1)} onHoverEnd={() => handleHoverTextEnd(1)} className="h-[80vh] relative"> -

- {"Premium Blend".split('').map((item, index) => {item})} -

-
- -
-
-
- brand template -
-
-
-
- - -
+ +
{/*===== review section =====*/}
-
-

Clients’ reviews

+
+

Clients’ reviews

-
+
-
-
+
+

Karman Ventures

-

Services:

-
- +

Services:

+
+
-

William Barnes

- -

They were transparent about the time and the stages of the project. The end product is high quality, +

William Barnes

+ +

They were transparent about the time and the stages of the project. The end product is high quality, and I feel confident about how they were handholding the client through the process. I feel like I can introduce them to someone who needs to put a sales deck together from scratch, and they would be able to handhold the client experience from 0 to 100 very effectively from story to design. 5/5

-

read

+

read

-
+
-
+

Planetly

Nina Walloch

-

read

+

read

-
+

Workiz Easy

Tomer Levy

-

read

+

read

-
+

Premium Blend

Ellen Kim

-

read

+

read

-
+

Hypercare Systems

Brendan Goss

-

read

+

read

-
+

Officevibe

Raff Labrie

-

read

+

read

-
+

Orderlion

Stefan Strohmer

-

read

+

read

-
+

Black Book

Jaci Smith

-

read

+

read

-
+

Trawa Energy

David Budde

-

read

+

read

{/*===== cardHero section =====*/} -
-
+
+
@@ -243,16 +197,16 @@ const FeaturedProjects = () => { - +
-
-
+
+
- +
-
+
- +
diff --git a/awwwards_ss1/src/components/Footer.jsx b/awwwards_ss1/src/components/Footer.jsx index 9250a83..07cd8cc 100644 --- a/awwwards_ss1/src/components/Footer.jsx +++ b/awwwards_ss1/src/components/Footer.jsx @@ -1,12 +1,12 @@ const Footer = () => { return (
-
-
-

eye-

-

opening

+
+
+

eye-

+

opening

-
+
@@ -17,12 +17,12 @@ const Footer = () => {
-
-
-

Presentations

+
+
+

Presentations

-
+

S:

Instagram

Behance

@@ -30,15 +30,15 @@ const Footer = () => {

Linkedin

-
-
+
+

L:

202-1965 W 4th Ave

Vancouver, Canada


30 Chukarina St

Lviv, Ukraine

-
+

M:

Home

Services

@@ -49,16 +49,16 @@ const Footer = () => {
-
+

E:

hello@ochi.design

-
-
+
+

© ochi design 2024. Legal Terms

-
+

Website by Obys

diff --git a/awwwards_ss1/src/components/Hero.jsx b/awwwards_ss1/src/components/Hero.jsx index 2493e8f..f18b692 100644 --- a/awwwards_ss1/src/components/Hero.jsx +++ b/awwwards_ss1/src/components/Hero.jsx @@ -12,28 +12,28 @@ const boxSlide = { const Hero = () => { return ( -
-
+
+
-

We create

-
+

We create

+

W.

Site of the Day

-
- -

eye-opening

+
+ +

eye-opening

-

presentations

+

presentations

-
-
+
+

For public and private companies

From the first pitch to IPO

-

start the project

- +

start the project

+
diff --git a/awwwards_ss1/src/components/Navbar.jsx b/awwwards_ss1/src/components/Navbar.jsx index 8eb399d..7a06ae9 100644 --- a/awwwards_ss1/src/components/Navbar.jsx +++ b/awwwards_ss1/src/components/Navbar.jsx @@ -1,6 +1,8 @@ +import { HiBars2 } from "react-icons/hi2"; + const Navbar = () => { return ( -
+
@@ -10,15 +12,16 @@ const Navbar = () => {
-
+

Services

Our work

About us

Insights

-
-

Contact us

+
+

Contact us

+

) } diff --git a/awwwards_ss1/src/components/Ready.jsx b/awwwards_ss1/src/components/Ready.jsx index fddf3a9..cad672a 100644 --- a/awwwards_ss1/src/components/Ready.jsx +++ b/awwwards_ss1/src/components/Ready.jsx @@ -1,14 +1,14 @@ const Ready = () => { return ( -
-
+
+

Ready

-

to start

-

the project?

+

to start

+

the project?

- -

or

- + +

or

+
) } diff --git a/awwwards_ss1/src/components/ScrollDown.jsx b/awwwards_ss1/src/components/ScrollDown.jsx deleted file mode 100644 index 3cac7e3..0000000 --- a/awwwards_ss1/src/components/ScrollDown.jsx +++ /dev/null @@ -1,9 +0,0 @@ -const ScrollDown = () => { - return ( -
-

Scroll down

-
- ) -} - -export default ScrollDown \ No newline at end of file diff --git a/awwwards_ss1/src/components/TextAnimation.jsx b/awwwards_ss1/src/components/TextAnimation.jsx index 11d8dfd..fe8e2ee 100644 --- a/awwwards_ss1/src/components/TextAnimation.jsx +++ b/awwwards_ss1/src/components/TextAnimation.jsx @@ -9,9 +9,9 @@ const slider = { const TextAnimation = () => { return (
-
+
- + We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi We are ochi
diff --git a/awwwards_ss1/src/index.css b/awwwards_ss1/src/index.css index 50c316a..0992d94 100644 --- a/awwwards_ss1/src/index.css +++ b/awwwards_ss1/src/index.css @@ -8,7 +8,7 @@ html{ .home-text, .feature-text, .text-ready{ font-family: "Bebas Neue", sans-serif; } -.nav-text, .marquee-text, .home-text-2, .about-text{ +.nav-text, .animate-text, .home-text-2, .about-text{ font-family: "Epilogue", sans-serif; } .nav-text{ @@ -39,7 +39,7 @@ html{ .btn{ - padding: 20px 40px; + padding: 1vw 2vw; border-radius: 50px; color: white; background: linear-gradient(#212121, #212121 50%, black 50%, black); @@ -60,7 +60,7 @@ html{ background-position: 100% 100%; } .btn-2{ - padding: 20px 40px; + padding: 1vw 2vw; border-radius: 50px; border: 1px solid #212121; color: #212121; @@ -73,7 +73,7 @@ html{ background-position: 100% 100%; } .btn-review{ - padding: 6px 12px; + padding: 0.3vw 1.2vh; border: 1px solid #212121; border-radius: 50px; transition: ease-in-out 0.3s;