Merge pull request #2 from steadyfall/dev

merge website in dev

Author: steadyfall

public/images/geotab.jpeg

@@ -15,11 +15,12 @@ const About = () => {
         <BlurFade delay={BLUR_FADE_DELAY * 4}>
           <div className="text-gray-700 dark:text-gray-300">
             <p className="mb-2">
-              I am a <Highlight text="junior"/> at the <Highlight text="University of Waterloo"/>, pursuing a major in <Highlight text="Computational Mathematics"/>.
-              With a <Highlight text="passion for technology and innovation"/>, I am constantly exploring new
-              areas in <Highlight text="software development"/> and <Highlight text="artificial intelligence"/>.
-              I am eager to work in areas that leverage the combined potential of <Highlight text="machine learning"/> and
-              software development, regardless of traditional boundaries.
+            I am a <Highlight text="software developer" color="red"/> based in <Highlight text="Toronto" color="red"/> and currently a <Highlight text="junior" /> pursuing a 
+            <Highlight text="Computational Mathematics" /> major at the <Highlight text="University of Waterloo" />.
+            I am passionate about tech and innovation, always exploring the <span className="underline underline-offset-4">
+              intersection of software
+              development and AI.
+            </span>
             </p>
             {/* <p className="mb-2">
               Outside of academics and professional career, I enjoy contributing to open-source projects, working on side projects, participating in hackathons and playing
@@ -37,7 +38,8 @@ const About = () => {
               <Highlight text="Impractical Jokers" color="pink"/>.
             </div> */}
             <p className="mb-2">
-            You can find me <Highlight text="re-watching" color="pink"/> any one of these TV series:&nbsp;
+            You can find me <Highlight text="re-watching" color="pink"/> any one of these series:&nbsp;
+            <Highlight text="Breaking Bad" color="pink"/>,&nbsp;
             <Highlight text="Silicon Valley" color="pink"/>,&nbsp;
             <Highlight text="South Park" color="pink"/> and <Highlight text="The Office" color="pink"/>.
             </p>

public/resume.pdf

@@ -11,14 +11,15 @@ export type HeaderProps = {
     name: string,
     pronouns: string,
     currentEducation: string,
-    currentJob?: string,
+    currentJob?: string[],
+    basedFrom?: string,
     githubLink: string,
     linkedinLink: string,
     email: string,
     resumeFile: string,
 }
 
-const Header = ({name, pronouns, currentEducation, currentJob, githubLink, linkedinLink, email, resumeFile}: HeaderProps) => {
+const Header = ({name, pronouns, currentEducation, currentJob, basedFrom, githubLink, linkedinLink, email, resumeFile}: HeaderProps) => {
     const isDesktop = useMediaQuery('(min-width: 768px)')
     const [copied, setCopiedId] = useState<string>();
     useEffect(() => { setTimeout(() => { setCopiedId(undefined); }, 3000) }, [copied]);
@@ -81,10 +82,7 @@ const Header = ({name, pronouns, currentEducation, currentJob, githubLink, linke
                     </div>
                     <div className="mt-4 text-sm md:text-base lg:text-lg">
                         {pronouns && (<BlurFade delay={BLUR_FADE_DELAY}>
-                            <p>{pronouns}</p>
-                        </BlurFade>)}
-                        {currentJob && (<BlurFade delay={BLUR_FADE_DELAY}>
-                            <p>{currentJob}</p>
+                            <p className="italic text-xs md:text-sm lg:text-base">{pronouns}</p>
                         </BlurFade>)}
                         {currentEducation && (<BlurFade delay={BLUR_FADE_DELAY}>
                             <p>{currentEducation}</p>

src/components/About.tsx

@@ -8,15 +8,19 @@ export type ExperienceTileProps = {
   companyLink: string
   position: string
   period: string
-  responsibilities: string[]
+  responsibilities?: string[]
 }
 
 
 
 export function ExperienceTile({ companyLogo, companyName, companyLink, position, period, responsibilities }: ExperienceTileProps) {
   const isDesktop = useMediaQuery('(min-width: 768px)')
   return (
-    <div className="mb-6 flex items-center">
+    <div className={
+      (
+        !(responsibilities && responsibilities.length > 0) && !isDesktop ? "-mb-6" : "mb-6"
+      ) + " " + "flex items-center"
+    }>
         <div className="relative flex-grow md:pl-12">
               <div className="bg-white aspect-square absolute left-[5px] top-3 rounded-lg">
                   {/* // center the bullet : `top-1/2 transform -translate-y-1/2` */}
@@ -44,13 +48,15 @@ export function ExperienceTile({ companyLogo, companyName, companyLink, position
                     </div>
                     {isDesktop && (<h3 className="text-gray-600 font-typewriter dark:text-gray-400">{period}</h3>)}
                 </div>
-                <div className="mt-4">
+                {responsibilities && responsibilities.length > 0 &&
+                  <div className="mt-4">
                     <ul className="list-inside text-gray-700 dark:text-gray-300 space-y-1">
                     {responsibilities.map((responsibility, index) => (
                         <li key={index}>- {responsibility}</li>
                     ))}
                     </ul>
-                </div>
+                  </div>
+                }
             </div>
         </div>
     </div>

src/components/Header.tsx

@@ -9,14 +9,23 @@ export const detailsForMetadata = {
 export const personalDetails = {
     name: "Himank Dave",
     pronouns: "he/him/his",
-    currentEducation: "3A Computational Mathematics @ UWaterloo",
+    currentEducation: "Computational Mathematics @ University of Waterloo",
+    currentJob: ["Software Developer in Test Intern", "Geotab"],
+    basedFrom: "Toronto",
     githubLink: "https://github.com/steadyfall",
     linkedinLink: "https://www.linkedin.com/in/himank-dave/",
     email: "[email protected]",
     resumeFile: "resume.pdf",
 }
 
 export const experiences = [
+    {
+        companyLogo: "/images/geotab.jpeg",
+        companyName: "Geotab",
+        companyLink: "https://geotab.com/",
+        position: "Test Automation Developer Intern",
+        period: "Jan 2025 - Present",
+    },
     {
         companyLogo: "/images/cactuscreatives.png",
         companyName: "Cactus Creatives",