[ { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n/src/assets/css/app.css\n" }, { "path": ".vscode/settings.json", "content": "{\n \"typescript.tsdk\": \"node_modules\\\\typescript\\\\lib\"\n}" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2020 Muhammad Faqih Muntashir\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# Fama - Portfolio Website Template\n\nTailwindCSS based personal branding template. Built with react and framer-motion.\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n![Preview](https://cdn.dribbble.com/users/3490149/screenshots/14749044/media/a28226282decfdb8571c551e69feb706.png)\n\n## Live Demo\n\nI'm currently using this template for my portfolio website, you can check it how it looks live by\nyourself at https://itsfaqih.vercel.app/\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `yarn start`\n\nRuns the app in the development mode. Open http://localhost:3000 to view it in the browser.\n\nThe page will reload if you make edits. You will also see any lint errors in the console.\n\n### `yarn watch:style`\n\nRuns the postcss-cli to compile the TailwindCSS styles in watch mode.\n\n### `yarn dev`\n\nRuns both `yarn start` and `yarn watch:style` concurrently.\n\n### `yarn build:style`\n\nCompile the TailwindCSS styles for production.\n\n### `yarn test`\n\nLaunches the test runner in the interactive watch mode. See the section about\n[running tests](https://create-react-app.dev/docs/running-tests/) for more information.\n\n### `yarn build`\n\nBuilds the app for production to the `build` folder. It correctly bundles React in production mode\nand optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes. Your app is ready to be deployed!\n\nSee the section about [deployment](https://create-react-app.dev/docs/deployment/) for more\ninformation.\n\n### `yarn eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can’t go back!**\n\nIf you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time.\nThis command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (webpack, Babel,\nESLint, etc) right into your project so you have full control over them. All of the commands except\n`eject` will still work, but they will point to the copied scripts so you can tweak them. At this\npoint you’re on your own.\n\nYou don’t have to ever use `eject`. The curated feature set is suitable for small and middle\ndeployments, and you shouldn’t feel obligated to use this feature. However we understand that this\ntool wouldn’t be useful if you couldn’t customize it when you are ready for it.\n\n## Learn More\n\nYou can learn more in the\n[Create React App documentation](https://create-react-app.dev/docs/getting-started/).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n" }, { "path": "package.json", "content": "{\n \"name\": \"personal-branding-template\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"@headlessui/react\": \"^0.2.0\",\n \"@testing-library/jest-dom\": \"^5.11.4\",\n \"@testing-library/react\": \"^11.1.0\",\n \"@testing-library/user-event\": \"^12.1.10\",\n \"@types/body-scroll-lock\": \"^2.6.1\",\n \"@types/jest\": \"^26.0.15\",\n \"@types/node\": \"^12.0.0\",\n \"@types/react\": \"^16.9.53\",\n \"@types/react-dom\": \"^16.9.8\",\n \"body-scroll-lock\": \"^3.1.5\",\n \"classnames\": \"^2.2.6\",\n \"framer-motion\": \"^2.9.4\",\n \"react\": \"^17.0.1\",\n \"react-dom\": \"^17.0.1\",\n \"react-intersection-observer\": \"^8.30.3\",\n \"react-scripts\": \"4.0.0\",\n \"typescript\": \"^4.0.3\",\n \"web-vitals\": \"^0.2.4\"\n },\n \"scripts\": {\n \"watch:style\": \"postcss ./src/assets/css/styles.css -o ./src/assets/css/app.css -w\",\n \"build:style\": \"postcss ./src/assets/css/styles.css -o ./src/assets/css/app.css --env production\",\n \"start\": \"react-scripts start\",\n \"dev\": \"concurrently \\\"yarn watch:style\\\" \\\"yarn start\\\"\",\n \"build\": \"yarn build:style && react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n },\n \"eslintConfig\": {\n \"extends\": [\n \"react-app\",\n \"react-app/jest\"\n ]\n },\n \"browserslist\": {\n \"production\": [\n \">0.2%\",\n \"not dead\",\n \"not op_mini all\"\n ],\n \"development\": [\n \"last 1 chrome version\",\n \"last 1 firefox version\",\n \"last 1 safari version\"\n ]\n },\n \"devDependencies\": {\n \"@iconify/icons-logos\": \"^1.0.12\",\n \"@iconify/react\": \"^1.1.3\",\n \"@types/classnames\": \"^2.2.11\",\n \"autoprefixer\": \"^10.0.2\",\n \"concurrently\": \"^5.3.0\",\n \"postcss\": \"^8.1.7\",\n \"postcss-cli\": \"^8.3.0\",\n \"postcss-import\": \"^13.0.0\",\n \"tailwindcss\": \"^2.0.1\"\n }\n}\n" }, { "path": "postcss.config.js", "content": "module.exports = {\n plugins: [require('postcss-import'), require('tailwindcss'), require('autoprefixer')],\n};\n" }, { "path": "public/index.html", "content": "\n\n \n \n \n \n \n \n \n \n \n \n \n Faqih Muntashir's Portfolio\n \n \n \n
\n \n \n\n" }, { "path": "public/manifest.json", "content": "{\n \"short_name\": \"itsfaqih Portfolio\",\n \"name\": \"Faqih Muntashir's Portfolio\",\n \"icons\": [],\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"theme_color\": \"#ffffff\",\n \"background_color\": \"#ffffff\"\n}\n" }, { "path": "public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "src/App.test.tsx", "content": "import React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport App from './App';\n\ntest('renders learn react link', () => {\n render();\n const linkElement = screen.getByText(/learn react/i);\n expect(linkElement).toBeInTheDocument();\n});\n" }, { "path": "src/App.tsx", "content": "import React from 'react';\nimport 'assets/css/app.css';\nimport Home from 'pages/Home';\nimport { LanguageContext } from 'contexts';\nimport { useState } from 'react';\n\nfunction App() {\n const [languange, setLanguage] = useState<'en' | 'id'>('en');\n\n const changeLanguage = (lang: 'en' | 'id') => setLanguage(lang);\n\n return (\n \n \n \n );\n}\n\nexport default App;\n" }, { "path": "src/assets/css/styles.css", "content": "@import 'tailwindcss/base';\n@import 'tailwindcss/components';\n@import 'tailwindcss/utilities';\n\n@layer utilities {\n @variants hover, focus-within {\n .filter-none {\n filter: none;\n }\n .filter-grayscale {\n filter: grayscale(100%);\n }\n }\n}" }, { "path": "src/components/animations/FadeIn.tsx", "content": "import { HTMLMotionProps, motion, Variants } from 'framer-motion';\nimport React from 'react';\n\ninterface Props extends HTMLMotionProps<'div'> {\n delay?: number;\n duration?: number;\n}\n\nexport default function FadeIn({ children, delay = 0, duration = 0.5, animate, ...props }: Props) {\n const variants: Variants = {\n show: (i: number = 1) => ({\n opacity: 1,\n transition: {\n delay: i * delay,\n duration: duration,\n },\n }),\n hidden: {\n opacity: 0,\n },\n };\n\n return (\n \n {children}\n \n );\n}\n" }, { "path": "src/components/animations/FromDirection.tsx", "content": "import React, { useState } from 'react';\nimport { motion, HTMLMotionProps, Variants } from 'framer-motion';\nimport classNames from 'classnames';\nimport { useRef } from 'react';\n\ninterface Props extends HTMLMotionProps<'div'> {\n from:\n | 'left'\n | 'top'\n | 'right'\n | 'bottom'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right';\n delay?: number;\n duration?: number;\n innerClassName?: string;\n}\n\nexport default function FromDirection({\n children,\n from,\n delay = 0,\n duration = 0.6,\n className,\n innerClassName,\n onAnimationComplete,\n ...props\n}: Props) {\n const [overflow, setOverflow] = useState('overflow-hidden');\n const variants: Variants = {\n show: (i: number = 1) => ({\n y: 0,\n x: 0,\n transition: {\n duration: duration,\n delay: i * delay,\n },\n }),\n hidden: {\n ...(from.includes('top') && { y: '-100%' }),\n ...(from.includes('bottom') && { y: '100%' }),\n ...(from.includes('left') && { x: '-100%' }),\n ...(from.includes('right') && { x: '100%' }),\n },\n };\n\n const ref = useRef(null);\n\n return (\n
\n {\n if (onAnimationComplete) {\n onAnimationComplete();\n }\n setOverflow(null);\n if (ref.current !== null) {\n ref.current.style.transform = '';\n }\n }}\n className={innerClassName}\n ref={ref}\n {...props}\n >\n {children}\n \n
\n );\n}\n" }, { "path": "src/components/animations/Highlighter.tsx", "content": "import React from 'react';\nimport { motion, Variants, SVGMotionProps } from 'framer-motion';\nimport classNames from 'classnames';\n\ninterface Props extends SVGMotionProps {\n rad: number;\n delay?: number;\n}\n\nexport default function Highlighter({ className, rad, delay = 0, ...props }: Props) {\n const variants: Variants = {\n show: (i: number = 1) => ({\n width: '100%',\n transition: {\n type: 'tween',\n delay: i * delay,\n duration: 0.7,\n },\n }),\n hidden: {\n width: 0,\n },\n };\n\n return (\n \n \n \n );\n}\n" }, { "path": "src/components/animations/Letter.tsx", "content": "import React from 'react';\nimport { motion, Variants, HTMLMotionProps } from 'framer-motion';\n\ninterface Props extends HTMLMotionProps<'div'> {\n text: string;\n delay?: number;\n duration?: number;\n}\n\nexport default function Letter({ text, delay = 0, duration = 0.05, ...props }: Props) {\n const letters = Array.from(text);\n\n const container: Variants = {\n hidden: {\n opacity: 0,\n },\n show: (i: number = 1) => ({\n opacity: 1,\n transition: { staggerChildren: duration, delayChildren: i * delay },\n }),\n };\n\n const child: Variants = {\n show: {\n y: 0,\n transition: {\n type: 'spring',\n damping: 15,\n },\n },\n hidden: {\n y: '100%',\n },\n };\n\n return (\n \n {letters.map((letter, index) => (\n \n {letter === ' ' ? '\\u00A0' : letter}\n \n ))}\n \n );\n}\n" }, { "path": "src/components/animations/Reveal.tsx", "content": "import React, { useState } from 'react';\nimport { motion, HTMLMotionProps, Variants } from 'framer-motion';\nimport classNames from 'classnames';\n\ninterface Props extends HTMLMotionProps<'div'> {\n duration?: number;\n delay?: number;\n from: 'left' | 'top' | 'right' | 'bottom';\n}\n\nexport default function Reveal({\n children,\n duration,\n from,\n delay = 0.6,\n className,\n ...props\n}: Props) {\n const [animatedFinish, setAnimatedFinish] = useState(false);\n const variants: Variants = {\n show: (i: number = 1) => ({\n ...(from === 'right' && { x: '-100%' }),\n ...(from === 'left' && { x: '100%' }),\n ...(from === 'bottom' && { y: '-100%' }),\n ...(from === 'top' && { y: '100%' }),\n transition: {\n delay: i * delay,\n duration: duration,\n },\n }),\n hidden: {\n x: 0,\n y: 0,\n },\n };\n\n return (\n
\n {children}\n setAnimatedFinish(true)}\n />\n
\n );\n}\n" }, { "path": "src/components/animations/StaggerChildren.tsx", "content": "import { HTMLMotionProps, motion, Variants } from 'framer-motion';\nimport React from 'react';\n\ninterface Props extends HTMLMotionProps<'div'> {\n duration?: number;\n delay?: number;\n}\n\nexport default function StaggerChildren({ children, duration = 0.5, delay = 0, ...props }: Props) {\n const variants: Variants = {\n hidden: {\n opacity: 0,\n },\n show: (i: number = 1) => ({\n opacity: 1,\n transition: {\n delay: delay,\n staggerChildren: duration,\n delayChildren: i * delay,\n },\n }),\n };\n\n return (\n \n {children}\n \n );\n}\n" }, { "path": "src/components/animations/index.tsx", "content": "import Letter from 'components/animations/Letter';\nimport Highlighter from 'components/animations/Highlighter';\nimport FromDirection from 'components/animations/FromDirection';\nimport Reveal from 'components/animations/Reveal';\nimport FadeIn from 'components/animations/FadeIn';\nimport StaggerChildren from 'components/animations/StaggerChildren';\n\nconst Animated = { Letter, Highlighter, FromDirection, Reveal, FadeIn, StaggerChildren };\n\nexport default Animated;\n" }, { "path": "src/components/atoms/Avatar/index.tsx", "content": "import React from 'react';\nimport classNames from 'classnames';\n\ninterface Props {\n src: string;\n alt: string;\n className?: string;\n}\n\nexport default function Avatar({ src, alt, className }: Props) {\n return (\n \n );\n}\n" }, { "path": "src/components/atoms/Container/index.tsx", "content": "import React from 'react';\nimport classNames from 'classnames';\ninterface Props {\n children?: React.ReactNode;\n className?: string;\n fluid?: boolean;\n}\n\nexport default function Container({ children, className, fluid }: Props) {\n return (\n \n {children}\n \n );\n}\n" }, { "path": "src/components/atoms/ContentText/index.tsx", "content": "import React, { ReactNode } from 'react';\nimport classNames from 'classnames';\n\ninterface Props {\n children: ReactNode;\n className?: string;\n}\n\nexport default function ContentText({ children, className }: Props) {\n return (\n

\n {children}\n

\n );\n}\n" }, { "path": "src/components/atoms/ContentTitle/index.tsx", "content": "import React, { ReactNode } from 'react';\nimport classNames from 'classnames';\n\ninterface Props {\n children: ReactNode;\n className?: string;\n}\n\nexport default function ContentTitle({ children, className }: Props) {\n return

{children}

;\n}\n" }, { "path": "src/components/atoms/FullRoundButton/index.tsx", "content": "import React from 'react';\nimport classNames from 'classnames';\nimport { motion } from 'framer-motion';\nimport FullRoundButtonProps from 'components/atoms/FullRoundButton/types';\nimport { useState } from 'react';\nimport { useEffect } from 'react';\n\nexport default function FullRoundButton({\n children,\n label,\n as = 'button',\n href = '',\n className,\n animationComplete,\n active = false,\n onClick\n}: FullRoundButtonProps) {\n const [animationFinish, setAnimationFinish] = useState(false);\n const classes = classNames(\n 'flex items-center justify-center w-12 h-12 rounded-full focus:outline-none focus:ring-2 ring-indigo-500 ring-offset-2',\n className,\n {\n 'shadow-lg': animationComplete,\n 'scale-75': animationComplete === false,\n 'transition-all transform duration-500': animationComplete != null && !animationFinish,\n 'bg-indigo-500 hover:bg-indigo-600 text-white': !active,\n 'bg-white text-indigo-600': active\n }\n );\n\n useEffect(() => {\n if (animationComplete) {\n setTimeout(() => {\n setAnimationFinish(true);\n }, 500);\n }\n }, [animationComplete]);\n\n if (as === 'button') {\n return (\n \n {children}\n {label}\n \n );\n }\n return (\n \n {children}\n {label}\n \n );\n}\n" }, { "path": "src/components/atoms/FullRoundButton/types.ts", "content": "import { ReactNode } from 'react';\n\nexport default interface FullRoundButtonProps {\n children?: ReactNode;\n label?: string;\n as?: 'button' | 'a';\n href?: string;\n className?: string;\n animationComplete?: boolean;\n active?: boolean;\n onClick?: (params: any) => any;\n}\n" }, { "path": "src/components/atoms/HeaderText/index.tsx", "content": "import React, { ReactNode } from 'react';\nimport classNames from 'classnames';\n\ninterface Props {\n children: ReactNode;\n className?: string;\n tag?: 'div' | 'h2';\n}\n\nexport default function HeaderText({ children, className, tag = 'div' }: Props) {\n if (tag === 'div') {\n return (\n
\n {children}\n
\n );\n }\n return (\n

\n {children}\n

\n );\n}\n" }, { "path": "src/components/atoms/HighlightedText/index.tsx", "content": "import React from 'react';\nimport classNames from 'classnames';\nimport HighlightedTextProps from 'components/atoms/HighlightedText/types';\n\nexport default function HighlightedText({\n children,\n as = 'span',\n href,\n className,\n}: HighlightedTextProps) {\n const classes = classNames('px-3 bg-white rounded-full shadow-md focus:outline-none focus:ring-2 ring-indigo-500', className);\n if (as === 'span') {\n return (\n \n {children}\n \n );\n }\n return (\n \n {children}\n \n );\n}\n" }, { "path": "src/components/atoms/HighlightedText/types.tsx", "content": "import { ReactNode } from \"react\";\n\nexport default interface HighlightedTextProps {\n children: ReactNode;\n as?: 'a' | 'span';\n href?: string;\n className?: string;\n}" }, { "path": "src/components/atoms/MenuItem/index.tsx", "content": "import React from 'react';\nimport { ReactNode } from 'react';\nimport classNames from 'classnames';\n\ninterface Props {\n children: ReactNode;\n active: boolean;\n}\n\nexport default function MenuItem({ children, active }: Props) {\n return (\n \n {children}\n \n \n \n \n );\n}\n" }, { "path": "src/components/atoms/Overlay/index.tsx", "content": "import React from 'react';\nimport classNames from 'classnames';\nimport { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';\nimport { RefObject } from 'react';\n\ninterface Props {\n contentRef: RefObject;\n classOnOpen: string;\n classOnClose: string;\n open?: boolean;\n animationFinish?: boolean;\n useAnimationFinish?: boolean;\n className?: string;\n}\n\nexport default function Overlay({\n contentRef,\n classOnOpen,\n classOnClose,\n open = false,\n animationFinish = false,\n className,\n}: Props) {\n if (open) {\n if (contentRef.current) disableBodyScroll(contentRef.current as HTMLElement);\n } else clearAllBodyScrollLocks();\n \n return (\n \n \n \n );\n}\n" }, { "path": "src/components/atoms/RoundedButton/index.tsx", "content": "import React, { ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { motion } from 'framer-motion';\n\ninterface Props {\n children: ReactNode;\n as?: 'button' | 'a';\n href?: string;\n className?: string;\n}\n\nexport default function RoundedButton({ children, as = 'button', href = '', className }: Props) {\n const classes = classNames(\n 'flex items-center justify-center h-12 px-12 shadow-lg hover:shadow-none transition-shadow text-sm text-white hover:bg-indigo-600 bg-indigo-500 font-bold rounded-full transform focus:outline-none focus:ring-2 ring-indigo-500 ring-offset-2',\n className\n );\n\n if (as === 'button') {\n return (\n \n {children}\n \n );\n }\n\n return (\n \n {children}\n \n );\n}\n" }, { "path": "src/components/atoms/TextBox/index.tsx", "content": "import React from 'react';\nimport classNames from 'classnames';\nimport TextBoxProps from 'components/atoms/TextBox/types';\n\nexport default function TextBox({ placeholder, className, value, onChange }: TextBoxProps) {\n return (\n \n );\n}\n" }, { "path": "src/components/atoms/TextBox/types.ts", "content": "export default interface TextBoxProps {\n placeholder?: string;\n className?: string;\n value?: string;\n onChange?: (param: any) => any;\n}\n" }, { "path": "src/components/atoms/TextButton/index.tsx", "content": "import React from 'react';\nimport classNames from 'classnames';\nimport { ReactNode } from 'react';\n\ninterface Props {\n children: ReactNode;\n className?: string;\n onClick?: (params: any) => any;\n}\n\nexport default function TextButton({ children, className, onClick }: Props) {\n return (\n \n {children}\n \n );\n}\n" }, { "path": "src/components/atoms/TextSelectOption/index.tsx", "content": "import React, { ReactNode } from 'react';\nimport classNames from 'classnames';\nimport Icons from 'components/icons';\n\ninterface Props {\n children: ReactNode;\n active: boolean;\n selected: boolean;\n onClick: (any: any) => any;\n}\n\nexport default function TextSelectOption({ children, active, selected, onClick }: Props) {\n return (\n \n {children}\n {selected && }\n \n );\n}\n" }, { "path": "src/components/atoms/TitleLine/index.tsx", "content": "import React from 'react';\nimport { motion, SVGMotionProps, Variants } from 'framer-motion';\nimport classNames from 'classnames';\n\nexport default function TitleLine({ className, ...props }: SVGMotionProps) {\n const variants: Variants = {\n show: {\n width: '100%',\n },\n hidden: {\n width: 0,\n },\n };\n\n return (\n \n \n \n );\n}\n" }, { "path": "src/components/atoms/index.tsx", "content": "import Avatar from 'components/atoms/Avatar';\nimport HeaderText from 'components/atoms/HeaderText';\nimport TextButton from 'components/atoms/TextButton';\nimport TextSelectOption from 'components/atoms/TextSelectOption';\nimport FullRoundButton from 'components/atoms/FullRoundButton';\nimport RoundedButton from 'components/atoms/RoundedButton';\nimport HighlightedText from 'components/atoms/HighlightedText';\nimport ContentTitle from 'components/atoms/ContentTitle';\nimport TextBox from 'components/atoms/TextBox';\nimport ContentText from 'components/atoms/ContentText';\nimport Container from 'components/atoms/Container';\nimport TitleLine from 'components/atoms/TitleLine';\nimport MenuItem from 'components/atoms/MenuItem';\nimport Overlay from 'components/atoms/Overlay';\n\nexport {\n Avatar,\n HeaderText,\n TextButton,\n TextSelectOption,\n FullRoundButton,\n RoundedButton,\n HighlightedText,\n ContentTitle,\n TextBox,\n ContentText,\n Container,\n TitleLine,\n MenuItem,\n Overlay\n};\n" }, { "path": "src/components/decorations/Bullets.tsx", "content": "import React from 'react';\n\nexport default function Bullets({ className }: { className?: string }) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n" }, { "path": "src/components/decorations/Stripes.tsx", "content": "import React from 'react';\n\nexport default function Stripes({ className }: { className?: string }) {\n return (\n \n \n \n );\n}\n" }, { "path": "src/components/decorations/index.tsx", "content": "import Bullets from 'components/decorations/Bullets';\nimport Stripes from 'components/decorations/Stripes';\n\nconst Decorations = {\n Bullets,\n Stripes\n};\n\nexport default Decorations;\n" }, { "path": "src/components/icons/index.tsx", "content": "import React from 'react';\n\nconst Dribbble = ({ className }: { className?: string }) => (\n \n \n \n);\n\nconst Github = ({ className }: { className?: string }) => (\n \n \n \n);\n\nconst Facebook = ({ className }: { className?: string }) => (\n \n \n \n);\n\nconst Twitter = ({ className }: { className?: string }) => (\n \n \n \n);\n\nconst Instagram = ({ className }: { className?: string }) => (\n \n \n \n \n \n);\n\nconst CheckRounded = ({ className }: { className?: string }) => (\n \n \n \n);\n\nconst Menu = ({ className }: { className?: string }) => (\n \n \n \n);\n\nconst Close = ({ className }: { className?: string }) => (\n \n \n \n);\n\nconst Icons = {\n Dribbble,\n Github,\n Facebook,\n Twitter,\n Instagram,\n CheckRounded,\n Menu,\n Close,\n};\n\nexport default Icons;\n" }, { "path": "src/components/molecules/BlogPost/index.tsx", "content": "import { ContentTitle } from 'components/atoms';\nimport { LanguageContext } from 'contexts';\nimport React, { useContext } from 'react';\nimport BlogsProps from 'components/molecules/BlogPost/types';\nimport classNames from 'classnames';\n\nexport default function BlogPost({ data, className }: BlogsProps) {\n const { title, date, url } = data;\n const language = useContext(LanguageContext);\n const formattedDate = new Intl.DateTimeFormat(language.value === 'en' ? 'en-US' : 'id-ID', {\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n }).format(date);\n\n return (\n \n );\n}\n" }, { "path": "src/components/molecules/BlogPost/types.ts", "content": "export default interface BlogsProps {\n data: BlogsPostProps;\n className?: string;\n}\n\nexport interface BlogsPostProps {\n title: string;\n date: Date;\n url: string;\n}\n" }, { "path": "src/components/molecules/HighlightedTextIcon/index.tsx", "content": "import { HighlightedText } from 'components/atoms';\nimport HighlightedTextProps from 'components/atoms/HighlightedText/types';\nimport React, { ReactElement } from 'react';\nimport classNames from 'classnames';\n\ninterface Props extends HighlightedTextProps {\n icon: ReactElement;\n}\n\nexport default function HighlightedTextIcon({ icon, children, className, ...props }: Props) {\n const Icon = React.cloneElement(icon, { className: 'w-7 h-7 pr-2 self-center' });\n\n return (\n \n {Icon}\n {children}\n \n );\n}\n" }, { "path": "src/components/molecules/MainMenu/index.tsx", "content": "import { Menu } from '@headlessui/react';\nimport { MenuButton } from 'components/molecules';\nimport React from 'react';\nimport Animated from 'components/animations';\nimport { AnimatePresence } from 'framer-motion';\nimport { useContext } from 'react';\nimport { LanguageContext } from 'contexts';\nimport { MenuItem, Overlay } from 'components/atoms';\nimport { useRef } from 'react';\n\ninterface Props {\n animationFinish?: boolean;\n sections: { about: string; projects: string; blogs: string; skills: string; contact: string };\n}\n\nexport default function MainMenu({ animationFinish, sections }: Props) {\n const language = useContext(LanguageContext);\n const menu = useRef(null);\n\n return (\n
\n \n {({ open }) => (\n <>\n \n \n \n \n \n {open && (\n \n
\n \n {({ active }: { active: boolean }) => (\n \n {sections.about}\n \n )}\n \n \n {({ active }: { active: boolean }) => (\n \n {sections.projects}\n \n )}\n \n \n {({ active }: { active: boolean }) => (\n \n {sections.blogs}\n \n )}\n \n \n {({ active }: { active: boolean }) => (\n \n {sections.skills}\n \n )}\n \n \n {({ active }: { active: boolean }) => (\n \n \n {language.value === 'en' ? 'Contact' : 'Kontak'}\n \n \n )}\n \n
\n \n )}\n \n \n )}\n \n
\n );\n}\n" }, { "path": "src/components/molecules/MenuButton/index.tsx", "content": "import { FullRoundButton } from 'components/atoms';\nimport FullRoundButtonProps from 'components/atoms/FullRoundButton/types';\nimport Icons from 'components/icons';\nimport React from 'react';\n\ninterface Props extends FullRoundButtonProps {\n isOpen?: boolean;\n}\n\nexport default function MenuButton({ isOpen = false, onClick, ...props }: Props) {\n return (\n \n {isOpen ? : }\n \n );\n}\n" }, { "path": "src/components/molecules/ProjectCard/index.tsx", "content": "import { ContentTitle } from 'components/atoms';\nimport Icons from 'components/icons';\nimport { LanguageContext } from 'contexts';\nimport React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport ProjectCardProps from 'components/molecules/ProjectCard/types';\n\nexport default function ProjectCard({ data, className }: ProjectCardProps) {\n const language = useContext(LanguageContext);\n const { title, description, type, url } = data;\n\n return (\n \n {title}\n

{description}

\n
\n {type === 'dribbble' ? (\n \n ) : (\n \n )}\n \n {language.value === 'en' ? 'Details' : 'Lihat'}\n \n
\n \n );\n}\n" }, { "path": "src/components/molecules/ProjectCard/types.ts", "content": "export default interface ProjectCardProps {\n data: ProjectCardDataProps;\n className: string;\n}\n\nexport interface ProjectCardDataProps {\n title: string;\n description: string;\n type: 'github' | 'dribbble';\n url: string;\n}\n" }, { "path": "src/components/molecules/SearchBox/index.tsx", "content": "import { TextBox } from 'components/atoms';\nimport TextBoxProps from 'components/atoms/TextBox/types';\nimport React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { LanguageContext } from 'contexts';\n\nexport default function SearchBox({ className }: TextBoxProps) {\n const language = useContext(LanguageContext);\n\n return (\n \n \n \n \n \n \n );\n}\n" }, { "path": "src/components/molecules/SectionTitle/index.tsx", "content": "import { HeaderText, TitleLine } from 'components/atoms';\nimport React, { ReactNode } from 'react';\nimport classNames from 'classnames';\nimport { SVGMotionProps } from 'framer-motion';\n\ninterface Props {\n children: ReactNode;\n variant?: SectionVariants;\n lineProps?: SVGMotionProps;\n}\n\nexport enum SectionVariants {\n LEFT = 'left',\n CENTER = 'center',\n}\n\nexport default function SectionTitle({\n children,\n variant = SectionVariants.LEFT,\n lineProps,\n}: Props) {\n return (\n \n {children}\n \n \n );\n}\n" }, { "path": "src/components/molecules/TextIconButton/index.tsx", "content": "import { TextButton } from 'components/atoms';\nimport React, { ReactElement } from 'react';\nimport classNames from 'classnames';\n\ninterface Props {\n text: string;\n icon: ReactElement;\n className?: string;\n onClick: (params: any) => any;\n}\n\nexport default function TextIconButton({ text, icon, className, onClick }: Props) {\n const Icon = React.cloneElement(icon, { className: classNames('w-4 h-4', icon.props.className) });\n return (\n \n {text}\n {Icon}\n \n );\n}\n" }, { "path": "src/components/molecules/TextSelect/index.tsx", "content": "import React, { Fragment } from 'react';\nimport { Listbox, Transition } from '@headlessui/react';\nimport { TextSelectOption } from 'components/atoms';\nimport TextSelectProps from 'components/molecules/TextSelect/types';\nimport classNames from 'classnames';\n\nexport default function TextSelect({ options, state, className }: TextSelectProps) {\n const [selectedOption, setSelectedOption] = state;\n\n return (\n \n {({ open }) => (\n <>\n \n {selectedOption.label}\n \n \n \n \n \n \n {options.map(option => (\n \n {({ active, selected }) => (\n setSelectedOption(option)}\n >\n {option.label}\n \n )}\n \n ))}\n \n \n \n )}\n \n );\n}\n" }, { "path": "src/components/molecules/TextSelect/types.tsx", "content": "export default interface TextSelectProps {\n options: TextSelectOptionProps[];\n state: [TextSelectOptionProps, (any: any) => void];\n className?: string;\n}\n\nexport interface TextSelectOptionProps {\n value: string | number;\n label: string;\n}\n" }, { "path": "src/components/molecules/index.tsx", "content": "import TextIconButton from 'components/molecules/TextIconButton';\nimport TextSelect from 'components/molecules/TextSelect';\nimport MenuButton from 'components/molecules/MenuButton';\nimport SectionTitle from 'components/molecules/SectionTitle';\nimport HighlightedTextIcon from 'components/molecules/HighlightedTextIcon';\nimport SearchBox from 'components/molecules/SearchBox';\nimport BlogPost from 'components/molecules/BlogPost';\nimport MainMenu from 'components/molecules/MainMenu';\n\nexport {\n TextIconButton,\n TextSelect,\n MenuButton,\n SectionTitle,\n HighlightedTextIcon,\n SearchBox,\n BlogPost,\n MainMenu,\n};\n" }, { "path": "src/components/organisms/About/index.tsx", "content": "import Animated from 'components/animations';\nimport { ContentText, RoundedButton } from 'components/atoms';\nimport { SectionTitle } from 'components/molecules';\nimport { LanguageContext } from 'contexts';\nimport React, { useContext } from 'react';\nimport AboutSectionProps from 'components/organisms/About/types';\nimport { useAnimation } from 'framer-motion';\nimport { useEffect } from 'react';\nimport { useInView } from 'react-intersection-observer';\nimport { forwardRef } from 'react';\n\nconst About = forwardRef(\n ({ title, content, className }: AboutSectionProps, ref) => {\n const controls = useAnimation();\n const [refView, inView] = useInView({\n threshold: 0.5,\n });\n const language = useContext(LanguageContext);\n\n useEffect(() => {\n if (inView) {\n controls.start('show');\n }\n }, [controls, inView]);\n\n return (\n {\n refView(section);\n if (ref) {\n if (typeof ref === 'function') {\n ref(section);\n } else {\n ref.current = section;\n }\n }\n }}\n >\n \n \n \n
\n \n \n {content.text}\n \n \n
\n \n \n {language.value === 'en' ? 'Download' : 'Unduh'} Resume\n \n \n
\n
\n \n );\n }\n);\n\nexport default About;\n" }, { "path": "src/components/organisms/About/types.ts", "content": "import { ReactNode } from 'react';\n\nexport default interface AboutSectionProps {\n title: string;\n content: AboutSectionContentProps;\n className?: string;\n}\n\nexport interface AboutSectionContentProps {\n text: ReactNode;\n}\n" }, { "path": "src/components/organisms/Blogs/index.tsx", "content": "import Animated from 'components/animations';\nimport { RoundedButton } from 'components/atoms';\nimport { SectionTitle, BlogPost } from 'components/molecules';\nimport { LanguageContext } from 'contexts';\nimport { useAnimation } from 'framer-motion';\nimport React, { forwardRef, useContext, useEffect } from 'react';\nimport { useInView } from 'react-intersection-observer';\nimport BlogsSectionProps from './types';\n\nconst Blogs = forwardRef(\n ({ title, content, className }: BlogsSectionProps, ref) => {\n const controls = useAnimation();\n const [refView, inView] = useInView({\n threshold: 0.45,\n });\n const language = useContext(LanguageContext);\n const { items } = content;\n\n useEffect(() => {\n if (inView) {\n controls.start('show');\n }\n }, [controls, inView]);\n\n return (\n {\n refView(section);\n if (ref) {\n if (typeof ref === 'function') {\n ref(section);\n } else {\n ref.current = section;\n }\n }\n }}\n >\n
\n \n \n \n \n \n {language.value === 'en' ? 'More article' : 'Artikel lainnya'}\n \n \n
\n
\n {items.map((item, index) => (\n \n \n \n \n \n ))}\n
\n \n );\n }\n);\n\nexport default Blogs;\n" }, { "path": "src/components/organisms/Blogs/types.ts", "content": "import { BlogsPostProps } from 'components/molecules/BlogPost/types';\n\nexport default interface BlogsSectionProps {\n title: string;\n content: BlogsSectionContentProps;\n className?: string;\n}\n\nexport interface BlogsSectionContentProps {\n items: BlogsPostProps[];\n}\n" }, { "path": "src/components/organisms/Contact/index.tsx", "content": "import { FullRoundButton } from 'components/atoms';\nimport Icons from 'components/icons';\nimport React, { useEffect } from 'react';\nimport ContactSectionProps from 'components/organisms/Contact/types';\nimport Animated from 'components/animations';\nimport { useAnimation } from 'framer-motion';\nimport { useInView } from 'react-intersection-observer';\nimport { forwardRef } from 'react';\n\nconst Contact = forwardRef(\n ({ title, content }: ContactSectionProps, ref) => {\n const { email, socials } = content;\n const controls = useAnimation();\n const [refView, inView] = useInView({\n threshold: 0.4,\n });\n\n useEffect(() => {\n if (inView) {\n controls.start('show');\n }\n }, [controls, inView]);\n\n return (\n {\n refView(section);\n if (ref) {\n if (typeof ref === 'function') {\n ref(section);\n } else {\n ref.current = section;\n }\n }\n }}\n >\n

\n \n

\n
\n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n );\n }\n);\n\nexport default Contact;\n" }, { "path": "src/components/organisms/Contact/types.ts", "content": "export default interface ContactSectionProps {\n title: string;\n content: ContactSectionContentProps;\n}\n\nexport interface ContactSectionContentProps {\n email: string;\n socials: {\n facebook: string;\n twitter: string;\n instagram: string;\n };\n}\n" }, { "path": "src/components/organisms/Header/index.tsx", "content": "import Animated from 'components/animations';\nimport { Avatar, HeaderText } from 'components/atoms';\nimport Decorations from 'components/decorations';\nimport { TextIconButton } from 'components/molecules';\nimport HeaderProps from 'components/organisms/Header/types';\nimport { LanguageContext } from 'contexts';\nimport React, { useContext } from 'react';\n\nexport default function Header({ data, text, lowerSectionRef }: HeaderProps) {\n const languange = useContext(LanguageContext);\n const { profilePicture, name, job } = data;\n const { headerText } = text;\n const { greetings, intro, preTitle } = headerText;\n\n return (\n
\n
\n
\n \n \n \n \n \n \n \n \n
\n \n \n \n
\n \n \n
\n \n \n lowerSectionRef?.current?.scrollIntoView({ behavior: 'smooth' })}\n text={languange.value === 'en' ? 'Scroll down' : 'Scroll ke bawah'}\n icon={\n \n \n \n }\n />\n \n
\n
\n );\n}\n" }, { "path": "src/components/organisms/Header/types.ts", "content": "import { MutableRefObject } from \"react\";\n\nexport default interface HeaderProps {\n data: HeaderDataProps;\n text: HeaderTextProps;\n lowerSectionRef?: MutableRefObject;\n}\n\nexport interface HeaderDataProps {\n profilePicture: string;\n name: string;\n job: string;\n}\n\nexport interface HeaderTextProps {\n headerText: {\n greetings: string;\n intro: string;\n preTitle: string;\n };\n}\n" }, { "path": "src/components/organisms/Navigation/index.tsx", "content": "import Animated from 'components/animations';\nimport { MainMenu, TextSelect } from 'components/molecules';\nimport { TextSelectOptionProps } from 'components/molecules/TextSelect/types';\nimport { LocaleProps } from 'contexts/language';\nimport React from 'react';\nimport { useState } from 'react';\nimport classNames from 'classnames';\nimport { Container } from 'components/atoms';\n\ninterface Props {\n locale: LocaleProps;\n sections: { about: string; projects: string; blogs: string; skills: string; contact: string };\n className?: string;\n}\n\nexport default function Navigation({ locale, sections, className }: Props) {\n const [animationFinish, setAnimationFinish] = useState(false);\n const languageOptions: TextSelectOptionProps[] = [\n { label: 'English', value: 'en' },\n { label: 'Indonesia', value: 'id' },\n ];\n\n const selectedLanguage =\n languageOptions.find(option => option.value === locale.value) || languageOptions[0];\n\n const setSelectedLanguage = (option: TextSelectOptionProps) => {\n if (option.value === 'en' || option.value === 'id') {\n locale.change(option.value);\n }\n };\n \n return (\n \n );\n}\n" }, { "path": "src/components/organisms/Projects/index.tsx", "content": "import { SectionTitle } from 'components/molecules';\nimport React, { useContext, useEffect } from 'react';\nimport { SectionVariants } from 'components/molecules/SectionTitle';\nimport { RoundedButton } from 'components/atoms';\nimport { LanguageContext } from 'contexts';\nimport ProjectCard from 'components/molecules/ProjectCard';\nimport Decorations from 'components/decorations';\nimport ProjectsSectionProps from 'components/organisms/Projects/types';\nimport { useAnimation } from 'framer-motion';\nimport { useInView } from 'react-intersection-observer';\nimport Animated from 'components/animations';\nimport { forwardRef } from 'react';\n\nconst Projects = forwardRef(\n ({ title, content, className }: ProjectsSectionProps, ref) => {\n const controls = useAnimation();\n const [refView, inView] = useInView({\n threshold: 0.4,\n });\n const language = useContext(LanguageContext);\n const { items } = content;\n\n const bulletsClasses = 'w-32 h-32 text-indigo-300 md:w-40 md:h-40';\n\n useEffect(() => {\n if (inView) {\n controls.start('show');\n }\n }, [controls, inView]);\n\n return (\n {\n refView(section);\n if (ref) {\n if (typeof ref === 'function') {\n ref(section);\n } else {\n ref.current = section;\n }\n }\n }}\n >\n \n \n \n
\n \n \n \n \n \n \n {items.map((item, index) => (\n \n \n \n ))}\n
\n\n \n \n {language.value === 'en' ? 'See more' : 'Lihat Selengkapnya'}\n \n \n \n );\n }\n);\n\nexport default Projects;\n" }, { "path": "src/components/organisms/Projects/types.ts", "content": "import { ProjectCardDataProps } from 'components/molecules/ProjectCard/types';\n\nexport default interface ProjectsSectionProps {\n title: string;\n content: ProjectsSectionContentProps;\n className?: string;\n}\n\nexport interface ProjectsSectionContentProps {\n items: ProjectCardDataProps[];\n}\n" }, { "path": "src/components/organisms/Skills/index.tsx", "content": "import Animated from 'components/animations';\nimport { ContentText } from 'components/atoms';\nimport { SectionTitle } from 'components/molecules';\nimport { SectionVariants } from 'components/molecules/SectionTitle';\nimport { useAnimation } from 'framer-motion';\nimport React, { useEffect } from 'react';\nimport { forwardRef } from 'react';\nimport { useInView } from 'react-intersection-observer';\nimport SkillsSectionProps from './types';\n\nconst Skills = forwardRef(\n ({ title, content, className }: SkillsSectionProps, ref) => {\n const { text, items } = content;\n const upperSkills = items.slice(0, items.length / 2);\n const lowerSkills = items.slice(items.length / 2);\n\n const skillIconsClasses =\n 'mx-5 transition-all transform hover:scale-125 hover:filter-none filter-grayscale focus-within:filter-none focus-within:scale-125';\n\n const controls = useAnimation();\n const [refView, inView] = useInView({\n threshold: 0.5,\n });\n\n useEffect(() => {\n if (inView) {\n controls.start('show');\n }\n }, [controls, inView]);\n\n return (\n {\n refView(section);\n if (ref) {\n if (typeof ref === 'function') {\n ref(section);\n } else {\n ref.current = section;\n }\n }\n }}\n >\n \n \n \n \n \n {text}\n \n \n
\n {upperSkills.map((SkillItem, index) => (\n \n
{SkillItem}
\n \n ))}\n
\n
\n {lowerSkills.map((SkillItem, index) => (\n \n
{SkillItem}
\n \n ))}\n
\n \n );\n }\n);\n\nexport default Skills;\n" }, { "path": "src/components/organisms/Skills/types.ts", "content": "import { ReactNode } from 'react';\n\nexport default interface SkillsSectionProps {\n title: string;\n content: SkillsSectionContentProps;\n className?: string;\n}\n\nexport interface SkillsSectionContentProps {\n text: ReactNode;\n items: ReactNode[];\n}\n" }, { "path": "src/components/organisms/index.tsx", "content": "import Header from 'components/organisms/Header';\nimport About from 'components/organisms/About';\nimport Projects from 'components/organisms/Projects';\nimport Blogs from 'components/organisms/Blogs';\nimport Skills from 'components/organisms/Skills';\nimport Contact from 'components/organisms/Contact';\nimport Navigation from 'components/organisms/Navigation';\n\nexport { Header, About, Projects, Blogs, Skills, Contact, Navigation };\n" }, { "path": "src/components/templates/Landing/index.tsx", "content": "import { Container } from 'components/atoms';\nimport { About, Blogs, Contact, Header, Navigation, Projects, Skills } from 'components/organisms';\nimport { AboutSectionContentProps } from 'components/organisms/About/types';\nimport { BlogsSectionContentProps } from 'components/organisms/Blogs/types';\nimport { ContactSectionContentProps } from 'components/organisms/Contact/types';\nimport HeaderProps from 'components/organisms/Header/types';\nimport { ProjectsSectionContentProps } from 'components/organisms/Projects/types';\nimport { SkillsSectionContentProps } from 'components/organisms/Skills/types';\nimport { LocaleProps } from 'contexts/language';\nimport React from 'react';\nimport { useRef } from 'react';\n\ninterface Props {\n data: {\n header: HeaderProps;\n about: AboutSectionContentProps;\n projects: ProjectsSectionContentProps;\n blogs: BlogsSectionContentProps;\n skills: SkillsSectionContentProps;\n contact: ContactSectionContentProps;\n };\n locale: LocaleProps;\n sections: { about: string; projects: string; blogs: string; skills: string; contact: string };\n}\n\nexport default function Landing({ data, locale, sections }: Props) {\n const { header, about, projects, blogs, skills, contact } = data;\n const lowerSectionRef = useRef();\n\n return (\n <>\n \n \n
\n
\n
\n \n \n \n \n
\n
\n \n
\n
\n \n \n );\n}\n" }, { "path": "src/components/templates/index.tsx", "content": "import Landing from 'components/templates/Landing';\n\nexport { Landing };" }, { "path": "src/contexts/index.ts", "content": "import LanguageContext from 'contexts/language';\n\nexport { LanguageContext };\n" }, { "path": "src/contexts/language.ts", "content": "import { createContext } from 'react';\n\nexport interface LocaleProps {\n value: 'en' | 'id';\n change: (lang: 'en' | 'id') => void;\n}\n\nconst LanguageContext = createContext({\n value: 'en',\n change: lang => {},\n});\n\nexport default LanguageContext;\n" }, { "path": "src/data/blogs.ts", "content": "import { BlogsPostProps } from 'components/molecules/BlogPost/types';\n\nconst blogs: BlogsPostProps[] = [\n {\n title: 'Membuat Otentikasi JWT dengan PHP Native',\n date: new Date('2020-11-16'),\n url: 'https://medium.com/@itsfaqih/membuat-otentikasi-jwt-dengan-php-native-a9d080953358',\n },\n {\n title: 'Apa itu JWT (JSON Web Token)?',\n date: new Date('2020-11-14'),\n url: 'https://medium.com/@itsfaqih/apa-itu-jwt-json-web-token-63407936da10',\n },\n {\n title: 'Penerapan Sistem Grid Responsive dengan Flexbox',\n date: new Date('2020-06-13'),\n url:\n 'https://medium.com/@itsfaqih/penerapan-sistem-grid-responsive-dengan-flexbox-c479c84be129',\n },\n {\n title: 'Memahami Satuan Persen (%) dalam CSS',\n date: new Date('2020-06-11'),\n url: 'https://medium.com/@itsfaqih/memahami-satuan-persen-dalam-css-12479cba1c32',\n },\n];\n\nexport default blogs;\n" }, { "path": "src/data/contact.ts", "content": "import { ContactSectionContentProps } from 'components/organisms/Contact/types';\n\nconst contact: ContactSectionContentProps = {\n email: 'itsfaqih@gmail.com',\n socials: {\n facebook: 'https://facebook.com/itsfaqih',\n twitter: 'https://twitter.com/itsfaqih_',\n instagram: 'https://instagram.com/itsfaqih',\n },\n};\n\nexport default contact;\n" }, { "path": "src/data/header.ts", "content": "import { HeaderDataProps } from 'components/organisms/Header/types';\n\nconst header: HeaderDataProps = {\n name: 'Faqih Muntashir',\n profilePicture: './img/person.jpg',\n job: 'Fullstack Developer',\n};\n\nexport default header;\n" }, { "path": "src/data/index.ts", "content": "import header from 'data/header';\nimport projects from 'data/projects';\nimport blogs from 'data/blogs';\nimport skills from 'data/skills';\nimport contact from 'data/contact';\n\nexport { header, projects, blogs, skills, contact };\n" }, { "path": "src/data/projects.ts", "content": "import { ProjectCardDataProps } from \"components/molecules/ProjectCard/types\";\n\nconst projects: ProjectCardDataProps[] = [\n {\n title: 'usePagination',\n description: 'Simple client side pagination hooks for react.',\n type: 'github',\n url: 'https://github.com/itsfaqih/usepagination',\n },\n {\n title: 'larareactia',\n description:\n 'Laravel SPA + React + Inertia.js + TailwindCSS starter template with authentication.',\n type: 'github',\n url: 'https://github.com/itsfaqih/larareactia',\n },\n {\n title: 'Overflow',\n description: 'TailwindCSS Admin Dashboard Template.',\n type: 'dribbble',\n url: 'https://dribbble.com/shots/11877395-Overflow-TailwindCSS-Admin-Dashboard-Template',\n },\n {\n title: 'kos-manager',\n description: 'Lodgement management application. Developed with Laravel, Inertiajs, and React.',\n type: 'github',\n url: 'http://github.com/itsfaqih/kos-manager',\n },\n {\n title: 'Nyx',\n description: 'TailwindCSS Landing Page Template.',\n type: 'dribbble',\n url: 'https://dribbble.com/shots/11712756-Nyx-TailwindCSS-Landing-Page-Template',\n },\n {\n title: 'flexbox-tutorial',\n description: 'CSS layouting using flexbox tutorial.',\n type: 'github',\n url: 'http://github.com/itsfaqih/flexbox-tutorial',\n },\n];\n\nexport default projects;\n" }, { "path": "src/data/skills.tsx", "content": "import React from 'react';\nimport { Icon } from '@iconify/react';\nimport reactIcon from '@iconify/icons-logos/react';\nimport tailwindcssIcon from '@iconify/icons-logos/tailwindcss-icon';\nimport laravelIcon from '@iconify/icons-logos/laravel';\nimport codeigniterIcon from '@iconify/icons-logos/codeigniter';\nimport postCssIcon from '@iconify/icons-logos/postcss';\nimport bootstrapIcon from '@iconify/icons-logos/bootstrap';\nimport nextjsIcon from '@iconify/icons-logos/nextjs';\n\nconst skills = [\n \n \n ,\n \n \n ,\n \n \n ,\n \n \n ,\n \n \n ,\n \n \n ,\n \n \n ,\n];\n\nexport default skills;\n" }, { "path": "src/index.tsx", "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n" }, { "path": "src/localization/en/about.tsx", "content": "import React from 'react';\nimport { Icon } from '@iconify/react';\nimport { HighlightedTextIcon } from 'components/molecules';\nimport { AboutSectionContentProps } from 'components/organisms/About/types';\nimport reactIcon from '@iconify/icons-logos/react';\nimport tailwindcssIcon from '@iconify/icons-logos/tailwindcss-icon';\n\nconst Text = () => (\n <>\n I’m currently working as a freelance{' '}\n fullstack developer and{' '}\n UI/UX designer. I enjoy building web apps using\n }\n >\n TailwindCSS\n {' '}\n and{' '}\n }\n >\n React\n \n . I'm also an active student in University of AMIKOM Yogyakarta.\n \n);\n\nconst about: AboutSectionContentProps = {\n text: ,\n};\n\nexport default about;\n" }, { "path": "src/localization/en/header.ts", "content": "import { HeaderTextProps } from 'components/organisms/Header/types';\n\nconst header: HeaderTextProps = {\n headerText: {\n greetings: 'Hello',\n intro: \"I'm\",\n preTitle: 'a',\n }\n};\n\nexport default header;\n" }, { "path": "src/localization/en/index.ts", "content": "import header from 'localization/en/header';\nimport about from 'localization/en/about';\nimport sections from 'localization/en/sections';\nimport skills from 'localization/en/skills';\n\nexport { header, about, sections, skills };\n" }, { "path": "src/localization/en/sections.ts", "content": "const section = {\n about: 'About me',\n projects: 'Projects',\n blogs: 'Blogs',\n skills: 'Skills',\n contact: 'Get in touch 🤙',\n};\n\nexport default section;\n" }, { "path": "src/localization/en/skills.tsx", "content": "import React from 'react';\nimport { Icon } from '@iconify/react';\nimport phpIcon from '@iconify/icons-logos/php';\nimport javascriptIcon from '@iconify/icons-logos/javascript';\nimport { HighlightedTextIcon } from 'components/molecules';\n\nconst Text = () => (\n <>\n I’ve spent about two years on improving my skills in{' '}\n website development using{' '}\n }\n >\n PHP\n {' '}\n and{' '}\n }>\n Javascript\n {' '}\n that I’m now pretty confident in building apps using these tools:\n \n);\n\nconst skills = {\n text: ,\n};\n\nexport default skills;\n" }, { "path": "src/localization/id/about.tsx", "content": "import React from 'react';\nimport { HighlightedTextIcon } from 'components/molecules';\nimport { AboutSectionContentProps } from 'components/organisms/About/types';\n\nconst Text = () => (\n <>\n Saat ini saya sedang bekerja sebagai freelance{' '}\n fullstack developer dan{' '}\n UI/UX designer, saya sangat suka menggunakan\n \n \n \n \n \n \n \n \n \n \n }\n >\n TailwindCSS\n {' '}\n dan{' '}\n \n \n \n \n \n \n \n \n \n \n \n }\n >\n React\n \n . Saya juga seorang mahasiswa di Universitas AMIKOM Yogyakarta.\n \n);\n\nconst about: AboutSectionContentProps = {\n text: ,\n};\n\nexport default about;\n" }, { "path": "src/localization/id/header.ts", "content": "import { HeaderTextProps } from 'components/organisms/Header/types';\n\nconst header: HeaderTextProps = {\n headerText: {\n greetings: 'Halo',\n intro: 'Saya',\n preTitle: '',\n },\n};\n\nexport default header;\n" }, { "path": "src/localization/id/index.ts", "content": "import header from 'localization/id/header';\nimport about from 'localization/id/about';\nimport sections from 'localization/id/sections';\nimport skills from 'localization/id/skills';\n\nexport { header, about, sections, skills };\n" }, { "path": "src/localization/id/sections.ts", "content": "const section = {\n about: 'Tentang saya',\n projects: 'Proyek',\n blogs: 'Blog',\n skills: 'Kemampuan',\n contact: 'Hubungi saya 🤙',\n};\n\nexport default section;\n" }, { "path": "src/localization/id/skills.tsx", "content": "import React from 'react';\nimport { Icon } from '@iconify/react';\nimport phpIcon from '@iconify/icons-logos/php';\nimport javascriptIcon from '@iconify/icons-logos/javascript';\nimport { HighlightedTextIcon } from 'components/molecules';\n\nconst Text = () => (\n <>\n Saya sudah berpengalaman selama dua tahun mendalami{' '}\n pengembangan website menggunakan{' '}\n }\n >\n PHP\n {' '}\n dan{' '}\n }\n >\n Javascript\n {' '}\n hingga saya cukup percaya diri untuk membangun aplikasi menggunakan:\n \n);\n\nconst skills = {\n text: ,\n};\n\nexport default skills;\n" }, { "path": "src/pages/Home/index.tsx", "content": "import { Landing } from 'components/templates';\nimport LanguageContext from 'contexts/language';\nimport {\n header as headerData,\n projects as projectsData,\n blogs as blogsData,\n skills as skillsData,\n contact as contactData\n} from 'data';\nimport {\n sections as sectionsEn,\n header as headerEn,\n about as aboutEn,\n skills as skillsEn,\n} from 'localization/en';\nimport {\n sections as sectionsId,\n header as headerId,\n about as aboutId,\n skills as skillsId,\n} from 'localization/id';\nimport React, { useContext } from 'react';\n\nexport default function Home() {\n const languange = useContext(LanguageContext);\n\n let locale;\n\n if (languange.value === 'en') {\n locale = {\n sections: sectionsEn,\n header: headerEn,\n about: aboutEn,\n skills: skillsEn,\n };\n } else {\n locale = {\n sections: sectionsId,\n header: headerId,\n about: aboutId,\n skills: skillsId,\n };\n }\n\n return (\n \n );\n}\n" }, { "path": "src/react-app-env.d.ts", "content": "/// \n" }, { "path": "src/reportWebVitals.ts", "content": "import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry); \n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n}\n\nexport default reportWebVitals;\n" }, { "path": "src/setupTests.ts", "content": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).toHaveTextContent(/react/i)\n// learn more: https://github.com/testing-library/jest-dom\nimport '@testing-library/jest-dom';\n" }, { "path": "tailwind.config.js", "content": "const colors = require('tailwindcss/colors');\nconst defaultTheme = require('tailwindcss/defaultTheme');\n\nmodule.exports = {\n purge: ['./src/**/*.tsx', './public/**/*.html'],\n darkMode: false, // or 'media' or 'class'\n theme: {\n colors: {\n indigo: colors.indigo,\n gray: colors.coolGray,\n yellow: colors.yellow,\n white: colors.white,\n transparent: 'transparent',\n },\n fontFamily: {\n sans: ['Inter var', ...defaultTheme.fontFamily.sans],\n },\n extend: {\n spacing: {\n 'full-2': 'calc(100% + 0.5rem)',\n },\n lineHeight: {\n 'extra-loose': '2.5',\n },\n zIndex: {\n '-10': '-10',\n },\n scale: {\n '999': '99'\n }\n },\n },\n variants: {\n extend: {\n scale: ['focus-within'],\n width: ['group-hover', 'group-focus'],\n translate: ['group-hover'],\n },\n },\n plugins: [],\n};\n" }, { "path": "tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": true,\n \"jsx\": \"react\",\n \"baseUrl\": \"./src\"\n },\n \"include\": [\"src\"]\n}\n" } ]