├── .nvmrc ├── .husky ├── .gitignore └── pre-commit ├── .eslintignore ├── .prettierignore ├── public ├── favicon.ico ├── logo192.png ├── logo512.png ├── robots.txt ├── static │ ├── img │ │ ├── me.jpg │ │ ├── avatar.png │ │ └── avatar.svg │ ├── projects │ │ ├── classroom.jpg │ │ ├── colormark.jpg │ │ ├── todo-list.jpg │ │ ├── hotel-cards.jpg │ │ ├── music-player.jpg │ │ ├── developing-mind.jpg │ │ ├── trello-redesign.jpg │ │ └── course-catalogue.jpg │ ├── blog-images │ │ ├── trying-out-zustand │ │ │ ├── demo.JPG │ │ │ ├── banner.png │ │ │ └── demo-final.JPG │ │ ├── learning-resources │ │ │ └── banner.png │ │ ├── the-bem-architecture │ │ │ ├── banner.png │ │ │ ├── bem-example.png │ │ │ └── css-important-meme.jpeg │ │ ├── the-evolution-of-javascript-modules │ │ │ ├── banner.png │ │ │ └── escalated.png │ │ ├── ui-design-for-frontend-developers │ │ │ ├── banner.png │ │ │ ├── contrast.jpg │ │ │ ├── alignment.jpg │ │ │ ├── whitespace.jpg │ │ │ ├── consistency.jpg │ │ │ ├── less-colors.jpg │ │ │ ├── call-to-action.jpg │ │ │ ├── visual-hierarchy.jpg │ │ │ └── ui-design-fundamentals.jpg │ │ ├── files-are-only-required-once-in-node │ │ │ └── banner.png │ │ ├── understanding-javascript-objects-part-6 │ │ │ ├── what.jpg │ │ │ └── banner.png │ │ ├── understanding-javascript-objects-part-1 │ │ │ ├── banner.png │ │ │ └── weird-javascript.jpg │ │ ├── understanding-javascript-objects-part-2 │ │ │ └── banner.png │ │ ├── understanding-javascript-objects-part-3 │ │ │ ├── banner.png │ │ │ └── no-idea.jpg │ │ ├── understanding-javascript-objects-part-4 │ │ │ ├── banner.png │ │ │ └── global-proto.png │ │ ├── understanding-javascript-objects-part-5 │ │ │ └── banner.png │ │ └── using-void-to-implicitly-return-nothing │ │ │ └── banner.png │ ├── logos │ │ ├── mongodb.svg │ │ ├── firebase.svg │ │ ├── gatsby.svg │ │ ├── typescript.svg │ │ ├── linkedin.svg │ │ ├── twitter.svg │ │ ├── adobe-xd.svg │ │ ├── email.svg │ │ ├── github.svg │ │ ├── dribbble.svg │ │ ├── figma.svg │ │ ├── next-js.svg │ │ ├── jest.svg │ │ ├── react.svg │ │ ├── adobe-after-effects.svg │ │ ├── redux.svg │ │ └── node-js.svg │ ├── logo.svg │ ├── 404.svg │ └── 500.svg └── manifest.json ├── postcss.config.js ├── LICENSE.txt ├── additional.d.ts ├── next-env.d.ts ├── .prettierrc ├── typings └── types.d.ts ├── pages ├── index.tsx ├── blog │ ├── [slug].tsx │ └── index.tsx ├── _document.tsx ├── 500.tsx ├── 404.tsx ├── about.tsx └── _app.tsx ├── vercel.json ├── .gitignore ├── lib ├── gtag.ts └── mdx.ts ├── components ├── Tooltip.tsx ├── MDXComponents.tsx ├── Design.tsx ├── Navbar.tsx ├── Development.tsx ├── ProjectCard.tsx ├── BlogCard.tsx ├── Footer.tsx └── Hero.tsx ├── tsconfig.json ├── README.md ├── tailwind.config.js ├── layouts ├── BlogLayout.tsx └── Container.tsx ├── package.json ├── next.config.js ├── .eslintrc ├── data └── blogs │ ├── learning-resources.mdx │ ├── using-void-to-implicitly-return-nothing.mdx │ ├── understanding-javascript-objects-part-5.mdx │ ├── understanding-javascript-objects-part-4.mdx │ ├── understanding-javascript-objects-part-2.mdx │ ├── understanding-javascript-objects-part-6.mdx │ ├── the-bem-architecture.mdx │ ├── ui-design-for-frontend-developers.mdx │ ├── understanding-javascript-objects-part-3.mdx │ ├── files-are-only-required-once-in-node.mdx │ ├── understanding-javascript-objects-part-1.mdx │ ├── trying-out-zustand.mdx │ └── the-evolution-of-javascript-modules.mdx └── styles └── globals.css /.nvmrc: -------------------------------------------------------------------------------- 1 | 14.15.0 2 | -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .next/ 3 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .next/ 3 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn tsc 5 | yarn lint-staged 6 | -------------------------------------------------------------------------------- /public/static/img/me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/img/me.jpg -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {} 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /public/static/img/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/img/avatar.png -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | 1. You are free to use the code as inspiration. 2 | 2. Do not copy it directly. 3 | 3. Crediting is appreciated. 4 | -------------------------------------------------------------------------------- /public/static/projects/classroom.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/projects/classroom.jpg -------------------------------------------------------------------------------- /public/static/projects/colormark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/projects/colormark.jpg -------------------------------------------------------------------------------- /public/static/projects/todo-list.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/projects/todo-list.jpg -------------------------------------------------------------------------------- /public/static/projects/hotel-cards.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/projects/hotel-cards.jpg -------------------------------------------------------------------------------- /public/static/projects/music-player.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/projects/music-player.jpg -------------------------------------------------------------------------------- /public/static/projects/developing-mind.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/projects/developing-mind.jpg -------------------------------------------------------------------------------- /public/static/projects/trello-redesign.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/projects/trello-redesign.jpg -------------------------------------------------------------------------------- /public/static/projects/course-catalogue.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/projects/course-catalogue.jpg -------------------------------------------------------------------------------- /additional.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'mdx-prism'; 2 | 3 | interface Window { 4 | gtag: (config: string, measurementId: string, params: object) => void; 5 | } 6 | -------------------------------------------------------------------------------- /public/static/blog-images/trying-out-zustand/demo.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/trying-out-zustand/demo.JPG -------------------------------------------------------------------------------- /public/static/blog-images/learning-resources/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/learning-resources/banner.png -------------------------------------------------------------------------------- /public/static/blog-images/the-bem-architecture/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/the-bem-architecture/banner.png -------------------------------------------------------------------------------- /public/static/blog-images/trying-out-zustand/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/trying-out-zustand/banner.png -------------------------------------------------------------------------------- /public/static/blog-images/trying-out-zustand/demo-final.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/trying-out-zustand/demo-final.JPG -------------------------------------------------------------------------------- /public/static/blog-images/the-bem-architecture/bem-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/the-bem-architecture/bem-example.png -------------------------------------------------------------------------------- /public/static/blog-images/the-bem-architecture/css-important-meme.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/the-bem-architecture/css-important-meme.jpeg -------------------------------------------------------------------------------- /public/static/blog-images/the-evolution-of-javascript-modules/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/the-evolution-of-javascript-modules/banner.png -------------------------------------------------------------------------------- /public/static/blog-images/ui-design-for-frontend-developers/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/ui-design-for-frontend-developers/banner.png -------------------------------------------------------------------------------- /public/static/blog-images/ui-design-for-frontend-developers/contrast.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/ui-design-for-frontend-developers/contrast.jpg -------------------------------------------------------------------------------- /public/static/blog-images/files-are-only-required-once-in-node/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/files-are-only-required-once-in-node/banner.png -------------------------------------------------------------------------------- /public/static/blog-images/ui-design-for-frontend-developers/alignment.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/ui-design-for-frontend-developers/alignment.jpg -------------------------------------------------------------------------------- /public/static/blog-images/ui-design-for-frontend-developers/whitespace.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/ui-design-for-frontend-developers/whitespace.jpg -------------------------------------------------------------------------------- /public/static/blog-images/understanding-javascript-objects-part-6/what.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/understanding-javascript-objects-part-6/what.jpg -------------------------------------------------------------------------------- /public/static/blog-images/the-evolution-of-javascript-modules/escalated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/the-evolution-of-javascript-modules/escalated.png -------------------------------------------------------------------------------- /public/static/blog-images/ui-design-for-frontend-developers/consistency.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/ui-design-for-frontend-developers/consistency.jpg -------------------------------------------------------------------------------- /public/static/blog-images/ui-design-for-frontend-developers/less-colors.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/ui-design-for-frontend-developers/less-colors.jpg -------------------------------------------------------------------------------- /public/static/blog-images/understanding-javascript-objects-part-1/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/understanding-javascript-objects-part-1/banner.png -------------------------------------------------------------------------------- /public/static/blog-images/understanding-javascript-objects-part-2/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/understanding-javascript-objects-part-2/banner.png -------------------------------------------------------------------------------- /public/static/blog-images/understanding-javascript-objects-part-3/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/understanding-javascript-objects-part-3/banner.png -------------------------------------------------------------------------------- /public/static/blog-images/understanding-javascript-objects-part-3/no-idea.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/understanding-javascript-objects-part-3/no-idea.jpg -------------------------------------------------------------------------------- /public/static/blog-images/understanding-javascript-objects-part-4/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/understanding-javascript-objects-part-4/banner.png -------------------------------------------------------------------------------- /public/static/blog-images/understanding-javascript-objects-part-5/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/understanding-javascript-objects-part-5/banner.png -------------------------------------------------------------------------------- /public/static/blog-images/understanding-javascript-objects-part-6/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/understanding-javascript-objects-part-6/banner.png -------------------------------------------------------------------------------- /public/static/blog-images/using-void-to-implicitly-return-nothing/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/using-void-to-implicitly-return-nothing/banner.png -------------------------------------------------------------------------------- /public/static/blog-images/ui-design-for-frontend-developers/call-to-action.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/ui-design-for-frontend-developers/call-to-action.jpg -------------------------------------------------------------------------------- /public/static/blog-images/ui-design-for-frontend-developers/visual-hierarchy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/ui-design-for-frontend-developers/visual-hierarchy.jpg -------------------------------------------------------------------------------- /public/static/blog-images/understanding-javascript-objects-part-4/global-proto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/understanding-javascript-objects-part-4/global-proto.png -------------------------------------------------------------------------------- /public/static/blog-images/ui-design-for-frontend-developers/ui-design-fundamentals.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/ui-design-for-frontend-developers/ui-design-fundamentals.jpg -------------------------------------------------------------------------------- /public/static/blog-images/understanding-javascript-objects-part-1/weird-javascript.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piyush-pawar-17/website/HEAD/public/static/blog-images/understanding-javascript-objects-part-1/weird-javascript.jpg -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /public/static/logos/mongodb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/logos/firebase.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "bracketSpacing": true, 4 | "endOfLine": "auto", 5 | "jsxSingleQuote": false, 6 | "printWidth": 120, 7 | "semi": true, 8 | "singleQuote": true, 9 | "tabWidth": 4, 10 | "trailingComma": "none", 11 | "useTabs": true 12 | } 13 | -------------------------------------------------------------------------------- /public/static/logos/gatsby.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/logos/typescript.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /typings/types.d.ts: -------------------------------------------------------------------------------- 1 | type ReadTimeResults = { 2 | text: string; 3 | time: number; 4 | words: number; 5 | minutes: number; 6 | }; 7 | 8 | export type FrontMatter = { 9 | title: string; 10 | subtitle: string; 11 | publishedAt: string; 12 | slug: string; 13 | readingTime: ReadTimeResults; 14 | }; 15 | 16 | export interface FrontMatterWithSlug extends FrontMatter { 17 | slug: string; 18 | } 19 | -------------------------------------------------------------------------------- /pages/index.tsx: -------------------------------------------------------------------------------- 1 | import Container from '@layouts/Container'; 2 | import Hero from '@components/Hero'; 3 | import Development from '@components/Development'; 4 | import Design from '@components/Design'; 5 | 6 | const IndexPage = () => { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | }; 15 | 16 | export default IndexPage; 17 | -------------------------------------------------------------------------------- /public/static/logos/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/logos/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/logos/adobe-xd.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/logos/email.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/static/logos/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "cleanUrls": true, 3 | "trailingSlash": false, 4 | "redirects": [ 5 | { 6 | "source": "/github", 7 | "destination": "https://github.com/piyush-pawar-17" 8 | }, 9 | { 10 | "source": "/dribbble", 11 | "destination": "https://dribbble.com/piyush-pawar-17" 12 | }, 13 | { 14 | "source": "/twitter", 15 | "destination": "https://twitter.com/piyush_pawar_17" 16 | }, 17 | { 18 | "source": "/linkedin", 19 | "destination": "https://www.linkedin.com/in/piyush-pawar" 20 | } 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /public/static/logos/dribbble.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Piyush Pawar | Front-end Developer", 3 | "short_name": "Piyush Pawar", 4 | "lang": "en-IN", 5 | "start_url": "/", 6 | "display": "standalone", 7 | "theme_color": "#0ba5f8", 8 | "icons": [ 9 | { 10 | "src": "favicon.ico", 11 | "sizes": "64x64 32x32 24x24 16x16", 12 | "type": "image/x-icon" 13 | }, 14 | { 15 | "src": "logo192.png", 16 | "sizes": "192x192", 17 | "type": "image/png" 18 | }, 19 | { 20 | "src": "logo512.png", 21 | "sizes": "512x512", 22 | "type": "image/png" 23 | } 24 | ], 25 | "background_color": "#f5fbff" 26 | } 27 | -------------------------------------------------------------------------------- /public/static/logos/figma.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /lib/gtag.ts: -------------------------------------------------------------------------------- 1 | export const GA_TRACKING_ID = 'UA-180358905-1'; 2 | 3 | // https://developers.google.com/analytics/devguides/collection/gtagjs/pages 4 | export const pageview = (url: string) => { 5 | window.gtag('config', GA_TRACKING_ID, { 6 | page_path: url 7 | }); 8 | }; 9 | 10 | interface GTagEvent { 11 | action: string; 12 | category: string; 13 | label: string; 14 | value: number; 15 | } 16 | 17 | // https://developers.google.com/analytics/devguides/collection/gtagjs/events 18 | export const event = ({ action, category, label, value }: GTagEvent) => { 19 | window.gtag('event', action, { 20 | event_category: category, 21 | event_label: label, 22 | value: value 23 | }); 24 | }; 25 | -------------------------------------------------------------------------------- /public/static/logos/next-js.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/static/logos/jest.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /components/Tooltip.tsx: -------------------------------------------------------------------------------- 1 | import Tippy from '@tippyjs/react'; 2 | import { Placement } from 'tippy.js'; 3 | 4 | interface TooltipProps { 5 | content: string; 6 | placement?: Placement; 7 | } 8 | 9 | const Tooltip: React.FC = ({ content, placement = 'top' }) => { 10 | const fileName = content.replace(/ /g, '-').replace(/\./g, '-').toLowerCase(); 11 | 12 | return ( 13 | 14 | {content} 19 | 20 | ); 21 | }; 22 | 23 | export default Tooltip; 24 | -------------------------------------------------------------------------------- /public/static/logos/react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/logos/adobe-after-effects.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "noImplicitAny": true, 17 | "allowSyntheticDefaultImports": true, 18 | "baseUrl": ".", 19 | "paths": { 20 | "@components/*": ["./components/*"], 21 | "@layouts/*": ["./layouts/*"], 22 | "@lib/*": ["./lib/*"], 23 | "@typings/*": ["./typings/*"] 24 | }, 25 | "incremental": true 26 | }, 27 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts"], 28 | "exclude": ["node_modules"] 29 | } 30 | -------------------------------------------------------------------------------- /components/MDXComponents.tsx: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import Link from 'next/link'; 3 | 4 | const CustomLink: React.FC< 5 | React.DetailedHTMLProps, HTMLAnchorElement> 6 | > = props => { 7 | const href = props.href!; 8 | const isInternalLink = href && (href.startsWith('/') || href.startsWith('#')); 9 | 10 | if (isInternalLink) { 11 | return ( 12 | 13 | 14 | 15 | ); 16 | } 17 | 18 | return ; 19 | }; 20 | 21 | const ListItem: React.FC, HTMLLIElement>> = props => { 22 | return
  • ; 23 | }; 24 | 25 | const MDXCompnents = { 26 | Image, 27 | a: CustomLink, 28 | li: ListItem 29 | }; 30 | 31 | export default MDXCompnents; 32 | -------------------------------------------------------------------------------- /public/static/logos/redux.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Website 2 | 3 | This is the second iteration of my website with new design and blog included. 4 | 5 | ### Tech Stack 6 | 7 | - [Next.js](https://nextjs.org/) 8 | - [TypeScript](https://www.typescriptlang.org/) 9 | - [Tailwind CSS](https://tailwindcss.com/) 10 | - [MDX](https://github.com/mdx-js/mdx) 11 | 12 | ### Overview 13 | 14 | - `pages/api/*` - [API Routes](https://nextjs.org/docs/api-routes/introduction) for the post views. 15 | - `data/blogs/*` - Static blogs powered by [MDX](https://github.com/mdx-js/mdx). 16 | - `/pages/*` - Other Static Pages 17 | 18 | ### Running Locally 19 | 20 | - Clone the repo 21 | 22 | ```sh 23 | git clone https://github.com/piyush-pawar-17/website.git 24 | cd website 25 | ``` 26 | 27 | - Install dependencies 28 | 29 | ```sh 30 | yarn 31 | ``` 32 | 33 | - Run dev server 34 | 35 | ```sh 36 | yarn dev 37 | ``` 38 | 39 | Create a `.env.local` file at the root similar to `.env.example` 40 | -------------------------------------------------------------------------------- /public/static/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /public/static/logos/node-js.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /components/Design.tsx: -------------------------------------------------------------------------------- 1 | import ProjectCard from '@components/ProjectCard'; 2 | 3 | const Design = () => { 4 | return ( 5 |
    6 |

    Me as a Designer ↓

    7 |
    8 | 9 | 10 | 11 | 15 |
    16 |
    22 | Find more designs on Dribbble 23 | 24 |
    25 | ); 26 | }; 27 | 28 | export default Design; 29 | -------------------------------------------------------------------------------- /pages/blog/[slug].tsx: -------------------------------------------------------------------------------- 1 | import { GetStaticPaths, GetStaticProps } from 'next'; 2 | import hydrate from 'next-mdx-remote/hydrate'; 3 | 4 | import BlogLayout from '@layouts/BlogLayout'; 5 | import MDXComponents from '@components/MDXComponents'; 6 | 7 | import { getFiles, getFileBySlug } from '@lib/mdx'; 8 | 9 | import { MdxRemote } from 'next-mdx-remote/types'; 10 | import { FrontMatter } from '@typings/types'; 11 | 12 | interface BlogPageProps { 13 | mdxSource: MdxRemote.Source; 14 | frontMatter: FrontMatter; 15 | } 16 | 17 | const BlogPage: React.FC = ({ mdxSource, frontMatter }) => { 18 | const content = hydrate(mdxSource, { 19 | components: MDXComponents 20 | }); 21 | 22 | return {content}; 23 | }; 24 | 25 | export const getStaticPaths: GetStaticPaths = async () => { 26 | const posts = await getFiles(); 27 | 28 | return { 29 | paths: posts.map(post => ({ 30 | params: { 31 | slug: post.replace(/\.mdx/, '') 32 | } 33 | })), 34 | fallback: false 35 | }; 36 | }; 37 | 38 | export const getStaticProps: GetStaticProps = async ({ params }) => { 39 | const post = await getFileBySlug(params!.slug as string); 40 | 41 | return { props: post }; 42 | }; 43 | 44 | export default BlogPage; 45 | -------------------------------------------------------------------------------- /pages/_document.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/no-danger*/ 2 | import Document, { Html, Head, Main, NextScript } from 'next/document'; 3 | 4 | import { GA_TRACKING_ID } from '@lib/gtag'; 5 | 6 | class MyDocument extends Document { 7 | render() { 8 | return ( 9 | 10 | 11 | 12 | 16 | 17 | 18 |