j471n.in
portfolio-blog
j471n.in | portfolio-blog | |
---|---|---|
7 | 2 | |
135 | 22 | |
- | - | |
8.3 | 6.9 | |
3 months ago | 16 days ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
j471n.in
-
My VS Code setup
Website
-
How to use Google Analytics Data API
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?
The live app, for reference.
-
How to Access Local Sever on Other Devices
Twitter Github Instagram Newsletter LinkedIn Website Buy me a Coffee
-
How I Made My Portfolio with Next.js
/* 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>
{ alreadyBookmarked ? removeFromBookmark(post.meta.slug) : addToBookmark(post.meta); }} > {alreadyBookmarked ? ( ) : ( )} button> div> div> {/* Main Blog Content */} {children} AnimatedDiv> {/* NewsLetter */} {/* Share Blog on Social Media */}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>Share on Social Media: h3> {/* Print the Blog */}
window.print()} /> div> ShareOnSocialMedia> div> section> section> ); }
portfolio-blog
-
Rate my First Web App made with Next.js and Sanity
In the past year, I have been learning how to use Next.js, and I build this portfolio/blog that uses Tailwind for styling and Sanity CMS for content creation. My goal was to build a professional webapp that people could actually use for themselves. Here's the link to a more in-depth explanation on what I implemented with the source code and demo: https://github.com/kirkwat/portfolio-blog.
What are some alternatives?
karngyan.com - Dark themed, SEO friendly: Nuxt Content + TailwindCSS + Firebase + i18n + RSS2 based SPA for procrastinating developers to quickly spin up their own kickass blog and showcase their projects.
kenaqshal-next - My personal website – Built using Next.js, TypeScript, MDX, Sanity.io and Tailwind
personal-website - My portfolio and blog page build in NextJs
maxpetretta.com - My personal website, built using Next.js, Tailwind CSS, and MDX. Deployed on Vercel.
duncan.land - ✨ My personal website. Built using Next.js and deployed on Vercel.
next-notion-portfolio - Portfolio cum Blog built with NextJS using Notion as a CMS
blogstack - 📡 Decentralized blogs over relay using nostr w/ ⚡ lightning tips
shellbear.me - Source code of my personal website and blog ✨
globby - User-friendly glob matching
deno-portfolio - This is the repository that later gets rendered as my personal website.
next-google-docs - Next Google Docs is a web app which uses draft.js to create a document for you. It also uses Firebase to store all the documents.
react-icons - svg react icons of popular icon packs