ByteGrad · EchoSierraN · Aug 15, 2024 · Aug 15, 2024 · Aug 15, 2024 · Aug 15, 2024
diff --git a/.gitignore b/.gitignore
@@ -26,10 +26,12 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
diff --git a/actions/sendEmail.ts b/actions/sendEmail.ts
@@ -27,8 +27,8 @@ export const sendEmail = async (formData: FormData) => {
   try {
     data = await resend.emails.send({
       from: "Contact Form <[email protected]>",
-      to: "bytegrad@gmail.com",
-      subject: "Message from contact form",
+      to: "echosierran@gmail.com",
+      subject: "Message from my website contact form",
       reply_to: senderEmail,
       react: React.createElement(ContactFormEmail, {
         message: message,

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -10,8 +10,8 @@ import { Toaster } from "react-hot-toast";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: "Ricardo | Personal Portfolio",
-  description: "Ricardo is a full-stack developer with 8 years of experience.",
+  title: "Elias | Personal Website",
+  description: "Elias is a full-stack developer with 2 years of experience.",
 };
 
 export default function RootLayout({

diff --git a/app/page.tsx b/app/page.tsx
@@ -5,17 +5,23 @@ import Intro from "@/components/intro";
 import Projects from "@/components/projects";
 import SectionDivider from "@/components/section-divider";
 import Skills from "@/components/skills";
+import Head from "next/head";
 
 export default function Home() {
   return (
-    <main className="flex flex-col items-center px-4">
-      <Intro />
-      <SectionDivider />
-      <About />
-      <Projects />
-      <Skills />
-      <Experience />
-      <Contact />
-    </main>
+    <div>
+      <Head>
+        <link rel="icon" href="/favicon.png" />
+      </Head>
+      <main className="flex flex-col items-center px-4">
+        <Intro />
+        <SectionDivider />
+        <About />
+        <Projects />
+        <Skills />
+        <Experience />
+        <Contact />
+      </main>
+    </div>
   );
 }
diff --git a/components/about.tsx b/components/about.tsx
@@ -18,31 +18,22 @@ export default function About() {
       id="about"
     >
       <SectionHeading>About me</SectionHeading>
-      <p className="mb-3">
-        After graduating with a degree in{" "}
-        <span className="font-medium">Accounting</span>, I decided to pursue my
-        passion for programming. I enrolled in a coding bootcamp and learned{" "}
-        <span className="font-medium">full-stack web development</span>.{" "}
-        <span className="italic">My favorite part of programming</span> is the
-        problem-solving aspect. I <span className="underline">love</span> the
-        feeling of finally figuring out a solution to a problem. My core stack
-        is{" "}
-        <span className="font-medium">
-          React, Next.js, Node.js, and MongoDB
-        </span>
-        . I am also familiar with TypeScript and Prisma. I am always looking to
-        learn new technologies. I am currently looking for a{" "}
-        <span className="font-medium">full-time position</span> as a software
-        developer.
+      <p className="mb-6">
+        I’ve always given emphasis to a suitable development lifecycle,
+        customized to prioritize release without compromising app architecture
+        or functional integrity. I hold in high regard team mates from different
+        departments, and it has long been my responsibility to interact with
+        clients and stakeholders to communicate user requirements, deliver
+        updates, managing crisis, and overall overseeing of operations.
       </p>
 
       <p>
-        <span className="italic">When I'm not coding</span>, I enjoy playing
-        video games, watching movies, and playing with my dog. I also enjoy{" "}
-        <span className="font-medium">learning new things</span>. I am currently
-        learning about{" "}
-        <span className="font-medium">history and philosophy</span>. I'm also
-        learning how to play the guitar.
+        <span>When I'm not coding I enjoy </span>
+        <span className="italic">playing video games, watching movies, </span>
+        and
+        <span className="italic"> spending time with friends.</span> I enjoy
+        socializing with strangers that share my passion. I like building giant
+        things out of small things that have harmony. I like order (66).
       </p>
     </motion.section>
   );

diff --git a/components/contact.tsx b/components/contact.tsx
@@ -34,7 +34,7 @@ export default function Contact() {
       <p className="text-gray-700 -mt-6 dark:text-white/80">
         Please contact me directly at{" "}
         <a className="underline" href="mailto:[email protected]">
-          example@gmail.com
+          echosierran@gmail.com
         </a>{" "}
         or through this form.
       </p>

diff --git a/components/intro.tsx b/components/intro.tsx
@@ -1,18 +1,28 @@
 "use client";
 
 import Image from "next/image";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { motion } from "framer-motion";
 import Link from "next/link";
 import { BsArrowRight, BsLinkedin } from "react-icons/bs";
 import { HiDownload } from "react-icons/hi";
 import { FaGithubSquare } from "react-icons/fa";
 import { useSectionInView } from "@/lib/hooks";
 import { useActiveSectionContext } from "@/context/active-section-context";
+import { fetchPhotoURL } from "@/lib/firebaseUtil";
 
 export default function Intro() {
   const { ref } = useSectionInView("Home", 0.5);
   const { setActiveSection, setTimeOfLastClick } = useActiveSectionContext();
+  const [photoURL, setPhotoURL] = useState<string | null>(null);
+
+  useEffect(() => {
+    const getPhoto = async () => {
+      const url = await fetchPhotoURL("suit1_cropped.jpg");
+      setPhotoURL(url);
+    };
+    getPhoto();
+  }, [setPhotoURL]);
 
   return (
     <section
@@ -31,8 +41,8 @@ export default function Intro() {
             }}
           >
             <Image
-              src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?fit=crop&w=368&h=368&q=100"
-              alt="Ricardo portrait"
+              src={photoURL ?? ""}
+              alt="Elias Shemsu"
               width="192"
               height="192"
               quality="95"
@@ -62,15 +72,25 @@ export default function Intro() {
         initial={{ opacity: 0, y: 100 }}
         animate={{ opacity: 1, y: 0 }}
       >
-        <span className="font-bold">Hello, I'm Ricardo.</span> I'm a{" "}
-        <span className="font-bold">full-stack developer</span> with{" "}
-        <span className="font-bold">8 years</span> of experience. I enjoy
-        building <span className="italic">sites & apps</span>. My focus is{" "}
-        <span className="underline">React (Next.js)</span>.
+        <span className="font-bold">Hello, I'm Elias Shemsu.</span> I'm a{" "}
+        <span className="font-bold">FULL STACK </span>
+        <span>and </span>
+        <span className="font-bold">NATIVE ANDROID</span>
+        <span> developer. </span>
+        <span>I've got about </span>
+        <span className="font-bold">5 years</span>
+        <span>
+          {" "}
+          of industry experience in software development. I specialize in{" "}
+        </span>
+        <span className="underline">Next.js</span>
+        <span> and </span>
+        <span className="underline">Native Android</span>
+        <span> app development.</span>
       </motion.h1>
 
       <motion.div
-        className="flex flex-col sm:flex-row items-center justify-center gap-2 px-4 text-lg font-medium"
+        className="flex flex-col sm:flex-row items-center justify-center gap-4 px-4 text-lg font-medium"
         initial={{ opacity: 0, y: 100 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{
@@ -79,7 +99,7 @@ export default function Intro() {
       >
         <Link
           href="#contact"
-          className="group bg-gray-900 text-white px-7 py-3 flex items-center gap-2 rounded-full outline-none focus:scale-110 hover:scale-110 hover:bg-gray-950 active:scale-105 transition"
+          className="group bg-gray-900 text-white px-5 py-3 flex items-center gap-2 rounded-full outline-none focus:scale-110 hover:scale-110 hover:bg-gray-950 active:scale-105 transition"
           onClick={() => {
             setActiveSection("Contact");
             setTimeOfLastClick(Date.now());
@@ -90,7 +110,7 @@ export default function Intro() {
         </Link>
 
         <a
-          className="group bg-white px-7 py-3 flex items-center gap-2 rounded-full outline-none focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10"
+          className="group bg-white px-5 py-3 flex items-center gap-2 rounded-full outline-none focus:scale-110 hover:scale-110 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10"
           href="/CV.pdf"
           download
         >
@@ -100,15 +120,15 @@ export default function Intro() {
 
         <a
           className="bg-white p-4 text-gray-700 hover:text-gray-950 flex items-center gap-2 rounded-full focus:scale-[1.15] hover:scale-[1.15] active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 dark:text-white/60"
-          href="https://linkedin.com"
+          href="https://www.linkedin.com/in/elias-shemsu-nasir-26515b114/"
           target="_blank"
         >
           <BsLinkedin />
         </a>
 
         <a
           className="bg-white p-4 text-gray-700 flex items-center gap-2 text-[1.35rem] rounded-full focus:scale-[1.15] hover:scale-[1.15] hover:text-gray-950 active:scale-105 transition cursor-pointer borderBlack dark:bg-white/10 dark:text-white/60"
-          href="https://github.com"
+          href="https://github.com/EchoSierraN"
           target="_blank"
         >
           <FaGithubSquare />

diff --git a/lib/data.ts b/lib/data.ts
@@ -5,6 +5,15 @@ import { LuGraduationCap } from "react-icons/lu";
 import corpcommentImg from "@/public/corpcomment.png";
 import rmtdevImg from "@/public/rmtdev.png";
 import wordanalyticsImg from "@/public/wordanalytics.png";
+import inventoryManagement1 from "@/public/inventoryManagement1.png"
+import flowiusManage2 from "@/public/flowiusManage2.png"
+import flowiusPay5 from "@/public/flowiusPay5.jpg"
+import theRainyDayShelf1 from "@/public/theRainyDayShelf1.png"
+import brainFlow1 from "@/public/brainFlow1.png"
+import { MdGamepad } from "react-icons/md";
+import { FaMobileAlt } from "react-icons/fa";
+import { MdOutlineMonitor } from "react-icons/md";
+import { LuMonitor } from "react-icons/lu";
 
 export const links = [
   {
@@ -35,56 +44,96 @@ export const links = [
 
 export const experiencesData = [
   {
-    title: "Graduated bootcamp",
-    location: "Miami, FL",
+    title: "Unity Game UI Developer / Programmer",
+    location: "Chewata Awaqi",
     description:
-      "I graduated after 6 months of studying. I immediately found a job as a front-end developer.",
-    icon: React.createElement(LuGraduationCap),
-    date: "2019",
+      "Served as the solo developer of Mela, an interactive storytelling game where the choices you make will impact the ending.",
+    icon: React.createElement(MdGamepad),
+    date: "2019 - 2020",
   },
   {
-    title: "Front-End Developer",
-    location: "Orlando, FL",
+    title: "Lead Android App Developer",
+    location: "3BL Enterprises",
     description:
-      "I worked as a front-end developer for 2 years in 1 job and 1 year in another job. I also upskilled to the full stack.",
-    icon: React.createElement(CgWorkAlt),
-    date: "2019 - 2021",
+      "Lead developer for Flowius Manage, Flowius Pay and Flowius Survey Android apps.",
+    icon: React.createElement(FaMobileAlt),
+    date: "2022 - 2024",
   },
   {
-    title: "Full-Stack Developer",
-    location: "Houston, TX",
+    title: "Lead Front End Developer",
+    location: "3BL Enterprises",
     description:
-      "I'm now a full-stack developer working as a freelancer. My stack includes React, Next.js, TypeScript, Tailwind, Prisma and MongoDB. I'm open to full-time opportunities.",
-    icon: React.createElement(FaReact),
-    date: "2021 - present",
+      "Lead developer for Flowius Manage and Flowius Pay web apps.",
+    icon: React.createElement(MdOutlineMonitor),
+    date: "2022 - 2024",
   },
+  // {
+  //   title: "Graduated bootcamp",
+  //   location: "Miami, FL",
+  //   description:
+  //     "I graduated after 6 months of studying. I immediately found a job as a front-end developer.",
+  //   icon: React.createElement(LuGraduationCap),
+  //   date: "2019",
+  // },
+  // {
+  //   title: "Front-End Developer",
+  //   location: "Orlando, FL",
+  //   description:
+  //     "I worked as a front-end developer for 2 years in 1 job and 1 year in another job. I also upskilled to the full stack.",
+  //   icon: React.createElement(CgWorkAlt),
+  //   date: "2019 - 2021",
+  // },
+  // {
+  //   title: "Full-Stack Developer",
+  //   location: "Houston, TX",
+  //   description:
+  //     "I'm now a full-stack developer working as a freelancer. My stack includes React, Next.js, TypeScript, Tailwind, Prisma and MongoDB. I'm open to full-time opportunities.",
+  //   icon: React.createElement(FaReact),
+  //   date: "2021 - present",
+  // },
 ] as const;
 
 export const projectsData = [
   {
-    title: "CorpComment",
+    title: "StockMaster",
     description:
-      "I worked as a full-stack developer on this startup project for 2 years. Users can give public feedback to companies.",
-    tags: ["React", "Next.js", "MongoDB", "Tailwind", "Prisma"],
-    imageUrl: corpcommentImg,
+      "A service that manages inventory and interprets data from collected data.",
+    tags: ["Next.js", "Redux", "Tailwind", "Material UI", "Express.js", "PostgreSQL", "Prisma", "EC2", "RDS", "Amplify", "S3"],
+    imageUrl: inventoryManagement1,
   },
   {
-    title: "rmtDev",
+    title: "The Rainy Day Shelf",
     description:
-      "Job board for remote developer jobs. I was the front-end developer. It has features like filtering, sorting and pagination.",
-    tags: ["React", "TypeScript", "Next.js", "Tailwind", "Redux"],
-    imageUrl: rmtdevImg,
+      "A store front for digital assets.",
+    tags: ["Next.js", "PostgreSQL", "ShadCN", "Tailwind", "Prisma"],
+    imageUrl: theRainyDayShelf1,
   },
   {
-    title: "Word Analytics",
+    title: "BrainFlow",
     description:
-      "A public web app for quick analytics on text. It shows word count, character count and social media post limits.",
-    tags: ["React", "Next.js", "SQL", "Tailwind", "Framer"],
-    imageUrl: wordanalyticsImg,
+      "An AI powered chatbot that helps you contextually recall recorded information from the heaps of data it's fed.",
+    tags: ["Next.js", "TypeScript", "ShadCN", "Tailwind", "ClerK", "MongoDB", "Prisma"],
+    imageUrl: brainFlow1,
+  },
+  {
+    title: "Flowius Manage",
+    description:
+      "A proprietary management app for 3BL Enterprises. Users can monitor and manage project activities, inventory, and special cases.",
+    tags: ["React", "TypeScript", "Firebase", "Kotlin", "Android SDK", "Mapbox"],
+    imageUrl: flowiusManage2,
+  },
+  {
+    title: "Flowius Pay",
+    description:
+      "A proprietary management app for 3BL Enterprises. Users can record, monitor and interpret customer payment information.",
+    tags: ["React", "JavaScript", "Firebase", "Kotlin", "Android SDK", "Mapbox"],
+    imageUrl: flowiusPay5,
   },
 ] as const;
 
 export const skillsData = [
+  "Kotlin",
+  "Android SDK",
   "HTML",
   "CSS",
   "JavaScript",
@@ -101,7 +150,5 @@ export const skillsData = [
   "Apollo",
   "Express",
   "PostgreSQL",
-  "Python",
-  "Django",
   "Framer Motion",
 ] as const;