---
title: Gopal Verma
---

import SocialBundle from "@/components/SocialBundle"
import Nvimss from "../public/assets/nvimss.webp"
import { RiTwitterXLine } from "react-icons/ri";
import { Feature, Features } from '@/components/features'
import { ArrowRightIcon } from '@/components/icons'
import cn from 'clsx'
import { motion } from 'framer-motion'
import Image from 'next/image'
import Link from 'next/link'
import { useState } from 'react'
import docsCardDark from '../public/assets/card-1.dark.png'
import docsCard from '../public/assets/card-1.png'
import styles from './index.module.css'
import {CTA} from "@/components/CTA";
import {RESUME} from "@/content/me";

<div className="home-content">
  <div className="relative flex justify-center items-center flex-col">
  <div className="absolute inset-0 bg-[linear-gradient(to_bottom,rgba(0,0,0,0.1)_1px,transparent_1px),linear-gradient(to_right,rgba(0,0,0,0.1)_1px,transparent_1px)] dark:bg-[linear-gradient(to_bottom,rgba(255,255,255,0.1)_1px,transparent_1px),linear-gradient(to_right,rgba(255,255,255,0.1)_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:linear-gradient(to_bottom,white,transparent)]"></div>
    <Link href="https://x.com/bettercallgopal" className="sm:mt-[50px] mt-[30px] z-10">
      <span className="inline-flex items-center rounded-full bg-gray-500/10 dark:bg-gray-700 px-5 py-2 text-xs font-medium ring-1 ring-inset dark:ring-gray-400/30 ring-gray-500/50 font-anton dark:text-white gap-x-1 text-gray-500 "><RiTwitterXLine />@bettercallgopal</span>
    </Link>
    <h1 className="headline font-anton text-center mb-[50px]">BUILDING SOMETHING <br /> PEOPLE WANT</h1>
    <h2 className=" -mt-[20px] mb-[40px] text-center px-4 max-w-xs sm:max-w-lg mx-auto text-sm sm:text-base md:text-lg lg:text-xl opacity-[60%] font-roboto">My devsite for sharing **code snippets**, **notes**, **resources**, **blogs** and showcase **projects**!</h2>
    <CTA />
  </div>
  <style jsx>{`
    .content-container {
      max-width: 90rem;
      padding-left: max(env(safe-area-inset-left),1.5rem);
      padding-right: max(env(safe-area-inset-right),1.5rem);
      margin: 0 auto;
    }
    .features-container {
      margin: 8rem 0 0;
      padding: 4rem 0;
      background: linear-gradient(to bottom,#ffffff, #f3f4f6 500px);
      border-bottom: 1px solid #e5e7eb;
    }
    .features-container .content-container {
      margin-top: -8rem;
    }
    :global(.dark) .features-container {
      background: linear-gradient(to bottom, #111111, #000000 500px);
      border-bottom: 1px solid rgb(38,38,38);
    }
    .headline {
      display: inline-flex;
      font-size: min(6.375rem, max(8vw, 2.5rem));
      font-weight: 700;
      font-feature-settings: initial;
      letter-spacing: 0rem;
      margin-left: -0.2rem;
      margin-top: 2.4rem;
      line-height: 1.1;
      background-image: linear-gradient(146deg,#000,#757a7d);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    :global(.dark) .headline {
      background-image: linear-gradient(146deg,#fff,#757a7d);
    }
    .subtitle {
      font-size: 1.3rem;
      font-size: min(1.3rem, max(3.5vw, 1.2rem));
      font-feature-settings: initial;
      line-height: 1.6;
    }
    .nextjs-link {
      color: currentColor;
      text-decoration: none;
      font-weight: 600;
    }
    :global(#docs-card) {
      color: #fff;
      text-shadow: 0 0 1rem rgba(0,0,0,0.1);
    }
    :global(#docs-card img) {
      object-fit: cover;
      object-position: left;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      height: 100%;
      z-index: 0;
      user-select: none;
      pointer-events: none;
    }
    :global(#docs-card img:nth-child(2)) {
      display: none;
    }
    :global(.dark #docs-card img:nth-child(2)) {
      display: initial;
    }
    :global(.dark #docs-card img:nth-child(1)) {
      display: none;
    }
    :global(#highlighting-card) {
      min-height: 300px;
      background-image: linear-gradient(to top, transparent, #fff 50%), url(/assets/syntax-highlighting.svg);
      background-size: 634px;
      background-position: -6px calc(100% + 4px);
      background-repeat: no-repeat;
    }
    :global(#highlighting-card-blog) {
      min-height: 300px;
      background-image: linear-gradient(to top, transparent, #fff 50%), url(/assets/index_blog.png);
      background-size: 634px;
      background-position: -6px calc(100% + 0px);
      background-repeat: no-repeat;
    }
    :global(.dark #highlighting-card-blog) {
      min-height: 300px;
      background-image: linear-gradient(to top, transparent, #202020 50%), url(/assets/index_blog.png);
      background-size: 634px;
      background-position: -6px calc(100% + 0px);
      background-repeat: no-repeat;
    }
    :global(#highlighting-card-showcase) {
      min-height: 300px;
      background-image: linear-gradient(to top, transparent, #fff 50%), url(/assets/index_showcase.png);
      background-size: 634px;
      background-position: -6px calc(100% + 0px);
      background-repeat: no-repeat;
    }
    :global(.dark #highlighting-card-showcase) {
      min-height: 300px;
      background-image: linear-gradient(to top, transparent, #202020 50%), url(/assets/index_showcase.png);
      background-size: 634px;
      background-position: -6px calc(100% + 0px);
      background-repeat: no-repeat;
    }
    :global(.dark #highlighting-card) {
      background-image: linear-gradient(to top, transparent, #202020 50%), url(/assets/syntax-highlighting.svg);
    }
    :global(.feat-darkmode) {
      min-height: 300px;
    }
    :global(.feat-darkmode h3) {
      font-size: 48px;
    }
    :global(#search-card) {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    :global(#search-card p) {
      max-width: 320px;
    }
    :global(#search-card video) {
      position: absolute;
      right: 0;
      top: 24px;
      height: 430px;
      pointer-events: none;
      max-width: 60%;
    }
    :global(#fs-card) {
      min-height: 240px;
    }
    :global(#fs-card h3) {
      text-align: left;
      width: min(300px, 41%);
      min-width: 155px;
    }
    :global(#a11y-card) {
      background-image: url(/assets/high-contrast.png);
      background-position: -160px 220px;
    }
    @media screen and (max-width: 1300px) {
      :global(#a11y-card) {
        background-image: linear-gradient(to bottom, white, transparent), url(/assets/high-contrast.png);
      }
    }
    @media screen and (max-width: 1200px) {
      :global(#highlighting-card) {
        aspect-ratio: auto;
      }
      :global(.feat-darkmode h3) {
        font-size: 4vw;
        font-size: min(48px, max(4vw, 30px));
      }
      :global(#search-card video) {
        aspect-ratio: 787/623;
        height: auto;
      }
      .headline {
      }
    }
    @media screen and (max-width: 1024px) {
      :global(#docs-card) {
        aspect-ratio: 135/86;
      }
      :global(#search-card) {
        aspect-ratio: 8/3;
      }
      :global(#search-card h3) {
        text-align: left;
      }
      :global(#highlighting-card) {
        background-size: 136%;
      }
      :global(#a11y-card) {
        background-image: url(/assets/high-contrast.png);
        background-position: center 160px;
      }
    }
    @media screen and (max-width: 768px) {
      :global(#docs-card) {
        min-height: 348px;
        width: 100%;
        aspect-ratio: auto;
      }
      :global(#docs-card img) {
        object-position: -26px 0;
        width: 250%;
        max-width: initial;
      }
    }
    @media screen and (max-width: 640px) {
      :global(#search-card) {
        aspect-ratio: 2.5/2;
        justify-content: flex-start;
        align-items: stretch;
        min-height: 350px;
      }
      :global(#search-card h3) {
        text-align: center;
      }
      :global(#search-card p) {
        max-width: 100%;
      }
      :global(#search-card video) {
        position: relative;
        margin: .75em -1.75em 0;
        max-width: calc(100% + 3.5em);
      }
      :global(.dark #search-card video) {
        mix-blend-mode: lighten;
      }
    }
  `}</style>

  <div className="features-container">
    <div className="content-container">
      <Features>
        <Feature index={0} large centered id="docs-card" href="https://github.com/GopalVerma1303/dotconfigs">
          <Image src={Nvimss} alt="Background" loading="eager" />
          <Image src={Nvimss} alt="Background (Dark)" loading="eager" />
          <h3>Get my Neovim + other dotfiles <br className="show-on-mobile"/>configurations</h3>
        </Feature>
        <Feature index={1} centered className="card-with-border">
          <div className="flex flex-col justify-center items-center lg:h-[520px] h-full lg:mb-0 mb-[50px]">
            <h3 className="font-light">Links to my<br className="show-on-mobile"/> social handles </h3>
            <SocialBundle />
          </div>
        </Feature>
        <Feature index={2} id="highlighting-card" href="/notebooks">
          <h3>Notebooks</h3>
          <p>Discover code snippets and detailed analyses in my notebooks, designed to help developers solve real-world problems efficiently.</p>
        </Feature>
        <Feature index={3} id="highlighting-card-blog" href="/blogs">
          <h3>Blogs</h3>
          <p>Read my technical blogs for insights on various tech topics, tutorials, and best practices to enhance your knowledge and skills.</p>
        </Feature>
        <Feature index={4} id="highlighting-card-showcase" href="/showcase">
          <h3>Showcase</h3>
          <p>Explore my showcased projects, each demonstrating my skills and creativity.</p>
        </Feature>
        <Feature index={5} centered className="feat-darkmode" style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <motion.div
            animate={{
              backgroundPosition: ['0% 0%', '50% 40%', '50% 40%', '100% 100%'],
              backgroundImage: [`radial-gradient(farthest-corner, #e2e5ea, #e2e5ea)`, 'radial-gradient(farthest-corner, #06080a, #e2e5ea)', 'radial-gradient(farthest-corner, #06080a, #e2e5ea)', 'radial-gradient(farthest-corner, #e2e5ea, #e2e5ea)'],
            }}
            transition={{
              backgroundPosition: {
                repeat: Infinity,
                duration: 10,
                delay: 1
              },
              backgroundImage: {
                times: [0, .2, .8, 1],
                repeat: Infinity,
                duration: 10,
                delay: 1
              },
            }}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: '100%',
              backgroundImage: `radial-gradient(farthest-corner, #06080a, #e2e5ea)`,
              backgroundSize: '400% 400%',
              backgroundRepeat: 'no-repeat',
            }}
          />
          <motion.h3
            animate={{
              color: ['#dae5ff', '#fff', '#fff', '#dae5ff'],
            }}
            style={{
              position: 'relative',
              mixBlendMode: 'difference',
            }}
          >Try<br/>Switching<br/>Themes ✨</motion.h3>
        </Feature>
        <Feature index={6} large id="search-card" >
          <div style={{ zIndex: 2}}>
            <h3>Full-text search <br/> throughout the site</h3>
            <p>You can search through my notebooks, blogs, and showcases effortlessly using the search bar.</p>
          </div>
          <div className="absolute w-full h-full inset-0 hidden sm:block bg-[linear-gradient(to_right,white_250px,_transparent)] dark:bg-[linear-gradient(to_right,#202020_250px,_transparent)] z-[1]"/>
          <video autoPlay="autoplay" loop muted playsInline className="dark:hidden block">
            <source src="/assets/search.mp4" type="video/mp4"/>
          </video>
          <video autoPlay="autoplay" loop muted playsInline className="dark:block hidden -translate-x-4">
            <source src="/assets/search-dark.mp4" type="video/mp4"/>
          </video>
        </Feature>
        <Feature index={7} large id="fs-card" style={{
          color: 'white',
          backgroundImage: 'url(/assets/routing.png), url(/assets/gradient-bg.jpeg)',
          backgroundSize: '140%, 180%',
          backgroundPosition: '130px -8px, top',
          backgroundRepeat: 'no-repeat',
          textShadow: '0 1px 6px rgb(38 59 82 / 18%)',
          aspectRatio: '1.765',
        }}>
          <h3>I do open-source projects, and freelance work, <br /> <Link href="https://github.com/gopalVerma1303/">visit my github</Link> or <Link href="#">book a call</Link></h3>
        </Feature>
        <Feature index={8} id="a11y-card" 
          href={RESUME}
          className='card-with-border' style={{
          backgroundSize: 750,
          backgroundRepeat: 'no-repeat',
          minHeight: 288
        }}>
          <h3>Hiring or looking for a teammate?</h3>
          <p>Here is the link to my resume, detailing all my experience, skills, and achievements.</p>
        </Feature>
        <Feature index={9}>
          <h3>Interested in the technical details?</h3>
          <p className='mr-6'>Check out the GitHub repository for this site to explore the code and see how everything is built. Here’s the link to the <Link href="https://github.com/GopalVerma1303/gopx.dev">GitHub page</Link>.</p>
        </Feature>
        <Feature index={10} large>
          <h3>Know more...</h3>
          <p>Discover more about my work, experience, and expertise on the <Link href="/me">Me</Link> page. <br /> Dive deeper into my professional journey and see how my skills can benefit your projects.</p>
          <p className="subtitle"><Link className="!no-underline" href="/notebooks">Start with Notebooks →</Link></p>
        </Feature>
      </Features>
    </div>
  </div>
</div>
