contact bölümü tamamlandı

mucahitdev · Mar 10, 2022 · dbb8abe · dbb8abe
1 parent a66f588
commit dbb8abe
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 35 deletions.
diff --git a/blog/package-lock.json b/blog/package-lock.json
diff --git a/blog/package.json b/blog/package.json
@@ -8,10 +8,12 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "react-intl": "^5.24.6",
     "react-router": "^6.2.1",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
+    "react-vertical-timeline-component": "^3.5.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/blog/public/index.html b/blog/public/index.html
@@ -12,6 +12,7 @@
     <link rel="apple-touch-icon" href="mkLogo.png" />
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&display=swap" rel="stylesheet">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

diff --git a/blog/src/App.css b/blog/src/App.css
@@ -25,7 +25,6 @@
   background-color: rgba(141, 141, 141, 0.234);
   border-radius: 20px;
 }
-
 .noDark {
   isolation: isolate;
 }
@@ -35,4 +34,18 @@
   top: 5px;
   right: 15px;
   font-size: 30px;
-}
+}
+
+
+.contact a {
+  color: #000000;
+  text-decoration: none;
+  font-size: 5vh;
+}
+
+.contact a:hover, a:focus {
+  color: #00000034;
+}
+
+.contact  {
+  list-style-type: none;}
diff --git a/blog/src/component/Contact.jsx b/blog/src/component/Contact.jsx
@@ -1,8 +1,22 @@
-import React from 'react'
+import React from 'react';
+import { useData } from "../Context/DataContext";
+import { IntlProvider, FormattedMessage } from "react-intl";
+import { contact } from "./lang/Langs";
 
 function Contact() {
+  const { data} = useData();
   return (
-    <div>Contact</div>
+    <div>
+      <IntlProvider locale={data} messages={contact[data]}> 
+      <h2><FormattedMessage id="reachMe"/></h2>
+      <ul className='d-flex contact'>
+        <li className='me-4 fs-1'><a href="https://github.com/mucahitkok" target="_blank" rel="noopener noreferrer"><i class="fa fa-github"></i></a></li>
+        <li className='me-4 fs-1'><a href="https://www.instagram.com/mucahitkok/" target="_blank" rel="noopener noreferrer"><i class="fa fa-instagram"></i></a></li>
+        <li className='me-4 fs-1'><a href="https://twitter.com/muccorn" target="_blank" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a></li>
+        <li className='me-4 fs-1'><a href="https://www.linkedin.com/in/mucahitkok/" target="_blank" rel="noopener noreferrer"><i class="fa fa-linkedin"></i></a></li>
+      </ul>
+      </IntlProvider>
+    </div>
   )
 }
 

diff --git a/blog/src/component/lang/Langs.js b/blog/src/component/lang/Langs.js
@@ -1,31 +1,40 @@
-export  const nav = {
-    "tr-TR" : {
-      home : "Ana Sayfa",
-      about : "Hakkımda",
-      projects : "Projeler",
-      contact : "İletişim"
-    },
-    "en-US" : {
-      home : "Home",
-      about : "About",
-      projects : "Projects",
-      contact : "Contact"
-    }
+export const nav = {
+  "tr-TR": {
+    home: "Ana Sayfa",
+    about: "Hakkımda",
+    projects: "Projeler",
+    contact: "İletişim"
+  },
+  "en-US": {
+    home: "Home",
+    about: "About",
+    projects: "Projects",
+    contact: "Contact"
   }
+}
 
-export  const home = {
-    "tr-TR" : {
-        hii : "Merhaba, Ben Mücahit KÖKDEMİR",
-        bio : "Türkiye'den tutkulu Jr. Frontend Developer ",
-        learning : "Şuan React.js öğreniyorum",
-        askMe : "Bana html,css,js,react,vue hakkında soru sorabilirsin.",
-        reachMe : "Bana Mail yoluyla ulaşabilirsiniz"
-    },
-    "en-US" : {
-        hii : "Hi, I'm Mucahit KOKDEMIR",
-        bio : "A passionate Jr. frontend developer from Turkey",
-        learning : " I’m currently learning React.js",
-        askMe : "Ask me about html,css,js,react,vue",
-        reachMe : "You can reach me via Mail"
-    }
-  }
+export const home = {
+  "tr-TR": {
+    hii: "Merhaba, Ben Mücahit KÖKDEMİR",
+    bio: "Türkiye'den tutkulu Jr. Frontend Developer ",
+    learning: "Şuan React.js öğreniyorum",
+    askMe: "Bana html,css,js,react,vue hakkında soru sorabilirsin.",
+    reachMe: "Bana Mail yoluyla ulaşabilirsiniz"
+  },
+  "en-US": {
+    hii: "Hi, I'm Mucahit KOKDEMIR",
+    bio: "A passionate Jr. frontend developer from Turkey",
+    learning: " I’m currently learning React.js",
+    askMe: "Ask me about html,css,js,react,vue",
+    reachMe: "You can reach me via Mail"
+  }
+}
+
+export const contact = {
+  "tr-TR": {
+    reachMe: "Bana ulaş"
+  },
+  "en-US": {
+    reachMe: "Reach me"
+  }
+}