Skip to content

Commit e8ce657

Browse files
GabrielReversoGabrielReverso
committed
Teste de otimização
1 parent 735550e commit e8ce657

8 files changed

Lines changed: 51 additions & 23 deletions

public/soft-fabric-background-light-mobile.webp renamed to src/app/assets/soft-fabric-background-light-mobile.webp

File renamed without changes.

public/soft-fabric-background-light.webp renamed to src/app/assets/soft-fabric-background-light.webp

File renamed without changes.

public/soft-fabric-background-mobile.webp renamed to src/app/assets/soft-fabric-background-mobile.webp

File renamed without changes.

public/soft-fabric-background.webp renamed to src/app/assets/soft-fabric-background.webp

File renamed without changes.

‎src/app/globals.css‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ body {
133133
}
134134

135135
/*******************************************MAIN SECTION********************************************/
136-
#home::before {
136+
/* #home::before {
137137
content: "";
138138
position: absolute;
139139
background-image: url("/meu_portfolio/soft-fabric-background.webp");
@@ -154,11 +154,8 @@ html.light #home::before {
154154
background-color: var(--hero-bg);
155155
background-image: url("/meu_portfolio/soft-fabric-background-light.webp");
156156
}
157-
158-
@media screen and (max-width: 1280px) {
159-
/* #home::before {
160-
background-position: center;
161-
} */
157+
*/
158+
/* @media screen and (max-width: 1280px) {
162159
163160
html.dark #home::before {
164161
background-image: url("/meu_portfolio/soft-fabric-background-mobile.webp");
@@ -167,7 +164,7 @@ html.light #home::before {
167164
html.light #home::before {
168165
background-image: url("/meu_portfolio/soft-fabric-background-light-mobile.webp");
169166
}
170-
}
167+
} */
171168

172169
.main-blob {
173170
scale: 5;

‎src/app/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export default function RootLayout({
5858
href={`/meu_portfolio/favicon.ico`}
5959
sizes="any"
6060
/>
61-
<link
61+
{/* <link
6262
rel="preload"
6363
as="image"
6464
href={`/meu_portfolio/soft-fabric-background.webp`}
@@ -77,7 +77,7 @@ export default function RootLayout({
7777
rel="preload"
7878
as="image"
7979
href={`/meu_portfolio/soft-fabric-background-light-mobile.webp`}
80-
/>
80+
/> */}
8181
</head>
8282
<body
8383
style={{ overflowY: "hidden" }}

‎src/app/page.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,26 @@
33
import { useEffect } from "react";
44
import AOS from "aos";
55
import "aos/dist/aos.css";
6-
import MainSection from "./sections/MainSection";
7-
import Header from "./sections/Header";
8-
import AboutMe from "./sections/AboutMe";
9-
import Solutions from "./sections/Solutions";
10-
import Projects from "./sections/Projects";
11-
import Journey from "./sections/Journey";
12-
import Contact from "./sections/Contact";
13-
import Footer from "./sections/Footer";
146
import { PopupModal } from "react-calendly";
157
import useRoot from "./hooks/UseRoot";
168
import useCalendlyStore from "./stores/calendlyStore";
179
import FontelloIcon from "./components/shared/FontelloIcon";
1810
import useMobile from "./hooks/UseMobile";
1911
import { useThemeStore } from "./stores/themeStore";
12+
import usePageLoading from "./hooks/UsePageLoading";
13+
14+
/* SECTIONS */
15+
import PageLoader from "./components/shared/PageLoader";
16+
import Header from "./sections/Header";
17+
import HeroSection from "./sections/HeroSection";
18+
import AboutMe from "./sections/AboutMe";
2019
import Depoiments from "./sections/Depoiments";
2120
import FAQSection from "./sections/FAQ";
22-
import PageLoader from "./components/shared/PageLoader";
23-
import usePageLoading from "./hooks/UsePageLoading";
21+
import Solutions from "./sections/Solutions";
22+
import Projects from "./sections/Projects";
23+
import Journey from "./sections/Journey";
24+
import Contact from "./sections/Contact";
25+
import Footer from "./sections/Footer";
2426

2527
export default function Home() {
2628
useEffect(() => {
@@ -54,7 +56,7 @@ export default function Home() {
5456
>
5557
<PageLoader isLoading={isPageLoading} />
5658
<Header />
57-
<MainSection />
59+
<HeroSection />
5860
<AboutMe />
5961
<Solutions />
6062
<Depoiments />

src/app/sections/MainSection.tsx renamed to src/app/sections/HeroSection.tsx

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useMemo } from "react";
12
import Typewriter from "typewriter-effect";
23
import FontelloIcon from "../components/shared/FontelloIcon";
34
import ResponsiveIconScroll from "../components/scrollAnimation/ResponsiveIconScroll";
@@ -11,8 +12,13 @@ import useHeaderAnchor from "@/app/hooks/UseHeaderAnchor";
1112
import useMobile from "../hooks/UseMobile";
1213
import Pedro_600x900 from "../assets/Pedro_600x900.webp";
1314
import Pedro_fullHD from "../assets/Pedro_fullHD.webp";
15+
import bg_dark from "../assets/soft-fabric-background.webp";
16+
import bg_dark_mobile from "../assets/soft-fabric-background-mobile.webp";
17+
import bg_light from "../assets/soft-fabric-background-light.webp";
18+
import bg_light_mobile from "../assets/soft-fabric-background-light-mobile.webp";
19+
import { useThemeStore } from "../stores/themeStore";
1420

15-
export default function MainSection() {
21+
export default function HeroSection() {
1622
const homeRef = useHeaderAnchor("home");
1723

1824
let mouseDistanceX = 0;
@@ -27,8 +33,19 @@ export default function MainSection() {
2733
}
2834

2935
const isMobile = useMobile();
36+
const theme = useThemeStore((s) => s.theme);
3037

31-
const src = isMobile ? Pedro_600x900 : Pedro_fullHD;
38+
const pedroSrc = useMemo(() => {
39+
if (isMobile) return Pedro_600x900;
40+
return Pedro_fullHD;
41+
}, [isMobile]);
42+
43+
const backgroundSrc = useMemo(() => {
44+
if (isMobile && theme === "dark") return bg_dark_mobile;
45+
if (isMobile && theme === "light") return bg_light_mobile;
46+
if (!isMobile && theme === "dark") return bg_dark;
47+
return bg_light;
48+
}, [isMobile, theme]);
3249

3350
return (
3451
<main
@@ -38,6 +55,17 @@ export default function MainSection() {
3855
overflowX: "hidden",
3956
}}
4057
>
58+
<Image
59+
src={backgroundSrc}
60+
alt=""
61+
role="presentation"
62+
aria-hidden
63+
fill
64+
priority
65+
fetchPriority="high"
66+
className="object-cover z-0 absolute"
67+
unoptimized
68+
/>
4169
<div className="flex flex-row wrapper z-10 relative">
4270
<aside
4371
id="main-section"
@@ -119,7 +147,7 @@ export default function MainSection() {
119147
<Image
120148
className="min-w-[350px] min-h-[350px] mb-[-3rem] md:mb-0 md:min-w-[600px] md:min-h-[600px] relative z-10 ml-auto mr-auto"
121149
aria-hidden
122-
src={src}
150+
src={pedroSrc}
123151
alt="Imagem do Pedro"
124152
width={600}
125153
height={600}
@@ -131,6 +159,7 @@ export default function MainSection() {
131159
}px)`,
132160
filter: "drop-shadow(5px 0 10px black)",
133161
}}
162+
fetchPriority="high"
134163
/>
135164
</picture>
136165
</div>

0 commit comments

Comments
 (0)