new commit complete styling and last res

Syed-Shayan-01 · Sep 4, 2023 · 5efe16b · 5efe16b
1 parent 141d04c
commit 5efe16b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
diff --git a/src/components/contact/Contact.js b/src/components/contact/Contact.js
@@ -1,12 +1,13 @@
 import Button from "../Button"
+import Logo from "../logo/Logo"
 
 
 const Contact = () => {
     return (
         <>
             <section id="Contact" className="bg-white dark:bg-gray-900 mt-40">
                 <div className="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
-                    <h2 className="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-400 dark:text-white">Contact Us</h2>
+                    <h2 className="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-400 dark:text-white"><Logo text={'Contact us'} /></h2>
                     <p className="mb-8 lg:mb-16 font-light text-center text-gray-500 dark:text-gray-400 sm:text-xl">Got a technical issue? Want to send feedback about a beta feature? Let us know.</p>
                     <form action="#" className="space-y-8">
                         <div>

diff --git a/src/components/projects/Project.js b/src/components/projects/Project.js
@@ -4,13 +4,14 @@
 import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
+import Logo from '../logo/Logo';
 const Project = () => {
     return (
         <>
             <div id="Projects">
-                <div className=" text-5xl text-gray-600 drop-shadow-md
-                 font-sans font-bold flex justify-center my-40">
-                    Projects
+                <div className=" text-5xl drop-shadow-md
+                 flex justify-center my-40">
+                    <Logo text={'Projects'} />
                 </div>
                 <div>
                     <ol className='flex justify-around items-center'>
@@ -50,7 +51,7 @@ const Project = () => {
                     </ol>
                 </div>
 
-                <div className='flex justify-center my-32'>Check out my github to watch more projects....................</div>
+                <div className='flex justify-center my-32 hover:scale-110 hover:text-blue-600 font-bold duration-300'>Check out my github to watch more projects....................</div>
             </div>
         </>
     )

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -15,7 +15,7 @@ export default function Home() {
       <div className="bg-black" >
         <header className="flex justify-between items-center p-10">
           <div>
-            <Logo />
+            <Logo text={'Syed SHayan'} />
           </div>
 
           <nav>
@@ -29,27 +29,26 @@ export default function Home() {
       </div>
       {/* new section */}
       <section className="pb-32  relative bg-black">
-        <div className=" text-white flex justify-around items-center space-x-52 p-10">
+        <div className=" text-white flex justify-around items-center  p-10">
           <div className="left ml-24">
-            <div className="text-4xl w-80 mt-20 font-bold p-2">
-              {" "}
-              Hello My Name Syed Shayan
+            <div className="text-5xl w-80 mt-20 mb-4 p-2">
+              Hello I,AM <Logo text={'syed shayan'} />
             </div>
-            <span className="text-xl mt-10 p-2 hover:text-indigo-100 ">
+            <span className="text-xl  text-gray-300 mt-10 uppercase p-2">
               I,am Passionate Front-End Web Developer
             </span>
-            <div className="p-2 w-2/3 text-xl font-sans">
+            <div className="p-2 w-2/3 uppercase text-xl text-gray-200 font-sans">
               I possess one year of experience in HTML, CSS, JavaScript,
               Git/GitHub, Tailwind CSS, and Next.js, enabling me to create
               dynamic and responsive web applications with proficiency.
             </div>
             <Button text={"Download Cv"} />
           </div>
 
-          <div className="right w-2/3 mt-10">
+          <div className="right mt-10">
             <video
               src="/Images/hero.mp4"
-              className="h-full w-80  rounded"
+              className="h-full w-[100vh]  rounded"
               loop
               autoPlay
               muted