├── .DS_Store ├── .contentlayer ├── .cache │ └── v0.5.1 │ │ ├── compiled-contentlayer-config-R5EPTL46.mjs │ │ ├── compiled-contentlayer-config-R5EPTL46.mjs.map │ │ ├── data-6J7PXMQO.json │ │ ├── data-DU4B7RQS.json │ │ ├── data-HSCCEERK.json │ │ ├── data-M7T6QIXT.json │ │ ├── data-N6DGWP76.json │ │ ├── data-OGSGRIE3.json │ │ ├── data-OQWPKB4N.json │ │ ├── data-QM22GU5T.json │ │ ├── data-QX7RG4LG.json │ │ ├── data-QY5FWJKK.json │ │ ├── data-R5EPTL46.json │ │ ├── data-RKUOJATL.json │ │ ├── data-SUWRVOCL.json │ │ └── data-TFUQY5HB.json ├── generated │ ├── Blogs │ │ ├── _index.json │ │ ├── _index.mjs │ │ ├── blogs__eslint-setup.mdx.json │ │ ├── blogs__lemon-squeezy.mdx.json │ │ ├── blogs__making-website.mdx.json │ │ └── blogs__my-experience.mdx.json │ ├── TwitterContents │ │ ├── _index.json │ │ ├── _index.mjs │ │ ├── twitter-contents__1.mdx.json │ │ ├── twitter-contents__10.mdx.json │ │ ├── twitter-contents__11.mdx.json │ │ ├── twitter-contents__12.mdx.json │ │ ├── twitter-contents__13.mdx.json │ │ ├── twitter-contents__14.mdx.json │ │ ├── twitter-contents__15.mdx.json │ │ ├── twitter-contents__16.mdx.json │ │ ├── twitter-contents__17.mdx.json │ │ ├── twitter-contents__18.mdx.json │ │ ├── twitter-contents__19.mdx.json │ │ ├── twitter-contents__2.mdx.json │ │ ├── twitter-contents__20.mdx.json │ │ ├── twitter-contents__21.mdx.json │ │ ├── twitter-contents__22.mdx.json │ │ ├── twitter-contents__23.mdx.json │ │ ├── twitter-contents__24.mdx.json │ │ ├── twitter-contents__25.mdx.json │ │ ├── twitter-contents__3.mdx.json │ │ ├── twitter-contents__4.mdx.json │ │ ├── twitter-contents__5.mdx.json │ │ ├── twitter-contents__6.mdx.json │ │ ├── twitter-contents__7.mdx.json │ │ ├── twitter-contents__8.mdx.json │ │ └── twitter-contents__9.mdx.json │ ├── Works │ │ ├── _index.json │ │ ├── _index.mjs │ │ ├── blogs__eslint-setup.mdx.json │ │ ├── blogs__making-website.mdx.json │ │ ├── works__1.mdx.json │ │ ├── works__10.mdx.json │ │ ├── works__11.mdx.json │ │ ├── works__12.mdx.json │ │ ├── works__13.mdx.json │ │ ├── works__14.mdx.json │ │ ├── works__15 copy.mdx.json │ │ ├── works__15.mdx.json │ │ ├── works__16.mdx.json │ │ ├── works__17.mdx.json │ │ ├── works__18.mdx.json │ │ ├── works__19.mdx.json │ │ ├── works__2.mdx.json │ │ ├── works__20.mdx.json │ │ ├── works__21.mdx.json │ │ ├── works__22.mdx.json │ │ ├── works__23.mdx.json │ │ ├── works__24.mdx.json │ │ ├── works__3.mdx.json │ │ ├── works__4.mdx.json │ │ ├── works__5.mdx.json │ │ ├── works__6.mdx.json │ │ ├── works__7.mdx.json │ │ ├── works__8.mdx.json │ │ ├── works__9.mdx.json │ │ └── works__helping.mdx.json │ ├── buildData │ │ ├── _index.json │ │ ├── _index.mjs │ │ └── build-data__requirements.mdx.json │ ├── buildFast │ │ ├── _index.json │ │ ├── _index.mjs │ │ ├── build-fast__designs__charts.mdx.json │ │ ├── build-fast__error-handling.mdx.json │ │ ├── build-fast__links.mdx.json │ │ ├── build-fast__mdx-setup.mdx.json │ │ ├── build-fast__npm-packages.mdx.json │ │ ├── build-fast__react-libraries__general-hooks.mdx.json │ │ ├── build-fast__react-libraries__react-hotkeys-hook.mdx.json │ │ ├── build-fast__react-libraries__react-pdf.mdx.json │ │ ├── build-fast__react-libries__general-hooks.mdx.json │ │ ├── build-fast__react-libries__react-hotkeys-hook.mdx.json │ │ ├── build-fast__react-libries__react-pdf.mdx.json │ │ ├── build-fast__requirements copy.mdx.json │ │ ├── build-fast__requirements.mdx.json │ │ ├── build-fast__reusable-components__button.mdx.json │ │ ├── build-fast__server.mdx.json │ │ ├── build-fast__supbase.mdx.json │ │ ├── build-fast__third-party__framer-motion.mdx.json │ │ ├── build-fast__third-party__input-otp.mdx.json │ │ ├── build-fast__third-party__uuid.mdx.json │ │ ├── build-fast__ui__button.mdx.json │ │ └── build-fast__ui__useful-components.mdx.json │ ├── index.d.ts │ ├── index.mjs │ └── types.d.ts └── package.json ├── .eslintrc.json ├── .gitignore ├── .prettierignore ├── .prettierrc ├── README.md ├── __registry__ └── index.tsx ├── app ├── api │ └── send │ │ └── route.ts ├── blog │ └── [slug] │ │ └── page.tsx ├── build-fast │ └── [...slug] │ │ ├── Menu.tsx │ │ ├── Navbar.tsx │ │ └── page.tsx ├── favicon.ico ├── fonts │ ├── GeistMonoVF.woff │ └── GeistVF.woff ├── globals.css ├── helping │ └── layout-id-issue │ │ └── page.tsx ├── layout.tsx ├── not-found.tsx ├── page.tsx ├── recording │ └── [slug] │ │ └── page.tsx ├── volleyball │ └── page.tsx ├── work │ └── [...slug] │ │ └── page.tsx └── x-content │ └── [slug] │ └── page.tsx ├── components.json ├── components ├── AnimationSpeed.tsx ├── CodePreview.tsx ├── ColorPicker.tsx ├── ComponentPreview.tsx ├── CopyButton.tsx ├── EmailTemplate.tsx ├── FilesTab.tsx ├── FixedImage.tsx ├── GithubTheme.tsx ├── IphoneSimulator.tsx ├── MDX │ ├── MDXContent.blog.tsx │ └── MDXContent.work.tsx ├── NavigatingClick.tsx ├── SyntaxHighlighter.tsx ├── Tabs.tsx ├── TechIcons.tsx ├── TwitterContentsElement.tsx ├── apps.tsx ├── experience.tsx ├── hire-me.tsx └── ui │ ├── badge.tsx │ ├── button.tsx │ ├── dialog.tsx │ ├── drawer.tsx │ ├── input.tsx │ ├── label.tsx │ ├── select.tsx │ ├── separator.tsx │ ├── sheet.tsx │ ├── slider.tsx │ ├── sonner.tsx │ ├── text.tsx │ ├── textarea.tsx │ └── tooltip.tsx ├── contentlayer.config.js ├── contents ├── blogs │ ├── eslint-setup.mdx │ ├── lemon-squeezy.mdx │ ├── making-website.mdx │ └── my-experience.mdx ├── build-fast │ ├── error-handling.mdx │ ├── links.mdx │ ├── mdx-setup.mdx │ ├── npm-packages.mdx │ ├── react-libraries │ │ ├── general-hooks.mdx │ │ ├── react-hotkeys-hook.mdx │ │ └── react-pdf.mdx │ ├── requirements.mdx │ ├── server.mdx │ ├── supbase.mdx │ └── ui │ │ └── useful-components.mdx └── twitter-contents │ ├── 1.mdx │ ├── 10.mdx │ ├── 11.mdx │ ├── 12.mdx │ ├── 13.mdx │ ├── 14.mdx │ ├── 15.mdx │ ├── 16.mdx │ ├── 17.mdx │ ├── 18.mdx │ ├── 19.mdx │ ├── 2.mdx │ ├── 20.mdx │ ├── 21.mdx │ ├── 22.mdx │ ├── 23.mdx │ ├── 24.mdx │ ├── 25.mdx │ ├── 3.mdx │ ├── 4.mdx │ ├── 5.mdx │ ├── 6.mdx │ ├── 7.mdx │ ├── 8.mdx │ └── 9.mdx ├── lib └── utils.ts ├── middleware.tsx ├── next.config.js ├── package.json ├── pnpm-lock.yaml ├── postcss.config.mjs ├── preview ├── build-fast │ ├── hotKeys.tsx │ ├── input-otp.tsx │ ├── react-pdf.tsx │ ├── use-click-outside.tsx │ ├── use-debounced-state.tsx │ ├── use-fullscreen.tsx │ ├── use-media-query.tsx │ └── uuid.tsx └── twitter-contents │ ├── 5 │ ├── design-1.tsx │ ├── design-2.tsx │ └── index.tsx │ ├── 6 │ ├── block-elements.tsx │ └── inline-elements.tsx │ ├── 1.tsx │ ├── 10.tsx │ ├── 11.tsx │ ├── 12.tsx │ ├── 13.tsx │ ├── 14.tsx │ ├── 15.tsx │ ├── 16.tsx │ ├── 17.tsx │ ├── 18.tsx │ ├── 19.tsx │ ├── 2.tsx │ ├── 20.tsx │ ├── 21.tsx │ ├── 22.tsx │ ├── 23.tsx │ ├── 24.tsx │ ├── 25.tsx │ ├── 3.tsx │ ├── 4.tsx │ ├── 7.tsx │ ├── 8.tsx │ └── 9.tsx ├── public ├── air-canada-vector-logo.png ├── building-website.png ├── canada-airplane.png ├── eslint-setup.png ├── lemon-squeezy-api.png └── my-image.png ├── scripts └── build-registry.js ├── tailwind.config.ts └── tsconfig.json /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alisamadiii/Portfolio/51f097c3c5de225d20c0975b0edca9e95f09dc7e/.DS_Store -------------------------------------------------------------------------------- /.contentlayer/.cache/v0.5.1/compiled-contentlayer-config-R5EPTL46.mjs: -------------------------------------------------------------------------------- 1 | // contentlayer.config.js 2 | import { defineDocumentType, makeSource } from "contentlayer2/source-files"; 3 | import remarkGfm from "remark-gfm"; 4 | import rehypePrettyCode from "rehype-pretty-code"; 5 | import rehypeAutolinkHeadings from "rehype-autolink-headings"; 6 | import rehypeSlug from "rehype-slug"; 7 | var computedFields = { 8 | slug: { 9 | type: "string", 10 | resolve: (doc) => `/${doc._raw.flattenedPath}` 11 | }, 12 | slugAsParams: { 13 | type: "string", 14 | resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/") 15 | }, 16 | folder: { 17 | type: "string", 18 | resolve: (doc) => { 19 | const pathParts = doc._raw.flattenedPath.split("/"); 20 | return pathParts.length > 1 ? pathParts[pathParts.length - 2] : null; 21 | } 22 | } 23 | }; 24 | var Blogs = defineDocumentType(() => ({ 25 | name: "Blogs", 26 | filePathPattern: "./blogs/**/*.mdx", 27 | contentType: "mdx", 28 | fields: { 29 | title: { 30 | type: "string", 31 | required: true 32 | }, 33 | description: { 34 | type: "string", 35 | required: true 36 | }, 37 | image: { 38 | type: "string", 39 | required: true 40 | }, 41 | hidden: { 42 | type: "boolean" 43 | } 44 | }, 45 | computedFields 46 | })); 47 | var Works = defineDocumentType(() => ({ 48 | name: "Works", 49 | filePathPattern: "./works/**/*.mdx", 50 | contentType: "mdx", 51 | fields: { 52 | title: { 53 | type: "string", 54 | required: true 55 | } 56 | }, 57 | computedFields 58 | })); 59 | var TwitterContents = defineDocumentType(() => ({ 60 | name: "TwitterContents", 61 | filePathPattern: "./twitter-contents/**/*.mdx", 62 | contentType: "mdx", 63 | fields: { 64 | title: { 65 | type: "string", 66 | required: true 67 | }, 68 | tech: { 69 | type: "string", 70 | required: true 71 | } 72 | }, 73 | computedFields 74 | })); 75 | var buildFast = defineDocumentType(() => ({ 76 | name: "buildFast", 77 | filePathPattern: "./build-fast/**/*.mdx", 78 | contentType: "mdx", 79 | fields: { 80 | title: { 81 | type: "string", 82 | required: true 83 | }, 84 | order: { 85 | type: "string" 86 | } 87 | }, 88 | computedFields 89 | })); 90 | var contentlayer_config_default = makeSource({ 91 | contentDirPath: "./contents", 92 | documentTypes: [Blogs, Works, TwitterContents, buildFast], 93 | mdx: { 94 | remarkPlugins: [remarkGfm], 95 | rehypePlugins: [ 96 | rehypeSlug, 97 | [ 98 | rehypePrettyCode, 99 | { 100 | theme: { light: "github-light-default", dark: "github-dark-dimmed" }, 101 | keepBackground: false 102 | } 103 | ], 104 | [ 105 | rehypeAutolinkHeadings, 106 | { 107 | behavior: "wrap", 108 | content: (node) => node.children, 109 | properties: { 110 | className: ["subheading-anchor"], 111 | ariaLabel: "Link to section" 112 | } 113 | } 114 | ] 115 | ] 116 | } 117 | }); 118 | export { 119 | contentlayer_config_default as default 120 | }; 121 | //# sourceMappingURL=compiled-contentlayer-config-R5EPTL46.mjs.map 122 | -------------------------------------------------------------------------------- /.contentlayer/generated/Blogs/_index.mjs: -------------------------------------------------------------------------------- 1 | // NOTE This file is auto-generated by Contentlayer 2 | 3 | import blogs__eslintSetupMdx from './blogs__eslint-setup.mdx.json' with { type: 'json' } 4 | import blogs__lemonSqueezyMdx from './blogs__lemon-squeezy.mdx.json' with { type: 'json' } 5 | import blogs__makingWebsiteMdx from './blogs__making-website.mdx.json' with { type: 'json' } 6 | import blogs__myExperienceMdx from './blogs__my-experience.mdx.json' with { type: 'json' } 7 | 8 | export const allBlogs = [blogs__eslintSetupMdx, blogs__lemonSqueezyMdx, blogs__makingWebsiteMdx, blogs__myExperienceMdx] 9 | -------------------------------------------------------------------------------- /.contentlayer/generated/TwitterContents/_index.mjs: -------------------------------------------------------------------------------- 1 | // NOTE This file is auto-generated by Contentlayer 2 | 3 | import twitterContents__1Mdx from './twitter-contents__1.mdx.json' with { type: 'json' } 4 | import twitterContents__10Mdx from './twitter-contents__10.mdx.json' with { type: 'json' } 5 | import twitterContents__11Mdx from './twitter-contents__11.mdx.json' with { type: 'json' } 6 | import twitterContents__12Mdx from './twitter-contents__12.mdx.json' with { type: 'json' } 7 | import twitterContents__13Mdx from './twitter-contents__13.mdx.json' with { type: 'json' } 8 | import twitterContents__14Mdx from './twitter-contents__14.mdx.json' with { type: 'json' } 9 | import twitterContents__15Mdx from './twitter-contents__15.mdx.json' with { type: 'json' } 10 | import twitterContents__16Mdx from './twitter-contents__16.mdx.json' with { type: 'json' } 11 | import twitterContents__17Mdx from './twitter-contents__17.mdx.json' with { type: 'json' } 12 | import twitterContents__18Mdx from './twitter-contents__18.mdx.json' with { type: 'json' } 13 | import twitterContents__19Mdx from './twitter-contents__19.mdx.json' with { type: 'json' } 14 | import twitterContents__2Mdx from './twitter-contents__2.mdx.json' with { type: 'json' } 15 | import twitterContents__20Mdx from './twitter-contents__20.mdx.json' with { type: 'json' } 16 | import twitterContents__21Mdx from './twitter-contents__21.mdx.json' with { type: 'json' } 17 | import twitterContents__22Mdx from './twitter-contents__22.mdx.json' with { type: 'json' } 18 | import twitterContents__23Mdx from './twitter-contents__23.mdx.json' with { type: 'json' } 19 | import twitterContents__24Mdx from './twitter-contents__24.mdx.json' with { type: 'json' } 20 | import twitterContents__25Mdx from './twitter-contents__25.mdx.json' with { type: 'json' } 21 | import twitterContents__3Mdx from './twitter-contents__3.mdx.json' with { type: 'json' } 22 | import twitterContents__4Mdx from './twitter-contents__4.mdx.json' with { type: 'json' } 23 | import twitterContents__5Mdx from './twitter-contents__5.mdx.json' with { type: 'json' } 24 | import twitterContents__6Mdx from './twitter-contents__6.mdx.json' with { type: 'json' } 25 | import twitterContents__7Mdx from './twitter-contents__7.mdx.json' with { type: 'json' } 26 | import twitterContents__8Mdx from './twitter-contents__8.mdx.json' with { type: 'json' } 27 | import twitterContents__9Mdx from './twitter-contents__9.mdx.json' with { type: 'json' } 28 | 29 | export const allTwitterContents = [twitterContents__1Mdx, twitterContents__10Mdx, twitterContents__11Mdx, twitterContents__12Mdx, twitterContents__13Mdx, twitterContents__14Mdx, twitterContents__15Mdx, twitterContents__16Mdx, twitterContents__17Mdx, twitterContents__18Mdx, twitterContents__19Mdx, twitterContents__2Mdx, twitterContents__20Mdx, twitterContents__21Mdx, twitterContents__22Mdx, twitterContents__23Mdx, twitterContents__24Mdx, twitterContents__25Mdx, twitterContents__3Mdx, twitterContents__4Mdx, twitterContents__5Mdx, twitterContents__6Mdx, twitterContents__7Mdx, twitterContents__8Mdx, twitterContents__9Mdx] 30 | -------------------------------------------------------------------------------- /.contentlayer/generated/TwitterContents/twitter-contents__1.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Mix Blend Mode", 3 | "tech": "css", 4 | "body": { 5 | "raw": "\n\n", 6 | "code": "var Component=(()=>{var x=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var M=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of a(e))!w.call(t,o)&&o!==n&&r(t,o,{get:()=>e[o],enumerable:!(c=p(e,o))||c.enumerable});return t};var j=(t,e,n)=>(n=t!=null?x(l(t)):{},s(e||!t||!t.__esModule?r(n,\"default\",{value:t,enumerable:!0}):n,t)),C=t=>s(r({},\"__esModule\",{value:!0}),t);var d=M((g,m)=>{m.exports=_jsx_runtime});var y={};_(y,{default:()=>u,frontmatter:()=>h});var i=j(d()),h={title:\"Mix Blend Mode\",tech:\"css\"};function f(t){let{ComponentPreview:e}=t.components||{};return e||v(\"ComponentPreview\",!0),(0,i.jsx)(e,{name:\"twitter-contents-1\"})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(f,{...t})}):f(t)}function v(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return C(y);})();\n;return Component;" 7 | }, 8 | "_id": "twitter-contents/1.mdx", 9 | "_raw": { 10 | "sourceFilePath": "twitter-contents/1.mdx", 11 | "sourceFileName": "1.mdx", 12 | "sourceFileDir": "twitter-contents", 13 | "contentType": "mdx", 14 | "flattenedPath": "twitter-contents/1" 15 | }, 16 | "type": "TwitterContents", 17 | "slug": "/twitter-contents/1", 18 | "slugAsParams": "1", 19 | "folder": "twitter-contents" 20 | } -------------------------------------------------------------------------------- /.contentlayer/generated/TwitterContents/twitter-contents__12.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Input Number Format", 3 | "tech": "html", 4 | "body": { 5 | "raw": "\nMake sure to use it in your phone.\n\n```html title=\"index.html\"\n\n```\n\n\n", 6 | "code": "var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var f=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},d=(t,e,n,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of u(e))!k.call(t,r)&&r!==n&&a(t,r,{get:()=>e[r],enumerable:!(h=g(e,r))||h.enumerable});return t};var F=(t,e,n)=>(n=t!=null?p(m(t)):{},d(e||!t||!t.__esModule?a(n,\"default\",{value:t,enumerable:!0}):n,t)),x=t=>d(a({},\"__esModule\",{value:!0}),t);var l=f((_,s)=>{s.exports=_jsx_runtime});var C={};y(C,{default:()=>c,frontmatter:()=>A});var i=F(l()),A={title:\"Input Number Format\",tech:\"html\"};function o(t){let e={code:\"code\",figcaption:\"figcaption\",figure:\"figure\",p:\"p\",pre:\"pre\",span:\"span\",...t.components},{ComponentPreview:n}=e;return n||b(\"ComponentPreview\",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.p,{children:\"Make sure to use it in your phone.\"}),`\n`,(0,i.jsxs)(e.figure,{\"data-rehype-pretty-code-figure\":\"\",children:[(0,i.jsx)(e.figcaption,{\"data-rehype-pretty-code-title\":\"\",\"data-language\":\"html\",\"data-theme\":\"github-light-default github-dark-dimmed\",children:\"index.html\"}),(0,i.jsx)(e.pre,{tabIndex:\"0\",\"data-language\":\"html\",\"data-theme\":\"github-light-default github-dark-dimmed\",children:(0,i.jsx)(e.code,{\"data-language\":\"html\",\"data-theme\":\"github-light-default github-dark-dimmed\",style:{display:\"grid\"},children:(0,i.jsxs)(e.span,{\"data-line\":\"\",children:[(0,i.jsx)(e.span,{style:{\"--shiki-light\":\"#1F2328\",\"--shiki-dark\":\"#ADBAC7\"},children:\"<\"}),(0,i.jsx)(e.span,{style:{\"--shiki-light\":\"#116329\",\"--shiki-dark\":\"#8DDB8C\"},children:\"input\"}),(0,i.jsx)(e.span,{style:{\"--shiki-light\":\"#0550AE\",\"--shiki-dark\":\"#6CB6FF\"},children:\" type\"}),(0,i.jsx)(e.span,{style:{\"--shiki-light\":\"#1F2328\",\"--shiki-dark\":\"#ADBAC7\"},children:\"=\"}),(0,i.jsx)(e.span,{style:{\"--shiki-light\":\"#0A3069\",\"--shiki-dark\":\"#96D0FF\"},children:'\"number\"'}),(0,i.jsx)(e.span,{style:{\"--shiki-light\":\"#0550AE\",\"--shiki-dark\":\"#6CB6FF\"},children:\" inputmode\"}),(0,i.jsx)(e.span,{style:{\"--shiki-light\":\"#1F2328\",\"--shiki-dark\":\"#ADBAC7\"},children:\"=\"}),(0,i.jsx)(e.span,{style:{\"--shiki-light\":\"#0A3069\",\"--shiki-dark\":\"#96D0FF\"},children:'\"numeric\"'}),(0,i.jsx)(e.span,{style:{\"--shiki-light\":\"#1F2328\",\"--shiki-dark\":\"#ADBAC7\"},children:\" />\"})]})})})]}),`\n`,(0,i.jsx)(n,{name:\"twitter-contents-12\"})]})}function c(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(o,{...t})}):o(t)}function b(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return x(C);})();\n;return Component;" 7 | }, 8 | "_id": "twitter-contents/12.mdx", 9 | "_raw": { 10 | "sourceFilePath": "twitter-contents/12.mdx", 11 | "sourceFileName": "12.mdx", 12 | "sourceFileDir": "twitter-contents", 13 | "contentType": "mdx", 14 | "flattenedPath": "twitter-contents/12" 15 | }, 16 | "type": "TwitterContents", 17 | "slug": "/twitter-contents/12", 18 | "slugAsParams": "12", 19 | "folder": "twitter-contents" 20 | } -------------------------------------------------------------------------------- /.contentlayer/generated/TwitterContents/twitter-contents__18.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Text Gradient", 3 | "tech": "CSS", 4 | "body": { 5 | "raw": "\n\n", 6 | "code": "var Component=(()=>{var a=Object.create;var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var C=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},m=(t,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of p(e))!l.call(t,o)&&o!==n&&r(t,o,{get:()=>e[o],enumerable:!(c=d(e,o))||c.enumerable});return t};var j=(t,e,n)=>(n=t!=null?a(w(t)):{},m(e||!t||!t.__esModule?r(n,\"default\",{value:t,enumerable:!0}):n,t)),M=t=>m(r({},\"__esModule\",{value:!0}),t);var f=C((g,s)=>{s.exports=_jsx_runtime});var y={};_(y,{default:()=>x,frontmatter:()=>h});var i=j(f()),h={title:\"Text Gradient\",tech:\"CSS\"};function u(t){let{ComponentPreview:e}=t.components||{};return e||v(\"ComponentPreview\",!0),(0,i.jsx)(e,{name:\"twitter-contents-18\"})}function x(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(u,{...t})}):u(t)}function v(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return M(y);})();\n;return Component;" 7 | }, 8 | "_id": "twitter-contents/18.mdx", 9 | "_raw": { 10 | "sourceFilePath": "twitter-contents/18.mdx", 11 | "sourceFileName": "18.mdx", 12 | "sourceFileDir": "twitter-contents", 13 | "contentType": "mdx", 14 | "flattenedPath": "twitter-contents/18" 15 | }, 16 | "type": "TwitterContents", 17 | "slug": "/twitter-contents/18", 18 | "slugAsParams": "18", 19 | "folder": "twitter-contents" 20 | } -------------------------------------------------------------------------------- /.contentlayer/generated/TwitterContents/twitter-contents__2.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Border", 3 | "tech": "css", 4 | "body": { 5 | "raw": "\n\n", 6 | "code": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var _=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),j=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of a(e))!l.call(t,o)&&o!==n&&r(t,o,{get:()=>e[o],enumerable:!(c=x(e,o))||c.enumerable});return t};var C=(t,e,n)=>(n=t!=null?p(w(t)):{},s(e||!t||!t.__esModule?r(n,\"default\",{value:t,enumerable:!0}):n,t)),M=t=>s(r({},\"__esModule\",{value:!0}),t);var f=_((g,m)=>{m.exports=_jsx_runtime});var y={};j(y,{default:()=>d,frontmatter:()=>h});var i=C(f()),h={title:\"Border\",tech:\"css\"};function u(t){let{ComponentPreview:e}=t.components||{};return e||v(\"ComponentPreview\",!0),(0,i.jsx)(e,{name:\"twitter-contents-2\"})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(u,{...t})}):u(t)}function v(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return M(y);})();\n;return Component;" 7 | }, 8 | "_id": "twitter-contents/2.mdx", 9 | "_raw": { 10 | "sourceFilePath": "twitter-contents/2.mdx", 11 | "sourceFileName": "2.mdx", 12 | "sourceFileDir": "twitter-contents", 13 | "contentType": "mdx", 14 | "flattenedPath": "twitter-contents/2" 15 | }, 16 | "type": "TwitterContents", 17 | "slug": "/twitter-contents/2", 18 | "slugAsParams": "2", 19 | "folder": "twitter-contents" 20 | } -------------------------------------------------------------------------------- /.contentlayer/generated/TwitterContents/twitter-contents__24.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "CSS Caret", 3 | "tech": "CSS", 4 | "body": { 5 | "raw": "\n```css title=\"style.css\"\ninput {\n caret-color: ;\n}\n```\n\n\n", 6 | "code": "var Component=(()=>{var g=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var k=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,d)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!f.call(t,a)&&a!==n&&r(t,a,{get:()=>e[a],enumerable:!(d=p(e,a))||d.enumerable});return t};var x=(t,e,n)=>(n=t!=null?g(m(t)):{},s(e||!t||!t.__esModule?r(n,\"default\",{value:t,enumerable:!0}):n,t)),C=t=>s(r({},\"__esModule\",{value:!0}),t);var l=k((F,o)=>{o.exports=_jsx_runtime});var A={};y(A,{default:()=>h,frontmatter:()=>b});var i=x(l()),b={title:\"CSS Caret\",tech:\"CSS\"};function c(t){let e={code:\"code\",figcaption:\"figcaption\",figure:\"figure\",pre:\"pre\",span:\"span\",...t.components},{ComponentPreview:n}=e;return n||_(\"ComponentPreview\",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(e.figure,{\"data-rehype-pretty-code-figure\":\"\",children:[(0,i.jsx)(e.figcaption,{\"data-rehype-pretty-code-title\":\"\",\"data-language\":\"css\",\"data-theme\":\"github-light-default github-dark-dimmed\",children:\"style.css\"}),(0,i.jsx)(e.pre,{tabIndex:\"0\",\"data-language\":\"css\",\"data-theme\":\"github-light-default github-dark-dimmed\",children:(0,i.jsxs)(e.code,{\"data-language\":\"css\",\"data-theme\":\"github-light-default github-dark-dimmed\",style:{display:\"grid\"},children:[(0,i.jsxs)(e.span,{\"data-line\":\"\",children:[(0,i.jsx)(e.span,{style:{\"--shiki-light\":\"#116329\",\"--shiki-dark\":\"#8DDB8C\"},children:\"input\"}),(0,i.jsx)(e.span,{style:{\"--shiki-light\":\"#1F2328\",\"--shiki-dark\":\"#ADBAC7\"},children:\" {\"})]}),`\n`,(0,i.jsxs)(e.span,{\"data-line\":\"\",children:[(0,i.jsx)(e.span,{style:{\"--shiki-light\":\"#0550AE\",\"--shiki-dark\":\"#6CB6FF\"},children:\" caret-color\"}),(0,i.jsx)(e.span,{style:{\"--shiki-light\":\"#1F2328\",\"--shiki-dark\":\"#ADBAC7\"},children:\": ;\"})]}),`\n`,(0,i.jsx)(e.span,{\"data-line\":\"\",children:(0,i.jsx)(e.span,{style:{\"--shiki-light\":\"#1F2328\",\"--shiki-dark\":\"#ADBAC7\"},children:\"}\"})})]})})]}),`\n`,(0,i.jsx)(n,{name:\"twitter-contents-24\"})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(c,{...t})}):c(t)}function _(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return C(A);})();\n;return Component;" 7 | }, 8 | "_id": "twitter-contents/24.mdx", 9 | "_raw": { 10 | "sourceFilePath": "twitter-contents/24.mdx", 11 | "sourceFileName": "24.mdx", 12 | "sourceFileDir": "twitter-contents", 13 | "contentType": "mdx", 14 | "flattenedPath": "twitter-contents/24" 15 | }, 16 | "type": "TwitterContents", 17 | "slug": "/twitter-contents/24", 18 | "slugAsParams": "24", 19 | "folder": "twitter-contents" 20 | } -------------------------------------------------------------------------------- /.contentlayer/generated/TwitterContents/twitter-contents__3.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "::selection", 3 | "tech": "css", 4 | "body": { 5 | "raw": "\n\n", 6 | "code": "var Component=(()=>{var x=Object.create;var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var _=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),j=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of d(e))!w.call(t,o)&&o!==n&&r(t,o,{get:()=>e[o],enumerable:!(c=a(e,o))||c.enumerable});return t};var C=(t,e,n)=>(n=t!=null?x(l(t)):{},s(e||!t||!t.__esModule?r(n,\"default\",{value:t,enumerable:!0}):n,t)),M=t=>s(r({},\"__esModule\",{value:!0}),t);var f=_((g,m)=>{m.exports=_jsx_runtime});var y={};j(y,{default:()=>p,frontmatter:()=>h});var i=C(f()),h={title:\"::selection\",tech:\"css\"};function u(t){let{ComponentPreview:e}=t.components||{};return e||v(\"ComponentPreview\",!0),(0,i.jsx)(e,{name:\"twitter-contents-3\"})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(u,{...t})}):u(t)}function v(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return M(y);})();\n;return Component;" 7 | }, 8 | "_id": "twitter-contents/3.mdx", 9 | "_raw": { 10 | "sourceFilePath": "twitter-contents/3.mdx", 11 | "sourceFileName": "3.mdx", 12 | "sourceFileDir": "twitter-contents", 13 | "contentType": "mdx", 14 | "flattenedPath": "twitter-contents/3" 15 | }, 16 | "type": "TwitterContents", 17 | "slug": "/twitter-contents/3", 18 | "slugAsParams": "3", 19 | "folder": "twitter-contents" 20 | } -------------------------------------------------------------------------------- /.contentlayer/generated/TwitterContents/twitter-contents__4.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Position", 3 | "tech": "css", 4 | "body": { 5 | "raw": "\n\n", 6 | "code": "var Component=(()=>{var x=Object.create;var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var _=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),j=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of d(e))!l.call(t,o)&&o!==n&&r(t,o,{get:()=>e[o],enumerable:!(c=a(e,o))||c.enumerable});return t};var C=(t,e,n)=>(n=t!=null?x(w(t)):{},s(e||!t||!t.__esModule?r(n,\"default\",{value:t,enumerable:!0}):n,t)),M=t=>s(r({},\"__esModule\",{value:!0}),t);var f=_((b,m)=>{m.exports=_jsx_runtime});var y={};j(y,{default:()=>p,frontmatter:()=>h});var i=C(f()),h={title:\"Position\",tech:\"css\"};function u(t){let{ComponentPreview:e}=t.components||{};return e||v(\"ComponentPreview\",!0),(0,i.jsx)(e,{name:\"twitter-contents-4\"})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(u,{...t})}):u(t)}function v(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return M(y);})();\n;return Component;" 7 | }, 8 | "_id": "twitter-contents/4.mdx", 9 | "_raw": { 10 | "sourceFilePath": "twitter-contents/4.mdx", 11 | "sourceFileName": "4.mdx", 12 | "sourceFileDir": "twitter-contents", 13 | "contentType": "mdx", 14 | "flattenedPath": "twitter-contents/4" 15 | }, 16 | "type": "TwitterContents", 17 | "slug": "/twitter-contents/4", 18 | "slugAsParams": "4", 19 | "folder": "twitter-contents" 20 | } -------------------------------------------------------------------------------- /.contentlayer/generated/TwitterContents/twitter-contents__6.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "HTML Elements", 3 | "tech": "html", 4 | "body": { 5 | "raw": "\n### Block Elements\n\n\n\n### Inline Elements\n\n\n", 6 | "code": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,p=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),_=(n,e)=>{for(var o in e)r(n,o,{get:e[o],enumerable:!0})},l=(n,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of u(e))!p.call(n,i)&&i!==o&&r(n,i,{get:()=>e[i],enumerable:!(s=f(e,i))||s.enumerable});return n};var k=(n,e,o)=>(o=n!=null?d(x(n)):{},l(e||!n||!n.__esModule?r(o,\"default\",{value:n,enumerable:!0}):o,n)),w=n=>l(r({},\"__esModule\",{value:!0}),n);var a=b((C,c)=>{c.exports=_jsx_runtime});var E={};_(E,{default:()=>h,frontmatter:()=>g});var t=k(a()),g={title:\"HTML Elements\",tech:\"html\"};function m(n){let e={a:\"a\",h3:\"h3\",...n.components},{ComponentPreview:o}=e;return o||j(\"ComponentPreview\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h3,{id:\"block-elements\",children:(0,t.jsx)(e.a,{className:\"subheading-anchor\",\"aria-label\":\"Link to section\",href:\"#block-elements\",children:\"Block Elements\"})}),`\n`,(0,t.jsx)(o,{name:\"twitter-contents-6-block-elements\"}),`\n`,(0,t.jsx)(e.h3,{id:\"inline-elements\",children:(0,t.jsx)(e.a,{className:\"subheading-anchor\",\"aria-label\":\"Link to section\",href:\"#inline-elements\",children:\"Inline Elements\"})}),`\n`,(0,t.jsx)(o,{name:\"twitter-contents-6-inline-elements\"})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(m,{...n})}):m(n)}function j(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return w(E);})();\n;return Component;" 7 | }, 8 | "_id": "twitter-contents/6.mdx", 9 | "_raw": { 10 | "sourceFilePath": "twitter-contents/6.mdx", 11 | "sourceFileName": "6.mdx", 12 | "sourceFileDir": "twitter-contents", 13 | "contentType": "mdx", 14 | "flattenedPath": "twitter-contents/6" 15 | }, 16 | "type": "TwitterContents", 17 | "slug": "/twitter-contents/6", 18 | "slugAsParams": "6", 19 | "folder": "twitter-contents" 20 | } -------------------------------------------------------------------------------- /.contentlayer/generated/TwitterContents/twitter-contents__7.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "CSS Variables", 3 | "tech": "css", 4 | "body": { 5 | "raw": "\n\n", 6 | "code": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var C=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of d(e))!w.call(t,o)&&o!==n&&r(t,o,{get:()=>e[o],enumerable:!(c=x(e,o))||c.enumerable});return t};var j=(t,e,n)=>(n=t!=null?p(l(t)):{},s(e||!t||!t.__esModule?r(n,\"default\",{value:t,enumerable:!0}):n,t)),M=t=>s(r({},\"__esModule\",{value:!0}),t);var a=C((g,m)=>{m.exports=_jsx_runtime});var v={};_(v,{default:()=>u,frontmatter:()=>b});var i=j(a()),b={title:\"CSS Variables\",tech:\"css\"};function f(t){let{ComponentPreview:e}=t.components||{};return e||h(\"ComponentPreview\",!0),(0,i.jsx)(e,{name:\"twitter-contents-7\"})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(f,{...t})}):f(t)}function h(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return M(v);})();\n;return Component;" 7 | }, 8 | "_id": "twitter-contents/7.mdx", 9 | "_raw": { 10 | "sourceFilePath": "twitter-contents/7.mdx", 11 | "sourceFileName": "7.mdx", 12 | "sourceFileDir": "twitter-contents", 13 | "contentType": "mdx", 14 | "flattenedPath": "twitter-contents/7" 15 | }, 16 | "type": "TwitterContents", 17 | "slug": "/twitter-contents/7", 18 | "slugAsParams": "7", 19 | "folder": "twitter-contents" 20 | } -------------------------------------------------------------------------------- /.contentlayer/generated/TwitterContents/twitter-contents__8.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Proper Rounded Corners", 3 | "tech": "css", 4 | "body": { 5 | "raw": "\n\n", 6 | "code": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var C=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:!0})},s=(e,t,n,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let o of a(t))!l.call(e,o)&&o!==n&&r(e,o,{get:()=>t[o],enumerable:!(c=x(t,o))||c.enumerable});return e};var j=(e,t,n)=>(n=e!=null?p(w(e)):{},s(t||!e||!e.__esModule?r(n,\"default\",{value:e,enumerable:!0}):n,e)),M=e=>s(r({},\"__esModule\",{value:!0}),e);var u=C((b,m)=>{m.exports=_jsx_runtime});var y={};_(y,{default:()=>f,frontmatter:()=>h});var i=j(u()),h={title:\"Proper Rounded Corners\",tech:\"css\"};function d(e){let{ComponentPreview:t}=e.components||{};return t||v(\"ComponentPreview\",!0),(0,i.jsx)(t,{name:\"twitter-contents-8\"})}function f(e={}){let{wrapper:t}=e.components||{};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}function v(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return M(y);})();\n;return Component;" 7 | }, 8 | "_id": "twitter-contents/8.mdx", 9 | "_raw": { 10 | "sourceFilePath": "twitter-contents/8.mdx", 11 | "sourceFileName": "8.mdx", 12 | "sourceFileDir": "twitter-contents", 13 | "contentType": "mdx", 14 | "flattenedPath": "twitter-contents/8" 15 | }, 16 | "type": "TwitterContents", 17 | "slug": "/twitter-contents/8", 18 | "slugAsParams": "8", 19 | "folder": "twitter-contents" 20 | } -------------------------------------------------------------------------------- /.contentlayer/generated/Works/_index.json: -------------------------------------------------------------------------------- 1 | [] -------------------------------------------------------------------------------- /.contentlayer/generated/Works/_index.mjs: -------------------------------------------------------------------------------- 1 | // NOTE This file is auto-generated by Contentlayer 2 | 3 | 4 | 5 | export const allWorks = [] 6 | -------------------------------------------------------------------------------- /.contentlayer/generated/Works/works__13.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "iOS Volume", 3 | "body": { 4 | "raw": "\n\n", 5 | "code": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var _=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),j=(e,t)=>{for(var o in t)r(e,o,{get:t[o],enumerable:!0})},m=(e,t,o,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let n of d(t))!w.call(e,n)&&n!==o&&r(e,n,{get:()=>t[n],enumerable:!(c=x(t,n))||c.enumerable});return e};var C=(e,t,o)=>(o=e!=null?p(l(e)):{},m(t||!e||!e.__esModule?r(o,\"default\",{value:e,enumerable:!0}):o,e)),M=e=>m(r({},\"__esModule\",{value:!0}),e);var a=_((h,s)=>{s.exports=_jsx_runtime});var v={};j(v,{default:()=>f,frontmatter:()=>b});var i=C(a()),b={title:\"iOS Volume\"};function u(e){let{ComponentPreview:t}=e.components||{};return t||g(\"ComponentPreview\",!0),(0,i.jsx)(t,{name:\"works-13\",className:\"bg-natural-900\"})}function f(e={}){let{wrapper:t}=e.components||{};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}function g(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return M(v);})();\n;return Component;" 6 | }, 7 | "_id": "works/13.mdx", 8 | "_raw": { 9 | "sourceFilePath": "works/13.mdx", 10 | "sourceFileName": "13.mdx", 11 | "sourceFileDir": "works", 12 | "contentType": "mdx", 13 | "flattenedPath": "works/13" 14 | }, 15 | "type": "Works", 16 | "slug": "/works/13", 17 | "slugAsParams": "13", 18 | "folder": "works" 19 | } -------------------------------------------------------------------------------- /.contentlayer/generated/Works/works__15 copy.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Works-15", 3 | "body": { 4 | "raw": "\n\n", 5 | "code": "var Component=(()=>{var x=Object.create;var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var _=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),j=(e,t)=>{for(var o in t)r(e,o,{get:t[o],enumerable:!0})},s=(e,t,o,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let n of d(t))!l.call(e,n)&&n!==o&&r(e,n,{get:()=>t[n],enumerable:!(c=a(t,n))||c.enumerable});return e};var C=(e,t,o)=>(o=e!=null?x(w(e)):{},s(t||!e||!e.__esModule?r(o,\"default\",{value:e,enumerable:!0}):o,e)),M=e=>s(r({},\"__esModule\",{value:!0}),e);var f=_((g,m)=>{m.exports=_jsx_runtime});var y={};j(y,{default:()=>p,frontmatter:()=>k});var i=C(f()),k={title:\"Works-15\"};function u(e){let{ComponentPreview:t}=e.components||{};return t||v(\"ComponentPreview\",!0),(0,i.jsx)(t,{name:\"works-15\"})}function p(e={}){let{wrapper:t}=e.components||{};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}function v(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return M(y);})();\n;return Component;" 6 | }, 7 | "_id": "works/15 copy.mdx", 8 | "_raw": { 9 | "sourceFilePath": "works/15 copy.mdx", 10 | "sourceFileName": "15 copy.mdx", 11 | "sourceFileDir": "works", 12 | "contentType": "mdx", 13 | "flattenedPath": "works/15 copy" 14 | }, 15 | "type": "Works", 16 | "slug": "/works/15 copy", 17 | "slugAsParams": "15 copy", 18 | "folder": "works" 19 | } -------------------------------------------------------------------------------- /.contentlayer/generated/Works/works__16.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Todo List Information", 3 | "body": { 4 | "raw": "\n\n", 5 | "code": "var Component=(()=>{var d=Object.create;var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var _=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),j=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},m=(t,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of x(e))!l.call(t,n)&&n!==o&&r(t,n,{get:()=>e[n],enumerable:!(c=p(e,n))||c.enumerable});return t};var C=(t,e,o)=>(o=t!=null?d(w(t)):{},m(e||!t||!t.__esModule?r(o,\"default\",{value:t,enumerable:!0}):o,t)),M=t=>m(r({},\"__esModule\",{value:!0}),t);var f=_((h,s)=>{s.exports=_jsx_runtime});var b={};j(b,{default:()=>a,frontmatter:()=>v});var i=C(f()),v={title:\"Todo List Information\"};function u(t){let{ComponentPreview:e}=t.components||{};return e||y(\"ComponentPreview\",!0),(0,i.jsx)(e,{name:\"works-16\"})}function a(t={}){let{wrapper:e}=t.components||{};return e?(0,i.jsx)(e,{...t,children:(0,i.jsx)(u,{...t})}):u(t)}function y(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return M(b);})();\n;return Component;" 6 | }, 7 | "_id": "works/16.mdx", 8 | "_raw": { 9 | "sourceFilePath": "works/16.mdx", 10 | "sourceFileName": "16.mdx", 11 | "sourceFileDir": "works", 12 | "contentType": "mdx", 13 | "flattenedPath": "works/16" 14 | }, 15 | "type": "Works", 16 | "slug": "/works/16", 17 | "slugAsParams": "16", 18 | "folder": "works" 19 | } -------------------------------------------------------------------------------- /.contentlayer/generated/Works/works__23.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Folder Closed", 3 | "body": { 4 | "raw": "\n\n", 5 | "code": "var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var C=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var o in t)r(e,o,{get:t[o],enumerable:!0})},s=(e,t,o,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let n of a(t))!w.call(e,n)&&n!==o&&r(e,n,{get:()=>t[n],enumerable:!(c=x(t,n))||c.enumerable});return e};var j=(e,t,o)=>(o=e!=null?p(l(e)):{},s(t||!e||!e.__esModule?r(o,\"default\",{value:e,enumerable:!0}):o,e)),M=e=>s(r({},\"__esModule\",{value:!0}),e);var d=C((h,m)=>{m.exports=_jsx_runtime});var b={};_(b,{default:()=>u,frontmatter:()=>v});var i=j(d()),v={title:\"Folder Closed\"};function f(e){let{ComponentPreview:t}=e.components||{};return t||y(\"ComponentPreview\",!0),(0,i.jsx)(t,{name:\"works-23\"})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}function y(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return M(b);})();\n;return Component;" 6 | }, 7 | "_id": "works/23.mdx", 8 | "_raw": { 9 | "sourceFilePath": "works/23.mdx", 10 | "sourceFileName": "23.mdx", 11 | "sourceFileDir": "works", 12 | "contentType": "mdx", 13 | "flattenedPath": "works/23" 14 | }, 15 | "type": "Works", 16 | "slug": "/works/23", 17 | "slugAsParams": "23", 18 | "folder": "works" 19 | } -------------------------------------------------------------------------------- /.contentlayer/generated/Works/works__helping.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Helping", 3 | "body": { 4 | "raw": "\n\n", 5 | "code": "var Component=(()=>{var x=Object.create;var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var _=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),g=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:!0})},m=(e,t,n,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let o of d(t))!w.call(e,o)&&o!==n&&r(e,o,{get:()=>t[o],enumerable:!(c=a(t,o))||c.enumerable});return e};var j=(e,t,n)=>(n=e!=null?x(l(e)):{},m(t||!e||!e.__esModule?r(n,\"default\",{value:e,enumerable:!0}):n,e)),C=e=>m(r({},\"__esModule\",{value:!0}),e);var p=_((b,s)=>{s.exports=_jsx_runtime});var v={};g(v,{default:()=>u,frontmatter:()=>M});var i=j(p()),M={title:\"Helping\"};function f(e){let{ComponentPreview:t}=e.components||{};return t||h(\"ComponentPreview\",!0),(0,i.jsx)(t,{name:\"works-helping\"})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(f,{...e})}):f(e)}function h(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return C(v);})();\n;return Component;" 6 | }, 7 | "_id": "works/helping.mdx", 8 | "_raw": { 9 | "sourceFilePath": "works/helping.mdx", 10 | "sourceFileName": "helping.mdx", 11 | "sourceFileDir": "works", 12 | "contentType": "mdx", 13 | "flattenedPath": "works/helping" 14 | }, 15 | "type": "Works", 16 | "slug": "/works/helping", 17 | "slugAsParams": "helping" 18 | } -------------------------------------------------------------------------------- /.contentlayer/generated/buildData/_index.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "requirements", 4 | "body": { 5 | "raw": "\n# Requirements", 6 | "code": "var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var q=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),j=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},s=(e,t,n,a)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of x(t))!_.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(a=d(t,r))||a.enumerable});return e};var p=(e,t,n)=>(n=e!=null?l(f(e)):{},s(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),M=e=>s(i({},\"__esModule\",{value:!0}),e);var m=q((L,c)=>{c.exports=_jsx_runtime});var C={};j(C,{default:()=>h,frontmatter:()=>b});var o=p(m()),b={title:\"requirements\"};function u(e){let t={a:\"a\",h1:\"h1\",...e.components};return(0,o.jsx)(t.h1,{id:\"requirements\",children:(0,o.jsx)(t.a,{className:\"subheading-anchor\",\"aria-label\":\"Link to section\",href:\"#requirements\",children:\"Requirements\"})})}function h(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}return M(C);})();\n;return Component;" 7 | }, 8 | "_id": "build-data/requirements.mdx", 9 | "_raw": { 10 | "sourceFilePath": "build-data/requirements.mdx", 11 | "sourceFileName": "requirements.mdx", 12 | "sourceFileDir": "build-data", 13 | "contentType": "mdx", 14 | "flattenedPath": "build-data/requirements" 15 | }, 16 | "type": "buildData", 17 | "slug": "/build-data/requirements", 18 | "slugAsParams": "requirements" 19 | } 20 | ] -------------------------------------------------------------------------------- /.contentlayer/generated/buildData/_index.mjs: -------------------------------------------------------------------------------- 1 | // NOTE This file is auto-generated by Contentlayer 2 | 3 | import buildData__requirementsMdx from './build-data__requirements.mdx.json' with { type: 'json' } 4 | 5 | export const allBuildData = [buildData__requirementsMdx] 6 | -------------------------------------------------------------------------------- /.contentlayer/generated/buildData/build-data__requirements.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "requirements", 3 | "body": { 4 | "raw": "\n# Requirements", 5 | "code": "var Component=(()=>{var l=Object.create;var i=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var q=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),j=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},s=(e,t,n,a)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of x(t))!_.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(a=d(t,r))||a.enumerable});return e};var p=(e,t,n)=>(n=e!=null?l(f(e)):{},s(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),M=e=>s(i({},\"__esModule\",{value:!0}),e);var m=q((L,c)=>{c.exports=_jsx_runtime});var C={};j(C,{default:()=>h,frontmatter:()=>b});var o=p(m()),b={title:\"requirements\"};function u(e){let t={a:\"a\",h1:\"h1\",...e.components};return(0,o.jsx)(t.h1,{id:\"requirements\",children:(0,o.jsx)(t.a,{className:\"subheading-anchor\",\"aria-label\":\"Link to section\",href:\"#requirements\",children:\"Requirements\"})})}function h(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}return M(C);})();\n;return Component;" 6 | }, 7 | "_id": "build-data/requirements.mdx", 8 | "_raw": { 9 | "sourceFilePath": "build-data/requirements.mdx", 10 | "sourceFileName": "requirements.mdx", 11 | "sourceFileDir": "build-data", 12 | "contentType": "mdx", 13 | "flattenedPath": "build-data/requirements" 14 | }, 15 | "type": "buildData", 16 | "slug": "/build-data/requirements", 17 | "slugAsParams": "requirements" 18 | } -------------------------------------------------------------------------------- /.contentlayer/generated/buildFast/_index.mjs: -------------------------------------------------------------------------------- 1 | // NOTE This file is auto-generated by Contentlayer 2 | 3 | import buildFast__errorHandlingMdx from './build-fast__error-handling.mdx.json' with { type: 'json' } 4 | import buildFast__linksMdx from './build-fast__links.mdx.json' with { type: 'json' } 5 | import buildFast__mdxSetupMdx from './build-fast__mdx-setup.mdx.json' with { type: 'json' } 6 | import buildFast__npmPackagesMdx from './build-fast__npm-packages.mdx.json' with { type: 'json' } 7 | import buildFast__requirementsMdx from './build-fast__requirements.mdx.json' with { type: 'json' } 8 | import buildFast__serverMdx from './build-fast__server.mdx.json' with { type: 'json' } 9 | import buildFast__supbaseMdx from './build-fast__supbase.mdx.json' with { type: 'json' } 10 | import buildFast__reactLibraries__generalHooksMdx from './build-fast__react-libraries__general-hooks.mdx.json' with { type: 'json' } 11 | import buildFast__reactLibraries__reactHotkeysHookMdx from './build-fast__react-libraries__react-hotkeys-hook.mdx.json' with { type: 'json' } 12 | import buildFast__reactLibraries__reactPdfMdx from './build-fast__react-libraries__react-pdf.mdx.json' with { type: 'json' } 13 | import buildFast__ui__usefulComponentsMdx from './build-fast__ui__useful-components.mdx.json' with { type: 'json' } 14 | 15 | export const allBuildFasts = [buildFast__errorHandlingMdx, buildFast__linksMdx, buildFast__mdxSetupMdx, buildFast__npmPackagesMdx, buildFast__requirementsMdx, buildFast__serverMdx, buildFast__supbaseMdx, buildFast__reactLibraries__generalHooksMdx, buildFast__reactLibraries__reactHotkeysHookMdx, buildFast__reactLibraries__reactPdfMdx, buildFast__ui__usefulComponentsMdx] 16 | -------------------------------------------------------------------------------- /.contentlayer/generated/buildFast/build-fast__designs__charts.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Charts", 3 | "body": { 4 | "raw": "\n# Charts\n\n", 5 | "code": "var Component=(()=>{var u=Object.create;var o=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var C=(t,n)=>()=>(n||t((n={exports:{}}).exports,n),n.exports),j=(t,n)=>{for(var e in n)o(t,e,{get:n[e],enumerable:!0})},s=(t,n,e,c)=>{if(n&&typeof n==\"object\"||typeof n==\"function\")for(let r of x(n))!_.call(t,r)&&r!==e&&o(t,r,{get:()=>n[r],enumerable:!(c=d(n,r))||c.enumerable});return t};var p=(t,n,e)=>(e=t!=null?u(f(t)):{},s(n||!t||!t.__esModule?o(e,\"default\",{value:t,enumerable:!0}):e,t)),M=t=>s(o({},\"__esModule\",{value:!0}),t);var i=C((X,h)=>{h.exports=_jsx_runtime});var D={};j(D,{default:()=>m,frontmatter:()=>b});var a=p(i()),b={title:\"Charts\"};function l(t){let n={a:\"a\",h1:\"h1\",...t.components};return(0,a.jsx)(n.h1,{id:\"charts\",children:(0,a.jsx)(n.a,{className:\"subheading-anchor\",\"aria-label\":\"Link to section\",href:\"#charts\",children:\"Charts\"})})}function m(t={}){let{wrapper:n}=t.components||{};return n?(0,a.jsx)(n,{...t,children:(0,a.jsx)(l,{...t})}):l(t)}return M(D);})();\n;return Component;" 6 | }, 7 | "_id": "build-fast/designs/charts.mdx", 8 | "_raw": { 9 | "sourceFilePath": "build-fast/designs/charts.mdx", 10 | "sourceFileName": "charts.mdx", 11 | "sourceFileDir": "build-fast/designs", 12 | "contentType": "mdx", 13 | "flattenedPath": "build-fast/designs/charts" 14 | }, 15 | "type": "buildFast", 16 | "slug": "/build-fast/designs/charts", 17 | "slugAsParams": "designs/charts", 18 | "folder": "designs" 19 | } -------------------------------------------------------------------------------- /.contentlayer/generated/buildFast/build-fast__links.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Links", 3 | "body": { 4 | "raw": "\n# Links\n\n- [Easing Graph](https://www.easing.dev/)\n- [Fancy Border Radius](https://9elements.github.io/fancy-border-radius/)\n\n## Gooey Effect\n\n- [Gooey Effect Blog](https://css-tricks.com/gooey-effect/)\n- [Gooey Effect Demo](https://x.com/jh3yy/status/1816899351152844947)\n- [Gooey Effect Demo 2](https://x.com/jh3yy/status/1816907840973627776)\n\n\n## Tricks\n\n- [Text Responds to Background Colors](https://x.com/JohnPhamous/status/1834345792494293453)\n- [Text Shadow on Scroll](https://x.com/samselikoff/status/1831847223287803985)\n", 5 | "code": "var Component=(()=>{var f=Object.create;var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),k=(t,e)=>{for(var i in e)c(t,i,{get:e[i],enumerable:!0})},o=(t,e,i,h)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!y.call(t,r)&&r!==i&&c(t,r,{get:()=>e[r],enumerable:!(h=u(e,r))||h.enumerable});return t};var p=(t,e,i)=>(i=t!=null?f(x(t)):{},o(e||!t||!t.__esModule?c(i,\"default\",{value:t,enumerable:!0}):i,t)),b=t=>o(c({},\"__esModule\",{value:!0}),t);var a=g((w,s)=>{s.exports=_jsx_runtime});var _={};k(_,{default:()=>d,frontmatter:()=>j});var n=p(a()),j={title:\"Links\"};function l(t){let e={a:\"a\",h1:\"h1\",h2:\"h2\",li:\"li\",ul:\"ul\",...t.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{id:\"links\",children:(0,n.jsx)(e.a,{className:\"subheading-anchor\",\"aria-label\":\"Link to section\",href:\"#links\",children:\"Links\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://www.easing.dev/\",children:\"Easing Graph\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://9elements.github.io/fancy-border-radius/\",children:\"Fancy Border Radius\"})}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{id:\"gooey-effect\",children:(0,n.jsx)(e.a,{className:\"subheading-anchor\",\"aria-label\":\"Link to section\",href:\"#gooey-effect\",children:\"Gooey Effect\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://css-tricks.com/gooey-effect/\",children:\"Gooey Effect Blog\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://x.com/jh3yy/status/1816899351152844947\",children:\"Gooey Effect Demo\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://x.com/jh3yy/status/1816907840973627776\",children:\"Gooey Effect Demo 2\"})}),`\n`]}),`\n`,(0,n.jsx)(e.h2,{id:\"tricks\",children:(0,n.jsx)(e.a,{className:\"subheading-anchor\",\"aria-label\":\"Link to section\",href:\"#tricks\",children:\"Tricks\"})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://x.com/JohnPhamous/status/1834345792494293453\",children:\"Text Responds to Background Colors\"})}),`\n`,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:\"https://x.com/samselikoff/status/1831847223287803985\",children:\"Text Shadow on Scroll\"})}),`\n`]})]})}function d(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}return b(_);})();\n;return Component;" 6 | }, 7 | "_id": "build-fast/links.mdx", 8 | "_raw": { 9 | "sourceFilePath": "build-fast/links.mdx", 10 | "sourceFileName": "links.mdx", 11 | "sourceFileDir": "build-fast", 12 | "contentType": "mdx", 13 | "flattenedPath": "build-fast/links" 14 | }, 15 | "type": "buildFast", 16 | "slug": "/build-fast/links", 17 | "slugAsParams": "links", 18 | "folder": "build-fast" 19 | } -------------------------------------------------------------------------------- /.contentlayer/generated/buildFast/build-fast__npm-packages.mdx.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "NPM Packages", 3 | "body": { 4 | "raw": "\n# NPM Packages", 5 | "code": "var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),k=(n,e)=>{for(var t in e)c(n,t,{get:e[t],enumerable:!0})},s=(n,e,t,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of p(e))!f.call(n,a)&&a!==t&&c(n,a,{get:()=>e[a],enumerable:!(r=d(e,a))||r.enumerable});return n};var M=(n,e,t)=>(t=n!=null?u(x(n)):{},s(e||!n||!n.__esModule?c(t,\"default\",{value:n,enumerable:!0}):t,n)),_=n=>s(c({},\"__esModule\",{value:!0}),n);var m=g((b,i)=>{i.exports=_jsx_runtime});var j={};k(j,{default:()=>l,frontmatter:()=>P});var o=M(m()),P={title:\"NPM Packages\"};function h(n){let e={a:\"a\",h1:\"h1\",...n.components};return(0,o.jsx)(e.h1,{id:\"npm-packages\",children:(0,o.jsx)(e.a,{className:\"subheading-anchor\",\"aria-label\":\"Link to section\",href:\"#npm-packages\",children:\"NPM Packages\"})})}function l(n={}){let{wrapper:e}=n.components||{};return e?(0,o.jsx)(e,{...n,children:(0,o.jsx)(h,{...n})}):h(n)}return _(j);})();\n;return Component;" 6 | }, 7 | "_id": "build-fast/npm-packages.mdx", 8 | "_raw": { 9 | "sourceFilePath": "build-fast/npm-packages.mdx", 10 | "sourceFileName": "npm-packages.mdx", 11 | "sourceFileDir": "build-fast", 12 | "contentType": "mdx", 13 | "flattenedPath": "build-fast/npm-packages" 14 | }, 15 | "type": "buildFast", 16 | "slug": "/build-fast/npm-packages", 17 | "slugAsParams": "npm-packages", 18 | "folder": "build-fast" 19 | } -------------------------------------------------------------------------------- /.contentlayer/generated/index.d.ts: -------------------------------------------------------------------------------- 1 | // NOTE This file is auto-generated by Contentlayer 2 | 3 | import { Blogs, Works, TwitterContents, buildFast, DocumentTypes, DataExports } from './types' 4 | import { SourceProvideSchemaErrorJSON, SourceFetchDataErrorJSON } from 'contentlayer2/core' 5 | 6 | export * from './types' 7 | 8 | export declare const allBlogs: Blogs[] 9 | export declare const allWorks: Works[] 10 | export declare const allTwitterContents: TwitterContents[] 11 | export declare const allBuildFasts: buildFast[] 12 | 13 | export declare const allDocuments: DocumentTypes[] 14 | 15 | 16 | -------------------------------------------------------------------------------- /.contentlayer/generated/index.mjs: -------------------------------------------------------------------------------- 1 | // NOTE This file is auto-generated by Contentlayer 2 | 3 | export { isType } from 'contentlayer2/client' 4 | 5 | // NOTE During development Contentlayer imports from `.mjs` files to improve HMR speeds. 6 | // During (production) builds Contentlayer it imports from `.json` files to improve build performance. 7 | import { allBlogs } from './Blogs/_index.mjs' 8 | import { allWorks } from './Works/_index.mjs' 9 | import { allTwitterContents } from './TwitterContents/_index.mjs' 10 | import { allBuildFasts } from './buildFast/_index.mjs' 11 | 12 | export { allBlogs, allWorks, allTwitterContents, allBuildFasts } 13 | 14 | export const allDocuments = [...allBlogs, ...allWorks, ...allTwitterContents, ...allBuildFasts] 15 | 16 | 17 | -------------------------------------------------------------------------------- /.contentlayer/generated/types.d.ts: -------------------------------------------------------------------------------- 1 | // NOTE This file is auto-generated by Contentlayer 2 | 3 | import type { Markdown, MDX, ImageFieldData, IsoDateTimeString } from 'contentlayer2/core' 4 | import * as Local from 'contentlayer2/source-files' 5 | 6 | export { isType } from 'contentlayer2/client' 7 | 8 | export type { Markdown, MDX, ImageFieldData, IsoDateTimeString } 9 | 10 | /** Document types */ 11 | export type Blogs = { 12 | /** File path relative to `contentDirPath` */ 13 | _id: string 14 | _raw: Local.RawDocumentData 15 | type: 'Blogs' 16 | title: string 17 | description: string 18 | image: string 19 | hidden?: boolean | undefined 20 | /** MDX file body */ 21 | body: MDX 22 | slug: string 23 | slugAsParams: string 24 | folder: string 25 | } 26 | 27 | export type buildFast = { 28 | /** File path relative to `contentDirPath` */ 29 | _id: string 30 | _raw: Local.RawDocumentData 31 | type: 'buildFast' 32 | title: string 33 | order?: string | undefined 34 | /** MDX file body */ 35 | body: MDX 36 | slug: string 37 | slugAsParams: string 38 | folder: string 39 | } 40 | 41 | export type TwitterContents = { 42 | /** File path relative to `contentDirPath` */ 43 | _id: string 44 | _raw: Local.RawDocumentData 45 | type: 'TwitterContents' 46 | title: string 47 | tech: string 48 | /** MDX file body */ 49 | body: MDX 50 | slug: string 51 | slugAsParams: string 52 | folder: string 53 | } 54 | 55 | export type Works = { 56 | /** File path relative to `contentDirPath` */ 57 | _id: string 58 | _raw: Local.RawDocumentData 59 | type: 'Works' 60 | title: string 61 | /** MDX file body */ 62 | body: MDX 63 | slug: string 64 | slugAsParams: string 65 | folder: string 66 | } 67 | 68 | /** Nested types */ 69 | 70 | 71 | /** Helper types */ 72 | 73 | export type AllTypes = DocumentTypes | NestedTypes 74 | export type AllTypeNames = DocumentTypeNames | NestedTypeNames 75 | 76 | export type DocumentTypes = Blogs | buildFast | TwitterContents | Works 77 | export type DocumentTypeNames = 'Blogs' | 'buildFast' | 'TwitterContents' | 'Works' 78 | 79 | export type NestedTypes = never 80 | export type NestedTypeNames = never 81 | 82 | export type DataExports = { 83 | allDocuments: DocumentTypes[] 84 | allBlogs: Blogs[] 85 | allWorks: Works[] 86 | allTwitterContents: TwitterContents[] 87 | allBuildFasts: buildFast[] 88 | } 89 | 90 | 91 | export interface ContentlayerGenTypes { 92 | documentTypes: DocumentTypes 93 | documentTypeMap: DocumentTypeMap 94 | documentTypeNames: DocumentTypeNames 95 | nestedTypes: NestedTypes 96 | nestedTypeMap: NestedTypeMap 97 | nestedTypeNames: NestedTypeNames 98 | allTypeNames: AllTypeNames 99 | dataExports: DataExports 100 | } 101 | 102 | declare global { 103 | interface ContentlayerGen extends ContentlayerGenTypes {} 104 | } 105 | 106 | export type DocumentTypeMap = { 107 | Blogs: Blogs 108 | buildFast: buildFast 109 | TwitterContents: TwitterContents 110 | Works: Works 111 | } 112 | 113 | export type NestedTypeMap = { 114 | 115 | } 116 | 117 | -------------------------------------------------------------------------------- /.contentlayer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dot-contentlayer", 3 | "description": "This package is auto-generated by Contentlayer", 4 | "version": "0.0.0-R5EPTL46", 5 | "exports": { 6 | "./generated": { 7 | "import": "./generated/index.mjs" 8 | } 9 | }, 10 | "typesVersions": { 11 | "*": { 12 | "generated": [ 13 | "./generated" 14 | ] 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"], 3 | "rules": { 4 | "@typescript-eslint/ban-ts-comment": "off", 5 | "@typescript-eslint/no-explicit-any": "off", 6 | "@typescript-eslint/no-empty-object-type": "off" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.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 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | 38 | /tailwind-playground -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alisamadiii/Portfolio/51f097c3c5de225d20c0975b0edca9e95f09dc7e/.prettierignore -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["prettier-plugin-tailwindcss"], 3 | "trailingComma": "es5", 4 | "tabWidth": 2, 5 | "semi": true, 6 | "singleQuote": false, 7 | "bracketSpacing": true, 8 | "bracketSameLine": false, 9 | "singleAttributePerLine": false 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Portfolio 2 | 3 | This is a portfolio website built with Next.js, and Tailwind CSS. I use this website to showcase my projects and skills. 4 | 5 | ## Links 6 | 7 | - [Works](https://www.alirezasamadi.com/work/1) 8 | - [Build Fast](https://www.alirezasamadi.com/build-fast/requirements) (Adding most of the things that could speed up the development process) 9 | - [NowShip](https://github.com/NowShip) (An organization to help me ship my projects faster) 10 | - [Blog](https://www.alirezasamadi.com/blog/eslint-setup) 11 | - [Experience](https://www.alirezasamadi.com/?experience=true) 12 | - [Twitter Contents](https://www.alirezasamadi.com/twitter-content/1) 13 | -------------------------------------------------------------------------------- /app/api/send/route.ts: -------------------------------------------------------------------------------- 1 | import { Resend } from "resend"; 2 | import { NextRequest } from "next/server"; 3 | 4 | import { EmailTemplate } from "@/components/EmailTemplate"; 5 | 6 | const resend = new Resend(process.env.RESEND_API_KEY); 7 | 8 | export async function POST(req: NextRequest) { 9 | const resData = await req.json(); 10 | 11 | try { 12 | const { data, error } = await resend.emails.send({ 13 | from: "hireme@alirezasamadi.com", 14 | to: ["alirs.dev@gmail.com"], 15 | subject: "Hire me", 16 | react: EmailTemplate({ 17 | firstName: resData.firstName, 18 | email: resData.email, 19 | description: resData.description, 20 | companyName: resData.companyName, 21 | }), 22 | }); 23 | 24 | if (error) { 25 | return Response.json({ error }, { status: 500 }); 26 | } 27 | 28 | return Response.json(data); 29 | } catch (error) { 30 | return Response.json({ error }, { status: 500 }); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /app/blog/[slug]/page.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { notFound } from "next/navigation"; 3 | import Link from "next/link"; 4 | import { allBlogs } from "contentlayer/generated"; 5 | 6 | import { Mdx } from "@/components/MDX/MDXContent.blog"; 7 | 8 | type Props = { 9 | params: { slug: string }; 10 | }; 11 | 12 | export async function generateStaticParams() { 13 | return allBlogs.map((post) => ({ 14 | slug: post.slugAsParams, 15 | })); 16 | } 17 | 18 | export async function generateMetadata({ params }: Props) { 19 | const findingGoal = allBlogs.find( 20 | (post) => params.slug === post.slugAsParams 21 | ); 22 | 23 | return { 24 | title: findingGoal?.title, 25 | description: findingGoal?.description, 26 | }; 27 | } 28 | 29 | export default function DocsPage({ params: { slug } }: Props) { 30 | const findingGoal = allBlogs.find((post) => slug === post.slugAsParams); 31 | 32 | if (!findingGoal) { 33 | return notFound(); 34 | } 35 | 36 | return ( 37 |
38 |
39 | 40 | 47 | 48 | 49 | 50 |
51 | 52 |
53 | 54 | 61 | 62 | 63 | 64 |
65 |
66 | ); 67 | } 68 | -------------------------------------------------------------------------------- /app/build-fast/[...slug]/Menu.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React, { useState } from "react"; 4 | 5 | import { 6 | Drawer, 7 | DrawerTrigger, 8 | DrawerContent, 9 | DrawerClose, 10 | } from "@/components/ui/drawer"; 11 | import { cn } from "@/lib/utils"; 12 | import { allBuildFasts } from "@/.contentlayer/generated"; 13 | import { MenuIcon } from "lucide-react"; 14 | import { useRouter } from "next/navigation"; 15 | 16 | type Props = { 17 | slug: string; 18 | }; 19 | 20 | const folders = ["ui", "react-libraries"]; 21 | 22 | export default function Menu({ slug }: Props) { 23 | const [open, setOpen] = useState(false); 24 | const router = useRouter(); 25 | 26 | return ( 27 | 28 | 29 | 30 | 31 | 32 | {allBuildFasts 33 | .filter((post) => post.folder === "build-fast") 34 | .sort((a, b) => { 35 | if (!a.order && !b.order) return 0; 36 | if (!a.order) return 1; 37 | if (!b.order) return -1; 38 | return Number(a.order) - Number(b.order); 39 | }) 40 | .map((post) => ( 41 | router.push(`/build-fast/${post.slugAsParams}`)} 44 | className={cn("rounded-md p-1 text-start", { 45 | "bg-neutral-200": post.slugAsParams === slug, 46 | })} 47 | > 48 | {post.title} 49 | 50 | ))} 51 | 52 | {folders.map((folder) => ( 53 |
54 | 55 | {folder.replace("-", " ")} 56 | 57 | {allBuildFasts 58 | .filter((post) => post.folder === folder) 59 | .map((post) => ( 60 | 63 | router.push(`/build-fast/${post.slugAsParams}`) 64 | } 65 | className={cn("rounded-md p-1 text-start", { 66 | "bg-neutral-200": post.slugAsParams === slug, 67 | })} 68 | > 69 | {post.title} 70 | 71 | ))} 72 |
73 | ))} 74 | 75 | 76 | ); 77 | } 78 | -------------------------------------------------------------------------------- /app/build-fast/[...slug]/Navbar.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { allBuildFasts } from "contentlayer/generated"; 5 | import Link from "next/link"; 6 | import { cn } from "@/lib/utils"; 7 | 8 | type Props = { 9 | slug: string; 10 | }; 11 | 12 | const folders = ["ui", "react-libraries"]; 13 | 14 | export default function Navbar({ slug }: Props) { 15 | return ( 16 |
17 | {allBuildFasts 18 | .filter((post) => post.folder === "build-fast") 19 | .sort((a, b) => { 20 | if (!a.order && !b.order) return 0; 21 | if (!a.order) return 1; 22 | if (!b.order) return -1; 23 | return Number(a.order) - Number(b.order); 24 | }) 25 | .map((post) => ( 26 | 33 | {post.title} 34 | 35 | ))} 36 | 37 | {folders.map((folder) => ( 38 |
39 | 40 | {folder.replace("-", " ")} 41 | 42 | {allBuildFasts 43 | .filter((post) => post.folder === folder) 44 | .map((post) => ( 45 | 52 | {post.title} 53 | 54 | ))} 55 |
56 | ))} 57 |
58 | ); 59 | } 60 | -------------------------------------------------------------------------------- /app/build-fast/[...slug]/page.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { notFound } from "next/navigation"; 3 | import Link from "next/link"; 4 | import { allBuildFasts } from "contentlayer/generated"; 5 | 6 | import { Mdx } from "@/components/MDX/MDXContent.blog"; 7 | import Navbar from "./Navbar"; 8 | import Menu from "./Menu"; 9 | 10 | type Props = { 11 | params: { slug: string[] }; 12 | }; 13 | export async function generateStaticParams() { 14 | return allBuildFasts.map((post) => ({ 15 | slug: post.slugAsParams.split("/"), 16 | })); 17 | } 18 | 19 | export async function generateMetadata({ params }: Props) { 20 | const findingGoal = allBuildFasts.find( 21 | (post) => params.slug.join("/") === post.slugAsParams 22 | ); 23 | 24 | return { 25 | title: findingGoal?.title, 26 | }; 27 | } 28 | 29 | export default function DocsPage({ params: { slug } }: Props) { 30 | const findingGoal = allBuildFasts.find( 31 | (post) => slug.join("/") === post.slugAsParams 32 | ); 33 | 34 | if (!findingGoal) { 35 | return notFound(); 36 | } 37 | 38 | return ( 39 |
40 | 41 |
42 | 43 | 50 | 51 | 52 | 53 | 54 |
55 | 56 |
57 | 58 | 65 | 66 | 67 | 68 |
69 |
70 | ); 71 | } 72 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alisamadiii/Portfolio/51f097c3c5de225d20c0975b0edca9e95f09dc7e/app/favicon.ico -------------------------------------------------------------------------------- /app/fonts/GeistMonoVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alisamadiii/Portfolio/51f097c3c5de225d20c0975b0edca9e95f09dc7e/app/fonts/GeistMonoVF.woff -------------------------------------------------------------------------------- /app/fonts/GeistVF.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alisamadiii/Portfolio/51f097c3c5de225d20c0975b0edca9e95f09dc7e/app/fonts/GeistVF.woff -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Lora, Inter } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | import { Toaster } from "@/components/ui/sonner"; 6 | // import HireMe from "@/components/hire-me"; 7 | 8 | const lora = Lora({ 9 | subsets: ["latin"], 10 | variable: "--font-lora", 11 | }); 12 | const inter = Inter({ 13 | subsets: ["latin"], 14 | variable: "--font-inter", 15 | }); 16 | 17 | export const metadata: Metadata = { 18 | title: "Ali Samadi - Portfolio", 19 | description: "Building Website is My Passion!", 20 | }; 21 | 22 | export default function RootLayout({ 23 | children, 24 | }: Readonly<{ 25 | children: React.ReactNode; 26 | }>) { 27 | return ( 28 | 29 | 32 | {/* */} 33 | 34 | {children} 35 | 36 | 37 | 38 | 39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /app/not-found.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Text } from "../components/ui/text"; 3 | import Link from "next/link"; 4 | import { buttonVariants } from "../components/ui/button"; 5 | 6 | export default function NotFound() { 7 | return ( 8 |
9 |
10 | 11 | 404 12 | 13 | 14 | Page Not Found! 15 | 16 |
17 | 18 | 25 | Home 26 | 27 |
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /app/recording/[slug]/page.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | 5 | import { Index } from "@/__registry__"; 6 | 7 | type Props = { 8 | params: { slug: string }; 9 | }; 10 | 11 | export default function DocsPage({ params: { slug } }: Props) { 12 | const Component = Index[`works-${slug}`].component; 13 | 14 | return ( 15 |
16 |
17 | 18 |
19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /app/work/[...slug]/page.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "next/link"; 3 | 4 | export default function WorkPage() { 5 | return ( 6 |
7 |
8 |

9 | Source Code Access Changed 10 |

11 |

12 | This project is no longer open source. To access the complete source 13 | code, please visit: 14 |

15 | 19 | motion.alismadii.com 20 | 21 |
22 |
23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /app/x-content/[slug]/page.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Link from "next/link"; 3 | 4 | import { allTwitterContents } from "contentlayer/generated"; 5 | import { Mdx } from "@/components/MDX/MDXContent.work"; 6 | import { notFound } from "next/navigation"; 7 | import { Button } from "@/components/ui/button"; 8 | import { ChevronLeft, ChevronRight } from "lucide-react"; 9 | import { Badge } from "@/components/ui/badge"; 10 | import { Text } from "@/components/ui/text"; 11 | 12 | type Props = { 13 | params: { slug: string }; 14 | }; 15 | 16 | export async function generateStaticParams() { 17 | return allTwitterContents.map((post) => ({ 18 | slug: post.slugAsParams, 19 | })); 20 | } 21 | 22 | export async function generateMetadata({ params }: Props) { 23 | const findingGoal = allTwitterContents.find( 24 | (post) => params.slug === post.slugAsParams 25 | ); 26 | 27 | return { 28 | title: findingGoal?.title, 29 | }; 30 | } 31 | 32 | export default function DocsPage({ params: { slug } }: Props) { 33 | const findingGoal = allTwitterContents.find( 34 | (post) => slug === post.slugAsParams 35 | ); 36 | 37 | if (!findingGoal) { 38 | return notFound(); 39 | } 40 | 41 | return ( 42 | <> 43 |
44 |
45 |
46 |
47 | 48 | 55 | 56 | 57 | 58 |
59 |
60 | 61 | {String(Number(slug)).padStart(2, "0")} 62 | {" "} 63 | /{" "} 64 | {String(allTwitterContents.length).padStart(2, "0")} 65 | {findingGoal.tech && ( 66 | {findingGoal.tech} 67 | )} 68 |
69 |
70 | 79 | 88 |
89 |
90 |
91 |
92 | 97 | {findingGoal.title} 98 | 99 | 100 |
101 | 102 | ); 103 | } 104 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "app/globals.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | } 20 | } -------------------------------------------------------------------------------- /components/AnimationSpeed.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { ClockArrowDown } from "lucide-react"; 3 | import { AnimatePresence, motion } from "framer-motion"; 4 | 5 | type Props = { 6 | onValueChange: (value: number) => void; 7 | speeds: number[]; 8 | }; 9 | 10 | export default function AnimationSpeed({ onValueChange, speeds }: Props) { 11 | const [currentIndex, setCurrentIndex] = useState(0); 12 | 13 | const onClickHandler = () => { 14 | if (currentIndex === speeds.length - 1) { 15 | setCurrentIndex(0); 16 | onValueChange(speeds[0]); 17 | } else { 18 | setCurrentIndex(currentIndex + 1); 19 | onValueChange(speeds[currentIndex]); 20 | } 21 | }; 22 | 23 | return ( 24 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /components/CodePreview.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, ReactNode } from "react"; 2 | 3 | import { motion } from "framer-motion"; 4 | 5 | import { Button } from "./ui/button"; 6 | import { Text } from "./ui/text"; 7 | 8 | import { Sheet, SheetContent } from "@/components/ui/sheet"; 9 | 10 | interface FilesProps { 11 | id: string; 12 | children: ReactNode; 13 | } 14 | 15 | export const CodePreview: React.FC = ({ children }) => { 16 | const [isCode, setIsCode] = useState(false); 17 | 18 | return ( 19 | <> 20 |
21 | 35 | 50 |
51 | 52 | 53 | 54 |
55 | 56 | Code 57 | 58 | 74 |
75 | {children} 76 | 77 | 78 | 79 | ); 80 | }; 81 | -------------------------------------------------------------------------------- /components/ColorPicker.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { cn } from "@/lib/utils"; 3 | 4 | interface ColorPickerProps { 5 | value: string; 6 | onValueChange: (color: string) => void; 7 | label?: string; 8 | } 9 | 10 | const famousColors = [ 11 | { name: "Spotify Black", hex: "#191414" }, 12 | { name: "Facebook Blue", hex: "#1877F2" }, 13 | { name: "Twitter Blue", hex: "#1DA1F2" }, 14 | { name: "LinkedIn Blue", hex: "#0A66C2" }, 15 | { name: "Instagram Purple", hex: "#C13584" }, 16 | { name: "YouTube Red", hex: "#FF0000" }, 17 | { name: "Snapchat Yellow", hex: "#FFFC00" }, 18 | { name: "Apple White", hex: "#FFFFFF" }, 19 | ]; 20 | 21 | const ColorPicker: React.FC = ({ 22 | value, 23 | onValueChange, 24 | label, 25 | }) => { 26 | return ( 27 |
28 | {label &&

{label}

} 29 |
30 | {famousColors.map((color) => ( 31 |
44 |
45 | ); 46 | }; 47 | 48 | export default ColorPicker; 49 | -------------------------------------------------------------------------------- /components/ComponentPreview.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React, { useRef } from "react"; 4 | 5 | import { cn } from "@/lib/utils"; 6 | import { Index } from "../__registry__"; 7 | 8 | interface Props { 9 | name: string; 10 | children: React.ReactNode; 11 | className?: string; 12 | } 13 | 14 | export default function ComponentPreview({ name, className }: Props) { 15 | const Component = Index[name].component; 16 | 17 | const ref = useRef(null); 18 | 19 | if (name.includes("twitter-contents")) { 20 | return ; 21 | } 22 | 23 | return ( 24 | <> 25 |
33 | 34 |
35 |
36 | 46 |
47 | 48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /components/CopyButton.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { cn } from "@/lib/utils"; 3 | 4 | type Props = { 5 | value: string; 6 | className?: string; 7 | }; 8 | 9 | export default function CopyButton({ value, className }: Props) { 10 | const [copied, setCopied] = useState(false); 11 | 12 | useEffect(() => { 13 | if (copied) { 14 | const timeout = setTimeout(() => { 15 | setCopied(false); 16 | }, 1500); 17 | 18 | return () => { 19 | clearTimeout(timeout); 20 | }; 21 | } 22 | }, [copied]); 23 | 24 | const handleCopy = () => { 25 | navigator.clipboard.writeText(value || ""); 26 | 27 | setCopied(true); 28 | }; 29 | 30 | return ( 31 | 76 | ); 77 | } 78 | -------------------------------------------------------------------------------- /components/EmailTemplate.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface EmailTemplateProps { 4 | firstName: string; 5 | email: string; 6 | description: string; 7 | companyName: string; 8 | } 9 | 10 | export const EmailTemplate: React.FC> = ({ 11 | firstName, 12 | email, 13 | description, 14 | companyName, 15 | }) => ( 16 |
17 |

18 | Hey Ali, you have got a new email from someone that is trying to hire you. 19 |

20 | 21 |

A message from {firstName}:

22 | 23 |

{description}

24 | 25 |
    26 |
  • Name: {firstName}
    • 27 |
  • Email: {email}
    • 28 |
  • Company name: {companyName}
    • 29 |
30 |
31 | ); 32 | -------------------------------------------------------------------------------- /components/FilesTab.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, ReactNode } from "react"; 2 | import { LayoutGroup } from "framer-motion"; 3 | 4 | import { cn } from "@/lib/utils"; 5 | 6 | interface FileProps { 7 | label: string; 8 | children: ReactNode; 9 | } 10 | 11 | export interface FilesProps { 12 | id: string; 13 | children: ReactNode; 14 | className?: string; 15 | } 16 | 17 | export const Files: React.FC = ({ children, id, className }) => { 18 | const [activeTab, setActiveTab] = useState(0); 19 | 20 | return ( 21 | <> 22 |
28 | 29 | {React.Children.map(children, (child, index) => { 30 | if (!React.isValidElement(child)) return null; 31 | 32 | return ( 33 | 43 | ); 44 | })} 45 | 46 |
47 |
{React.Children.toArray(children)[activeTab]}
48 | 49 | ); 50 | }; 51 | 52 | export const File: React.FC = ({ children }) => ( 53 |
{children}
54 | ); 55 | -------------------------------------------------------------------------------- /components/GithubTheme.tsx: -------------------------------------------------------------------------------- 1 | export const githubLight = { 2 | 'code[class*="language-"]': { 3 | color: "#24292e", 4 | background: "transparent", 5 | fontFamily: "var(--font-geist-mono)", 6 | direction: "ltr", 7 | textAlign: "left", 8 | whiteSpace: "pre", 9 | wordSpacing: "normal", 10 | wordBreak: "normal", 11 | lineHeight: "1", 12 | MozTabSize: "4", 13 | OTabSize: "4", 14 | tabSize: "4", 15 | WebkitHyphens: "none", 16 | MozHyphens: "none", 17 | msHyphens: "none", 18 | hyphens: "none", 19 | fontSize: "14px", 20 | }, 21 | 'pre[class*="language-"]': { 22 | color: "#24292e", 23 | background: "var(--background)", 24 | fontFamily: "var(--font-geist-mono)", 25 | direction: "ltr", 26 | textAlign: "left", 27 | whiteSpace: "pre", 28 | wordSpacing: "normal", 29 | wordBreak: "normal", 30 | lineHeight: "1.3", 31 | MozTabSize: "4", 32 | OTabSize: "4", 33 | tabSize: "4", 34 | WebkitHyphens: "none", 35 | MozHyphens: "none", 36 | msHyphens: "none", 37 | hyphens: "none", 38 | padding: "1em", 39 | margin: ".5em 0", 40 | overflow: "auto", 41 | borderRadius: "0.3em", 42 | border: "1px solid hsl(0 0% 93%)", 43 | }, 44 | ':not(pre) > code[class*="language-"]': { 45 | background: "#f6f8fa", 46 | color: "#24292e", 47 | padding: ".2em .4em", 48 | borderRadius: ".3em", 49 | }, 50 | comment: { 51 | color: "#6a737d", 52 | }, 53 | prolog: { 54 | color: "#6a737d", 55 | }, 56 | doctype: { 57 | color: "#6a737d", 58 | }, 59 | cdata: { 60 | color: "#6a737d", 61 | }, 62 | punctuation: { 63 | color: "#393a34", 64 | }, 65 | ".namespace": { 66 | Opacity: ".7", 67 | }, 68 | property: { 69 | color: "#005cc5", 70 | }, 71 | keyword: { 72 | color: "#d73a49", 73 | }, 74 | tag: { 75 | color: "#22863a", 76 | }, 77 | "class-name": { 78 | color: "#6f42c1", 79 | fontWeight: "bold", 80 | }, 81 | boolean: { 82 | color: "#005cc5", 83 | }, 84 | constant: { 85 | color: "#005cc5", 86 | }, 87 | symbol: { 88 | color: "#e36209", 89 | }, 90 | deleted: { 91 | color: "#d73a49", 92 | backgroundColor: "#ffeef0", 93 | }, 94 | number: { 95 | color: "#005cc5", 96 | }, 97 | selector: { 98 | color: "#22863a", 99 | }, 100 | "attr-name": { 101 | color: "#d73a49", 102 | }, 103 | string: { 104 | color: "#032f62", 105 | }, 106 | char: { 107 | color: "#032f62", 108 | }, 109 | builtin: { 110 | color: "#6f42c1", 111 | }, 112 | inserted: { 113 | color: "#22863a", 114 | backgroundColor: "#f0fff4", 115 | }, 116 | variable: { 117 | color: "#e36209", 118 | }, 119 | operator: { 120 | color: "#d73a49", 121 | }, 122 | entity: { 123 | color: "#22863a", 124 | cursor: "help", 125 | }, 126 | url: { 127 | color: "#032f62", 128 | }, 129 | ".language-css .token.string": { 130 | color: "#032f62", 131 | }, 132 | ".style .token.string": { 133 | color: "#032f62", 134 | }, 135 | atrule: { 136 | color: "#d73a49", 137 | }, 138 | "attr-value": { 139 | color: "#005cc5", 140 | }, 141 | function: { 142 | color: "#6f42c1", 143 | }, 144 | regex: { 145 | color: "#032f62", 146 | }, 147 | important: { 148 | color: "#005cc5", 149 | fontWeight: "bold", 150 | }, 151 | bold: { 152 | fontWeight: "bold", 153 | }, 154 | italic: { 155 | fontStyle: "italic", 156 | }, 157 | }; 158 | -------------------------------------------------------------------------------- /components/IphoneSimulator.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { cn } from "@/lib/utils"; 4 | 5 | type Props = { 6 | children: React.ReactNode; 7 | className?: string; 8 | classWrapper?: string; 9 | }; 10 | 11 | export default function IphoneSimulator({ 12 | children, 13 | className, 14 | classWrapper, 15 | }: Props) { 16 | return ( 17 |
23 |
24 |
30 |
34 |
35 |
36 |
{children}
37 |
38 |
39 |
40 |
41 |
42 |
43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /components/SyntaxHighlighter.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Prism } from "react-syntax-highlighter"; 3 | 4 | import CopyButton from "./CopyButton"; 5 | import { githubLight } from "./GithubTheme"; 6 | 7 | type Props = { 8 | children?: React.ReactNode; 9 | language?: "css" | "html" | "javascript"; 10 | }; 11 | 12 | export default function SyntaxHighlighter({ 13 | children, 14 | language = "javascript", 15 | }: Props) { 16 | const getTextFromChildren = (children: React.ReactNode): string => { 17 | if (typeof children === "string") { 18 | return children; 19 | } 20 | if (Array.isArray(children)) { 21 | return children 22 | .map((child) => (typeof child === "string" ? child : "")) 23 | .join(""); 24 | } 25 | return ""; 26 | }; 27 | 28 | const codeText = getTextFromChildren(children); 29 | 30 | return ( 31 |
32 | {/* @ts-ignore */} 33 | 34 | {children} 35 | 36 | 37 |
38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /components/Tabs.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, ReactNode } from "react"; 2 | import { LayoutGroup, motion } from "framer-motion"; 3 | import { cn } from "@/lib/utils"; 4 | 5 | interface TabProps { 6 | label: string; 7 | children: ReactNode; 8 | } 9 | 10 | export interface TabsProps { 11 | id: string; 12 | children: ReactNode; 13 | className?: string; 14 | } 15 | 16 | export const Tabs: React.FC = ({ children, id, className }) => { 17 | const [activeTab, setActiveTab] = useState(0); 18 | 19 | return ( 20 | 21 |
24 | {React.Children.map(children, (child, index) => { 25 | if (!React.isValidElement(child)) return null; 26 | return ( 27 | 45 | ); 46 | })} 47 |
48 |
{React.Children.toArray(children)[activeTab]}
49 | 50 | ); 51 | }; 52 | 53 | export const Tab: React.FC = ({ children }) =>
{children}
; 54 | -------------------------------------------------------------------------------- /components/TwitterContentsElement.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from "react"; 2 | import { cn } from "@/lib/utils"; 3 | import { Maximize } from "lucide-react"; 4 | import { useFullscreen, useToggle } from "react-use"; 5 | 6 | type Props = { 7 | children: React.ReactNode; 8 | className?: string; 9 | }; 10 | 11 | export function Wrapper({ children, className }: Props) { 12 | return
{children}
; 13 | } 14 | 15 | export function Code({ children, className }: Props) { 16 | return ( 17 |
18 | {children} 19 |
20 | ); 21 | } 22 | 23 | export function Preview({ children, className }: Props) { 24 | const ref = useRef(null); 25 | 26 | const [show, toggle] = useToggle(false); 27 | const isFullscreen = useFullscreen(ref, show, { 28 | onClose: () => toggle(false), 29 | }); 30 | 31 | return ( 32 |
33 |
40 | {children} 41 | {!isFullscreen && ( 42 | 48 | )} 49 |
50 |
51 |
52 | ); 53 | } 54 | 55 | export function Settings({ children, className }: Props) { 56 | return ( 57 |
58 | {children} 59 |
60 | ); 61 | } 62 | -------------------------------------------------------------------------------- /components/apps.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { cn } from "@/lib/utils"; 3 | 4 | import { 5 | Tooltip, 6 | TooltipContent, 7 | TooltipTrigger, 8 | TooltipProvider, 9 | } from "@/components/ui/tooltip"; 10 | 11 | const icons = [ 12 | { 13 | value: "Cursor AI", 14 | label: "Writing code and designing websites.", 15 | }, 16 | { 17 | value: "Screen Studio", 18 | label: "Recording videos.", 19 | }, 20 | { 21 | value: "Typefully", 22 | label: "Scheduling posts for X and LinkedIn.", 23 | }, 24 | ]; 25 | 26 | export default function Apps() { 27 | return ( 28 |
29 | {icons.map((icon, index) => ( 30 | 31 | 32 | 33 |
41 | {icon.value} 42 |
43 | 44 | {icon.label} 45 | 46 | 47 | ))} 48 |
49 | ); 50 | } 51 | -------------------------------------------------------------------------------- /components/experience.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { allBlogs } from "@/.contentlayer/generated"; 4 | import { Mdx } from "./MDX/MDXContent.blog"; 5 | import { DialogClose } from "./ui/dialog"; 6 | 7 | export default function Experience() { 8 | const findingGoal = allBlogs.find( 9 | (post) => post.slugAsParams === "my-experience" 10 | ); 11 | 12 | if (!findingGoal) return null; 13 | 14 | return ( 15 |
16 |
17 | Close 18 |
19 | 20 | 21 |
22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /components/hire-me.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React, { useEffect, useState } from "react"; 4 | import { AnimatePresence, motion } from "framer-motion"; 5 | import { usePathname } from "next/navigation"; 6 | import { X } from "lucide-react"; 7 | 8 | import { 9 | Tooltip, 10 | TooltipContent, 11 | TooltipProvider, 12 | TooltipTrigger, 13 | } from "@/components/ui/tooltip"; 14 | 15 | type Props = {}; 16 | 17 | export default function HireMe({}: Props) { 18 | const [isOpen, setIsOpen] = useState(false); 19 | const pathname = usePathname(); 20 | 21 | useEffect(() => { 22 | setTimeout(() => { 23 | setIsOpen(true); 24 | }, 1000); 25 | }, []); 26 | 27 | if (pathname === "/volleyball") { 28 | return null; 29 | } 30 | 31 | return ( 32 | 33 | {isOpen && ( 34 |
35 | 42 |
43 | 44 | 53 | 54 | 55 | 56 | 61 | cal.com/alisamadi 62 | 63 | 64 | 65 |

Book a call with me

66 | 67 | 68 | 69 | 70 | 71 | {pathname !== "/" && ( 72 | setIsOpen(false)} 80 | className="absolute right-4 top-1/2 -translate-y-1/2 text-natural-600" 81 | > 82 | 83 | 84 | )} 85 |
86 | )} 87 | 88 | ); 89 | } 90 | -------------------------------------------------------------------------------- /components/ui/badge.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { cva, type VariantProps } from "class-variance-authority"; 3 | 4 | import { cn } from "@/lib/utils"; 5 | 6 | const badgeVariants = cva( 7 | "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", 8 | { 9 | variants: { 10 | variant: { 11 | default: 12 | "border-transparent bg-natural-200 text-natural-700 hover:bg-natural-300", 13 | secondary: 14 | "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", 15 | destructive: 16 | "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", 17 | outline: "text-foreground", 18 | }, 19 | }, 20 | defaultVariants: { 21 | variant: "default", 22 | }, 23 | } 24 | ); 25 | 26 | export interface BadgeProps 27 | extends React.HTMLAttributes, 28 | VariantProps {} 29 | 30 | function Badge({ className, variant, ...props }: BadgeProps) { 31 | return ( 32 |
33 | ); 34 | } 35 | 36 | export { Badge, badgeVariants }; 37 | -------------------------------------------------------------------------------- /components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Slot } from "@radix-ui/react-slot"; 3 | import { cva, type VariantProps } from "class-variance-authority"; 4 | 5 | import { cn } from "@/lib/utils"; 6 | 7 | const buttonVariants = cva( 8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", 9 | { 10 | variants: { 11 | variant: { 12 | default: 13 | "bg-natural-900 border border-transparent text-primary-foreground hover:bg-primary/90", 14 | destructive: 15 | "bg-destructive text-destructive-foreground hover:bg-destructive/90", 16 | outline: 17 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground", 18 | secondary: 19 | "bg-secondary text-secondary-foreground hover:bg-secondary/80", 20 | ghost: "hover:bg-accent hover:text-accent-foreground", 21 | link: "text-primary underline-offset-4 hover:underline", 22 | }, 23 | size: { 24 | default: "h-10 px-4 py-2", 25 | sm: "h-9 rounded-md px-3", 26 | lg: "h-12 w-fit px-6 md:px-0 md:h-[75px] rounded-full md:w-[216px]", 27 | icon: "h-10 w-10", 28 | }, 29 | }, 30 | defaultVariants: { 31 | variant: "default", 32 | size: "default", 33 | }, 34 | } 35 | ); 36 | 37 | export interface ButtonProps 38 | extends React.ButtonHTMLAttributes, 39 | VariantProps { 40 | asChild?: boolean; 41 | } 42 | 43 | const Button = React.forwardRef( 44 | ({ className, variant, size, asChild = false, ...props }, ref) => { 45 | const Comp = asChild ? Slot : "button"; 46 | return ( 47 | 52 | ); 53 | } 54 | ); 55 | Button.displayName = "Button"; 56 | 57 | export { Button, buttonVariants }; 58 | -------------------------------------------------------------------------------- /components/ui/dialog.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import * as DialogPrimitive from "@radix-ui/react-dialog"; 5 | 6 | import { cn } from "@/lib/utils"; 7 | 8 | const Dialog = DialogPrimitive.Root; 9 | 10 | const DialogTrigger = DialogPrimitive.Trigger; 11 | 12 | const DialogPortal = DialogPrimitive.Portal; 13 | 14 | const DialogClose = DialogPrimitive.Close; 15 | 16 | const DialogOverlay = React.forwardRef< 17 | React.ElementRef, 18 | React.ComponentPropsWithoutRef 19 | >(({ className, ...props }, ref) => ( 20 | 28 | )); 29 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; 30 | 31 | const DialogContent = React.forwardRef< 32 | React.ElementRef, 33 | React.ComponentPropsWithoutRef 34 | >(({ className, children, ...props }, ref) => ( 35 | 36 | 37 | 45 | {children} 46 | 47 | 48 | )); 49 | DialogContent.displayName = DialogPrimitive.Content.displayName; 50 | 51 | const DialogHeader = ({ 52 | className, 53 | ...props 54 | }: React.HTMLAttributes) => ( 55 |
62 | ); 63 | DialogHeader.displayName = "DialogHeader"; 64 | 65 | const DialogFooter = ({ 66 | className, 67 | ...props 68 | }: React.HTMLAttributes) => ( 69 |
76 | ); 77 | DialogFooter.displayName = "DialogFooter"; 78 | 79 | const DialogTitle = React.forwardRef< 80 | React.ElementRef, 81 | React.ComponentPropsWithoutRef 82 | >(({ className, ...props }, ref) => ( 83 | 91 | )); 92 | DialogTitle.displayName = DialogPrimitive.Title.displayName; 93 | 94 | const DialogDescription = React.forwardRef< 95 | React.ElementRef, 96 | React.ComponentPropsWithoutRef 97 | >(({ className, ...props }, ref) => ( 98 | 103 | )); 104 | DialogDescription.displayName = DialogPrimitive.Description.displayName; 105 | 106 | export { 107 | Dialog, 108 | DialogPortal, 109 | DialogOverlay, 110 | DialogClose, 111 | DialogTrigger, 112 | DialogContent, 113 | DialogHeader, 114 | DialogFooter, 115 | DialogTitle, 116 | DialogDescription, 117 | }; 118 | -------------------------------------------------------------------------------- /components/ui/drawer.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import { Drawer as DrawerPrimitive } from "vaul"; 5 | 6 | import { cn } from "@/lib/utils"; 7 | 8 | const Drawer = ({ 9 | shouldScaleBackground = true, 10 | ...props 11 | }: React.ComponentProps) => ( 12 | 16 | ); 17 | Drawer.displayName = "Drawer"; 18 | 19 | const DrawerTrigger = DrawerPrimitive.Trigger; 20 | 21 | const DrawerPortal = DrawerPrimitive.Portal; 22 | 23 | const DrawerClose = DrawerPrimitive.Close; 24 | 25 | const DrawerOverlay = React.forwardRef< 26 | React.ElementRef, 27 | React.ComponentPropsWithoutRef 28 | >(({ className, ...props }, ref) => ( 29 | 34 | )); 35 | DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName; 36 | 37 | const DrawerContent = React.forwardRef< 38 | React.ElementRef, 39 | React.ComponentPropsWithoutRef 40 | >(({ className, children, ...props }, ref) => ( 41 | 42 | 43 | 51 | {children} 52 | 53 | 54 | )); 55 | DrawerContent.displayName = "DrawerContent"; 56 | 57 | const DrawerHeader = ({ 58 | className, 59 | ...props 60 | }: React.HTMLAttributes) => ( 61 |
65 | ); 66 | DrawerHeader.displayName = "DrawerHeader"; 67 | 68 | const DrawerFooter = ({ 69 | className, 70 | ...props 71 | }: React.HTMLAttributes) => ( 72 |
76 | ); 77 | DrawerFooter.displayName = "DrawerFooter"; 78 | 79 | const DrawerTitle = React.forwardRef< 80 | React.ElementRef, 81 | React.ComponentPropsWithoutRef 82 | >(({ className, ...props }, ref) => ( 83 | 91 | )); 92 | DrawerTitle.displayName = DrawerPrimitive.Title.displayName; 93 | 94 | const DrawerDescription = React.forwardRef< 95 | React.ElementRef, 96 | React.ComponentPropsWithoutRef 97 | >(({ className, ...props }, ref) => ( 98 | 103 | )); 104 | DrawerDescription.displayName = DrawerPrimitive.Description.displayName; 105 | 106 | export { 107 | Drawer, 108 | DrawerPortal, 109 | DrawerOverlay, 110 | DrawerTrigger, 111 | DrawerClose, 112 | DrawerContent, 113 | DrawerHeader, 114 | DrawerFooter, 115 | DrawerTitle, 116 | DrawerDescription, 117 | }; 118 | -------------------------------------------------------------------------------- /components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import { cn } from "@/lib/utils"; 4 | 5 | export interface InputProps 6 | extends React.InputHTMLAttributes {} 7 | 8 | const Input = React.forwardRef( 9 | ({ className, type, ...props }, ref) => { 10 | return ( 11 | 20 | ); 21 | } 22 | ); 23 | Input.displayName = "Input"; 24 | 25 | export { Input }; 26 | -------------------------------------------------------------------------------- /components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import * as LabelPrimitive from "@radix-ui/react-label"; 5 | import { cva, type VariantProps } from "class-variance-authority"; 6 | 7 | import { cn } from "@/lib/utils"; 8 | 9 | const labelVariants = cva( 10 | "text-sm font-medium leading-none block peer-disabled:cursor-not-allowed peer-disabled:opacity-70" 11 | ); 12 | 13 | const Label = React.forwardRef< 14 | React.ElementRef, 15 | React.ComponentPropsWithoutRef & 16 | VariantProps 17 | >(({ className, ...props }, ref) => ( 18 | 23 | )); 24 | Label.displayName = LabelPrimitive.Root.displayName; 25 | 26 | export { Label }; 27 | -------------------------------------------------------------------------------- /components/ui/separator.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as SeparatorPrimitive from "@radix-ui/react-separator" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | const Separator = React.forwardRef< 9 | React.ElementRef, 10 | React.ComponentPropsWithoutRef 11 | >( 12 | ( 13 | { className, orientation = "horizontal", decorative = true, ...props }, 14 | ref 15 | ) => ( 16 | 27 | ) 28 | ) 29 | Separator.displayName = SeparatorPrimitive.Root.displayName 30 | 31 | export { Separator } 32 | -------------------------------------------------------------------------------- /components/ui/slider.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import * as React from "react"; 4 | import * as SliderPrimitive from "@radix-ui/react-slider"; 5 | import { cn } from "@/lib/utils"; 6 | 7 | const Slider = React.forwardRef< 8 | React.ElementRef, 9 | React.ComponentPropsWithoutRef 10 | >(({ className, ...props }, ref) => ( 11 | 19 | 23 | 24 | 25 | 26 | 27 | )); 28 | Slider.displayName = SliderPrimitive.Root.displayName; 29 | 30 | export { Slider }; 31 | -------------------------------------------------------------------------------- /components/ui/sonner.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { useTheme } from "next-themes" 4 | import { Toaster as Sonner } from "sonner" 5 | 6 | type ToasterProps = React.ComponentProps 7 | 8 | const Toaster = ({ ...props }: ToasterProps) => { 9 | const { theme = "system" } = useTheme() 10 | 11 | return ( 12 | 28 | ) 29 | } 30 | 31 | export { Toaster } 32 | -------------------------------------------------------------------------------- /components/ui/text.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { cva, type VariantProps } from "class-variance-authority"; 3 | 4 | import { cn } from "@/lib/utils"; 5 | 6 | const textVariants = cva("", { 7 | variants: { 8 | variant: { 9 | h1: "text-[40px] font-lora font-semibold leading-[125%]", 10 | h2: "text-[24px] md:text-[32px] font-lora font-semibold leading-[125%]", 11 | h3: "text-2xl font-lora font-semibold leading-[125%]", 12 | h4: "text-lg font-lora font-semibold leading-[125%]", 13 | h5: "text-sm font-lora font-semibold leading-[125%]", 14 | "p1-r": "leading-[150%]", 15 | "p1-b": "leading-[150%] font-medium", 16 | "p2-r": "leading-[150%] text-sm", 17 | "p2-b": "leading-[150%] text-sm font-medium", 18 | "p3-r": "leading-[150%] text-xs", 19 | "p3-b": "leading-[150%] text-xs font-medium", 20 | label: "text-sm font-medium text-neutral-500", 21 | }, 22 | }, 23 | defaultVariants: { 24 | variant: "p1-r", 25 | }, 26 | }); 27 | 28 | export interface TextProps 29 | extends React.HTMLAttributes, 30 | VariantProps { 31 | element?: "h1" | "h2" | "h3" | "h4" | "h5" | "p" | "span"; 32 | } 33 | 34 | const Text = React.forwardRef< 35 | HTMLElement | HTMLHeadingElement | HTMLParagraphElement | HTMLSpanElement, 36 | TextProps 37 | >(({ className, variant, element = "p", ...props }, ref) => { 38 | const Element = element; 39 | 40 | return ( 41 | 46 | ); 47 | }); 48 | Text.displayName = "Text"; 49 | 50 | export { Text, textVariants }; 51 | -------------------------------------------------------------------------------- /components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import { cn } from "@/lib/utils"; 4 | 5 | export interface TextareaProps 6 | extends React.TextareaHTMLAttributes {} 7 | 8 | const Textarea = React.forwardRef( 9 | ({ className, ...props }, ref) => { 10 | return ( 11 |