Fix/styling issues (#28)

* chore: hidden meme easter egg * chore: nextjs white image * chore: added company name in experience in landing * chore: company link in resume section for about page * chore: removed link from service card * chore: resume page reuses resume from about * chore: laptop margin and position fixes * chore: added link if tribute person is featured * chore: increase line height landing intro * chore: added link to resume page * chore: tributes page * chore: zIndex fix navbar and tributes * chore: individual tribute page work in progress * 0.2.0
kunalkeshan · Feb 7, 2023 · a3b4169 · a3b4169 · vercel · Feb 7, 2023
1 parent b797de4
commit a3b4169
Show file tree

Hide file tree

Showing 18 changed files with 295 additions and 40 deletions.
diff --git a/components/about/Intro.tsx b/components/about/Intro.tsx
@@ -31,7 +31,7 @@ const AboutIntro = () => {
         </Link>
       </div>
       <div className="mx-auto mt-8 flex items-center justify-center gap-8">
-        <div className="h-full max-h-[160px] w-full max-w-[160px] overflow-hidden rounded-full border-2 border-black shadow-3d-small-reverse transition-all duration-300 hover:shadow-3d-reverse md:absolute md:top-1/3 md:-left-12 md:max-h-[200px] md:max-w-[200px] md:-translate-y-1/2 lg:left-4">
+        <div className="h-full max-h-[160px] w-full max-w-[160px] overflow-hidden rounded-full border-2 border-black shadow-3d-small-reverse transition-all duration-300 hover:shadow-3d-reverse md:absolute md:top-1/3 md:-left-12 md:max-h-[200px] md:max-w-[200px] md:-translate-y-1/2 lg:left-4 lg:top-[44%]">
           <Image
             src={IMAGE_SOURCE.ART_IMAGE}
             alt="(～￣▽￣)～"
@@ -40,7 +40,7 @@ const AboutIntro = () => {
             className="h-auto w-full object-contain"
           />
         </div>
-        <div className="h-full max-h-[160px] w-full max-w-[160px] overflow-hidden rounded-full border-2 border-black shadow-3d-small transition-all duration-300 hover:shadow-3d md:absolute md:top-1/4 md:-right-12 md:max-h-[200px] md:max-w-[200px] md:-translate-y-1/2 lg:right-4">
+        <div className="h-full max-h-[160px] w-full max-w-[160px] overflow-hidden rounded-full border-2 border-black shadow-3d-small transition-all duration-300 hover:shadow-3d md:absolute md:top-1/4 md:-right-12 md:max-h-[200px] md:max-w-[200px] md:-translate-y-1/2 lg:right-4 lg:top-[33%]">
           <Image
             src={IMAGE_SOURCE.PROFILE_IMAGE}
             alt="(～￣▽￣)～"

diff --git a/components/about/Resume.tsx b/components/about/Resume.tsx
@@ -36,7 +36,13 @@ const ResumeCard: React.FC<ResumeCardDataType> = ({
           />
         </Link>
         <div className="md:max-w-sm lg:max-w-lg">
-          <h3 className="mt-4 text-xl font-bold lg:text-2xl">{position}</h3>
+          <h3 className="mt-4 text-xl font-bold lg:text-2xl">{position},</h3>
+          <Link
+            href={website}
+            className="text-lg font-semibold underline-offset-2 transition-all duration-300 hover:text-portfolio-accent hover:underline"
+          >
+            {company}
+          </Link>
           <p className="mt-4 font-[Montserrat] text-sm font-semibold text-themes-txt_secondary lg:text-base">
             {description}
           </p>
@@ -57,7 +63,7 @@ const ResumeCard: React.FC<ResumeCardDataType> = ({
 
 const Resume = () => {
   return (
-    <div className="mx-auto mt-20 max-w-7xl px-5">
+    <div className="mx-auto my-20 max-w-7xl px-5">
       <h2 className="text-center text-3xl font-bold">
         Take a look at my{" "}
         <span className="leading-ti bg-portfolio-main px-1">resume</span>

diff --git a/components/landing/About.tsx b/components/landing/About.tsx
@@ -29,7 +29,7 @@ const About = () => {
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
       transition={{ delay: 0.4, type: "spring" }}
-      className="mx-auto mt-20 grid min-h-screen max-w-7xl scroll-mt-20 grid-cols-1 gap-16 px-5 text-center lg:mt-0 lg:grid-cols-2 lg:text-left"
+      className="mx-auto mt-20 grid min-h-screen max-w-7xl scroll-mt-20 grid-cols-1 gap-16 px-5 text-center lg:grid-cols-2 lg:text-left xl:mt-5"
     >
       <div className="order-last flex w-full items-center justify-center lg:order-none">
         <div className="h-full max-h-[32rem] w-full max-w-lg overflow-hidden rounded-full shadow-3d transition-all duration-300 hover:shadow-3d-hover">

diff --git a/components/landing/Experience.tsx b/components/landing/Experience.tsx
@@ -41,7 +41,13 @@ const ExperienceCard: React.FC<ExperienceDataType> = ({
       </div>
       <hr className="border-2 border-b-black" />
       <div className="px-10 py-5">
-        <h3 className="text-2xl font-semibold">{position}</h3>
+        <h3 className="text-2xl font-semibold">{position},</h3>
+        <Link
+          href={website}
+          className="text-lg font-semibold underline-offset-2 transition-all duration-300 hover:text-portfolio-accent hover:underline"
+        >
+          {company}
+        </Link>
         <p className="mt-4 font-semibold text-themes-txt_secondary">
           {description}
         </p>

diff --git a/components/landing/Intro.tsx b/components/landing/Intro.tsx
@@ -30,16 +30,18 @@ const Intro = () => {
       <div className="mx-auto flex w-full max-w-lg flex-col justify-center text-center md:max-w-[640px] md:text-left">
         <h1 className="text-3xl font-semibold sm:text-4xl md:text-7xl">
           I&apos;m{" "}
-          <span className="whitespace-nowrap bg-portfolio-main px-1 text-white">
+          <span className="whitespace-nowrap bg-portfolio-main px-1 leading-tight text-white">
             Kunal Keshan
           </span>
           ,
-          <div className="mt-4">
+          <div className="mt-4 leading-tight">
             a <Typewriter options={typewriterOptions} />
           </div>
           <div className="mt-4">
             from{" "}
-            <span className="bg-portfolio-accent px-1 text-white">Chennai</span>
+            <span className="bg-portfolio-accent px-1 leading-tight text-white">
+              Chennai
+            </span>
           </div>
         </h1>
         <h2 className="mt-4 font-[Montserrat] font-semibold text-themes-txt_secondary md:text-lg">

diff --git a/components/landing/Portfolio.tsx b/components/landing/Portfolio.tsx
@@ -104,7 +104,7 @@ const Portfolio: React.FC<{ showTill?: number }> = ({ showTill }) => {
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
       transition={{ delay: 0.4, type: "spring" }}
-      className="mx-auto mt-20 min-h-screen max-w-7xl px-5 lg:mt-0"
+      className="mx-auto mt-20 min-h-screen max-w-7xl px-5 xl:mt-5"
     >
       <h2 className="group relative mx-auto max-w-[26ch] text-center text-5xl font-semibold">
         Some fine additions to my{" "}

diff --git a/components/landing/Services.tsx b/components/landing/Services.tsx
@@ -18,10 +18,7 @@ const ServiceCard: React.FC<ServiceDataType> = ({
   description,
 }) => {
   return (
-    <Link
-      href="/#services"
-      className="group min-h-[460px] w-full overflow-hidden rounded-xl border-3 border-black transition-all duration-300 hover:-translate-y-2 hover:shadow-3d"
-    >
+    <div className="group min-h-[460px] w-full overflow-hidden rounded-xl border-3 border-black transition-all duration-300 hover:-translate-y-2 hover:shadow-3d">
       <div className="flex min-h-[240px] w-full items-center justify-center bg-themes-bg_secondary">
         <Image
           src={image}
@@ -35,7 +32,7 @@ const ServiceCard: React.FC<ServiceDataType> = ({
         <h3 className="text-2xl font-semibold">{title}</h3>
         <p className="mt-4 text-justify text-sm">{description}</p>
       </div>
-    </Link>
+    </div>
   );
 };
 

diff --git a/components/landing/Testimonials.tsx b/components/landing/Testimonials.tsx
@@ -8,19 +8,34 @@ import { FaArrowLeft, FaArrowRight, FaQuoteLeft } from "react-icons/fa";
 import MemeTooltip from "../reusable/MemeTooltip";
 import TRIBUTES from "../../data/tributes";
 import Image from "next/image";
+import Link from "next/link";
 
 const TributesWithTestimonials = TRIBUTES.filter(
   (tribute) => tribute.testimonial !== undefined
 );
 
 type TributeDataType = typeof TRIBUTES[number];
 
-const TestimonialCard: React.FC<TributeDataType> = ({
-  testimonial,
+const TestimonialName: React.FC<TributeDataType> = ({
   name,
-  company,
-  image,
+  slug,
+  feature,
 }) => {
+  return feature ? (
+    <Link
+      href={`/tributes/${slug}`}
+      className="text-lg font-semibold text-portfolio-accent text-opacity-80 underline-offset-2 transition-all duration-300 hover:text-opacity-100 hover:underline"
+    >
+      {name}
+    </Link>
+  ) : (
+    <p className="text-lg font-semibold">{name}</p>
+  );
+};
+
+const TestimonialCard: React.FC<TributeDataType> = (props) => {
+  const { testimonial, name, company, image } = props;
+
   return (
     <div className="relative mx-auto mt-12 flex min-h-[400px] max-w-4xl flex-col rounded-xl border-3 border-black p-10 font-[Montserrat] lg:pr-72">
       <div className="absolute -top-10 rounded-full bg-black p-5 text-3xl text-white">
@@ -32,7 +47,7 @@ const TestimonialCard: React.FC<TributeDataType> = ({
         </p>
         <div className="mt-4 flex w-full items-center justify-between lg:max-w-md">
           <div className="flex flex-col gap-2">
-            <p className="text-lg font-semibold">{name}</p>
+            <TestimonialName {...props} />
             <p>
               {company.position} at {company.name}
             </p>

diff --git a/components/layouts/Footer.tsx b/components/layouts/Footer.tsx
@@ -25,6 +25,10 @@ const Footer = () => {
       name: "Contact",
       url: "/contact",
     },
+    {
+      name: "Resume",
+      url: "/resume",
+    },
     {
       name: "Links",
       url: "/links",

diff --git a/components/layouts/Navbar.tsx b/components/layouts/Navbar.tsx
@@ -41,7 +41,7 @@ const Navbar = () => {
       whileInView={{ opacity: 1, y: 0 }}
       transition={{ delay: 0.2, type: "spring" }}
     >
-      <div className="mx-auto flex w-full max-w-3xl items-center justify-between rounded-xl border-2 border-black bg-white py-3 px-4 shadow-3d">
+      <div className="z-50 mx-auto flex w-full max-w-3xl items-center justify-between rounded-xl border-2 border-black bg-white py-3 px-4 shadow-3d">
         <Link
           href="/"
           className="h-12 w-12 overflow-hidden rounded-full transition-all duration-300 hover:scale-95"
@@ -54,7 +54,7 @@ const Navbar = () => {
             className="h-full w-full object-cover"
           />
         </Link>
-        <ul className="hidden gap-6 text-[18px] font-semibold md:flex">
+        <ul className="z-50 hidden gap-6 text-[18px] font-semibold md:flex">
           {navOptions.map((option, index) => (
             <li
               key={index}

diff --git a/components/reusable/MemeTooltip.tsx b/components/reusable/MemeTooltip.tsx
@@ -14,7 +14,7 @@ interface MemeTooltipProps {
 const MemeTooltip: React.FC<MemeTooltipProps> = ({ image }) => {
   return (
     <div
-      className="absolute -top-36 left-1/2 h-40 w-40 -translate-x-1/2 bg-contain bg-no-repeat opacity-0 transition-all duration-300 group-hover:opacity-100"
+      className="absolute -top-36 left-1/2 hidden h-40 w-40 -translate-x-1/2 bg-contain bg-no-repeat opacity-0 transition-all duration-300 group-hover:opacity-100"
       style={{
         backgroundImage: `url('${image}')`,
       }}

diff --git a/data/skills.ts b/data/skills.ts
@@ -27,7 +27,7 @@ const SKILLS: Skill[] = [
   {
     name: "Next.js",
     image:
-      "https://res.cloudinary.com/kunalkeshan/image/upload/v1675439306/Portfolio/skills/next_ompczl.svg",
+      "https://res.cloudinary.com/kunalkeshan/image/upload/v1675740659/Portfolio/skills/nextjs_uc4a9b.png",
   },
   {
     name: "React.js",

diff --git a/data/tributes.ts b/data/tributes.ts
@@ -7,11 +7,12 @@ interface Tribute {
   website: string;
   image: string;
   testimonial?: string;
-  socials: {
-    linkedin: string;
-    twitter: string;
-    instagram: string;
-    youtube: string;
+  socials?: {
+    linkedin?: string;
+    twitter?: string;
+    instagram?: string;
+    youtube?: string;
+    github?: string;
   };
   company: {
     name: string;
@@ -20,6 +21,9 @@ interface Tribute {
     website: string;
     logo: string;
   };
+  feature?: boolean;
+  slug?: string;
+  intro?: string;
 }
 
 // Tributes Container
@@ -33,8 +37,8 @@ const TRIBUTES: Tribute[] = [
       "Kunal is an innovative and strategic thinker, constantly seeking new and creative solutions to the challenges faced. He has a keen understanding of the market and a strong sense of what it takes to build a successful product. He was able to build a strong and effective team, and his leadership skills inspired and motivated everyone to perform at their best.\n Kunal is a hard worker and always goes the extra mile to ensure that his work is of the highest quality. His commitment to excellence was evident in every project he tackled, and he was always eager to share his knowledge and expertise with others.",
     socials: {
       linkedin: "https://www.linkedin.com/in/kumarrohan9724/",
-      twitter: "",
-      instagram: "",
+      twitter: "https://twitter.com/kumarrohan9724",
+      instagram: "https://www.instagram.com/kumarrohan9724/",
       youtube: "",
     },
     company: {
@@ -44,17 +48,21 @@ const TRIBUTES: Tribute[] = [
       website: "https://rentyaar.com",
       logo: "https://res.cloudinary.com/kunalkeshan/image/upload/v1675447141/Portfolio/experience/RENT_YAAR_4_mbi5ek.png",
     },
+    feature: true,
+    slug: "rohan-kumar",
+    intro:
+      "Rohan Kumar, a natural leader, charming person, and visionary entrepreneur. Founder of Rentyaar and The Starterseed, changing students' lives for the better.",
   },
   {
     name: "GS Thina",
-    website: "https://www.linkedin.com/in/gsthina/",
+    website: "https://gsthina.me",
     image:
       "https://res.cloudinary.com/kunalkeshan/image/upload/v1675464441/Portfolio/tributes/gs_thina_n80sqg.jpg",
     socials: {
       linkedin: "https://www.linkedin.com/in/gsthina/",
-      twitter: "",
-      instagram: "",
-      youtube: "",
+      twitter: "https://twitter.com/gsthina_me",
+      instagram: "https://www.instagram.com/gsthina.mentor/",
+      youtube: "https://www.youtube.com/@gsthina",
     },
     company: {
       name: "Think-Digital",
@@ -63,6 +71,25 @@ const TRIBUTES: Tribute[] = [
       website: "https://think-digital.com",
       logo: "https://res.cloudinary.com/kunalkeshan/image/upload/v1675428847/Portfolio/experience/think_digital_logo_txo2sk.png",
     },
+    feature: true,
+    slug: "gsthina",
+    intro:
+      "GS Thina, the mentor who empowers college students with skills and industry exposure to reach their full potential 🚀",
+  },
+  {
+    name: "Raman Shekhawat",
+    website: "https://www.linkedin.com/in/raman-shekhawat-1013381ba/",
+    image:
+      "https://res.cloudinary.com/kunalkeshan/image/upload/v1675741966/Portfolio/tributes/Raman_Shekhawat_yzqbis.jpg",
+    testimonial:
+      "Having started college life with a friend like Kunal Keshan makes me the perfect person to help you understand him. He is one of the most valuable assets in the developer community. With a dash of hard work and creativity, this fellow has crossed all limits of productivity. Not only will he help you develop your product with perfection, but also with efforts beyond your expectations. Talking about his teamwork, Kunal has an ear for every voice. He is a good listener and believes in empathy. All in all, he is a perfect package you would not want to miss out on while building your team.",
+    company: {
+      name: "Think-Digital",
+      description: "",
+      position: "Web Developer",
+      website: "https://think-digital.com",
+      logo: "https://res.cloudinary.com/kunalkeshan/image/upload/v1675428847/Portfolio/experience/think_digital_logo_txo2sk.png",
+    },
   },
 ];
 

diff --git a/layouts/PublicLayout.tsx b/layouts/PublicLayout.tsx
@@ -12,7 +12,7 @@ import Headroom from "react-headroom";
 const PublicLayout: NextPage<PropsWithChildren> = ({ children }) => {
   return (
     <>
-      <Headroom>
+      <Headroom className="z-50">
         <Navbar />
       </Headroom>
       <main className="w-full">{children}</main>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kunalkeshan-dev",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/pages/resume.tsx b/pages/resume.tsx
@@ -7,6 +7,7 @@ import React from "react";
 import Head from "next/head";
 import PublicLayout from "../layouts/PublicLayout";
 import WorkInProgress from "../components/reusable/WorkInProgress";
+import Resume from "../components/about/Resume";
 
 const ResumePage = () => {
   return (
@@ -15,7 +16,7 @@ const ResumePage = () => {
         <title>Resume | Kunal Keshan</title>
       </Head>
       <PublicLayout>
-        <WorkInProgress />
+        <Resume />
       </PublicLayout>
     </>
   );