misc: removed last updated, added typewriter effect

lassiecoder · Apr 10, 2024 · e456308 · e456308
1 parent 95444e2
commit e456308
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 30 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,8 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    basePath: "/portfolio",
-    output: "export", 
-    reactStrictMode: true,
+    // basePath: "/portfolio",
+    // output: "export", 
+    // reactStrictMode: true,
     images: {
         domains: ['github.com', 'user-images.githubusercontent.com'],
       },

diff --git a/package.json b/package.json
@@ -31,7 +31,8 @@
     "react-ga4": "^2.1.0",
     "react-icons": "^5.0.1",
     "sonner": "^1.4.41",
-    "tailwind-merge": "^2.2.2"
+    "tailwind-merge": "^2.2.2",
+    "typewriter-effect": "^2.21.0"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/src/app/pages/contact.tsx b/src/app/pages/contact.tsx
@@ -1,33 +1,34 @@
 "use client";
 
-import React, { useEffect, useRef, useState } from 'react';
-import { BiCoffeeTogo } from "react-icons/bi";
+import React from 'react';
+import Typewriter from 'typewriter-effect';
 
-import { motion, AnimatePresence } from "framer-motion";
-import { cn } from '@/components/utils/cn';
 
 
 const ContactForm = () => {
-  const [lastUpdated, setLastUpdated] = useState("");
-
-	useEffect(() => {
-		// Fetch the last modified date of your project here
-		const lastModifiedDate = new Date(document.lastModified);
-		// Format the date as needed (e.g., "Month Day, Year")
-		const formattedDate = lastModifiedDate.toLocaleDateString("en-US", {
-		  year: "numeric",
-		  month: "long",
-		  day: "numeric"
-		});
-		// Set the formatted date to the state
-		setLastUpdated(formattedDate);
-	}, []);
-
 
   return (
     <div className="max-w-7xl mx-auto px-4 mt-44 ">
         <div className="px-4">
-            <h2 className="md:text-4xl text-2xl lg:text-4xl font-bold text-left pb-12 xl:pl-0 lg:mb-0 sm:mb-0 ">Ways to Connect with Me</h2>
+            <h2 className="md:text-4xl text-2xl lg:text-4xl font-bold text-left pb-12 xl:pl-0 lg:mb-0 sm:mb-0 ">
+              {/* Ways to Connect with Me */}
+              <div className="flex header-container">
+          <div className="mr-4 title-box">
+            <p className="text">I'm open to </p>
+          </div>
+          <div className="subtitle-box">
+            <p className="text">
+              <Typewriter
+                options={{
+                  strings: ['Opportunities', 'Suggestions', 'Collaboration', 'Feedback', 'Networking'],
+                  autoStart: true,
+                  loop: true,
+                }}
+              />
+            </p>
+          </div>
+        </div>
+              </h2>
         </div>
         <h3 className="md:text-xl text-sm lg:text-xl font-extralight text-left relative z-20 text-gray-400 max-w-7xl pb-8 lg:mb-4 pl-4">
           Thank you for your interest in getting in touch with me. I&apos;m eager to explore new opportunities, receive feedback or suggestions, collaborate on projects, and expand my network.
@@ -37,7 +38,7 @@ const ContactForm = () => {
           Additionally, if you prefer to connect via social media, you can find me on Instagram at<a className="bg-gradient-to-r from-pink-500 to-gray-400 text-transparent bg-clip-text font-medium ml-2" href='https://instagram.com/lassiecoder' target='_blank'>https://instagram.com/lassiecoder</a>.
         </h3>
         <div className="text-sm pt-60 sm:mt-20 font-extralight text-center relative z-20 text-gray-400 max-w-7xl pb-8">
-          Always be caffeinated! | Last updated on {lastUpdated} | © Priyanka Sharma (lassiecoder)
+          Always be caffeinated! | © Priyanka Sharma (lassiecoder)
         </div>
     </div>
   );

diff --git a/src/app/pages/homescreen.tsx b/src/app/pages/homescreen.tsx
@@ -1,8 +1,7 @@
 import Footer from "@/components/footer";
 import Navbar from "@/components/navbar";
 import { SparklesCore } from "@/components/ui/sparkles";
-
-
+import Typewriter from 'typewriter-effect';
 
 
 export default function HomeScreen() {
@@ -12,11 +11,27 @@ export default function HomeScreen() {
    <Footer />
 
       <div className="h-screen w-full bg-black flex flex-col items-center justify-center overflow-hidden rounded-md">
-        <h1 className="md:text-6xl text-2xl lg:text-7xl font-bold text-center text-white relative z-20 mt-30">
-          Software Developer
+        <h1 className="md:text-6xl text-2xl lg:text-6xl font-bold text-center text-white relative z-20 mt-30">
+        <div className="flex header-container">
+          <div className="mr-4 title-box">
+            <p className="text">Hi! I'm </p>
+          </div>
+          <div className="subtitle-box">
+            <p className="text">
+              <Typewriter
+                options={{
+                  strings: ['lassiecoder', 'Priyanka Sharma'],
+                  autoStart: true,
+                  loop: true,
+                }}
+              />
+            </p>
+          </div>
+        </div>
+
         </h1>
         <h3 className="md:text-xl text-sm lg:text-xl font-extralight text-center relative z-20 text-gray-400 mt-10 max-w-7xl mb-2 lg:mb-4 pl-4 pr-4">
-          I’m a Software Developer, skilled at crafting both mobile and web solutions. <br />
+          Software Developer, skilled at crafting both mobile and web solutions. <br />
           I thrive on challenges, love learning new skills, and aim to write clean, professional code. <br />
           I constantly seek opportunities to grow as a developer.
         </h3>

diff --git a/yarn.lock b/yarn.lock
@@ -2453,6 +2453,11 @@ path-type@^4.0.0:
   resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
@@ -2583,6 +2588,13 @@ queue-microtask@^1.2.2:
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+raf@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
 react-dom@^18:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
@@ -2824,6 +2836,7 @@ streamsearch@^1.1.0:
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -3109,6 +3122,14 @@ typescript@^5:
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz"
   integrity sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==
 
+typewriter-effect@^2.21.0:
+  version "2.21.0"
+  resolved "https://registry.yarnpkg.com/typewriter-effect/-/typewriter-effect-2.21.0.tgz#7150f12fd2c188248ab2b2b031f77c0663d24c54"
+  integrity sha512-Y3VL1fuJpUBj0gS4OTXBLzy1gnYTYaBuVuuO99tGNyTkkub5CXi+b/hsV7Og9fp6HlhogOwWJwgq7iXI5sQlEg==
+  dependencies:
+    prop-types "^15.8.1"
+    raf "^3.4.1"
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz"