ux_ui_designer

1
import "./App.css";
2
import Main from "./Components/Main/Main";
3
import Gap from "./Components/Gap/Gap";
4
import About from "./Components/About/About";
5
import Experience from "./Components/Experience/Experience";
6
import Skills from "./Components/Skills/Skills";
7
import Portfolio from "./Components/Portfolio/Portfolio";
8
import ContactButton from "./Components/ContactButton/ContactButton";
9
import Loader from "./Components/Loader/Loader";
10
import { useState, useEffect } from "react";
11
function App() {
12
  const [loadingProgress, setLoadingProgress] = useState(0);
13
  useEffect(() => {
14
    // Simulate loading progress for demonstration purposes
15
    const interval = setInterval(() => {
16
      setLoadingProgress((prevProgress) => prevProgress + 0.02);
17
    }, 70);
18

19
    return () => clearInterval(interval);
20
  }, []);
21
  return (
22
    <div className="App">
23
      {loadingProgress < 1 ? (
24
        <Loader loadingProgress={loadingProgress} />
25
      ) : (
26
        // Content to show after loading is complete
27
        <>
28
          <Main />
29
          <Gap props="Я" />
30
          <About />
31
          <Gap props="Опыт" />
32
          <Experience />
33
          <Gap props="Навыки" />
34
          <Skills />
35
          <Gap props="Портфолио" />
36
          <Portfolio />
37
          <Gap props="Footer" />
38
          <ContactButton />
39
        </>
40
      )}
41
    </div>
42
  );
43
}
44

45
export default App;
46