j471n.in

This is my portfolio built with Next.js, Tailwind CSS, Sanity, Spotify API, Dev.to API, MDX, Google Analytics and Vercel. (by j471n)

J471n.in Alternatives

Similar projects and alternatives to j471n.in

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a better j471n.in alternative or higher similarity.

j471n.in reviews and mentions

Posts with mentions or reviews of j471n.in. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2023-02-04.
  • My VS Code setup
    2 projects | dev.to | 4 Feb 2023
    Website
  • How to use Google Analytics Data API
    3 projects | dev.to | 31 Dec 2022
    In my portfolio, I have just implemented Google Analytics Data API so that I can show how many people have visited this site in the last 7 days. As my Portfolio is already using Google Analytics to track user visits. I just need to use its API to fetch that data.
  • Noob question: where to store and how to import static datasets?
    2 projects | /r/nextjs | 30 Dec 2022
    The live app, for reference.
  • How to Access Local Sever on Other Devices
    1 project | dev.to | 25 Nov 2022
    Twitter Github Instagram Newsletter LinkedIn Website Buy me a Coffee
  • How I Made My Portfolio with Next.js
    14 projects | dev.to | 13 Oct 2022
    /* Filename : layout/BlogLayout.js */ import { AvatarImage } from "../utils/utils"; // =========> not created import Image from "next/image"; import styles from "../styles/Blog.module.css"; // =========> not created import ShareOnSocialMedia from "../components/ShareOnSocialMedia"; // =========> not created import { FiPrinter } from "react-icons/fi"; import { TbEdit } from "react-icons/tb"; import Newsletter from "../components/Newsletter"; // =========> not created import Link from "next/link"; import useWindowLocation from "@hooks/useWindowLocation"; import ScrollProgressBar from "@components/ScrollProgressBar"; // =========> not created import { stringToSlug } from "@lib/toc"; // =========> not created import { useState, useEffect } from "react"; import { lockScroll, removeScrollLock } from "@utils/functions"; // =========> not created import useWindowSize from "@hooks/useWindowSize"; // =========> not created import { FadeContainer, opacityVariant } from "@content/FramerMotionVariants"; import AnimatedHeading from "@components/FramerMotion/AnimatedHeading"; import AnimatedDiv from "@components/FramerMotion/AnimatedDiv"; import useBookmarkBlogs from "@hooks/useBookmarkBlogs"; import { BsBookmark, BsBookmarkFill } from "react-icons/bs"; import useScrollPercentage from "@hooks/useScrollPercentage"; export default function BlogLayout({ post, children }) { const { currentURL } = useWindowLocation(); const [isTOCActive, setIsTOCActive] = useState(false); const [alreadyBookmarked, setAlreadyBookmarked] = useState(false); const scrollPercentage = useScrollPercentage(); const size = useWindowSize(); const { isAlreadyBookmarked, addToBookmark, removeFromBookmark } = useBookmarkBlogs("blogs", []); useEffect(() => { // In Case user exists from mobile to desktop then remove the scroll lock and TOC active to false if (size.width > 768) { removeScrollLock(); setIsTOCActive(false); } }, [size]); useEffect(() => { setAlreadyBookmarked(isAlreadyBookmarked(post.meta.slug)); }, [isAlreadyBookmarked, post.meta.slug]); return ( {/* TOC */}
    95 ? "xl:-left-full" : "xl:left-0" } md:left-0 md:opacity-100 md:max-w-[35%] lg:max-w-[30%] transition-all duration-500 flex flex-col gap-1 !pb-[100px] overflow-y-scroll p-10 md:p-14 h-screen fixed w-full font-barlow bg-darkWhite dark:bg-darkPrimary text-neutral-800 dark:text-gray-200 z-50 `} > Table of Contents AnimatedHeading> {post.tableOfContents.map((content) => { return ( { if (size.width < 768) { lockScroll(); setIsTOCActive(false); } setIsTOCActive(false); removeScrollLock(); }} > {content.heading} a> Link> ); })} AnimatedDiv> div> { setIsTOCActive(!isTOCActive); lockScroll(); }} className="md:hidden w-full py-2 font-medium bg-black dark:bg-white text-white dark:text-black fixed bottom-0 outline-none z-50" > Table of Contents button> {/* Progress Bar */} {/* Blog Front Matter & Author */}

    {post.meta.title} h1>
    Jatin Sharma div>

    Jatin Sharmaspan> •span> {post.meta.stringDate}span> p>

    {post.meta.readingTime.text}span> •span> {post.meta.readingTime.words} wordsspan> p> div> div>

    a> Link>

    { alreadyBookmarked ? removeFromBookmark(post.meta.slug) : addToBookmark(post.meta); }} > {alreadyBookmarked ? ( ) : ( )} button> div> div> {/* Main Blog Content */} {children} AnimatedDiv> {/* NewsLetter */} {/* Share Blog on Social Media */}

    Share on Social Media: h3> {/* Print the Blog */}
    window.print()} /> div> ShareOnSocialMedia> div> section> section> ); }

  • A note from our sponsor - InfluxDB
    www.influxdata.com | 25 Apr 2024
    Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality. Learn more →

Stats

Basic j471n.in repo stats
7
135
8.3
2 months ago

Sponsored
Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com