shubham.sh
j471n.in
shubham.sh | j471n.in | |
---|---|---|
2 | 7 | |
12 | 135 | |
- | - | |
2.8 | 8.3 | |
12 months ago | 3 months ago | |
TypeScript | TypeScript | |
- | 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.
shubham.sh
-
✨My first ever portfolio. Kept is simple. 👨💻
Kept is open source: https://github.com/imshubhamsingh/shubham.sh
-
✨My first ever portfolio. Kept is simple.
Last Sunday, I spent 6 hrs creating my first ever simple portfolio website from scratch using Next.js. It is a simple one-page portfolio. It took some time to work on CSS transition and SVG animation. Live site: https://shubham.sh/ source code: https://github.com/imshubhamsingh/shubham.sh PS: It also shows my current listening music on Spotify.
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> ); }
What are some alternatives?
nextjs-notion-starter-kit - Deploy your own Notion-powered website in minutes with Next.js and Vercel.
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.
C-DOC - A full-stack online shop and catalogue ordering system combined with a brochure site.
personal-website - My portfolio and blog page build in NextJs
portfolio-blog - This is a Next.js personal portfolio/blog site where a site owner can showcase their work and experiences.
duncan.land - ✨ My personal website. Built using Next.js and deployed on Vercel.
blogstack - 📡 Decentralized blogs over relay using nostr w/ ⚡ lightning tips
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
React - The library for web and native user interfaces.