Abhishek Jha

Read the Tech Stack I used for this project section.Tech Stack I used for this project#

Next.js

Typescript

Chakra UI

Markdown

Read the Reasons for choosing this stack: section.Reasons for choosing this stack:#

• I prefered to use Next.js over plain react because of it's better performace(because of the new Rust compiler introduced in version 12). Much better SEO optimization and ready to use File based routing system.
• Using Typescript over Javascript because of type safety, reliability, explicity and what not :)
• I initially started building this portfolio with Tailwind CSS but later on as switched to Chakra UI because it's easier to create responsive design with robust and concise code, plenty of higher order components(that you can see all over this site), dark and light theme with just few lines of code, etc.

I have created this blog section inside my portfolio itself to share some useful stuff with the world.

Here I'll write some text based tutorials for competitive programming 📊 and development 💻 (You can suggest topics through the contact form too)

Read the A sneak peak into the scary codebase: section.A sneak peak into the scary codebase:#

I've used Sendgrid for email delivery service and Prism react renderer for syntax highlighting in the code blocks.

Here's a small code snippet to show how you can use Prism react renderer and Chakra UI to show code blocks inside your website

Copy 
import Highlight, { defaultProps, Language } from "prism-react-renderer";
import darkTheme from "prism-react-renderer/themes/nightOwl";
import lightTheme from "prism-react-renderer/themes/vsLight";
import { FaCopy } from "react-icons/fa";
import { Box, Button, useClipboard, useColorMode } from "@chakra-ui/react";
import { useRef } from "react";

interface CodeBlockProps {
  children: string;
  className: string;
}

export const CodeBlock = ({ children, className }: CodeBlockProps) => {
  const { colorMode } = useColorMode();
  const { hasCopied, onCopy } = useClipboard(children.trim());
  const codeRef = useRef<HTMLDivElement>(null);
  const language: unknown = className ? className.replace(/language-/, "") : "";

  return (
    <Box fontSize="sm" position="relative" ref={codeRef}>
      <Button
        rightIcon={<FaCopy />}
        colorScheme="telegram"
        size="sm"
        variant="outline"
        position="absolute"
        top={-10}
        right={4}
        onClick={onCopy}
      >
        {hasCopied ? "Copied 👌 " : "Copy "}
      </Button>
      <Highlight
        {...defaultProps}
        theme={colorMode === "dark" ? darkTheme : lightTheme}
        code={children}
        language={language as Language}
      >
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <pre
            className={className}
            style={{
              ...style,
              padding: 10,
              overflowX: "auto",
            }}
          >
            {tokens.map((line, i) => (
              <div key={i} {...getLineProps({ line, key: i })}>
                {line.map((token, key) => (
                  <span key={key} {...getTokenProps({ token, key })} />
                ))}
              </div>
            ))}
          </pre>
        )}
      </Highlight>
    </Box>
  );
};

More blogs (Specially for various topics of DSA and CP) will be coming soon :)