diff --git a/HEMANG YADAV/README.md b/HEMANG YADAV/README.md new file mode 100644 index 00000000..9b1ef856 --- /dev/null +++ b/HEMANG YADAV/README.md @@ -0,0 +1,24 @@ +## PORTFOLIO V2 - [Website](https://zemerik.vercel.app) + +## ABOUT: + +This the second and latest version of my Portfolio created using HTML, CSS, Javascript, Typescript, React and Tailwind. + +## USAGE: + +- Feel Free to use my portfolio as a template for yours, however the **distribution of images and information is not allowed in any form.** +- Proper Credit must be given in either your website or your website's README.md + +### CLONING: + +- Use GIT to store the files of this Repository on your machine: + +``` +git clone https://github.com/Zemerik/Portfolio-v2 +``` + +### CUSTOMIZING: + +- The Favicon and title of the website can be changed in the [index.html](https://github.com/Zemerik/Portfolio-v2/blob/main/index.html) file, while the rest of the information can be changed in the [main.js](https://github.com/Zemerik/Portfolio-v2/blob/main/src/main.js) file. + +#### Thanks for visiting. Don't forget to leave a ⭐ diff --git a/HEMANG YADAV/index.html b/HEMANG YADAV/index.html new file mode 100644 index 00000000..a93826da --- /dev/null +++ b/HEMANG YADAV/index.html @@ -0,0 +1,17 @@ + + + + + + + + Hemang Yadav (Zemerik) + + +
+ + + diff --git a/HEMANG YADAV/src/App.css b/HEMANG YADAV/src/App.css new file mode 100644 index 00000000..e69de29b diff --git a/HEMANG YADAV/src/App.tsx b/HEMANG YADAV/src/App.tsx new file mode 100644 index 00000000..6a5f8475 --- /dev/null +++ b/HEMANG YADAV/src/App.tsx @@ -0,0 +1,28 @@ +import "./App.css"; +import { BrowserRouter, Routes, Route } from "react-router-dom"; +import Home from "./pages/Home"; +import ActiveSectionContextProvider from "./context/active-section-context"; +import ThemeContextProvider from "./context/theme-context"; +import LanguageContextProvider from "./context/language-context"; + +function App() { + return ( + <> + + + + + + }> + }> + }> + + + + + + + ); +} + +export default App; diff --git a/HEMANG YADAV/src/assets/fonts/font1.woff2 b/HEMANG YADAV/src/assets/fonts/font1.woff2 new file mode 100644 index 00000000..b69e0091 Binary files /dev/null and b/HEMANG YADAV/src/assets/fonts/font1.woff2 differ diff --git a/HEMANG YADAV/src/assets/fonts/font2.woff2 b/HEMANG YADAV/src/assets/fonts/font2.woff2 new file mode 100644 index 00000000..921e962b Binary files /dev/null and b/HEMANG YADAV/src/assets/fonts/font2.woff2 differ diff --git a/HEMANG YADAV/src/assets/fonts/font3.woff2 b/HEMANG YADAV/src/assets/fonts/font3.woff2 new file mode 100644 index 00000000..bf022fc7 Binary files /dev/null and b/HEMANG YADAV/src/assets/fonts/font3.woff2 differ diff --git a/HEMANG YADAV/src/assets/fonts/font4.woff2 b/HEMANG YADAV/src/assets/fonts/font4.woff2 new file mode 100644 index 00000000..f107b369 Binary files /dev/null and b/HEMANG YADAV/src/assets/fonts/font4.woff2 differ diff --git a/HEMANG YADAV/src/assets/icons/aboutmeicon.png b/HEMANG YADAV/src/assets/icons/aboutmeicon.png new file mode 100644 index 00000000..133c321f Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/aboutmeicon.png differ diff --git a/HEMANG YADAV/src/assets/icons/adobexdicon.svg b/HEMANG YADAV/src/assets/icons/adobexdicon.svg new file mode 100644 index 00000000..947899e4 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/adobexdicon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/HEMANG YADAV/src/assets/icons/apiicon.svg b/HEMANG YADAV/src/assets/icons/apiicon.svg new file mode 100644 index 00000000..7759b42f --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/apiicon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/HEMANG YADAV/src/assets/icons/asciiiicon.png b/HEMANG YADAV/src/assets/icons/asciiiicon.png new file mode 100644 index 00000000..036cab5e Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/asciiiicon.png differ diff --git a/HEMANG YADAV/src/assets/icons/axiosicon.svg b/HEMANG YADAV/src/assets/icons/axiosicon.svg new file mode 100644 index 00000000..10b255b9 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/axiosicon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/HEMANG YADAV/src/assets/icons/blogsicon.png b/HEMANG YADAV/src/assets/icons/blogsicon.png new file mode 100644 index 00000000..8e1ba61c Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/blogsicon.png differ diff --git a/HEMANG YADAV/src/assets/icons/boostrapicon.svg b/HEMANG YADAV/src/assets/icons/boostrapicon.svg new file mode 100644 index 00000000..8f07cfeb --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/boostrapicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/HEMANG YADAV/src/assets/icons/c++icon.png b/HEMANG YADAV/src/assets/icons/c++icon.png new file mode 100644 index 00000000..c3710396 Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/c++icon.png differ diff --git a/HEMANG YADAV/src/assets/icons/canvaicon.svg b/HEMANG YADAV/src/assets/icons/canvaicon.svg new file mode 100644 index 00000000..7ba93ec8 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/canvaicon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/HEMANG YADAV/src/assets/icons/car-icon.svg b/HEMANG YADAV/src/assets/icons/car-icon.svg new file mode 100644 index 00000000..b7b9af82 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/car-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/HEMANG YADAV/src/assets/icons/cdp.png b/HEMANG YADAV/src/assets/icons/cdp.png new file mode 100644 index 00000000..2479f297 Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/cdp.png differ diff --git a/HEMANG YADAV/src/assets/icons/cssicon.svg b/HEMANG YADAV/src/assets/icons/cssicon.svg new file mode 100644 index 00000000..64150dd8 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/cssicon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/HEMANG YADAV/src/assets/icons/discordapiicon.png b/HEMANG YADAV/src/assets/icons/discordapiicon.png new file mode 100644 index 00000000..5cca692d Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/discordapiicon.png differ diff --git a/HEMANG YADAV/src/assets/icons/discordjsicon.png b/HEMANG YADAV/src/assets/icons/discordjsicon.png new file mode 100644 index 00000000..e13415ad Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/discordjsicon.png differ diff --git a/HEMANG YADAV/src/assets/icons/expressicon.png b/HEMANG YADAV/src/assets/icons/expressicon.png new file mode 100644 index 00000000..b0441f5b Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/expressicon.png differ diff --git a/HEMANG YADAV/src/assets/icons/expressicon.svg b/HEMANG YADAV/src/assets/icons/expressicon.svg new file mode 100644 index 00000000..889e179f --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/expressicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/HEMANG YADAV/src/assets/icons/expressiconwhite.svg b/HEMANG YADAV/src/assets/icons/expressiconwhite.svg new file mode 100644 index 00000000..33df0042 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/expressiconwhite.svg @@ -0,0 +1,3 @@ + + + diff --git a/HEMANG YADAV/src/assets/icons/figmaicon.svg b/HEMANG YADAV/src/assets/icons/figmaicon.svg new file mode 100644 index 00000000..0ba1b748 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/figmaicon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/HEMANG YADAV/src/assets/icons/hardware-icon.svg b/HEMANG YADAV/src/assets/icons/hardware-icon.svg new file mode 100644 index 00000000..b6408714 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/hardware-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/HEMANG YADAV/src/assets/icons/hemang.jpeg b/HEMANG YADAV/src/assets/icons/hemang.jpeg new file mode 100644 index 00000000..89bd33f8 Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/hemang.jpeg differ diff --git a/HEMANG YADAV/src/assets/icons/hobbiesicon.png b/HEMANG YADAV/src/assets/icons/hobbiesicon.png new file mode 100644 index 00000000..b2f11842 Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/hobbiesicon.png differ diff --git a/HEMANG YADAV/src/assets/icons/htmlicon.svg b/HEMANG YADAV/src/assets/icons/htmlicon.svg new file mode 100644 index 00000000..215a8471 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/htmlicon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/HEMANG YADAV/src/assets/icons/javascripticon.svg b/HEMANG YADAV/src/assets/icons/javascripticon.svg new file mode 100644 index 00000000..620e17a5 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/javascripticon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/HEMANG YADAV/src/assets/icons/jsonicon.png b/HEMANG YADAV/src/assets/icons/jsonicon.png new file mode 100644 index 00000000..2d4ea213 Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/jsonicon.png differ diff --git a/HEMANG YADAV/src/assets/icons/jwticon.svg b/HEMANG YADAV/src/assets/icons/jwticon.svg new file mode 100644 index 00000000..82d6b841 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/jwticon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/HEMANG YADAV/src/assets/icons/medalicon.png b/HEMANG YADAV/src/assets/icons/medalicon.png new file mode 100644 index 00000000..fbfefd1c Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/medalicon.png differ diff --git a/HEMANG YADAV/src/assets/icons/mongoicon.svg b/HEMANG YADAV/src/assets/icons/mongoicon.svg new file mode 100644 index 00000000..365c2269 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/mongoicon.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/HEMANG YADAV/src/assets/icons/netlifyicon.svg b/HEMANG YADAV/src/assets/icons/netlifyicon.svg new file mode 100644 index 00000000..5c5eb714 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/netlifyicon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/HEMANG YADAV/src/assets/icons/nextjsicon.svg b/HEMANG YADAV/src/assets/icons/nextjsicon.svg new file mode 100644 index 00000000..3d8fb7d7 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/nextjsicon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/HEMANG YADAV/src/assets/icons/nextjsiconwhite.svg b/HEMANG YADAV/src/assets/icons/nextjsiconwhite.svg new file mode 100644 index 00000000..d391643d --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/nextjsiconwhite.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/HEMANG YADAV/src/assets/icons/nodejsicon.svg b/HEMANG YADAV/src/assets/icons/nodejsicon.svg new file mode 100644 index 00000000..39de2ddb --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/nodejsicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/HEMANG YADAV/src/assets/icons/notionapiicon.jpg b/HEMANG YADAV/src/assets/icons/notionapiicon.jpg new file mode 100644 index 00000000..52bc2f62 Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/notionapiicon.jpg differ diff --git a/HEMANG YADAV/src/assets/icons/portfoliotemplateicon.png b/HEMANG YADAV/src/assets/icons/portfoliotemplateicon.png new file mode 100644 index 00000000..3adcb00f Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/portfoliotemplateicon.png differ diff --git a/HEMANG YADAV/src/assets/icons/pythonicon.png b/HEMANG YADAV/src/assets/icons/pythonicon.png new file mode 100644 index 00000000..be15e9a0 Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/pythonicon.png differ diff --git a/HEMANG YADAV/src/assets/icons/reacticon.svg b/HEMANG YADAV/src/assets/icons/reacticon.svg new file mode 100644 index 00000000..04ec2f46 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/reacticon.svg @@ -0,0 +1,3 @@ + + + diff --git a/HEMANG YADAV/src/assets/icons/rendericon.svg b/HEMANG YADAV/src/assets/icons/rendericon.svg new file mode 100644 index 00000000..4cffb6b5 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/rendericon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/HEMANG YADAV/src/assets/icons/rubyicon.png b/HEMANG YADAV/src/assets/icons/rubyicon.png new file mode 100644 index 00000000..7bfe37f7 Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/rubyicon.png differ diff --git a/HEMANG YADAV/src/assets/icons/sassicon.svg b/HEMANG YADAV/src/assets/icons/sassicon.svg new file mode 100644 index 00000000..110dda08 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/sassicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/HEMANG YADAV/src/assets/icons/shopifyicon.svg b/HEMANG YADAV/src/assets/icons/shopifyicon.svg new file mode 100644 index 00000000..b0557cc6 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/shopifyicon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/HEMANG YADAV/src/assets/icons/slackapiicon.png b/HEMANG YADAV/src/assets/icons/slackapiicon.png new file mode 100644 index 00000000..ed315bfe Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/slackapiicon.png differ diff --git a/HEMANG YADAV/src/assets/icons/sportsstadium.jpeg b/HEMANG YADAV/src/assets/icons/sportsstadium.jpeg new file mode 100644 index 00000000..00c7ea0d Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/sportsstadium.jpeg differ diff --git a/HEMANG YADAV/src/assets/icons/spotifyicon.svg b/HEMANG YADAV/src/assets/icons/spotifyicon.svg new file mode 100644 index 00000000..58896494 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/spotifyicon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/HEMANG YADAV/src/assets/icons/tailwindicon.svg b/HEMANG YADAV/src/assets/icons/tailwindicon.svg new file mode 100644 index 00000000..8ccde2bb --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/tailwindicon.svg @@ -0,0 +1,3 @@ + + + diff --git a/HEMANG YADAV/src/assets/icons/travel-icon.svg b/HEMANG YADAV/src/assets/icons/travel-icon.svg new file mode 100644 index 00000000..404cc5e7 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/travel-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/HEMANG YADAV/src/assets/icons/trelloicon.svg b/HEMANG YADAV/src/assets/icons/trelloicon.svg new file mode 100644 index 00000000..972fbe88 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/trelloicon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/HEMANG YADAV/src/assets/icons/typescripticon.svg b/HEMANG YADAV/src/assets/icons/typescripticon.svg new file mode 100644 index 00000000..1c618c34 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/typescripticon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/HEMANG YADAV/src/assets/icons/vueicon.svg b/HEMANG YADAV/src/assets/icons/vueicon.svg new file mode 100644 index 00000000..92f2520c --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/vueicon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/HEMANG YADAV/src/assets/icons/webflowicon.svg b/HEMANG YADAV/src/assets/icons/webflowicon.svg new file mode 100644 index 00000000..5817d6e0 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/webflowicon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/HEMANG YADAV/src/assets/icons/wordpressicon.svg b/HEMANG YADAV/src/assets/icons/wordpressicon.svg new file mode 100644 index 00000000..25c6ab68 --- /dev/null +++ b/HEMANG YADAV/src/assets/icons/wordpressicon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/HEMANG YADAV/src/assets/icons/zemprofiles.png b/HEMANG YADAV/src/assets/icons/zemprofiles.png new file mode 100644 index 00000000..e7583b6c Binary files /dev/null and b/HEMANG YADAV/src/assets/icons/zemprofiles.png differ diff --git a/HEMANG YADAV/src/assets/img/Hemang2.jpg b/HEMANG YADAV/src/assets/img/Hemang2.jpg new file mode 100644 index 00000000..5e14c8f5 Binary files /dev/null and b/HEMANG YADAV/src/assets/img/Hemang2.jpg differ diff --git a/HEMANG YADAV/src/assets/img/Zemerik.png b/HEMANG YADAV/src/assets/img/Zemerik.png new file mode 100644 index 00000000..6edb6353 Binary files /dev/null and b/HEMANG YADAV/src/assets/img/Zemerik.png differ diff --git a/HEMANG YADAV/src/assets/img/bannerbg.webp b/HEMANG YADAV/src/assets/img/bannerbg.webp new file mode 100644 index 00000000..25104e87 Binary files /dev/null and b/HEMANG YADAV/src/assets/img/bannerbg.webp differ diff --git a/HEMANG YADAV/src/assets/img/instor_mockup.webp b/HEMANG YADAV/src/assets/img/instor_mockup.webp new file mode 100644 index 00000000..dae0da60 Binary files /dev/null and b/HEMANG YADAV/src/assets/img/instor_mockup.webp differ diff --git a/HEMANG YADAV/src/assets/img/mask.svg b/HEMANG YADAV/src/assets/img/mask.svg new file mode 100644 index 00000000..3e78820f --- /dev/null +++ b/HEMANG YADAV/src/assets/img/mask.svg @@ -0,0 +1,3 @@ + + + diff --git a/HEMANG YADAV/src/assets/img/me.webp b/HEMANG YADAV/src/assets/img/me.webp new file mode 100644 index 00000000..4b781e7d Binary files /dev/null and b/HEMANG YADAV/src/assets/img/me.webp differ diff --git a/HEMANG YADAV/src/assets/img/silentmoon_mockup.webp b/HEMANG YADAV/src/assets/img/silentmoon_mockup.webp new file mode 100644 index 00000000..e028d172 Binary files /dev/null and b/HEMANG YADAV/src/assets/img/silentmoon_mockup.webp differ diff --git a/HEMANG YADAV/src/assets/img/tasty_mockup.webp b/HEMANG YADAV/src/assets/img/tasty_mockup.webp new file mode 100644 index 00000000..9f534a30 Binary files /dev/null and b/HEMANG YADAV/src/assets/img/tasty_mockup.webp differ diff --git a/HEMANG YADAV/src/assets/lib/data.tsx b/HEMANG YADAV/src/assets/lib/data.tsx new file mode 100644 index 00000000..cfabea79 --- /dev/null +++ b/HEMANG YADAV/src/assets/lib/data.tsx @@ -0,0 +1,622 @@ +import htmlicon from "../../assets/icons/htmlicon.svg"; +import cssicon from "../../assets/icons/cssicon.svg"; +import javascripticon from "../../assets/icons/javascripticon.svg"; +import boostrapicon from "../../assets/icons/boostrapicon.svg" +import typescripticon from "../../assets/icons/typescripticon.svg"; +import reacticon from "../../assets/icons/reacticon.svg"; +import nextjsicon from "../../assets/icons/nextjsicon.svg"; +import nodejsicon from "../../assets/icons/nodejsicon.svg"; +import tailwindcssicon from "../../assets/icons/tailwindicon.svg"; +import mongodbicon from "../../assets/icons/mongoicon.svg"; +import vuejsicon from "../../assets/icons/vueicon.svg"; +import expressicon from "../../assets/icons/expressicon.svg"; +import axiosicon from "../../assets/icons/axiosicon.svg"; +import nextjsiconwhite from "../../assets/icons/nextjsiconwhite.svg"; +import expressiconwhite from "../../assets/icons/expressiconwhite.svg"; +import { GoHome, GoPerson, GoMail, GoStack, GoProject } from "react-icons/go"; +import { FiGithub, FiLink, FiLinkedin, FiMail } from "react-icons/fi"; +import Imprint from "../../components/Imprint"; +import Privacy from "../../components/Privacy"; +import sportsstadiumicon from "../../assets/icons/sportsstadium.jpeg"; +import discordapiicon from "../../assets/icons/discordapiicon.png"; +import notionapiicon from "../../assets/icons/notionapiicon.jpg" +import slackapiicon from "../../assets/icons/slackapiicon.png" +import cpulsicon from "../../assets/icons/c++icon.png" +import pythonicon from "../../assets/icons/pythonicon.png" +import rubyicon from "../../assets/icons/rubyicon.png" +import zemprofilesicon from "../../assets/icons/zemprofiles.png" +import discordjsicon from "../../assets/icons/discordjsicon.png" +import expressicon2 from "../../assets/icons/expressicon.png" +import jsonicon from "../../assets/icons/jsonicon.png" +import portfoliotemplateicon from "../../assets/icons/portfoliotemplateicon.png" +import medalicon from "../../assets/icons/medalicon.png" +import aboutmeicon from "../../assets/icons/aboutmeicon.png" +import hobbiesicon from "../../assets/icons/hobbiesicon.png" +import blogsicon from "../../assets/icons/blogsicon.png" +import hemangicon2 from "../../assets/img/Hemang2.jpg" +// import profilepicture from "../../assets/img/Zemerik.png" + + +export const headerIntroData = { + title: { + de: "Hi, ich bin Hemang", + en: "Hi, I'm Hemang", + }, + subtitle: "A Passionate Developer", + description: { + de: "", + en: "", + }, + buttons: [ + { + name: "Contact", + label: { + de: "Kontaktiere mich", + en: "Contact me", + }, + icon: FiMail, + color: "main-btn", + }, + { + name: "Projects", + label: { + de: "Meine Projekte", + en: "My Projects", + }, + icon: FiGithub, + color: "secondary-btn", + }, + ], + profilepicture: hemangicon2, +} as const; + +export const projectsData = [ + { + title: "Sports Stadium", + description: + "Ein Allzweck-NodeJS-Discord-Bot, der mit MongoDB und der Discord-API mit einem Boostrap-Dashboard erstellt wurde", + description_EN: + "An all purpose NodeJS Discord bot built using MongoDB and Discord's API with a boostrap dashboard", + technologies: [ + { name: "Html", icon: htmlicon }, + { name: "CSS", icon: cssicon }, + { name: "JavaScript", icon: javascripticon }, + { name: "Boostrap", icon: boostrapicon}, + { name: "MongoDB", icon: mongodbicon}, + { name: "Axios", icon: axiosicon}, + { name: "Discord.js", icon: discordjsicon}, + { name: "Express", icon: expressicon2}, + { name: "Node.js", icon: nodejsicon}, + { name: "React", icon: reacticon}, + { name: "JSON", icon: jsonicon} + ], + image: sportsstadiumicon, + deploymenturl: "https://zemerik.is-a.dev/Sports-Stadium", + githuburl: "https://github.com/Zemerik/Sports-Stadium", + githubicon: FiGithub, + deploymenticon: FiLink, + colors: { + main: "main-btn", + second: "secondary-btn", + icon: "white", + projectcolor: "#70B9BE", + }, + }, + { + title: "ZemProfiles", + description: + "Entdecken Sie Entwickler und treten Sie mit ihnen in Kontakt", + description_EN: + "Discover & Connect with Developers", + technologies: [ + { name: "JavaScript", icon: javascripticon }, + { name: "Typescript", icon: typescripticon}, + { name: "ReactJS", icon: reacticon}, + { name: "CSS", icon: cssicon}, + { name: "HTML", icon: htmlicon} + ], + image: zemprofilesicon, + deploymenturl: "https://zemprofiles.vercel.app", + githuburl: + "https://github.com/Zemerik/ZemProfiles", + githubicon: FiGithub, + deploymenticon: FiLink, + colors: { + main: "main-btn", + second: "secondary-btn", + icon: "white", + projectcolor: "#FFD5BD", + }, + }, + { + title: "Portfolio Template", + description: + "Die vorherige Version meines Portfolios wurde ausschließlich in HTML, CSS und Javascript erstellt", + description_EN: + "The previous version of my Portfolio made purely in HTML, CSS and Javascript", + technologies: [ + { name: "Html", icon: htmlicon }, + { name: "CSS", icon: cssicon }, + { name: "JavaScript", icon: javascripticon }, + ], + image: portfoliotemplateicon, + deploymenturl: "https://zemerik.is-a.dev/Portfolio-Template", + githuburl: "https://github.com/Zemerik/Portfolio-Template", + githubicon: FiGithub, + deploymenticon: FiLink, + colors: { + main: "main-btn", + second: "secondary-btn", + icon: "white", + projectcolor: "#E3964A", + }, + }, +] as const; + +export const liveTickerData = { + content: { + de: "Weitere Projekte auf Github", + en: "More Projects on Github", + }, +} as const; + +export const skillsDataWeb = [ + { + skillsTitle: "WebDevelopment", + skills: [ + { + title: "HTML", + hash: "#html", + icon: htmlicon, + color: "#F1662A", + }, + { + title: "CSS", + hash: "#CSS", + icon: cssicon, + color: "#1572B6", + }, + { + title: "JavaScript", + hash: "#JavaScript", + icon: javascripticon, + color: "#F7DF1E", + }, + { + title: "TypeScript", + hash: "#TypeScript", + icon: typescripticon, + color: "#007ACC", + }, + { + title: "React", + hash: "#React", + icon: reacticon, + color: "#61DAFB", + }, + { + title: "Next.js", + hash: "#Next.js", + icon: [nextjsicon, nextjsiconwhite], + color: ["#000000", "#FFFFFF"], + }, + { + title: "Node.js", + hash: "#Node.js", + icon: nodejsicon, + color: "#339933", + }, + { + title: "Tailwind", + hash: "#Tailwind", + icon: tailwindcssicon, + color: "#38B2AC", + }, + { + title: "MongoDB", + hash: "#MongoDB", + icon: mongodbicon, + color: "#449C45", + }, + { + title: "Vue.js", + hash: "#Vue.js", + icon: vuejsicon, + color: "#4FC08D", + }, + { + title: "Express", + hash: "#Express", + icon: [expressicon, expressiconwhite], + color: ["#000000", "#FFFFFF"], + }, + { + title: "Boostrap", + hash: "#Boostrap", + icon: boostrapicon, + color: "#CC6699", + }, + ], + }, +] as const; + +export const skillsDataDesign = [ + { + skillsTitle: "Backend", + skills: [ + { title: "C++", hash: "#C++", icon: cpulsicon, color: "#F24E1E" }, + { + title: "Ruby", + hash: "#Ruby", + icon: rubyicon, + color: "#FF61F6", + }, + { title: "Python", hash: "#Python", icon: pythonicon, color: "#00C4CC" }, + ], + }, +] as const; + +export const skillsDataCMS = [ + { + skillsTitle: "API", + skills: [ + { + title: "Discord API", + hash: "#Discord API", + icon: discordapiicon, + color: "#21759B", + }, + { + title: "Notion API", + hash: "#Notion API", + icon: notionapiicon, + color: "#7AB55C", + }, + { + title: "Slack API", + hash: "#Slack API", + icon: slackapiicon, + color: "#4353FF", + }, + ], + }, +] as const; + +export const navLinks = [ + { de: "Home", en: "Home", hash: "#home", icon: GoHome }, + { de: "Skills", en: "Skills", hash: "#skills", icon: GoStack }, + { de: "Projekte", en: "Projects", hash: "#projects", icon: GoProject }, + { de: "Über mich", en: "About me", hash: "#about-me", icon: GoPerson }, + { de: "Kontakt", en: "Contact", hash: "#contact", icon: GoMail }, +] as const; + +export const FooterLinks = [ + { de: "Impressum", en: "Imprint", hash: "#imprint", data: }, + { de: "Datenschutz", en: "Privacy", hash: "#privacy", data: }, +] as const; + +export const sideBarRightMail = { + link: "mailto:myemail@com", + text: "myemail@com", +} as const; + +export const sideBarLeftSocials = [ + { + link: "https://www.linkedin.com/in/zemerik/", + icon: FiLinkedin, + altimgname: "linkedin", + }, + { + link: "https://github.com/Zemerik", + icon: FiGithub, + altimgname: "github", + }, + { + link: "mailto:zemeriky@gmail.com", + icon: FiMail, + altimgname: "mail", + }, +] as const; + +export const quotesData = [ + { + de: '"Es ist überhaupt nicht wichtig, es beim ersten Mal richtig zu machen. Es ist entscheidend, es beim letzten Mal richtig zu machen."', + en: `#Building-in-Public`, + author: "", + }, + { + de: '"Das Web ist wie eine Leinwand und der Code ist die Farbe. Erschaffe dein Meisterwerk."', + en: `"The web is like a canvas, and code is the paint. Create your masterpiece."`, + }, +] as const; + +export const aboutMeData = { + title: "Über mich", + title_EN: "About me", + description: "Ein paar Codeschnippsel über mich", + description_EN: "A few code snippets about me", + paragraphs_DE: [ + { + title: "Über mich", + description: + "Als 14-jähriger Gymnasiast treibt mich die unerschütterliche Leidenschaft an, eine Karriere als Front-End-Softwareentwickler anzustreben.", + icon: aboutmeicon, + }, + { + title: "Hobbys", + description: + "Neben dem Programmieren schaue ich gerne Cricket und setze meine 3D-Fantasie mithilfe der Unreal Engine in die Realität um.", + icon: hobbiesicon, + }, + { + title: "200 Follower auf X (Twitter)", + description: + "Es ist ein bedeutender Meilenstein für mich und ich bin allen dankbar, die mich unterstützt und mitgemacht haben.", + icon: medalicon, + }, + { + title: "Blogs", + description: + "Ich schreibe häufig Blogs auf dev.to und hashnode und teile meine Gedanken und Erfahrungen mit meinen Lesern. Durch das Erstellen von Inhalten kann ich mich kreativ ausdrücken und mit einem breiteren Publikum interagieren.", + icon : blogsicon, + } + ], + paragraphs_EN: [ + { + title: "About Me", + description: + "As a 14-year-old high school student, I am driven by an unwavering passion for pursuing a career as a front-end software developer.", + icon: aboutmeicon, + }, + { + title: "Hobbies", + description: + "Besides coding, I enjoy watching cricket and bringing my 3D Imagination to reality using Unreal Engine.", + icon: hobbiesicon, + }, + { + title: "200 Followers on X (Twitter)", + description: + "It's a significant milestone for me, and I'm grateful for everyone who has supported and followed along.", + icon: medalicon, + }, + { + title: "Blogs", + description: + "I frequently write blogs on dev.to and Hashnode, sharing my thoughts and experiences with my readers. Crafting content allows me to express myself creatively and engage with a wider audience.", + icon : blogsicon, + } + ], +}; + +export const contactData = { + title: { + de: "Kontakt", + en: "Contact", + }, + description: { + de: "Schreib mir eine Nachricht und ich melde mich bei dir.", + en: "Write me a message and I will get back to you.", + }, + inputfields: [ + { + name: "name", + placeholder: { + de: "Dein Name", + en: "Your Name", + }, + type: "text", + validation: { + de: "Bitte gebe deinen Namen ein", + en: "Please fill in your name", + }, + pattern: "{2}", + }, + { + name: "email", + placeholder: { + de: "Deine E-Mail Adresse", + en: "Your E-Mail", + }, + type: "email", + validation: { + de: "Bitte gebe deine Email ein", + en: "Please fill in your email", + }, + pattern: "[@]{4}", + }, + { + name: "subject", + placeholder: { + de: "Deine Betreff", + en: "Your Subject", + }, + type: "text", + validation: { + de: "Bitte gebe einen Betreff ein", + en: "Please fill in your subject", + }, + pattern: "{10}", + }, + ], + textarea: { + placeholder: { + de: "Deine Nachricht", + en: "Your Message", + }, + name: "message", + rows: 10, + validation: { + de: "Bitte gebe deine Nachricht ein", + en: "Please fill in your message", + }, + pattern: "{10}", + }, + button: { + value: { + de: "Absenden", + en: "Send", + }, + }, + icon: FiMail, + iconcolor: "#FFFFFF", + colors: { + main: "main-btn", + second: "secondary-btn", + icon: "white", + }, + privacyOptIn: { + checkbox: { + de: "Ich stimme zu, dass Zemerik meine personenbezogenen Daten (Name und E-Mail-Adresse) verwenden darf, um mit mir Kontakt aufzunehmen.", + en: "I agree that Zemerik may use my personal data (name and e-mail address) to contact me.", + }, + description: { + de: "Durch Übermittlung dieser Anfrage bestätigen Sie, dass Sie die Datenschutzerklärung gelesen haben", + en: "By submitting this request, you acknowledge that you have read the Private Policy", + }, + }, +} as const; + +export const toastMessages = { + loadingProject: { + de: "🦄 Die Live Demo wird gleich geöffnet. Server werden gestartet...", + en: "🦄 The live demo will open shortly. Starting servers...", + }, + successEmailSent: { + de: "🦄 Vielen Dank für deine Email. Ich werde mich schnellstmöglich bei dir melden", + en: "🦄 Thank you for your email. I will get back to you as soon as possible", + }, + failedEmailSent: { + de: "🦄 Leider hat der Versand deiner Email nicht geklappt. Bitte versuche es später noch einmal", + en: "🦄 Unfortunately the sending of your email did not work. Please try again later or email on zemerkikY@gmail.com", + }, + failedValidationName: { + de: "Bitte gebe deinen Namen ein", + en: "Please fill in your name", + }, +} as const; + +export const buttonLabels = { + language: { + de: "DE", + en: "EN", + }, +} as const; + +export const directionStyles: Record = { + "outer-right-to-inner-left": { + marginRight: "4rem", + }, + "outer-left-to-inner-right": { + marginLeft: "4rem", + transform: "scaleX(-1)", + }, + "inner-right-to-middle": { + width: "100%", + transform: "scaleY(1)", + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "center", + }, + "inner-left-to-middle": { + width: "100%", + transform: "scaleX(-1)", + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "center", + overflow: "hidden", + }, + "middle-to-inner-right": { + width: "100%", + transform: "scale(1,-1)", + }, + "middle-to-inner-left": { + width: "100%", + transform: "scale(-1,-1)", + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "center", + }, + middle: { + width: "100%", + transform: "scaleX(-1)", + display: "flex", + flexDirection: "column", + alignItems: "center", + }, +}; + +export const heightStyles: Record = { + small: { + heights: ["25rem", "15rem"], + }, + middle: { + heights: ["35rem", "25rem"], + }, + large: { + heights: ["45rem", "35rem"], + }, + extraLarge: { + heights: ["55rem", "45rem"], + }, +}; + +export const spaceStyles: Record = { + "outer-right-to-inner-left": { + marginTop: "-6rem", + width: "100%", + }, + "outer-left-to-inner-right": { + marginTop: "-6rem", + width: "100%", + }, + "inner-right-to-middle": { + marginTop: "-20rem", + width: "50%", + zIndex: "-10", + }, + "inner-left-to-middle": { + marginTop: "-10rem", + width: "50%", + zIndex: "-10", + }, + "middle-to-inner-right": { + width: "75%", + }, + "middle-to-inner-left": { + marginTop: "-2.5rem", + width: "50%", + }, + middle: { + marginTop: "-2.5rem", + width: "0%", + display: "none", + }, +}; + +export const widthStyles: Record = { + "outer-right-to-inner-left": { + widths: ["74.45%", "74.45%"], + }, + "outer-left-to-inner-right": { + widths: ["75%", "75%"], + }, + "inner-right-to-middle": { + widths: ["50.1%", "49%"], + }, + "inner-left-to-middle": { + widths: ["50.1%", "49%"], + }, + "middle-to-inner-right": { + widths: ["33.4%", "50.03%"], + }, + "middle-to-inner-left": { + widths: ["50.1%", "49%"], + }, + middle: { + widths: ["0%", "0%"], + }, +}; diff --git a/HEMANG YADAV/src/assets/lib/hooks.tsx b/HEMANG YADAV/src/assets/lib/hooks.tsx new file mode 100644 index 00000000..dd3a6029 --- /dev/null +++ b/HEMANG YADAV/src/assets/lib/hooks.tsx @@ -0,0 +1,38 @@ +import { useActiveSectionContext } from "../../context/active-section-context"; +import { useEffect, useState } from "react"; +import { useInView } from "react-intersection-observer"; +import type { SectionName } from "./types"; + +export function useSectionInView(sectionName: SectionName, threshold = 0.75) { + const isMobile = window.innerWidth <= 1024; + const { ref, inView } = useInView({ + threshold: isMobile ? 0.1 : threshold, + }); + const { setActiveSection, timeOfLastClick } = useActiveSectionContext(); + + useEffect(() => { + if (inView && Date.now() - timeOfLastClick > 1000) { + setActiveSection(sectionName); + } + }, [inView, setActiveSection, timeOfLastClick, sectionName]); + + return { + ref, + }; +} + +export function useMousePosition() { + const [mousePosition, setMousePosition] = useState({ x: null, y: null }); + + const updateMousePosition = (e: any) => { + setMousePosition({ x: e.clientX, y: e.clientY }); + }; + + useEffect(() => { + window.addEventListener("mousemove", updateMousePosition); + + return () => window.removeEventListener("mousemove", updateMousePosition); + }, []); + + return mousePosition; +} diff --git a/HEMANG YADAV/src/assets/lib/types.tsx b/HEMANG YADAV/src/assets/lib/types.tsx new file mode 100644 index 00000000..fcb364d5 --- /dev/null +++ b/HEMANG YADAV/src/assets/lib/types.tsx @@ -0,0 +1,3 @@ +import { navLinks } from "./data"; + +export type SectionName = (typeof navLinks)[number]["en"]; diff --git a/HEMANG YADAV/src/components/AboutMe.tsx b/HEMANG YADAV/src/components/AboutMe.tsx new file mode 100644 index 00000000..9fe67bf9 --- /dev/null +++ b/HEMANG YADAV/src/components/AboutMe.tsx @@ -0,0 +1,137 @@ +import React, { useRef } from "react"; +import me from "../assets/img/me.webp"; +import { aboutMeData } from "../assets/lib/data"; +import { Autoplay, Pagination, Navigation } from "swiper/modules"; +import { Swiper, SwiperSlide } from "swiper/react"; +import { motion, useScroll, useTransform } from "framer-motion"; +import "swiper/css"; +import "swiper/css/pagination"; +import "swiper/css/navigation"; +import { useSectionInView } from "../assets/lib/hooks"; +import { useLanguage } from "../context/language-context"; + +const AboutMe: React.FC = () => { + const progressCircle = useRef(null); + const progressContent = useRef(null); + const { ref } = useSectionInView("About me"); + const { language } = useLanguage(); + const animationReference = useRef(null); + const { scrollYProgress } = useScroll({ + target: animationReference, + offset: ["0 1", "1.33 1"], + }); + const scaleProgess = useTransform(scrollYProgress, [0, 1], [0.8, 1]); + const opacityProgess = useTransform(scrollYProgress, [0, 1], [0.6, 1]); + const onAutoplayTimeLeft = (_s: any, time: number, progress: number) => { + if (progressCircle.current && progressContent.current) { + progressCircle.current.style.setProperty( + "--progress", + String(1 - progress) + ); + progressContent.current.textContent = `${Math.ceil(time / 1000)}s`; + } + }; + const paragraphs = + language === "DE" ? aboutMeData.paragraphs_DE : aboutMeData.paragraphs_EN; + + return ( + +
+
+ +

+ < + {language === "DE" ? aboutMeData.title : aboutMeData.title_EN} + /> +

+ +

+ {language === "DE" + ? aboutMeData.description + : aboutMeData.description_EN} +

+
+
+
+
+ {me} +
+ + {paragraphs.map((paragraph, index) => ( + +
+
+ {paragraph.icon} +
+
+

{paragraph.title}

+
+
+
+
+

+ <h3 + /> +

+
+
+
+
+
+

+ <h3 + /> +

+
+
+

+ {paragraph.description} +

+
+
+
+ ))} +
+ + + + +
+
+
+
+
+ ); +}; + +export default AboutMe; diff --git a/HEMANG YADAV/src/components/BannerQuote.tsx b/HEMANG YADAV/src/components/BannerQuote.tsx new file mode 100644 index 00000000..dbf629ee --- /dev/null +++ b/HEMANG YADAV/src/components/BannerQuote.tsx @@ -0,0 +1,62 @@ +import React from "react"; + +import bannerBg from "../assets/img/bannerbg.webp"; +import { quotesData } from "../assets/lib/data"; +import { useLanguage } from "../context/language-context"; +import { useQuoteAnimation } from "../hooks/useQuoteAnimation"; + +interface BannerProps { + style: "withBG" | "noBG"; + quoteIndex: number; + containerType: string; +} + +const BannerQuote: React.FC = ({ + style, + quoteIndex, + containerType, +}) => { + const { language } = useLanguage(); + + const quoteTranslation = + language === "DE" ? quotesData[quoteIndex].de : quotesData[quoteIndex].en; + + useQuoteAnimation(`.${containerType}-container h2`); + + return style === "withBG" ? ( + +
+
+
+

+ {quoteTranslation} +

+

{quotesData[0].author}

+
+
+
+
+ ) : ( + +
+
+
+

+ {quoteTranslation} +

+
+
+
+
+ ); +}; + +export default BannerQuote; diff --git a/HEMANG YADAV/src/components/Button.tsx b/HEMANG YADAV/src/components/Button.tsx new file mode 100644 index 00000000..3e533574 --- /dev/null +++ b/HEMANG YADAV/src/components/Button.tsx @@ -0,0 +1,58 @@ +import React from "react"; +import { Link } from "react-router-dom"; + +interface ButtonProps { + onClick?: () => void; + label?: string; + value?: string; + className?: string; + link?: string; + iconcolor?: string; + iconSVG?: React.FC<{ className: string }>; + buttoncolor?: string; + buttonhovercolor?: string; + type?: "button" | "submit" | "reset"; + elementType?: "input" | "button"; +} + +const Button: React.FC = ({ + onClick, + label, + link, + value, + iconSVG: IconSVGComponent, + buttoncolor, + buttonhovercolor, + type, + elementType, +}) => { + const commonProps = { + onClick, + type, + className: `text-white drop-shadow-2xl border-none py-4 px-8 rounded-lg text-[1.6rem] transition-all duration-200 flex flex-row gap-4 justify-center items-center cursor-pointer ${buttoncolor} ${buttonhovercolor} max-lg:text-3xl max-lg:py-8 max-lg:px-16 max-lg:rounded-xl + shadow-xl hover:scale-100 hover:-translate-y-2 hover:drop-shadow-xl transition-all duration-200 w-max`, + }; + + if (elementType === "input") { + return ; + } else { + return ( + + + + ); + } +}; + +export default Button; diff --git a/HEMANG YADAV/src/components/Contact.tsx b/HEMANG YADAV/src/components/Contact.tsx new file mode 100644 index 00000000..6911b635 --- /dev/null +++ b/HEMANG YADAV/src/components/Contact.tsx @@ -0,0 +1,345 @@ +import React, { useState, useEffect, useRef } from "react"; +import Button from "./Button"; +import axios from "axios"; +import { Highlight, themes } from "prism-react-renderer"; +import { contactData, toastMessages } from "../assets/lib/data.tsx"; +import { useSectionInView } from "../assets/lib/hooks"; +import { useLanguage } from "../context/language-context"; +import { ToastContainer, toast } from "react-toastify"; +import { useTheme } from "../context/theme-context"; +import { motion, useScroll, useTransform } from "framer-motion"; +import "react-toastify/dist/ReactToastify.css"; + +const Contact: React.FC = () => { + const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || ""; + + const [name, setName] = useState(""); + const [email, setEmail] = useState(""); + const [subject, setSubject] = useState(""); + const [message, setMessage] = useState(""); + const [cursor, setCursor] = useState(""); + const [lastUpdatedField, setLastUpdatedField] = useState(null); + const { ref } = useSectionInView("Contact"); + const { language } = useLanguage(); + const { theme } = useTheme(); + const [error, setError] = useState(null); + + const animationReference = useRef(null); + const { scrollYProgress } = useScroll({ + target: animationReference, + offset: ["0 1", "1.33 1"], + }); + const scaleProgess = useTransform(scrollYProgress, [0, 1], [0.8, 1]); + const opacityProgess = useTransform(scrollYProgress, [0, 1], [0.6, 1]); + + const notifySentForm: React.FormEventHandler = async (e) => { + setError(null); + console.log(error); + + e.preventDefault(); + const data = new FormData(e.currentTarget); + + try { + const response = await axios.post(apiBaseUrl, data); + console.log(response); + if (language === "DE") { + toast.success(toastMessages.successEmailSent.de); + } else { + toast.success(toastMessages.successEmailSent.en); + } + } catch (error) { + console.log(error); + if (language === "DE") { + toast.error(toastMessages.failedEmailSent.de); + } else { + toast.error(toastMessages.failedEmailSent.en); + } + setError("An Error occured, try again later"); + } + }; + + const handleInputFocus = (fieldName: string) => { + setCursor(`${fieldName}${cursor}`); + }; + + const wordWrap = ( + text: string, + maxLineLength: number, + indentation: string + ) => { + const words = text.split(" "); + let lines: string[] = []; + let currentLine = ""; + + words.forEach((word) => { + if (currentLine.length + word.length <= maxLineLength) { + currentLine += word + " "; + } else { + lines.push(currentLine.trim()); + currentLine = `${indentation}${word} `; + } + }); + + if (currentLine) { + lines.push(currentLine.trim()); + } + + return lines.join("\n"); + }; + + const handleInputChange = ( + e: + | React.ChangeEvent + | React.ChangeEvent + ) => { + const { name, value } = e.target; + + if (name === "name") { + setName(value); + } else if (name === "email") { + setEmail(value); + } else if (name === "subject") { + setSubject(value); + } else if (name === "message") { + setMessage(value); + } + + setLastUpdatedField(name); + }; + + const [cursorBlink, setCursorBlink] = useState(true); + + useEffect(() => { + const blinkInterval = setInterval(() => { + setCursorBlink((prev) => !prev); + }, 400); + + return () => { + clearInterval(blinkInterval); + }; + }, []); + + const codeSnippet = ` +import { useState } from "react"; + +// 🌈 Spreading Stardust: +// Crafting Cosmic Email 🌌 + +const [sender, setSender] = "${name}${ + lastUpdatedField === "name" ? (cursorBlink ? "|" : " ") : "" + }🚀"; +const [recipient, setRecipient] = "${email}${ + lastUpdatedField === "email" ? (cursorBlink ? "|" : " ") : "" + }📧"; +const [subject, setSubject] = \n"${subject}${ + lastUpdatedField === "subject" ? (cursorBlink ? "|" : " ") : "" + }✨"; +const [message, setMessage] = +\`Hello, intrepid traveler! 👋\n +Across the cosmos, a message for you:\n +"${wordWrap(message, 40, " ")}${ + lastUpdatedField === "message" ? (cursorBlink ? "|" : " ") : "" + }"\n +Wishing you stardust dreams,\n +${name}${lastUpdatedField === "name" ? (cursorBlink ? "|" : " ") : ""} +\``; + + // const codeSnippet2 = ` + // // 🚀 Initiating Quantum Email Transmission 🪐 + // const launchEmail = async () => { + // try { + // const response = await fetch('https://alpaycelik.dev/send',{ + // method: 'POST', + // headers: {'Content-Type': 'application/json'}, + // body: JSON.stringify({ + // sender, + // recipient, + // subject, + // message + // }) + // }); + + // if (response.ok) { + // console.log('🌌 Transmission successful!'); + // } else { + // console.error('🌠 Cosmic glitch encountered...'); + // } + // } catch (error) { + // console.error('🌪 Quantum disturbance detected:', error); + // } + // }; + // // 🚀 Ready for Liftoff? 🛸 + // launchEmail();`; + + return ( + +
+
+ +

+ < + {language === "DE" ? contactData.title.de : contactData.title.en} + /> +

+ +

+ {language === "DE" + ? contactData.description.de + : contactData.description.en} +

+
+
+
+
+ + {({ className, style, tokens, getLineProps, getTokenProps }) => ( +
+                  {tokens.map((line, i) => (
+                    
+ {line.map((token, key) => ( + + ))} +
+ ))} +
+ )} +
+
+
+ {contactData.inputfields.map((input, index) => ( + { + handleInputFocus(input.name); + setLastUpdatedField(input.name); + }} + onMouseEnter={() => { + handleInputFocus(input.name); + setLastUpdatedField(input.name); + }} + onChange={handleInputChange} + className={`${ + theme === "dark" + ? "bg-[--blackblue] dark-mode-shadow " + : "bg-[--icewhite] dark-shadow " + }`} + /> + ))} +