Update hero section and add new social button WhatsApp

mhshujon · Dec 21, 2024 · d9ac98d · d9ac98d
1 parent 380266a
commit d9ac98d
Show file tree

Hide file tree

Showing 13 changed files with 108 additions and 50 deletions.
diff --git a/index.html b/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="./assets/favicon/favicon-96x96.png" sizes="96x96" />
-    <link rel="icon" type="image/svg+xml" href="./assets/favicon/favicon.svg" />
-    <link rel="shortcut icon" href="./assets/favicon/favicon.ico" />
-    <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" href="/assets/favicon/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg" />
+    <link rel="shortcut icon" href="/assets/favicon/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png" />
     <meta name="apple-mobile-web-app-title" content="Codefolio" />
-    <link rel="manifest" href="./assets/favicon/site.webmanifest" />
+    <link rel="manifest" href="/assets/favicon/site.webmanifest" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Codefolio - mhshujon</title>
   </head>

diff --git a/assets/favicon/apple-touch-icon.png → public/assets/favicon/apple-touch-icon.png b/assets/favicon/apple-touch-icon.png → public/assets/favicon/apple-touch-icon.png
diff --git a/assets/favicon/favicon-96x96.png → public/assets/favicon/favicon-96x96.png b/assets/favicon/favicon-96x96.png → public/assets/favicon/favicon-96x96.png
diff --git a/assets/favicon/favicon.ico → public/assets/favicon/favicon.ico b/assets/favicon/favicon.ico → public/assets/favicon/favicon.ico
diff --git a/assets/favicon/favicon.svg → public/assets/favicon/favicon.svg b/assets/favicon/favicon.svg → public/assets/favicon/favicon.svg
diff --git a/assets/favicon/site.webmanifest → public/assets/favicon/site.webmanifest b/assets/favicon/site.webmanifest → public/assets/favicon/site.webmanifest
diff --git a/assets/favicon/web-app-manifest-192x192.png → ...sets/favicon/web-app-manifest-192x192.png b/assets/favicon/web-app-manifest-192x192.png → ...sets/favicon/web-app-manifest-192x192.png
diff --git a/assets/favicon/web-app-manifest-512x512.png → ...sets/favicon/web-app-manifest-512x512.png b/assets/favicon/web-app-manifest-512x512.png → ...sets/favicon/web-app-manifest-512x512.png
diff --git a/assets/resume.pdf → public/resume/resume.pdf b/assets/resume.pdf → public/resume/resume.pdf
diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx
@@ -1,5 +1,5 @@
-import { EMAIL_ID, GITHUB_URL, LINKEDIN_URL } from '../constants/social';
-import { MessageSquare, Mail, Github, Linkedin, MapPin, File } from 'lucide-react';
+import { MessageSquare, Mail, Github, Linkedin, MessageCircle, Download, MapPin } from 'lucide-react';
+import { GITHUB_URL, LINKEDIN_URL, WHATSAPP_URL, EMAIL_URL } from '../constants/social';
 
 export default function Contact() {
   return (
@@ -10,7 +10,7 @@ export default function Contact() {
           <h2 className="text-3xl font-bold text-gray-800">Let's Connect</h2>
         </div>
 
-        <div className="max-w-6xl mx-auto">
+        <div className="max-w-4xl mx-auto">
           <div className="bg-white rounded-2xl shadow-xl overflow-hidden">
             <div className="grid md:grid-cols-2">
               <div className="bg-gradient-to-br from-blue-600 to-blue-700 p-12 text-white">
@@ -46,7 +46,15 @@ export default function Contact() {
                       <Linkedin size={20} />
                     </a>
                     <a
-                      href={`mailto:${EMAIL_ID}`}
+                      href={WHATSAPP_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="p-2 bg-white/10 rounded-full hover:bg-white/20 transition-colors"
+                    >
+                      <MessageCircle size={20} />
+                    </a>
+                    <a
+                      href={EMAIL_URL}
                       className="p-2 bg-white/10 rounded-full hover:bg-white/20 transition-colors"
                     >
                       <Mail size={20} />
@@ -66,14 +74,12 @@ export default function Contact() {
                       <span className="text-blue-600 font-medium">Open to Collaboration</span>
                     </div>
                     <a
-                        href={`../../assets/resume.pdf`}
-                        download={true}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="w-full py-3 px-6 text-center bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center gap-2"
+                      href="/resume/resume.pdf"
+                      download
+                      className="flex items-center justify-center gap-2 w-full py-3 px-6 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
                     >
-                      <File size={20} />
-                      <span>Download Resume</span>
+                      <Download size={20} />
+                      Download Resume
                     </a>
                   </div>
                 </div>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,5 +1,6 @@
-import { EMAIL_ID, GITHUB_URL, LINKEDIN_URL } from '../constants/social';
-import { Github, Linkedin, Mail } from 'lucide-react';
+import React from 'react';
+import { Github, Linkedin, Mail, MessageCircle } from 'lucide-react';
+import { GITHUB_URL, LINKEDIN_URL, WHATSAPP_URL, EMAIL_URL } from '../constants/social';
 
 export default function Footer() {
   return (
@@ -29,7 +30,15 @@ export default function Footer() {
               <Linkedin size={24} />
             </a>
             <a
-              href={`mailto:${EMAIL_ID}`}
+              href={WHATSAPP_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-blue-400 transition"
+            >
+              <MessageCircle size={24} />
+            </a>
+            <a
+              href={EMAIL_URL}
               className="hover:text-blue-400 transition"
             >
               <Mail size={24} />

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -1,10 +1,11 @@
-import { Github, Linkedin, Mail } from 'lucide-react';
-import { EMAIL_ID, GITHUB_URL, LINKEDIN_URL } from '../constants/social';
+import { Github, Linkedin, Mail, MessageCircle, ArrowRight } from 'lucide-react';
+import { GITHUB_URL, LINKEDIN_URL, WHATSAPP_URL, EMAIL_URL } from '../constants/social';
 
 export default function Hero() {
   return (
-    <div className="relative min-h-screen flex items-center">
+    <div className="relative min-h-screen flex items-center justify-center py-20">
       <div className="absolute inset-0 z-0">
+        <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-white opacity-90" />
         <img
           src="https://images.unsplash.com/photo-1517134191118-9d595e4c8c2b?auto=format&fit=crop&q=80"
           alt="Hero background"
@@ -13,42 +14,83 @@ export default function Hero() {
       </div>
 
       <div className="container mx-auto px-4 z-10">
-        <div className="flex flex-col md:flex-row lg:flex-row items-center justify-between gap-12">
-          <div className="flex-1 space-y-6">
-            <h1 className="text-5xl md:text-6xl font-bold text-gray-800 animate-fade-in">
-              Web Application Engineer
-            </h1>
-            <p className="text-xl text-gray-600 max-w-2xl animate-slide-up">
-              With over 4 years of experience crafting modern web applications. 
-              Specialized in building scalable, user-centric solutions that drive business growth.
-            </p>
-            <div className="flex gap-4 animate-fade-in">
-              <a href="#contact" className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition">
+        <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
+          <div className="order-2 lg:order-1 space-y-8 text-center lg:text-left">
+            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-50 text-blue-600 cursor-pointer hover:bg-blue-100 transition-colors mx-auto lg:mx-0" onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}>
+              <span className="text-sm font-medium">Available for Projects</span>
+              <ArrowRight size={16} />
+            </div>
+
+            <div className="space-y-4">
+              <h1 className="text-5xl md:text-6xl font-bold text-gray-800 animate-fade-in leading-tight">
+                Web Application <span className="text-blue-600">Engineer</span>
+              </h1>
+              <p className="text-xl text-gray-600 animate-slide-up">
+                With over 4 years of experience crafting modern web applications. 
+                Specialized in building scalable, user-centric solutions that drive business growth.
+              </p>
+            </div>
+
+            <div className="flex flex-col sm:flex-row gap-4 animate-fade-in justify-center lg:justify-start">
+              <a 
+                href="#contact" 
+                className="inline-flex items-center justify-center gap-2 bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 transition group"
+              >
                 Get in Touch
+                <ArrowRight className="group-hover:translate-x-1 transition-transform" size={20} />
               </a>
-              <a href="#projects" className="border-2 border-blue-600 text-blue-600 px-6 py-3 rounded-lg hover:bg-blue-50 transition">
+              <a 
+                href="#projects" 
+                className="inline-flex items-center justify-center border-2 border-blue-600 text-blue-600 px-8 py-3 rounded-lg hover:bg-blue-50 transition"
+              >
                 View Projects
               </a>
             </div>
-            <div className="flex gap-4 text-gray-600">
-              <a href={GITHUB_URL} target="_blank" rel="noopener noreferrer" className="hover:text-blue-600 transition">
-                <Github size={24} />
+
+            <div className="flex gap-6 pt-4 pb-8 justify-center lg:justify-start">
+              <a 
+                href={GITHUB_URL}
+                target="_blank" 
+                rel="noopener noreferrer" 
+                className="p-3 rounded-full bg-gray-50 text-gray-600 hover:bg-blue-50 hover:text-blue-600 transition-colors"
+              >
+                <Github size={20} />
+              </a>
+              <a 
+                href={LINKEDIN_URL}
+                target="_blank" 
+                rel="noopener noreferrer" 
+                className="p-3 rounded-full bg-gray-50 text-gray-600 hover:bg-blue-50 hover:text-blue-600 transition-colors"
+              >
+                <Linkedin size={20} />
               </a>
-              <a href={LINKEDIN_URL} target="_blank" rel="noopener noreferrer" className="hover:text-blue-600 transition">
-                <Linkedin size={24} />
+              <a 
+                href={WHATSAPP_URL}
+                target="_blank" 
+                rel="noopener noreferrer" 
+                className="p-3 rounded-full bg-gray-50 text-gray-600 hover:bg-blue-50 hover:text-blue-600 transition-colors"
+              >
+                <MessageCircle size={20} />
               </a>
-              <a href={`mailto:${EMAIL_ID}`} className="hover:text-blue-600 transition">
-                <Mail size={24} />
+              <a 
+                href={EMAIL_URL}
+                className="p-3 rounded-full bg-gray-50 text-gray-600 hover:bg-blue-50 hover:text-blue-600 transition-colors"
+              >
+                <Mail size={20} />
               </a>
             </div>
           </div>
-          <div className="flex-1 relative">
-            <div className="w-72 h-72 md:w-96 md:h-96 rounded-full bg-blue-100 animate-float">
-              <img
-                src="https://images.unsplash.com/photo-1573495627361-d9b87960b12d?auto=format&fit=crop&q=80"
-                alt="Profile"
-                className="w-full h-full object-cover rounded-full shadow-lg"
-              />
+
+          <div className="order-1 lg:order-2 flex justify-center">
+            <div className="relative mt-10 lg:mt-0">
+              <div className="absolute inset-0 bg-blue-600 rounded-full blur-3xl opacity-20 animate-pulse" />
+              <div className="relative w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-br from-blue-100 to-white animate-float">
+                <img
+                  src="https://images.unsplash.com/photo-1573495627361-d9b87960b12d?auto=format&fit=crop&q=80"
+                  alt="Profile"
+                  className="w-full h-full object-cover rounded-full shadow-lg"
+                />
+              </div>
             </div>
           </div>
         </div>

diff --git a/src/constants/social.js b/src/constants/social.js
@@ -1,3 +1,4 @@
-export const EMAIL_ID = '[email protected]';
+export const EMAIL_URL = 'mailto:[email protected]';
 export const GITHUB_URL = 'https://github.com/mhshujon/';
-export const LINKEDIN_URL = 'https://www.linkedin.com/in/mhshujon/';
+export const LINKEDIN_URL = 'https://www.linkedin.com/in/mhshujon/';
+export const WHATSAPP_URL = 'https://wa.me/8801701029912';