🎨 style(package.json): add modern-normalize package to improve cross-…

…browser consistency 🚀 chore(public): update favicon and manifest to reflect personal branding 💄 style(App.tsx): add preloader component to improve user experience ✨ feat(Body.tsx): add Body component to display personal information and add CustomButton component to display social media links and blog link The modern-normalize package was added to improve cross-browser consistency. The favicon and manifest were updated to reflect personal branding. A preloader component was added to improve user experience while the app is loading. The Body component was added to display personal information and the CustomButton component was added to display social media links and a link to the personal blog. 🎨 style(index.css): add preloader styles and font import ✨ feat(index.css): add styles for logo animation and text animation The preloader component is added to the project, and its styles are defined in index.css. The font 'Satisfy' is imported from Google Fonts. The logo animation styles are added to index.css, and the text animation styles are added to index.css. The text animation is applied to the text elements in the preloader component.
ipeq32 · May 5, 2023 · 0bedc52 · 0bedc52
1 parent cfdc592
commit 0bedc52
Show file tree

Hide file tree

Showing 17 changed files with 418 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "modern-normalize": "^1.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" href="/tuna.ico.png" type="image/x-icon">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#eba0bf" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="#eba0bf">
+  <meta name="msapplication-navbutton-color" content="#eba0bf">
+  <meta name="description" content="My personal website." />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/tuna.ico.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +24,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>tunahanipek</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +40,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -3,19 +3,9 @@
   "name": "Create React App Sample",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "tuna.ico.png",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

diff --git a/public/profil.png b/public/profil.png
diff --git a/public/tuna.ico.png b/public/tuna.ico.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,29 @@
+import { Fragment, useState } from "react";
+
+import Body from "./components/Body/Body";
+import Navi from "./components/navigation/Navi";
+import Preloader from "./components/preloader/Preloader";
+
+const App = () => {
+  const [load, setLoad] = useState(false);
+
+  setTimeout(() => {
+    setLoad(true);
+  }, 1800);
 
-function App() {
   return (
-    <div className="App">
-      sad
-    </div>
+    <>
+      {load ? (
+        <Fragment>
+          <Navi />
+          <Body />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <Preloader />
+        </Fragment>
+      )}
+    </>
   );
 }
 

diff --git a/src/components/Body/Body.tsx b/src/components/Body/Body.tsx
@@ -0,0 +1,76 @@
+import CustomButton from "./Button";
+
+const Body = () => {
+  return (
+    <div
+      className="flex flex-wrap justify-center w-full h-auto px-5 bg-gray-200 shadow-lg rounded-tl-3xl rounded-tr-[400px] rounded-br-[200px] rounded-bl-[600px]"
+    >
+      <div className="flex flex-col">
+        <div className="duration-200 transform rounded-t-full shadow-lg bg-yellow-50 easy-in-out">
+          <div className="max-w-[1500px] w-full h-40 mx-auto max-2xl:px-10 max-2xl:rounded-full overflow-hidden rounded-xl">
+            <img
+              className="w-full rounded opacity-tema"
+              src="https://images.unsplash.com/photo-1605379399642-870262d3d051?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80"
+              alt=""
+            />
+          </div>
+          <div className="flex justify-center px-5 -mt-12">
+            <img
+              className="w-40 h-40 p-2 bg-green-50 rounded-[70%_30%_30%_70%/60%_40%_60%_40%] opacity-profil"
+              src='/profil.png'
+              alt="Profil Fotoğrafı"
+              width="1920"
+              height="1080"
+            />
+          </div>
+          <div className="">
+            <div className="text-center px-14">
+              <h2 className="text-3xl font-bold text-gray-800">
+                Tunahan İPEK
+              </h2>
+              <p className="mt-2 text-gray-400">KİŞİSEL WEB SİTESİ</p>
+              <p className="mt-1 text-gray-400">
+                - kurumsal olma yolunda ilk adımlar -
+              </p>
+              <br />
+              <p className="mt-2 text-gray-600">
+                Merhabalar ben Tunahan, kısaca kendimi tanıtmam gerekirse 22
+                yaşındayım ve Denizli'de yaşıyorum. Isparta'da Biyomedikal
+                bölümünden mezun oldum. Yazılım ile hobi olarak ilgileniyorum
+                ve ismimi markam olarak kullanma kararı aldım. Sorularınız
+                için mail adreslerimi aşağıya bırakıyorum. Benim hakkımda daha
+                fazla bilgi almak için lüfen Blog sitemi ziyaret et..
+              </p>
+            </div>
+            <hr className="mt-6" />
+            <div
+              id="bilgilendirme"
+              className="flex rounded-t-full bg-gray-50"
+            >
+              <div className="w-1/2 p-4 text-center cursor-default hover:bg-gray-100">
+                <p className="max-sm:text-sm">
+                  <span className="font-semibold">
+                    KURUMSAL E-MAIL &rarr;
+                  </span>
+                  destek@tunahanipek.com
+                </p>
+              </div>
+              <div className="border"></div>
+              <div className="w-1/2 p-4 text-center cursor-default hover:bg-gray-100">
+                <p className="max-sm:text-sm">
+                  <span className="font-semibold">
+                    KİŞİSEL E-MAIL &rarr;
+                  </span>
+                  tnhnipek@gmail.com
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <CustomButton />
+      </div>
+    </div>
+  )
+}
+
+export default Body
diff --git a/src/components/Body/Button.tsx b/src/components/Body/Button.tsx
@@ -0,0 +1,61 @@
+const Button = () => {
+  return (
+    <div className="flex flex-wrap-reverse items-center px-8 py-16 max-lg:flex-col max-lg:gap-10">
+      <div className="flex-grow"></div>
+      <div className="flex flex-row gap-1 max-sm:gap-0 max-sm:mx-auto">
+        <a className="flex-none px-1 max-sm:px-0" href="https://www.instagram.com/tnhnipek">
+          <img
+            src="https://img.icons8.com/nolan/64/instagram-new.png"
+            alt="instagram"
+          />
+        </a>
+        <a
+          className="flex-none px-1 max-sm:px-0"
+          href="https://api.whatsapp.com/send/?phone=+905416064488&text&app_absent=0"
+        >
+          <img
+            src="https://img.icons8.com/nolan/64/whatsapp.png"
+            alt="whatsapp"
+          />
+        </a>
+        <a className="flex-none px-1 max-sm:px-0" href="https://github.com/ipeq32">
+          <img src="https://img.icons8.com/nolan/64/github.png" alt="github" />
+        </a>
+        <a
+          className="flex-none px-1 max-sm:px-0"
+          href="https://www.linkedin.com/in/tunahan-ipek-3389bb20b"
+        >
+          <img
+            src="https://img.icons8.com/nolan/64/linkedin.png"
+            alt="linekdin"
+          />
+        </a>
+        <a
+          className="flex-none px-1 max-sm:px-0"
+          href="https://open.spotify.com/user/vmr0p63u44tv5ugde26ybzipx"
+        >
+          <img
+            src="https://img.icons8.com/nolan/64/spotify.png"
+            alt="spotify"
+          />
+        </a>
+      </div>
+      <div className="flex-grow"></div>
+      <div className="relative flex-none group">
+        <div className="animate-skew opacity-75 group-hover:opacity-100 transition duration-500 absolute bg-pink-500 rounded-lg -inset-0.5 filter blur bg-gradient-to-r from-green-300 via-indigo-700 to-pink-500 "></div>
+        <a href="https://blog.tunahanipek.com">
+          <button className="relative flex items-center px-4 leading-none divide-x divide-pink-600 rounded-lg bg-gradient-to-tr from-gray-500 py-7 via-indigo-500 to-green-400">
+            <span className="pr-6 text-gray-300">Blog</span>
+            <span className="pl-6 text-green-200 transition duration-200 group-hover:text-gray-50">
+              Siteme gitmek için
+              <span className="pl-1 text-xl text-center">&rarr;</span>
+            </span>
+          </button>
+        </a>
+      </div>
+      <div className="flex-grow"></div>
+    </div>
+  )
+}
+
+export default Button
diff --git a/src/components/navigation/Navi.tsx b/src/components/navigation/Navi.tsx
@@ -0,0 +1,78 @@
+const Navi = () => {
+  return (
+    <div
+      className="flex h-24 mb-8 bg-red-100 rounded-full shadow-xl"
+    >
+      <div className="self-end flex-none w-24 h-16 mx-8 mb-1 animate-bounce">
+        <div className="space-y-2 max-sm:hidden">
+          <div className="w-2/4 h-4 rounded bg-gradient-to-r from-blue-400"></div>
+          <div className="h-4 rounded bg-gradient-to-tl from-indigo-400 via-green-300 to-pink-400"></div>
+          <div className="w-5/6 h-4 rounded bg-gradient-to-tr from-yellow-400"></div>
+        </div>
+        <div className="hidden max-sm:block">
+          <svg
+            data-name="Layer 1"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 203.29 204.17"
+          >
+            <defs>
+              <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                <stop offset="0%" stopColor="#00bc9b" />
+                <stop offset="100%" stopColor="#5eaefd" />
+              </linearGradient>
+            </defs>
+            <path
+              className="st1"
+              stroke="url(#gradient)"
+              strokeWidth="2"
+              fill="none"
+              d="M190.42,253.13s1.76,24.46,36.1,24.55l34.34.1s71.44-2.21,70.73,69.92-1.08,79.37-1.08,79.37-2.84,30.61-37.56,30.22c.29-20.25,1.4-106.86,1.4-106.86s-18-10.17-36.65-10.95-38.09-12.13-41.09-15.13a22.3,22.3,0,0,0,8.59.39s-20.33-8-31-32c13.57,15.79,22.05,13.31,22.05,13.31s-26.14-15.74-25.8-32.32C190.66,261.77,190.42,253.13,190.42,253.13Z"
+              transform="translate(-190.41 -253.13)"
+            />
+            <path
+              stroke="url(#gradient)"
+              strokeWidth="2"
+              fill="none"
+              className="st0"
+              d="M332.24,300.61a95.75,95.75,0,0,1,5.31,34.69h28.18s22.3-1.66,28-27.88v-6.81Z"
+              transform="translate(-190.41 -253.13)"
+            />
+          </svg>
+        </div>
+      </div>
+      <div
+        className="flex items-center justify-center flex-auto mr-3 space-x-2 animate-pulse max-lg:hidden"
+      >
+        <div className="w-8 h-8 bg-pink-400 rounded-full"></div>
+        <div className="w-8 h-8 bg-blue-400 rounded-md"></div>
+        <div className="w-8 h-8 bg-red-400 rounded-full"></div>
+      </div>
+      <div className="self-start flex-grow h-auto text-center">
+        <button
+          className="transition duration-500 ease-in-out transform mr-44 animate-skew hover:-translate-y-1 hover:-translate-x-2 hover:scale-110 hover:scale-y-125"
+        >
+          <div className="relative box">
+            <p className="text-green-500 text text1">tunahan</p>
+            <p className="text-gray-700 text text2">tunahan</p>
+          </div>
+        </button>
+      </div>
+      <div
+        className="flex items-center justify-center flex-auto ml-5 space-x-2 animate-pulse max-lg:hidden"
+      >
+        <div className="w-8 h-8 bg-red-400 rounded-full"></div>
+        <div className="w-8 h-8 bg-blue-400 rounded-md"></div>
+        <div className="w-8 h-8 bg-pink-400 rounded-full"></div>
+      </div>
+      <div className="self-end flex-none w-24 h-16 mx-8 mb-1 animate-bounce">
+        <div className="space-y-2 rotate-180 max-sm:hidden">
+          <div className="w-2/4 h-4 rounded bg-gradient-to-tr from-yellow-400"></div>
+          <div className="h-4 rounded bg-gradient-to-l from-blue-400 via-red-300 to-green-400"></div>
+          <div className="w-5/6 h-4 rounded bg-gradient-to-tr from-indigo-400"></div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Navi
diff --git a/src/components/preloader/Preloader.tsx b/src/components/preloader/Preloader.tsx
@@ -0,0 +1,37 @@
+const Preloader = () => {
+  return (
+    <div id="preloader">
+      <svg
+        id="logo"
+        data-name="Layer 1"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 203.29 204.17"
+      >
+        <defs>
+          <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stopColor="#00bc9b" />
+            <stop offset="100%" stopColor="#5eaefd" />
+          </linearGradient>
+        </defs>
+        <path
+          className="st1"
+          stroke="url(#gradient)"
+          strokeWidth="2"
+          fill="none"
+          d="M190.42,253.13s1.76,24.46,36.1,24.55l34.34.1s71.44-2.21,70.73,69.92-1.08,79.37-1.08,79.37-2.84,30.61-37.56,30.22c.29-20.25,1.4-106.86,1.4-106.86s-18-10.17-36.65-10.95-38.09-12.13-41.09-15.13a22.3,22.3,0,0,0,8.59.39s-20.33-8-31-32c13.57,15.79,22.05,13.31,22.05,13.31s-26.14-15.74-25.8-32.32C190.66,261.77,190.42,253.13,190.42,253.13Z"
+          transform="translate(-190.41 -253.13)"
+        />
+        <path
+          stroke="url(#gradient)"
+          strokeWidth="2"
+          fill="none"
+          className="st0"
+          d="M332.24,300.61a95.75,95.75,0,0,1,5.31,34.69h28.18s22.3-1.66,28-27.88v-6.81Z"
+          transform="translate(-190.41 -253.13)"
+        />
+      </svg>
+    </div>
+  )
+}
+
+export default Preloader