diff --git a/src/components/FifthSection.scss b/src/components/FifthSection.scss index f17263e..d0c61c7 100644 --- a/src/components/FifthSection.scss +++ b/src/components/FifthSection.scss @@ -5,10 +5,10 @@ --blood-red: #{$blood-red}; } .fifth-title { - color: #f51940; + color: white; padding-top: 6rem; font-weight: bold; - font-size: 2.2rem; + font-size: 3rem; } .pagination-container { justify-content: center; diff --git a/src/components/FifthSection.tsx b/src/components/FifthSection.tsx index abb2e3c..6bfecac 100644 --- a/src/components/FifthSection.tsx +++ b/src/components/FifthSection.tsx @@ -4,87 +4,63 @@ const gridImage = [ { id: 1, text: "Top Talent 2024", - review: `This shirt is so soft and comfortable. - I was a bit worried about the size running small, but I normally wear a medium and it fits great.`, value: require("../res/top2024.png"), }, { id: 2, text: "Top Talent 2023", - review: - "This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.", value: require("../res/top2023.png"), }, { id: 3, text: "Bravo - Individual Awards", - review: - "This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.", value: require("../res/bravo.png"), }, { id: 4, text: "GenAI Foundation - GenAI Assisted Coding using Amazon CdeWhisperer on FY 2023", - review: - "This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.", value: require("../res/genai.png"), }, { id: 5, text: "Interviewers Certification Workshop", - review: - "This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.", value: require("../res/interview.png"), }, { id: 6, text: "React Native - The Practical Guide", - review: - "This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.", value: require("../res/rn2024.png"), }, { id: 7, text: "Master CI/CD for React Native", - review: - "This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.", value: require("../res/ci-cd.png"), }, { id: 8, text: "Fastlane for React Native: Deploy your app autonomously!", - review: - "This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.", value: require("../res/fastlane.png"), }, { id: 9, text: "The Git & Github Bootcamp", - review: - "This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.", value: require("../res/github-bootcamp.png"), }, { id: 10, text: "The Complete React Native + Hooks Course", - review: - "This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.", value: require("../res/hook.png"), }, { id: 11, text: "Android Studio Masterclass Conquer the Android IDE", - review: - "This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.", value: require("../res/android-certificate.png"), }, { id: 12, text: "Android Unit Testing and Test Driven Development", - review: - "This shirt is so soft and comfortable. I was a bit worried about the size running small, but I normally wear a medium and it fits great.", value: require("../res/unit-testing.png"), }, ]; @@ -95,7 +71,7 @@ export default function FifthSection() { return (

Achievements

diff --git a/src/components/FirstSection.scss b/src/components/FirstSection.scss index 1743d1a..edbfc06 100644 --- a/src/components/FirstSection.scss +++ b/src/components/FirstSection.scss @@ -6,396 +6,411 @@ /* Small devices (portrait tablets and large phones, 600px and up) */ /* Mobile Devices */ @media (min-width: 360px) and (max-width: 600px) { - .header-container { - justify-content: center; + .background { + background-color: #000; + } + + .nav-container { padding: 1rem; display: flex; - } - .menu-container { - flex: 1; - margin-inline: 4rem; - align-items: center; - display: none; + z-index: 1; + width: 100%; + right: 0; + background-color: #000; + margin-right: 2rem; justify-content: flex-end; - } - .company-container { - justify-content: center; - align-items: center; - display: flex; - } - .company-logo { - background-position: cover; - background-size: contain; - background-repeat: no-repeat; - background-image: url("https://www.seekpng.com/png/full/913-9131600_mfs-logo-white-accor-hotels-white-logo.png"); - margin: 1rem; - width: 3rem; - height: 3rem; - } - .company-name { - font-weight: bold; - color: var(--white); - font-size: 2rem; + position: fixed; } - .home { - padding-inline: 1rem; - border-radius: 5px; - border-width: 1.5px; - border-color: var(--white); - border-style: solid; - } - .menu-text { + .nav-text { padding: 0px 1rem 0px 1rem; text-align: center; color: var(--white); font-size: 0.8rem; } - .background-image { - background-position: center; - background-repeat: no-repeat; - background-size: cover; - background-attachment: fixed; - background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.1), #000), - url(../res/background1.png); - width: 100%; - height: 56rem; + .home-container { + display: flex; + flex-direction: row; + height: 42rem; + justify-content: space-around; + align-items: center; } - .center-container { + .name-container { display: flex; - margin-top: 3rem; flex-direction: column; - align-items: center; - justify-content: center; } - .center-logo { - background-size: cover; - border-radius: 50%; - background-repeat: no-repeat; - background-image: url(../res/background3.png); - width: 20rem; - height: 20rem; + .my-photo { + margin-top: -3rem; + height: 30rem; } - .name-text { + + .hi-text { font-weight: bold; color: var(--white); font-size: 3rem; - margin-top: 3rem; + align-self: start; } - .subtitle-text { - color: var(--white); - font-size: 1.5rem; - font-weight: 400; - margin-top: -1rem; - } - .contact-container { - margin-top: 2rem; - padding-inline: 1rem; - border-radius: 5px; + + .name-text { + font-weight: bold; + color: #ff004f; + font-size: 3rem; + } + .sub-text { + font-weight: bold; + color: #ff004f; + font-size: 2rem; + align-self: start; + } + + @keyframes wave { + 0% { + transform: rotate(0deg); + } + 15% { + transform: rotate(14deg); + } + 30% { + transform: rotate(-8deg); + } + 40% { + transform: rotate(14deg); + } + 50% { + transform: rotate(-4deg); + } + 60% { + transform: rotate(10deg); + } + 70% { + transform: rotate(0deg); + } + 100% { + transform: rotate(0deg); + } + } + + .wave-emoji { + display: inline-block; + animation: wave 2s infinite; + } + + .social-section { + display: flex; + width: 60%; + justify-content: space-around; + } + .circle { + width: 32px; /* Set the desired width */ + height: 32px; /* Set the desired height */ + border-radius: 50%; /* Make the div a circle */ + display: flex; + align-items: center; + justify-content: center; border-width: 1.5px; border-color: var(--white); border-style: solid; } - .contact-text { - padding: 0.2rem 0.2rem 0.2rem 0.2rem; - text-align: center; - color: var(--white); - font-weight: 500; - font-size: 0.9rem; - } - .about-me { - padding-inline: 0.5rem; + .img { + width: 20px; + height: 20px; + background-size: contain; } } /* Medium devices (landscape tablets, 768px and up) */ /* Tablets iPads (Portrait) */ @media (min-width: 600px) and (max-width: 1024px) { - .company-name { - font-weight: bold; - color: var(--white); - font-size: 2rem; + .background { + background-color: #000; } - .header-container { + + .nav-container { padding: 1rem; - display: block; - } - .menu-container { - flex: 1; - margin-inline: 15rem; - align-items: center; - display: block; - justify-content: flex-end; - } - .company-logo { - background-position: cover; - background-size: contain; - background-repeat: no-repeat; - //background-image: url(../res/my-photo.png); - margin: 1rem; - width: 4rem; - height: 4rem; - } - .company-container { - justify-content: center; - align-items: center; display: flex; + z-index: 1; + width: 100%; + right: 0; + background-color: #000; + margin-right: 2rem; + justify-content: flex-end; + position: fixed; } - .home { - border-radius: 5px; - border-width: 1.5px; - border-color: var(--white); - border-style: solid; - } - .about-me { - padding-inline: 0.7rem; - } - .menu-text { + + .nav-text { padding: 0px 1rem 0px 1rem; text-align: center; color: var(--white); - font-size: 1rem; + font-size: 0.8rem; } - .background-image { - background-position: center; - background-repeat: no-repeat; - background-size: cover; - background-attachment: fixed; - background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.1), #000), - url(../res/background1.png); - width: 100%; - height: 56rem; + .home-container { + display: flex; + flex-direction: row; + height: 42rem; + justify-content: space-around; + align-items: center; } - .center-container { + .name-container { display: flex; - margin-top: 1rem; flex-direction: column; - align-items: center; - justify-content: center; } - .center-logo { - background-size: cover; - border-radius: 50%; + .my-photo { + margin-top: -3rem; + height: 30rem; + } - background-repeat: no-repeat; - background-image: url(../res/background3.png); - width: 12rem; - height: 12rem; + .hi-text { + font-weight: bold; + color: var(--white); + font-size: 3rem; + align-self: start; } + .name-text { font-weight: bold; - color: var(--white); + color: #ff004f; + font-size: 3rem; + } + .sub-text { + font-weight: bold; + color: #ff004f; font-size: 2rem; - margin-top: 2.5rem; + align-self: start; } - .subtitle-text { - color: var(--white); - font-size: 1rem; - font-weight: 400; - margin-top: -2rem; + + @keyframes wave { + 0% { + transform: rotate(0deg); + } + 15% { + transform: rotate(14deg); + } + 30% { + transform: rotate(-8deg); + } + 40% { + transform: rotate(14deg); + } + 50% { + transform: rotate(-4deg); + } + 60% { + transform: rotate(10deg); + } + 70% { + transform: rotate(0deg); + } + 100% { + transform: rotate(0deg); + } + } + + .wave-emoji { + display: inline-block; + animation: wave 2s infinite; + } + + .social-section { + display: flex; + width: 60%; + justify-content: space-around; } - .contact-container { - margin-top: 1rem; - padding-inline: 1rem; - border-radius: 5px; + .circle { + width: 32px; /* Set the desired width */ + height: 32px; /* Set the desired height */ + border-radius: 50%; /* Make the div a circle */ + display: flex; + align-items: center; + justify-content: center; border-width: 1.5px; border-color: var(--white); border-style: solid; } - .contact-text { - padding: 0.2rem; - text-align: center; - color: var(--white); - font-weight: 500; - font-size: 0.9rem; + .img { + width: 20px; + height: 20px; + background-size: contain; } } /* Large devices (laptops/desktops, 992px and up) */ /* Laptops and Desktops */ @media (min-width: 1025px) and (max-width: 1280px) { - .company-name { - font-weight: bold; - color: var(--white); - font-size: 1.5rem; + .background { + background-color: #000; } - .header-container { + + .nav-container { padding: 1rem; display: flex; - } - .menu-container { - flex: 1; - margin: 1rem; - align-items: center; - display: flex; + z-index: 1; + width: 100%; + right: 0; + background-color: #000; + margin-right: 2rem; justify-content: flex-end; + position: fixed; } - .company-logo { - background-position: cover; - background-size: contain; - background-repeat: no-repeat; - background-image: url("https://www.seekpng.com/png/full/913-9131600_mfs-logo-white-accor-hotels-white-logo.png"); - margin: 1rem; - width: 3rem; - height: 3rem; - } - .company-container { - margin-left: 4rem; - align-items: center; - display: flex; - } - .home { - padding-inline: 1rem; - border-radius: 5px; - border-width: 1.5px; - border-color: var(--white); - border-style: solid; - } - .menu-text { + + .nav-text { padding: 0px 1rem 0px 1rem; text-align: center; color: var(--white); font-size: 0.8rem; } - .background-image { - background-position: center; - background-repeat: no-repeat; - background-size: cover; - background-attachment: fixed; - background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.1), #000); - width: 100%; - height: 56rem; + .home-container { + display: flex; + flex-direction: row; + height: 42rem; + justify-content: space-around; + align-items: center; } - .center-container { + .name-container { display: flex; - margin-top: 7rem; flex-direction: column; - align-items: center; - justify-content: center; } - .center-logo { - background-size: cover; - border-radius: 50%; - background-repeat: no-repeat; - background-image: url(../res/background3.png); - width: 13rem; - height: 13rem; + .my-photo { + margin-top: -3rem; + height: 30rem; } - .name-text { + + .hi-text { font-weight: bold; color: var(--white); font-size: 3rem; - margin-top: 3rem; + align-self: start; } - .subtitle-text { - color: var(--white); - font-size: 1.5rem; - font-weight: 400; - margin-top: -1rem; - } - .contact-container { - margin-top: 2rem; - padding-inline: 1rem; - border-radius: 5px; - border-width: 1.5px; - border-color: var(--white); - border-style: solid; + + .name-text { + font-weight: bold; + color: #ff004f; + font-size: 3rem; } - .contact-text { - padding: 0.2rem 0.2rem 0.2rem 0.2rem; - text-align: center; - color: var(--white); - font-weight: 500; - font-size: 0.9rem; + .sub-text { + font-weight: bold; + color: #ff004f; + font-size: 2rem; + align-self: start; } - .about-me { - padding-inline: 0.5rem; + + @keyframes wave { + 0% { + transform: rotate(0deg); + } + 15% { + transform: rotate(14deg); + } + 30% { + transform: rotate(-8deg); + } + 40% { + transform: rotate(14deg); + } + 50% { + transform: rotate(-4deg); + } + 60% { + transform: rotate(10deg); + } + 70% { + transform: rotate(0deg); + } + 100% { + transform: rotate(0deg); + } } -} -/* Extra large devices (large laptops and desktops, 1200px and up) */ -/* Big Monitors */ -@media only screen and (min-width: 1281px) { - .company-name { - font-weight: bold; - color: var(--white); - font-size: 1.5rem; + .wave-emoji { + display: inline-block; + animation: wave 2s infinite; } - .header-container { - padding: 1rem; + + .social-section { display: flex; + width: 60%; + justify-content: space-around; } - .menu-container { - flex: 1; - margin-right: 5rem; - align-items: center; + .circle { + width: 32px; /* Set the desired width */ + height: 32px; /* Set the desired height */ + border-radius: 50%; /* Make the div a circle */ display: flex; - justify-content: flex-end; - } - .company-logo { - background-position: cover; - background-size: contain; - background-repeat: no-repeat; - background-image: url("https://www.seekpng.com/png/full/913-9131600_mfs-logo-white-accor-hotels-white-logo.png"); - margin: 1rem; - width: 3rem; - height: 3rem; - } - .company-container { - margin-left: 4rem; align-items: center; - display: flex; - } - .home { - padding-inline: 1rem; - border-radius: 5px; + justify-content: center; border-width: 1.5px; border-color: var(--white); border-style: solid; } - .menu-text { - padding: 0px 1rem 0px 1rem; - text-align: center; - color: var(--white); - font-size: 0.8rem; + .img { + width: 20px; + height: 20px; + background-size: contain; } +} - .background-image { +/* Extra large devices (large laptops and desktops, 1200px and up) */ +/* Big Monitors */ +@media only screen and (min-width: 1281px) { + .background { background-color: #000; } - .center-containers { + .nav-container { + display: flex; + z-index: 1; + width: 100%; + right: 0; + background-color: #000; + margin-right: 2rem; + justify-content: flex-end; + position: fixed; + } + + .nav-text { + padding: 1rem 1rem 0.5rem 1rem; + text-align: center; + font-weight: 600; + color: var(--white); + font-size: 1rem; + :hover { + color: #ff004f; + } + } + + .home-container { display: flex; flex-direction: row; height: 42rem; + padding-top: 6rem; justify-content: space-around; align-items: center; } - .center-container { + .name-container { display: flex; + padding-left: 12rem; flex-direction: column; } - .center-logo { - margin-top: -3rem; - height: 30rem; + .my-photo { + height: 38rem; + margin-right: -10rem; } - .name-text { - font-family: inherit; /* 1 */ + .hi-text { font-weight: bold; color: var(--white); font-size: 3rem; - align-self: start; + text-align: left; } - - .name-text2 { + .name-text { font-weight: bold; color: #ff004f; + font-size: 3rem; + align-self: start; } - .name-text1 { + .sub-text { font-weight: bold; color: #ff004f; font-size: 2rem; @@ -433,21 +448,13 @@ display: inline-block; animation: wave 2s infinite; } - .subtitle-text { - color: var(--white); - font-size: 1.5rem; - font-weight: 400; - margin-top: -1rem; - } - .contact { - display: flex; - width: 50%; + .social-section { + display: flex; + width: 60%; justify-content: space-around; - flex-direction: row; - align-self: flex-start; } - .contact-container { + .circle { width: 32px; /* Set the desired width */ height: 32px; /* Set the desired height */ border-radius: 50%; /* Make the div a circle */ @@ -458,37 +465,9 @@ border-color: var(--white); border-style: solid; } - .github { - width: 20px; - height: 20px; - background-size: contain; - background-image: url("../res/github.png"); - } - .facebook-logo { - width: 20px; - height: 20px; - background-size: contain; - background-image: url("../res/facebook.png"); - } - .linkedin { - width: 18px; - height: 18px; - background-size: contain; - background-image: url("../res/linkedin.png"); - } - .media { - width: 30px; - height: 30px; + .img { + width: 25px; + height: 25px; background-size: contain; - background-image: url("../res/media.png"); - } - .instagram { - width: 20px; - height: 20px; - background-size: contain; - background-image: url("../res/instagram.png"); - } - .about-me { - padding-inline: 0.5rem; } } diff --git a/src/components/FirstSection.tsx b/src/components/FirstSection.tsx index f60eb4f..ba32730 100644 --- a/src/components/FirstSection.tsx +++ b/src/components/FirstSection.tsx @@ -7,83 +7,86 @@ const FirstSection = (props) => { return (
-
-
-
-
-

- Home -

-
-
-

- About me -

-
-
-

- My Skills -

-
-
-

- My Portfolio -

-
-
-

- Experience -

-
-
-

- Blog -

-
-
-

- Contact -

-
-
+
+
+

+ Home +

+

+ About me +

+

+ My Skills +

+

+ Experience +

+

+ Achievement +

+

+ Blog +

+

+ Contact +

-
-
- - Hi There! 👋🏻 +
+
+ + Hello There! 👋🏻 - - I'm Vishal Dhanotiya + + I'm Vishal Dhanotiya -

+

-
- -

+
+ + github - -

+ + facebook - -

+ + media - -

+ + linkedin - -

+ + instagram
logo1 - {/*
*/}
diff --git a/src/components/FourthSection.scss b/src/components/FourthSection.scss index 2e0877e..9ec4f0d 100644 --- a/src/components/FourthSection.scss +++ b/src/components/FourthSection.scss @@ -167,69 +167,43 @@ /* Extra large devices (large laptops and desktops, 1200px and up) */ /* Big Monitors */ @media only screen and (min-width: 1281px) { + .fourth-section { + justify-content: space-evenly; + align-items: center; + padding-top: 6rem; + padding-left: 6rem; + } + .fourth-title { - color: #f51940; + color: white; text-align: left; - padding-top: 3rem; - padding-left: 4rem; font-weight: bold; - font-size: 2.2rem; - } - - .image-list { - display: flex; - - margin-inline: 5rem; - flex-direction: column; - } - - .grid-image-item { - background-color: #f519413a; - margin-bottom: 1rem; - padding: 1rem; - display: flex; - - flex-direction: column; - border-radius: 0.5rem; - } - .containers { - display: flex; - flex-direction: row; - background-color: brown; - justify-content: space-between; - align-items: center; + font-size: 3rem; } - .logo-1 { - background-repeat: no-repeat; - background-size: cover; - background-position: center; - margin-top: -3rem; - align-content: flex-start; - background-image: url(../res/office.png); - width: 45rem; - height: 40rem; + .office-logo { + width: 35rem; } - .section-1 { + .experience-div { display: flex; } .title-1 { font-weight: bolder; - font-size: 2rem; + font-size: 3rem; color: #f51940; } - .column-1 { - margin-left: 5rem; + .experience-box { + margin-left: 1rem; flex: 33.33%; } - .text-1 { + .company-text { font-weight: bold; display: flex; align-self: center; color: var(--white); font-size: 1.5rem; } - .text-2 { + .company-sub-text { font-weight: 400; display: flex; align-self: center; diff --git a/src/components/FourthSection.tsx b/src/components/FourthSection.tsx index fec9ec9..3707637 100644 --- a/src/components/FourthSection.tsx +++ b/src/components/FourthSection.tsx @@ -7,43 +7,55 @@ export default function FourthSection() { style={{ marginTop: -50, backgroundColor: "#000000" }} id="fourthSection" > -

Experience

+
+

Experience

-
-
-
- {"Persistent Systems"} - {"Engineering Lead"} - {"Mar 2022 to Present"} +
+
+
+ {"Persistent Systems"} + {"Engineering Lead"} + {"Mar 2022 to Present"} +
+

+

+
+ + {"Codiant Software Technologies"} + + + {"Senior Software Engineer"} + + {"Dec 2017 - Feb 2022"} +
+

+

+
+ + {"Young Decade IT Software Solution"} + + {"Software Engineer"} + {"May 2016 - Nov 2017"} +
+

+

+
+ + {"Canopus Infosystems Private Limited "} + + + {"Junior Software Engineer"} + + {"Dec 2015 - Feb 2016"} +
-

-

-
- {"Codiant Software Technologies"} - {"Senior Software Engineer"} - {"Dec 2017 - Feb 2022"} +
+ office
-

-

-
- - {"Young Decade IT Software Solution"} - - {"Software Engineer"} - {"May 2016 - Nov 2017"} -
-

-

-
- - {"Canopus Infosystems Private Limited "} - - {"Junior Software Engineer"} - {"Dec 2015 - Feb 2016"} -
-
-
-
diff --git a/src/components/SecondSection.scss b/src/components/SecondSection.scss index 50a3b3f..479a1db 100644 --- a/src/components/SecondSection.scss +++ b/src/components/SecondSection.scss @@ -8,321 +8,116 @@ /* Small devices (portrait tablets and large phones, 600px and up) */ /* Mobile Devices */ @media (min-width: 360px) and (max-width: 600px) { - .second-title { - color: var(--green); + .logo { + background-repeat: no-repeat; + background-size: cover; + background-position: center; + align-content: flex-start; + background-image: url(../res/my.png); + width: 45rem; + height: 40rem; + } + .section { padding-top: 3rem; + padding-bottom: 3rem; + display: flex; + } + .title { font-weight: bold; - font-size: 2.2rem; + font-size: 5rem; + text-align: start; + color: white; } - .second-subtitle { - color: var(--gray); - margin-top: 2rem; - font-size: 1rem; - margin-top: 2rem; + .me { + font-weight: bold; + font-size: 5rem; + color: #f51940; } - .first-profile { - background-repeat: no-repeat; - background-position: center; - background-size: contain; - background-image: url("https://images.news18.com/ibnlive/uploads/2022/07/5b64ef07d608085cf4b239ddfeda4a8d.png"); - border-radius: 3rem; - margin: 0.5rem; - width: 6rem; - height: 6rem; - } - .profile-container { - display: flex; - justify-content: center; + .column { + margin-left: -6rem; + font-size: 2rem; + flex: 33.33%; } - .second-profile { - background-repeat: no-repeat; - background-position: center; - background-size: cover; - background-image: url("https://www.geo.tv/assets/uploads/updates/2022-05-14/416884_7263099_updates.jpg"); - border-radius: 3rem; - margin: 0.5rem; - width: 6rem; - height: 6rem; + .text { + font-weight: 400; + text-align: justify; + width: 95%; + color: var(--white); + font-size: 2rem; } - .third-profile { - background-repeat: no-repeat; - background-position: center; - background-size: contain; - background-image: url("https://pbs.twimg.com/media/Br9E1KRIUAAMXHF.png"); - border-radius: 3rem; - margin: 0.5rem; - width: 6rem; - height: 6rem; - } - .social-container { - display: flex; + .text-contain { + width: 60%; justify-content: center; - margin-top: 2rem; - margin-bottom: 3rem; - } - .facebook { - background-repeat: no-repeat; - background-position: center; - background-size: contain; - background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtxnElBsczg7ZOupqJoNqOr1JRs8MUWGsiFNTvs-PfdnhnKGMcxAGn9nMQ5CdQEC_OlPQ&usqp=CAU"); - border-radius: 1.5rem; - margin-block: 1.5rem; - margin-inline: 0.2rem; - width: 3rem; - height: 3rem; + background-color: red; + align-content: center; } - .twitter { - background-repeat: no-repeat; - background-position: center; - background-size: contain; - border-radius: 1.5rem; - margin-block: 1.5rem; - margin-inline: 0.2rem; - width: 3rem; - height: 3rem; - background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMO2BMpfaHRHGZV7Ft1PFzXcOBWBidw_XNX4OsE0BwH4St7Z4Eq9MvlTeh1d_gpp-3cMI&usqp=CAU"); - } - .gmail { - background-repeat: no-repeat; - background-position: center; - background-size: contain; - border-radius: 1.5rem; - margin-block: 1.5rem; - margin-inline: 0.2rem; - width: 3rem; - height: 3rem; - background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDJiiUrxfnnMTOZqNWY-iDLz_D1AlJtHdVvbO3-sXD2iVb_CUD3wj13TYZ1kCBjAsTSVg&usqp=CAU"); - } - .dribble { - background-repeat: no-repeat; - background-position: center; - background-size: contain; - border-radius: 1.5rem; - margin-block: 1.5rem; - margin-inline: 0.2rem; - width: 3rem; - height: 3rem; - background-image: url("data:image/png;base64,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"); + .sub-text { + font-weight: 400; + color: #ff004f; + font-size: 1.5rem; + align-self: start; } } /* Medium devices (landscape tablets, 768px and up) */ /* Tablets iPads (Portrait) */ @media (min-width: 600px) and (max-width: 1024px) { - .second-title { - color: var(--green); - padding-top: 3rem; - font-weight: bold; - font-size: 2.2rem; - } - .second-subtitle { - color: var(--gray); - margin-top: 2rem; - font-size: 1rem; - margin-top: 2rem; - } - .first-profile { - background-repeat: no-repeat; - background-position: center; - background-size: contain; - background-image: url("https://images.news18.com/ibnlive/uploads/2022/07/5b64ef07d608085cf4b239ddfeda4a8d.png"); - border-radius: 4rem; - margin: 1rem; - width: 8rem; - height: 8rem; - } - .profile-container { - display: flex; - justify-content: center; - } - .second-profile { + .logo { background-repeat: no-repeat; - background-position: center; background-size: cover; - background-image: url("https://www.geo.tv/assets/uploads/updates/2022-05-14/416884_7263099_updates.jpg"); - border-radius: 4rem; - margin: 1rem; - width: 8rem; - height: 8rem; - } - .third-profile { - background-repeat: no-repeat; - background-position: center; - background-size: contain; - background-image: url("https://pbs.twimg.com/media/Br9E1KRIUAAMXHF.png"); - border-radius: 4rem; - margin: 1rem; - width: 8rem; - height: 8rem; - } - .social-container { - display: flex; - justify-content: center; - margin-top: 2rem; - margin-bottom: 3rem; - } - .facebook { - background-repeat: no-repeat; - background-position: center; - background-size: contain; - background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtxnElBsczg7ZOupqJoNqOr1JRs8MUWGsiFNTvs-PfdnhnKGMcxAGn9nMQ5CdQEC_OlPQ&usqp=CAU"); - border-radius: 1.5rem; - margin-block: 1.5rem; - margin-inline: 0.2rem; - width: 3rem; - height: 3rem; - } - - .twitter { - background-repeat: no-repeat; - background-position: center; - background-size: contain; - border-radius: 1.5rem; - margin-block: 1.5rem; - margin-inline: 0.2rem; - width: 3rem; - height: 3rem; - background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMO2BMpfaHRHGZV7Ft1PFzXcOBWBidw_XNX4OsE0BwH4St7Z4Eq9MvlTeh1d_gpp-3cMI&usqp=CAU"); - } - .gmail { - background-repeat: no-repeat; - background-position: center; - background-size: contain; - border-radius: 1.5rem; - margin-block: 1.5rem; - margin-inline: 0.2rem; - width: 3rem; - height: 3rem; - background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDJiiUrxfnnMTOZqNWY-iDLz_D1AlJtHdVvbO3-sXD2iVb_CUD3wj13TYZ1kCBjAsTSVg&usqp=CAU"); - } - .dribble { - background-repeat: no-repeat; background-position: center; - background-size: contain; - border-radius: 1.5rem; - margin-block: 1.5rem; - margin-inline: 0.2rem; - width: 3rem; - height: 3rem; - background-image: url("data:image/png;base64,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"); + align-content: flex-start; + background-image: url(../res/my.png); + width: 45rem; + height: 40rem; } -} - -/* Large devices (laptops/desktops, 992px and up) */ -/* Laptops and Desktops */ -@media (min-width: 1025px) and (max-width: 1280px) { - .second-title { - color: var(--green); + .section { padding-top: 3rem; - background-color: aqua; + padding-bottom: 3rem; + display: flex; + } + .title { font-weight: bold; - font-size: 2.2rem; + font-size: 5rem; + text-align: start; + color: white; } - .second-subtitle { - color: var(--gray); - margin-top: 2rem; - font-size: 1rem; - margin-top: 2rem; + .me { + font-weight: bold; + font-size: 5rem; + color: #f51940; } - .first-profile { - background-repeat: no-repeat; - background-position: center; - background-size: contain; - background-image: url("https://images.news18.com/ibnlive/uploads/2022/07/5b64ef07d608085cf4b239ddfeda4a8d.png"); - border-radius: 4rem; - margin: 1rem; - width: 8rem; - height: 8rem; - } - .profile-container { - display: flex; - justify-content: center; + .column { + margin-left: -6rem; + font-size: 2rem; + flex: 33.33%; } - .second-profile { - background-repeat: no-repeat; - background-position: center; - background-size: cover; - background-image: url("https://www.geo.tv/assets/uploads/updates/2022-05-14/416884_7263099_updates.jpg"); - border-radius: 4rem; - margin: 1rem; - width: 8rem; - height: 8rem; + .text { + font-weight: 400; + text-align: justify; + width: 95%; + color: var(--white); + font-size: 2rem; } - .third-profile { - background-repeat: no-repeat; - background-position: center; - background-size: contain; - background-image: url("https://pbs.twimg.com/media/Br9E1KRIUAAMXHF.png"); - border-radius: 4rem; - margin: 1rem; - width: 8rem; - height: 8rem; - } - .social-container { - display: flex; + .text-contain { + width: 60%; justify-content: center; - margin-top: 2rem; - margin-bottom: 3rem; - } - .facebook { - background-repeat: no-repeat; - background-position: center; - background-size: contain; - background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtxnElBsczg7ZOupqJoNqOr1JRs8MUWGsiFNTvs-PfdnhnKGMcxAGn9nMQ5CdQEC_OlPQ&usqp=CAU"); - border-radius: 1.5rem; - margin-block: 1.5rem; - margin-inline: 0.2rem; - width: 3rem; - height: 3rem; + background-color: red; + align-content: center; } - .twitter { - background-repeat: no-repeat; - background-position: center; - background-size: contain; - border-radius: 1.5rem; - margin-block: 1.5rem; - margin-inline: 0.2rem; - width: 3rem; - height: 3rem; - background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMO2BMpfaHRHGZV7Ft1PFzXcOBWBidw_XNX4OsE0BwH4St7Z4Eq9MvlTeh1d_gpp-3cMI&usqp=CAU"); - } - .gmail { - background-repeat: no-repeat; - background-position: center; - background-size: contain; - border-radius: 1.5rem; - margin-block: 1.5rem; - margin-inline: 0.2rem; - width: 3rem; - height: 3rem; - background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDJiiUrxfnnMTOZqNWY-iDLz_D1AlJtHdVvbO3-sXD2iVb_CUD3wj13TYZ1kCBjAsTSVg&usqp=CAU"); - } - .dribble { - background-repeat: no-repeat; - background-position: center; - background-size: contain; - border-radius: 1.5rem; - margin-block: 1.5rem; - margin-inline: 0.2rem; - width: 3rem; - height: 3rem; - background-image: url("data:image/png;base64,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"); + .sub-text { + font-weight: 400; + color: #ff004f; + font-size: 1.5rem; + align-self: start; } } -/* Extra large devices (large laptops and desktops, 1200px and up) */ -/* Big Monitors */ -@media only screen and (min-width: 1281px) { - .containers { - display: flex; - flex-direction: row; - background-color: brown; - justify-content: space-between; - align-items: center; - } - +/* Large devices (laptops/desktops, 992px and up) */ +/* Laptops and Desktops */ +@media (min-width: 1025px) and (max-width: 1280px) { .logo { background-repeat: no-repeat; background-size: cover; @@ -339,17 +134,18 @@ } .title { font-weight: bold; - font-size: 2rem; + font-size: 5rem; text-align: start; color: white; } .me { font-weight: bold; - font-size: 2rem; + font-size: 5rem; color: #f51940; } .column { - margin-left: -4rem; + margin-left: -6rem; + font-size: 2rem; flex: 33.33%; } .text { @@ -357,7 +153,7 @@ text-align: justify; width: 95%; color: var(--white); - font-size: 1.5rem; + font-size: 2rem; } .text-contain { width: 60%; @@ -365,4 +161,59 @@ background-color: red; align-content: center; } + + .sub-text { + font-weight: 400; + color: #ff004f; + font-size: 1.5rem; + align-self: start; + } +} + +/* Extra large devices (large laptops and desktops, 1200px and up) */ +/* Big Monitors */ +@media only screen and (min-width: 1281px) { + .about-section { + padding-top: 6rem; + padding-bottom: 3rem; + justify-content: space-evenly; + align-items: center; + display: flex; + } + .column { + flex: 33.33%; + } + .logo { + height: 25rem; + } + + .about-title { + font-weight: bold; + font-size: 3rem; + text-align: start; + color: white; + } + .about-me { + font-size: 3rem; + font-weight: bold; + color: #f51940; + } + + .about-text { + text-align: start; + width: 90%; + color: var(--white); + font-size: 1.5rem; + } + .text-contain { + justify-content: center; + background-color: red; + align-content: center; + } + + .span-text { + color: #ff004f; + font-size: 1.5rem; + align-self: start; + } } diff --git a/src/components/SecondSection.tsx b/src/components/SecondSection.tsx index 86efbd1..de6bc34 100644 --- a/src/components/SecondSection.tsx +++ b/src/components/SecondSection.tsx @@ -3,28 +3,36 @@ import "../components/SecondSection.scss"; export default function SecondSection() { return (
-
+
-
+ about-me
-

- About Me +

+ About Me

-

- My name is Vishal Dhanotiya. I am a Frontend Mobile and Website - developer. In the early day of the my career I start working as a - android developer but after 2 year I got a opportunity to work on - React Native. Now I am enjoying to develop cross-platform - applications. +

+ My self Vishal Dhanotiya. I am a + Frontend developer. My expertise lies in frontend technologies, + including React Native, + React.js, and + JavaScript. Currently, I'm + deeply engaged with + HTML, + CSS and + TypeScript, pushing the + boundaries of what can be achieved. I maintain a perpetual





- I'm also a passionate writer, with a blog and articles on various - platforms, where I share my expertise and insights into the world of - frontend development. I enjoy sharing my knowledge with others and - helping fellow developers understand and be creative with web - technologies. + I'm also a passionate to share my expertise and insights into the + world of frontend development. I enjoy sharing my knowledge with + others and helping fellow developers understand and be creative with + web and mobile technologies.

diff --git a/src/components/SeventhSection.scss b/src/components/SeventhSection.scss index 53ec141..d1e085e 100644 --- a/src/components/SeventhSection.scss +++ b/src/components/SeventhSection.scss @@ -30,36 +30,10 @@ margin: 2rem; } .pin-image { - margin-left: auto; - margin-right: auto; - background-repeat: no-repeat; - background-position: center; - background-size: contain; - background-image: url(../res/pin.png); width: 2rem; height: 2rem; } - .email-image { - background-repeat: no-repeat; - background-position: center; - background-size: cover; - background-image: url(../res/email.png); - width: 2rem; - height: 2rem; - margin-left: auto; - margin-right: auto; - } - .call-image { - background-repeat: no-repeat; - background-position: center; - background-size: cover; - background-image: url(../res/call.png); - width: 2rem; - height: 2rem; - margin-left: auto; - margin-right: auto; - } .address-text { font-size: 0.9rem; color: var(--white); @@ -145,36 +119,10 @@ margin: 2rem; } .pin-image { - margin-left: auto; - margin-right: auto; - background-repeat: no-repeat; - background-position: center; - background-size: contain; - background-image: url(../res/pin.png); - width: 2rem; - height: 2rem; - } - .email-image { - background-repeat: no-repeat; - background-position: center; - background-size: cover; - background-image: url(../res/email.png); width: 2rem; height: 2rem; - margin-left: auto; - margin-right: auto; } - .call-image { - background-repeat: no-repeat; - background-position: center; - background-size: cover; - background-image: url(../res/call.png); - width: 2rem; - height: 2rem; - margin-left: auto; - margin-right: auto; - } .address-text { font-size: 0.9rem; color: var(--white); @@ -260,35 +208,8 @@ margin: 2rem; } .pin-image { - margin-left: auto; - margin-right: auto; - background-repeat: no-repeat; - background-position: center; - background-size: contain; - background-image: url(../res/pin.png); - width: 2rem; - height: 2rem; - } - .email-image { - background-repeat: no-repeat; - background-position: center; - background-size: cover; - background-image: url(../res/email.png); - width: 2rem; - height: 2rem; - margin-left: auto; - margin-right: auto; - } - - .call-image { - background-repeat: no-repeat; - background-position: center; - background-size: cover; - background-image: url(../res/call.png); width: 2rem; height: 2rem; - margin-left: auto; - margin-right: auto; } .address-text { font-size: 0.9rem; @@ -333,6 +254,7 @@ } .submit-container { display: flex; + background-color: #ff004f; justify-content: center; align-self: center; } @@ -341,10 +263,9 @@ font-weight: 500; font-size: 0.9rem; margin-bottom: 5rem; - background-color: var(--white); + background-color: #ff004f; padding-inline: 1rem; - padding-block: 0.8rem; - border-radius: 0.5rem; + border-width: 2px; border-color: var(--white); border-style: solid; @@ -375,36 +296,10 @@ margin: 2rem; } .pin-image { - margin-left: auto; - margin-right: auto; - background-repeat: no-repeat; - background-position: center; - background-size: contain; - background-image: url(../res/pin.png); - width: 2rem; - height: 2rem; - } - .email-image { - background-repeat: no-repeat; - background-position: center; - background-size: cover; - background-image: url(../res/email.png); width: 2rem; height: 2rem; - margin-left: auto; - margin-right: auto; } - .call-image { - background-repeat: no-repeat; - background-position: center; - background-size: cover; - background-image: url(../res/call.png); - width: 2rem; - height: 2rem; - margin-left: auto; - margin-right: auto; - } .address-text { font-size: 0.9rem; color: var(--white); @@ -454,14 +349,14 @@ .submit-button { color: var(--white); font-weight: 500; - font-size: 0.9rem; + font-size: 1rem; margin-bottom: 5rem; - background-color: var(--white); - padding-inline: 1rem; + background-color: #ff004f; + width: 42rem; padding-block: 0.8rem; border-radius: 0.5rem; border-width: 2px; - border-color: var(--white); + border-color: #ff004f; border-style: solid; } } diff --git a/src/components/SeventhSection.tsx b/src/components/SeventhSection.tsx index 38d4d2e..b50ea36 100644 --- a/src/components/SeventhSection.tsx +++ b/src/components/SeventhSection.tsx @@ -7,32 +7,41 @@ export default function SeventhSection() { id="seventhSection" className="seventh-background" > -

LET'S GET IN TOUCH

+

Let's Get In Touch

-

+ {/*

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum standard dummy text ever since the 1500s,
when an unknown printer took a galley specimen book. -

+

*/}
-
+ location -

- Big Street AVE, 254 Los Angeles
- California -

+

India

-
+ pin -

contact@planus.com

+

vishal.dhanotiya2@gmail.com

-
+ email -

(544)-746-28902

+

9179237008

@@ -42,7 +51,7 @@ export default function SeventhSection() {
-
{"SUBMIT"}
+
{"Submit"}
diff --git a/src/components/SixthSection.scss b/src/components/SixthSection.scss index 64f319a..a401594 100644 --- a/src/components/SixthSection.scss +++ b/src/components/SixthSection.scss @@ -201,10 +201,10 @@ /* Big Monitors */ @media only screen and (min-width: 1281px) { .sixth-title { - color: #f51940; - padding-top: 4rem; + color: white; + padding-top: 6rem; font-weight: bold; - font-size: 2.2rem; + font-size: 3rem; } .blog-list { justify-content: center; diff --git a/src/components/SixthSection.tsx b/src/components/SixthSection.tsx index dbc291a..aa182e7 100644 --- a/src/components/SixthSection.tsx +++ b/src/components/SixthSection.tsx @@ -30,7 +30,7 @@ export default function SixthSection() { style={{ marginBlock: -40, backgroundColor: "#000000" }} id="sixthSection" > -

MY BLOG

+

My Blog

{gridImage.map((item, index) => { diff --git a/src/components/ThirdSection.scss b/src/components/ThirdSection.scss index c993d3a..e946983 100644 --- a/src/components/ThirdSection.scss +++ b/src/components/ThirdSection.scss @@ -48,7 +48,6 @@ background-repeat: no-repeat; background-position: center; background-size: contain; - background-image: url(../res/instagram-logo.png); width: 4rem; height: 4rem; } @@ -126,7 +125,6 @@ background-repeat: no-repeat; background-position: center; background-size: contain; - background-image: url(../res/instagram-logo.png); width: 4rem; height: 4rem; } @@ -204,7 +202,6 @@ background-repeat: no-repeat; background-position: center; background-size: contain; - background-image: url(../res/instagram-logo.png); width: 4rem; height: 4rem; } @@ -244,19 +241,21 @@ @media only screen and (min-width: 1281px) { .main-background { display: flex; - padding-left: 4rem; + padding-left: 6rem; + padding-top: 5rem; flex-direction: column; background-color: var(--black); } - .title { - font-size: 2rem; + .my-title { + font-weight: bold; + font-size: 3rem; text-align: start; color: white; } - .me { + .my-me { + font-size: 3rem; font-weight: bold; - font-size: 2rem; color: #f51940; } diff --git a/src/components/ThirdSection.tsx b/src/components/ThirdSection.tsx index a9489d6..2566377 100644 --- a/src/components/ThirdSection.tsx +++ b/src/components/ThirdSection.tsx @@ -3,9 +3,7 @@ import "../components/ThirdSection.scss"; export default function ThirdSection() { return (
-

- My Skils -

+

Skils

Languages and Libraries

@@ -95,7 +93,7 @@ export default function ThirdSection() { /> img15
diff --git a/src/res/facebook.png b/src/res/facebook.png index 6e8c65a..5589a5a 100644 Binary files a/src/res/facebook.png and b/src/res/facebook.png differ diff --git a/src/res/fonts/ArtegraSoft-Medium.ttf b/src/res/fonts/ArtegraSoft-Medium.ttf new file mode 100644 index 0000000..af2fdab Binary files /dev/null and b/src/res/fonts/ArtegraSoft-Medium.ttf differ diff --git a/src/res/fonts/ArtegraSoft-SemiBold.ttf b/src/res/fonts/ArtegraSoft-SemiBold.ttf new file mode 100644 index 0000000..2f19c93 Binary files /dev/null and b/src/res/fonts/ArtegraSoft-SemiBold.ttf differ diff --git a/src/res/fonts/ArtegraSoft-SemiBold.woff b/src/res/fonts/ArtegraSoft-SemiBold.woff new file mode 100644 index 0000000..f28f141 Binary files /dev/null and b/src/res/fonts/ArtegraSoft-SemiBold.woff differ diff --git a/src/res/fonts/ArtegraSoft-SemiBold.woff2 b/src/res/fonts/ArtegraSoft-SemiBold.woff2 new file mode 100644 index 0000000..94abc51 Binary files /dev/null and b/src/res/fonts/ArtegraSoft-SemiBold.woff2 differ diff --git a/src/res/github.png b/src/res/github.png index 5ac7543..3ed0e26 100644 Binary files a/src/res/github.png and b/src/res/github.png differ diff --git a/src/res/githubs.png b/src/res/githubs.png deleted file mode 100644 index 631991e..0000000 Binary files a/src/res/githubs.png and /dev/null differ diff --git a/src/res/instagram-logo.png b/src/res/instagram-logo.png deleted file mode 100644 index 1ccf16b..0000000 Binary files a/src/res/instagram-logo.png and /dev/null differ diff --git a/src/res/instagram.png b/src/res/instagram.png index 56a9f48..39cd995 100644 Binary files a/src/res/instagram.png and b/src/res/instagram.png differ diff --git a/src/res/linkedin.png b/src/res/linkedin.png index d4592f6..9e76464 100644 Binary files a/src/res/linkedin.png and b/src/res/linkedin.png differ diff --git a/src/res/media.png b/src/res/media.png deleted file mode 100644 index d505642..0000000 Binary files a/src/res/media.png and /dev/null differ diff --git a/src/res/myy.png b/src/res/myy.png new file mode 100644 index 0000000..b37dbee Binary files /dev/null and b/src/res/myy.png differ diff --git a/src/res/stackoverflow.png b/src/res/stackoverflow.png new file mode 100644 index 0000000..4185e83 Binary files /dev/null and b/src/res/stackoverflow.png differ