├── .gitignore ├── README.md ├── components ├── Button.js ├── ContactItem.js ├── ContactSection.js ├── Field.js ├── Footer.js ├── Hero.js ├── Logo.js ├── Nav.js ├── NavItem.js ├── Navbar.js ├── ProfileSection.js ├── ProjectItem.js ├── ProjectsSection.js ├── SectionParagraph.js ├── SectionTitle.js ├── SkillCard.js └── SkillsSection.js ├── package.json ├── pages ├── _app.js ├── api │ └── hello.js └── index.js ├── postcss.config.js ├── public ├── favicon.ico ├── hasten.png ├── hero.png ├── javascript.svg ├── mail.svg ├── menu.svg ├── nodejs.svg ├── phone.svg ├── profile.png ├── react.svg ├── resources.png ├── twitter.svg ├── vercel.svg └── x.svg ├── styles ├── Home.module.css └── globals.css ├── tailwind.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /components/Button.js: -------------------------------------------------------------------------------- 1 | import classnames from "classnames"; 2 | 3 | export default function Button({ href, className, variant, children, pill }) { 4 | const variants = { 5 | "outline-yellow": `border border-yellow-500 text-yellow-500 hover:text-black hover:bg-yellow-500`, 6 | "yellow": "bg-yellow-500 hover:bg-yellow-600 text-black", 7 | "black": "bg-black hover:bg-opacity-90 text-white" 8 | }; 9 | 10 | const pickedVariant = variants[variant]; 11 | 12 | return ( 13 | 22 | {children} 23 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /components/ContactItem.js: -------------------------------------------------------------------------------- 1 | import classnames from "classnames"; 2 | 3 | export default function ContactItem({ label, value, icon, className }) { 4 | return ( 5 |
6 | 7 |
8 |
{label}
9 |
{value}
10 |
11 |
12 | ); 13 | } -------------------------------------------------------------------------------- /components/ContactSection.js: -------------------------------------------------------------------------------- 1 | import Button from "./Button"; 2 | import ContactItem from "./ContactItem"; 3 | import Field from "./Field"; 4 | import SectionParagraph from "./SectionParagraph"; 5 | import SectionTitle from "./SectionTitle"; 6 | 7 | export default function ContactSection() { 8 | return ( 9 |
10 |
11 |
12 |
13 | Contact 14 | Beberapa cara menghubungi saya. 15 | 16 | 22 | 28 | 34 |
35 |
36 |
37 |
38 |
39 |
40 | 45 |
46 |
47 | 52 |
53 |
54 | 59 | 65 |
66 | 67 |
68 | 69 |
70 |
71 |
72 | ); 73 | } 74 | -------------------------------------------------------------------------------- /components/Field.js: -------------------------------------------------------------------------------- 1 | export default function Field({ label, name, type, className }) { 2 | const addClassName = className ? ` ${className}` : ""; 3 | const formControlClassName = `bg-transparent border border-primarygray-300 py-3 px-6 w-full${addClassName}`; 4 | 5 | return ( 6 |
7 | 8 | {type === "text" && ( 9 | 10 | )} 11 | 12 | {type === "textarea" && ( 13 |