React Portfolio

11 |

12 |

13 |

Get in touch

14 |

15 | Contact Me 16 |

17 |

18 |

24 |

25 |

26 | 30 | First name 31 | 32 |

33 | 41 |

42 |

43 |

44 | 48 | Last name 49 | 50 |

51 | 59 |

60 |

61 |

62 | 66 | Email 67 | 68 |

69 | 77 |

78 |

79 |

80 | 84 | Message 85 | 86 |

87 |

95 |               </div>
 96 |             </div>
 97 |           </div>
 98 |           <div className="mt-10">
 99 |             <button type="submit" className="btn btn-outline text-sm w-full">
100 |               Send it
101 |             </button>
102 |           </div>
103 |         </form>
104 |       </div>
105 |     </div>
106 |   );
107 | }
108 |

--------------------------------------------------------------------------------
/src/components/Skills.js:
--------------------------------------------------------------------------------
  1 | import { useEffect } from "react";
  2 | import { CheckCircleIcon } from "@heroicons/react/24/solid";
  3 | import AOS from "aos";
  4 | import "aos/dist/aos.css";
  5 | 
  6 | const frontend = [
  7 |   {
  8 |     name: "HTML/CSS",
  9 |     value: 80,
 10 |     icon: CheckCircleIcon,
 11 |   },
 12 |   {
 13 |     name: "JavaScript",
 14 |     value: 70,
 15 |     icon: CheckCircleIcon,
 16 |   },
 17 |   {
 18 |     name: "React",
 19 |     value: 80,
 20 |     icon: CheckCircleIcon,
 21 |   },
 22 |   {
 23 |     name: "Next.js",
 24 |     value: 60,
 25 |     icon: CheckCircleIcon,
 26 |   },
 27 |   {
 28 |     name: "TailwindCSS",
 29 |     value: 80,
 30 |     icon: CheckCircleIcon,
 31 |   },
 32 | ];
 33 | const backend = [
 34 |   {
 35 |     name: "NodeJS",
 36 |     value: 30,
 37 |     icon: CheckCircleIcon,
 38 |   },
 39 |   {
 40 |     name: "Python",
 41 |     value: 75,
 42 |     icon: CheckCircleIcon,
 43 |   },
 44 |   {
 45 |     name: "MySQL",
 46 |     value: 50,
 47 |     icon: CheckCircleIcon,
 48 |   },
 49 |   {
 50 |     name: "APIs",
 51 |     value: 20,
 52 |     icon: CheckCircleIcon,
 53 |   },
 54 |   {
 55 |     name: "MongoDB",
 56 |     value: 40,
 57 |     icon: CheckCircleIcon,
 58 |   },
 59 |   {
 60 |     name: "GraphQL",
 61 |     value: 30,
 62 |     icon: CheckCircleIcon,
 63 |   },
 64 | ];
 65 | 
 66 | export default function Skills() {
 67 |   useEffect(() => {
 68 |     AOS.init({ duration: 2000 });
 69 |   }, []);
 70 |   return (
 71 |     <div className="py-24 sm:py-32" id="skills">
 72 |       <div className="mx-auto max-w-7xl px-6 lg:px-8">
 73 |         <div className="mx-auto max-w-2xl text-center">
 74 |           <h2 className="text-xl leading-7">Explore my</h2>
 75 |           <p className="mt-2 text-4xl font-bold tracking-tight sm:text-6xl">
 76 |             Skills
 77 |           </p>
 78 |         </div>
 79 |         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:gap-y-10">
 80 |           <div
 81 |             className="mt-10 max-w-2xl sm:mt-10 lg:mt-10 lg:max-w-4xl bg-base-200 ring-2 ring-base-300 rounded-2xl p-5 shadow-xl"
 82 |             data-aos="zoom-in"
 83 |           >
 84 |             <p className="text-2xl text-center font-bold mb-6">
 85 |               Frontend Development
 86 |             </p>
 87 |             <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-6 lg:max-w-none lg:grid-cols-2 lg:gap-y-6">
 88 |               {frontend.map((frontend) => (
 89 |                 <div key={frontend.name} className="relative pl-16">
 90 |                   <dt className="text-base font-semibold leading-7">
 91 |                     <div className="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg">
 92 |                       <frontend.icon className="h-6 w-6" aria-hidden="true" />
 93 |                     </div>
 94 |                     {frontend.name}
 95 |                   </dt>
 96 |                   <dd className="mt-2 text-base leading-7">
 97 |                     <progress
 98 |                       className="progress w-3/4"
 99 |                       value={frontend.value}
100 |                       max="100"
101 |                     ></progress>
102 |                   </dd>
103 |                 </div>
104 |               ))}
105 |             </dl>
106 |           </div>
107 |           <div
108 |             className="mt-10 max-w-2xl sm:mt-10 lg:mt-10 lg:max-w-4xl bg-base-200 ring-2 ring-base-300 rounded-2xl p-5 shadow-xl"
109 |             data-aos="zoom-in"
110 |           >
111 |             <p className="text-2xl text-center font-bold mb-6">
112 |               Backend Development
113 |             </p>
114 |             <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-6 lg:max-w-none lg:grid-cols-2 lg:gap-y-6">
115 |               {backend.map((backend) => (
116 |                 <div key={backend.name} className="relative pl-16">
117 |                   <dt className="text-base font-semibold leading-7">
118 |                     <div className="absolute left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg">
119 |                       <backend.icon className="h-6 w-6" aria-hidden="true" />
120 |                     </div>
121 |                     {backend.name}
122 |                   </dt>
123 |                   <dd className="mt-2 text-base leading-7">
124 |                     <progress
125 |                       className="progress w-3/4"
126 |                       value={backend.value}
127 |                       max="100"
128 |                     ></progress>
129 |                   </dd>
130 |                 </div>
131 |               ))}
132 |             </dl>
133 |           </div>
134 |         </div>
135 |       </div>
136 |     </div>
137 |   );
138 | }
139 |

--------------------------------------------------------------------------------
/src/components/About.js:
--------------------------------------------------------------------------------
  1 | import { useEffect } from "react";
  2 | import {
  3 |   MapPinIcon,
  4 |   AtSymbolIcon,
  5 |   CalendarIcon,
  6 |   AcademicCapIcon,
  7 |   BriefcaseIcon,
  8 | } from "@heroicons/react/20/solid";
  9 | import AOS from "aos";
 10 | import "aos/dist/aos.css";
 11 | const features = [
 12 |   {
 13 |     name: "Age:",
 14 |     description: "18 years old",
 15 |     icon: CalendarIcon,
 16 |   },
 17 |   {
 18 |     name: "Email:",
 19 |     description: "name@example.com",
 20 |     icon: AtSymbolIcon,
 21 |   },
 22 |   {
 23 |     name: "Location:",
 24 |     description: "India, Earth",
 25 |     icon: MapPinIcon,
 26 |   },
 27 | ];
 28 | 
 29 | export default function About() {
 30 |   useEffect(() => {
 31 |     AOS.init({ duration: 2000 });
 32 |   }, []);
 33 |   return (
 34 |     <div
 35 |       className="relative isolate overflow-hidden  px-6 py-24 sm:py-32 lg:overflow-visible lg:px-0"
 36 |       id="about"
 37 |     >
 38 |       <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-start lg:gap-y-10">
 39 |         <div className="lg:col-span-2 lg:col-start-1 lg:row-start-1 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8">
 40 |           <div className="lg:pr-4">
 41 |             <div className="lg:max-w-lg">
 42 |               <h2 className="text-lg leading-7">Get to know more</h2>
 43 |               <p className="mt-2 text-4xl font-bold tracking-tight sm:text-6xl">
 44 |                 About Me
 45 |               </p>
 46 |               <p className="mt-6 text-lg leading-8" data-aos="fade-right">
 47 |                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
 48 |                 suscipit lobortis nisi, consequat semper lacus tempor sit amet.
 49 |                 Sed elit orci, pretium sed velit sit amet, venenatis pretium
 50 |                 magna. Nam pharetra dictum urna, non vestibulum mauris vulputate
 51 |                 ut. Sed eros nisi, dapibus vitae consequat non, mollis et
 52 |                 tortor. Maecenas bibendum nunc eu cursus maximus. Fusce
 53 |                 ultricies ornare neque, vel varius libero euismod eget. Nulla
 54 |                 sodales blandit lacus, id maximus quam interdum in. Morbi eu
 55 |                 velit ut mi semper sollicitudin finibus aliquam nisi.
 56 |                 Pellentesque habitant morbi tristique senectus et netus et
 57 |                 malesuada fames ac turpis egestas. Ut accumsan faucibus urna vel
 58 |                 placerat. Donec euismod dui enim, tincidunt suscipit mauris
 59 |                 lacinia vel. Fusce eget risus eget leo euismod porta. Aliquam
 60 |                 dapibus sapien vitae eros pulvinar, in auctor ligula porta. Nam
 61 |                 ac porttitor risus, nec blandit nulla. Nam erat erat, venenatis
 62 |                 quis scelerisque nec, rhoncus id mi. Suspendisse molestie nibh
 63 |                 purus, quis semper tellus pulvinar eget.
 64 |               </p>
 65 |             </div>
 66 |           </div>
 67 |         </div>
 68 |         <div
 69 |           className="-ml-12 -mt-12 p-12 lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:overflow-hidden"
 70 |           data-aos="fade-left"
 71 |         >
 72 |           <img
 73 |             className="w-[38rem] ring-2 ring-base-300 max-w-none rounded-xl shadow-xl sm:w-[57rem]"
 74 |             src="https://fastly.picsum.photos/id/473/5000/3333.jpg?hmac=OrrE0aUqLbLCJ9PAlSn0dIRHjOnuuuev9IjuO3PGZf8"
 75 |             alt="Person"
 76 |           />
 77 |         </div>
 78 |       </div>
 79 |       <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-start lg:gap-y-10">
 80 |         <div className="lg:col-span-2 lg:col-start-1 lg:mx-auto lg:grid lg:w-full lg:max-w-7xl lg:gap-x-8 lg:px-8">
 81 |           <div className="text-base leading-7">
 82 |             <div className="grid gap-x-6 sm:grid-cols-2">
 83 |               <div
 84 |                 className="ring-2 ring-base-300 bg-base-200 rounded-2xl mt-10 p-5 shadow-xl"
 85 |                 data-aos="zoom-in"
 86 |               >
 87 |                 <BriefcaseIcon className="h-5 w-5 mx-auto" aria-hidden="true" />
 88 |                 <h2 className=" text-2xl text-center font-bold tracking-tight">
 89 |                   Experience
 90 |                 </h2>
 91 |                 <p className="mt-3 list-item list-inside">
 92 |                   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 93 |                 </p>
 94 |                 <p className="mt-3 list-item list-inside">
 95 |                   Vestibulum vitae augue sit amet ex laoreet euismod sed eu dui.
 96 |                 </p>
 97 |                 <p className="mt-3 list-item list-inside">
 98 |                   Fusce et leo nec elit mollis sollicitudin.
 99 |                 </p>
100 |               </div>
101 |               <div
102 |                 className="ring-2 ring-base-300 bg-base-200 rounded-2xl mt-10 p-5 shadow-xl"
103 |                 data-aos="zoom-in"
104 |               >
105 |                 <AcademicCapIcon
106 |                   className="h-5 w-5 mx-auto"
107 |                   aria-hidden="true"
108 |                 />
109 |                 <h2 className=" text-2xl text-center font-bold tracking-tigh">
110 |                   Education
111 |                 </h2>
112 |                 <p className="mt-3 list-item list-inside">
113 |                   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
114 |                 </p>
115 |                 <p className="mt-3 list-item list-inside">
116 |                   Vestibulum vitae augue sit amet ex laoreet euismod sed eu dui.
117 |                 </p>
118 |                 <p className="mt-3 list-item list-inside">
119 |                   Fusce et leo nec elit mollis sollicitudin.
120 |                 </p>
121 |               </div>
122 |             </div>
123 |             <dl
124 |               className="mt-10 space-y-8 text-base leading-7 lg:max-w-none"
125 |               data-aos="fade-right"
126 |             >
127 |               {features.map((feature) => (
128 |                 <div key={feature.name} className="relative pl-9">
129 |                   <dt className="inline font-semibold">
130 |                     <feature.icon
131 |                       className="absolute left-1 top-1 h-5 w-5"
132 |                       aria-hidden="true"
133 |                     />
134 |                     {feature.name}
135 |                   </dt>{" "}
136 |                   <dd className="inline">{feature.description}</dd>
137 |                 </div>
138 |               ))}
139 |             </dl>
140 |           </div>
141 |         </div>
142 |       </div>
143 |     </div>
144 |   );
145 | }
146 |

--------------------------------------------------------------------------------
/src/components/Hero.js:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from "react";
  2 | import { Dialog } from "@headlessui/react";
  3 | import pfp from "../avatar.png";
  4 | import {
  5 |   Bars3Icon,
  6 |   XMarkIcon,
  7 |   SunIcon,
  8 |   MoonIcon,
  9 | } from "@heroicons/react/24/outline";
 10 | import { Link } from "react-scroll";
 11 | import { TypeAnimation } from "react-type-animation";
 12 | import AOS from "aos";
 13 | import "aos/dist/aos.css";
 14 | 
 15 | const navigation = [
 16 |   { name: "About Me", id: "about" },
 17 |   { name: "Skills", id: "skills" },
 18 |   { name: "Projects", id: "projects" },
 19 |   { name: "Contact Me", id: "contact" },
 20 | ];
 21 | 
 22 | export default function Hero() {
 23 |   const [theme, setTheme] = useState(
 24 |     localStorage.getItem("theme") ? localStorage.getItem("theme") : "light"
 25 |   );
 26 |   useEffect(() => {
 27 |     localStorage.setItem("theme", theme);
 28 |     const localTheme = localStorage.getItem("theme");
 29 |     document.querySelector("html").setAttribute("data-theme", localTheme);
 30 |   }, [theme]);
 31 |   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 32 |   useEffect(() => {
 33 |     AOS.init({ duration: 2000 });
 34 |   }, []);
 35 |   const handleToggle = (e) => {
 36 |     e.target.checked ? setTheme("dark") : setTheme("light");
 37 |   };
 38 |   return (
 39 |     <div>
 40 |       <header className="fixed bg-base-300 shadow-2xl shadow-neutral inset-x-0 top-0 z-50">
 41 |         <nav
 42 |           className="flex items-center justify-between p-6 lg:px-8"
 43 |           aria-label="Global"
 44 |         >
 45 |           <div className="flex lg:flex-1">
 46 |             <p className="-m-1.5 p-1.5 font-semibold">React Portfolio</p>
 47 |           </div>
 48 |           <div className="flex lg:hidden">
 49 |             <button
 50 |               type="button"
 51 |               className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5"
 52 |               onClick={() => setMobileMenuOpen(true)}
 53 |             >
 54 |               <span className="sr-only">Open main menu</span>
 55 |               <Bars3Icon className="h-6 w-6" aria-hidden="true" />
 56 |             </button>
 57 |           </div>
 58 |           <div className="hidden lg:flex lg:gap-x-12">
 59 |             {navigation.map((item) => (
 60 |               <Link
 61 |                 to={item.id}
 62 |                 spy={true}
 63 |                 smooth={true}
 64 |                 offset={50}
 65 |                 duration={500}
 66 |                 className="text-sm font-semibold leading-6 cursor-pointer relative w-fit block after:block after:content-[''] after:absolute after:h-[3px] after:bg-current after:w-full after:scale-x-0 after:hover:scale-x-100 after:transition after:duration-300 after:origin-left"
 67 |               >
 68 |                 {item.name}
 69 |               </Link>
 70 |             ))}
 71 |           </div>
 72 |           <div className="hidden lg:flex lg:flex-1 lg:justify-end">
 73 |             <label className="swap swap-rotate">
 74 |               <input
 75 |                 type="checkbox"
 76 |                 className="hidden"
 77 |                 onChange={handleToggle}
 78 |                 checked={theme === "light" ? false : true}
 79 |               />
 80 | 
 81 |               <SunIcon className="swap-off fill-current w-6 h-6" />
 82 |               <MoonIcon className="swap-on fill-current w-6 h-6" />
 83 |             </label>
 84 |           </div>
 85 |         </nav>
 86 |         <Dialog
 87 |           as="div"
 88 |           className="lg:hidden"
 89 |           open={mobileMenuOpen}
 90 |           onClose={setMobileMenuOpen}
 91 |         >
 92 |           <div className="fixed inset-0 z-50" />
 93 |           <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-2/3 overflow-y-auto backdrop-brightness-90 backdrop-blur-2xl bg-transparent px-6 py-6 sm:max-w-sm">
 94 |             <div className="flex items-center justify-between">
 95 |               <div className="-m-1.5 p-1.5">
 96 |                 <label className="swap swap-rotate">
 97 |                   <input
 98 |                     type="checkbox"
 99 |                     className="hidden"
100 |                     onChange={handleToggle}
101 |                     checked={theme === "light" ? false : true}
102 |                   />
103 |                   <SunIcon className="swap-off fill-current w-6 h-6" />
104 |                   <MoonIcon className="swap-on fill-current w-6 h-6" />
105 |                 </label>
106 |               </div>
107 |               <button
108 |                 type="button"
109 |                 className="-m-2.5 rounded-md p-2.5"
110 |                 onClick={() => setMobileMenuOpen(false)}
111 |               >
112 |                 <span className="sr-only">Close menu</span>
113 |                 <XMarkIcon className="h-6 w-6" aria-hidden="true" />
114 |               </button>
115 |             </div>
116 |             <div className="mt-6 flow-root">
117 |               <div className="-my-6 divide-y">
118 |                 <div className="space-y-2 py-6">
119 |                   {navigation.map((item) => (
120 |                     <Link
121 |                       to={item.id}
122 |                       spy={true}
123 |                       smooth={true}
124 |                       offset={50}
125 |                       duration={500}
126 |                       className="-mx-3 block rounded-lg px-3 py-2 font-semibold leading-7 btn btn-ghost"
127 |                     >
128 |                       {item.name}
129 |                     </Link>
130 |                   ))}
131 |                 </div>
132 |               </div>
133 |             </div>
134 |           </Dialog.Panel>
135 |         </Dialog>
136 |       </header>
137 |       <div className="py-24 sm:py-32">
138 |         <div className="mx-auto max-w-7xl px-6 lg:px-8">
139 |           <div
140 |             className="grid lg:grid-cols-2 md:grid-cols-2 sm:grid-cols-1 py-32"
141 |             data-aos="zoom-in"
142 |           >
143 |             <div className="grid justify-center items-center">
144 |               <img
145 |                 src={pfp}
146 |                 alt="Sohom Mondal"
147 |                 className="w-72 rounded-full drop-shadow-2xl"
148 |               />
149 |             </div>
150 |             <div className="grid justify-center items-center mt-3">
151 |               <div className="text-center">
152 |                 <div className="text-2xl tracking-tight sm:text-3xl">
153 |                   Hello, I'm
154 |                 </div>
155 |               </div>
156 |               <div className="text-center">
157 |                 <h1 className="text-4xl font-bold tracking-tight sm:text-6xl">
158 |                   Sohom Mondal
159 |                 </h1>
160 |                 <p className="mt-6 text-2xl leading-8">
161 |                   <TypeAnimation
162 |                     sequence={[
163 |                       "I'm a Frontend Developer",
164 |                       2000,
165 |                       "I'm a UI/UX Designer",
166 |                       2000,
167 |                       "I'm a Web Developer",
168 |                       2000,
169 |                     ]}
170 |                     speed={50}
171 |                     repeat={Infinity}
172 |                   />
173 |                 </p>
174 |                 <div className="mt-10 flex items-center justify-center gap-x-6">
175 |                   <p>
176 |                     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
177 |                     Nulla venenatis quis nibh ut laoreet. Sed imperdiet leo nec
178 |                     ex dapibus mollis.
179 |                   </p>
180 |                 </div>
181 |                 <div className="mt-10 flex items-center justify-center gap-x-4">
182 |                   <button className="btn btn-outline btn-square">
183 |                     <svg
184 |                       xmlns="http://www.w3.org/2000/svg"
185 |                       fill="currentColor"
186 |                       className="h-8 w-8"
187 |                       viewBox="0 0 16 16"
188 |                     >
189 |                       <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
190 |                     </svg>
191 |                   </button>
192 |                   <button className="btn btn-outline btn-square">
193 |                     <svg
194 |                       xmlns="http://www.w3.org/2000/svg"
195 |                       className="h-8 w-8"
196 |                       fill="currentColor"
197 |                       viewBox="0 0 16 16"
198 |                     >
199 |                       <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
200 |                     </svg>
201 |                   </button>
202 |                 </div>
203 |               </div>
204 |             </div>
205 |           </div>
206 |         </div>
207 |       </div>
208 |     </div>
209 |   );
210 | }
211 |

--------------------------------------------------------------------------------

React Portfolio

Browse my recent

73 | 74 | 77 |

Get in touch

React Portfolio

Browse my recent

73 | 74 | 75 | {project.name} 76 | 77 |

Get in touch

73 | 74 | 77 |