├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
├── src
├── App.css
├── App.js
├── asset
│ ├── certificate
│ │ ├── freecodecamp frontend libraries.png
│ │ ├── freecodecamp responsive.png
│ │ └── sertifikat dicoding.png
│ ├── logo.png
│ ├── profile.png
│ ├── projects
│ │ ├── Anime Finder.png
│ │ ├── Mealdb app.png
│ │ ├── Quran Web App Next js.png
│ │ ├── Quran Web App.png
│ │ ├── To Do List.png
│ │ └── movie finder.png
│ └── theme
│ │ ├── dark.png
│ │ └── light.jpg
├── components
│ ├── about.js
│ ├── border.js
│ ├── card.js
│ ├── certificate.js
│ ├── contact.js
│ ├── footer.js
│ ├── hero.js
│ ├── intro.js
│ ├── mobile
│ │ └── mobilenav.js
│ ├── navbar.js
│ ├── projects.js
│ └── skill.js
├── index.css
├── index.js
└── reportWebVitals.js
└── tailwind.config.js
/.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 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Its just personal web portofolio
2 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "personal-portfolio",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.2",
7 | "@testing-library/react": "^12.1.3",
8 | "@testing-library/user-event": "^13.5.0",
9 | "gsap": "^3.9.1",
10 | "react": "^17.0.2",
11 | "react-dom": "^17.0.2",
12 | "react-scripts": "5.0.0",
13 | "web-vitals": "^2.1.4"
14 | },
15 | "scripts": {
16 | "start": "react-scripts start",
17 | "build": "react-scripts build",
18 | "test": "react-scripts test",
19 | "eject": "react-scripts eject"
20 | },
21 | "eslintConfig": {
22 | "extends": [
23 | "react-app",
24 | "react-app/jest"
25 | ]
26 | },
27 | "browserslist": {
28 | "production": [
29 | ">0.2%",
30 | "not dead",
31 | "not op_mini all"
32 | ],
33 | "development": [
34 | "last 1 chrome version",
35 | "last 1 firefox version",
36 | "last 1 safari version"
37 | ]
38 | },
39 | "devDependencies": {
40 | "autoprefixer": "^10.4.2",
41 | "postcss": "^8.4.8",
42 | "tailwindcss": "^3.0.23"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MFaqihRidho/personal-portfolio/56a0899442b1d6afa93f7dfb4ed67aaf83e749c7/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | M.Faqih Ridho
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MFaqihRidho/personal-portfolio/56a0899442b1d6afa93f7dfb4ed67aaf83e749c7/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MFaqihRidho/personal-portfolio/56a0899442b1d6afa93f7dfb4ed67aaf83e749c7/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MFaqihRidho/personal-portfolio/56a0899442b1d6afa93f7dfb4ed67aaf83e749c7/src/App.css
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import "./App.css";
2 | import Navbar from "./components/navbar";
3 | import Hero from "./components/hero";
4 | import About from "./components/about";
5 | import Skill from "./components/skill";
6 | import Certificate from "./components/certificate";
7 | import Projects from "./components/projects";
8 | import Footer from "./components/footer";
9 | import Contact from "./components/contact";
10 | import Intro from "./components/intro";
11 |
12 | function App() {
13 | return (
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
55 |
56 |
60 |
68 |
79 |
80 |
81 |
82 | About Me
83 |
84 |
88 |
89 |
90 |
6 |
14 | {props.children}
15 |
6 |
7 |
8 |
12 |
13 | Live
14 |
15 |
16 |
17 |
18 |
{props.title}
19 |
{props.desc}
20 | {props.tech}
21 |
22 |
44 |
45 |
22 |
23 |
24 | My Certificate
25 |
26 |
27 |
28 |
35 | 
40 |
41 | }
42 | >
43 |
44 |
45 |
52 | 
59 |
60 | }
61 | >
62 |
63 |
64 |
71 |
78 |
79 | }
80 | >
81 |
82 |
83 |
90 | 
95 |
96 | }
97 | >
98 |
99 |
100 |
107 | 
112 |
113 | }
114 | >
115 |
116 |
117 |
124 | 
129 |
130 | }
131 | >
132 |
133 |
134 |
141 | 
146 |
147 | }
148 | >
149 |
150 |
151 |
158 | 
163 |
164 | }
165 | >
166 |
167 |
168 |
169 |
13 |
32 |
43 |
129 |
42 |
Hai, Saya
43 |
44 | M.Faqih Ridho
45 |
46 |
50 | Handsome Programmer
51 |
52 |
53 |
59 |
65 | {" "}
66 | Download CV
67 |
68 |
69 |
125 |
131 |
132 | );
133 | }
134 |
135 | export default Hero;
136 |
--------------------------------------------------------------------------------
/src/components/intro.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import gsap from "gsap";
3 | import logo from "../asset/logo.png";
4 |
5 | function Intro() {
6 | const [candaan, setCandaan] = useState([]);
7 | const [loading, setLoading] = useState(true);
8 |
9 | useEffect(() => {
10 | setLoading(true);
11 | let height = -window.innerHeight;
12 | console.log(height);
13 | gsap.fromTo(
14 | ".logo",
15 | { scale: 0, rotate: 0 },
16 | { duration: 1, scale: 1, ease: "elastic", rotate: 360 }
17 | );
18 | const getCandaan = async () =>
19 | await fetch("https://candaan-api.vercel.app/api/text/random")
20 | .then((res) => res.json())
21 | .then((result) => {
22 | setCandaan(result);
23 | setLoading(false);
24 | gsap.fromTo(
25 | ".bg-intro",
26 | { top: 0 },
27 | {
28 | duration: 3,
29 | top: height - 100,
30 | ease: "expo",
31 | delay: 4,
32 | }
33 | );
34 | gsap.fromTo(
35 | ".candaan",
36 | { scale: 0 },
37 | { duration: 1, scale: 1, ease: "elastic" }
38 | );
39 | });
40 | getCandaan();
41 | }, []);
42 |
43 | return (
44 |
45 |
50 |
51 |
52 | {candaan.status === 200 &&
53 | loading === false &&
54 | candaan.data}
55 |
56 |
57 |
28 |
34 |
40 |
46 |
52 |
53 | );
54 | }
55 |
56 | export default MobileNav;
57 |
--------------------------------------------------------------------------------
/src/components/navbar.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState, useRef } from "react";
2 | import MobileNav from "./mobile/mobilenav";
3 | import { gsap } from "gsap";
4 | import { ScrollToPlugin } from "gsap/ScrollToPlugin";
5 | import logo from "../asset/logo.png";
6 |
7 | function Navbar() {
8 | const menuRef = useRef(null);
9 | const [dark, setDark] = useState(true);
10 | const [open, setOpen] = useState(false);
11 | const [isVisible, setIsVisible] = useState(false);
12 | const [listening, setListening] = useState(false);
13 | gsap.registerPlugin(ScrollToPlugin);
14 |
15 | const handleClickTo = (id, wave) => {
16 | if (wave === true) {
17 | gsap.to(window, {
18 | duration: 1,
19 | scrollTo: { y: `#${id}`, offsetY: -150 },
20 | });
21 | } else {
22 | gsap.to(window, {
23 | duration: 1,
24 | scrollTo: `#${id}`,
25 | });
26 | }
27 | };
28 |
29 | const handleDarkMode = () => {
30 | setDark(!dark);
31 | if (dark) {
32 | localStorage.setItem("dark", false);
33 | } else {
34 | localStorage.setItem("dark", true);
35 | }
36 | };
37 |
38 | const handleOpen = () => {
39 | setOpen(!open);
40 | console.log(!open);
41 | };
42 |
43 | const scrollTop = () => {
44 | gsap.to(window, {
45 | duration: 1,
46 | scrollTo: { y: 0 },
47 | });
48 | };
49 |
50 | useEffect(() => {
51 | const listenToScroll = () => {
52 | let heightToShowFrom = 50;
53 | const winScroll =
54 | document.body.scrollTop || document.documentElement.scrollTop;
55 | if (winScroll > heightToShowFrom) {
56 | // to limit setting state only the first time
57 | setIsVisible(true);
58 | } else {
59 | setIsVisible(false);
60 | }
61 | };
62 | setIsVisible(false);
63 | window.addEventListener("scroll", listenToScroll);
64 | return () => window.removeEventListener("scroll", listenToScroll);
65 | }, []);
66 |
67 | useEffect(() => {
68 | if (dark) {
69 | document.documentElement.classList.add("dark");
70 | } else {
71 | document.documentElement.classList.remove("dark");
72 | }
73 | }, [dark]);
74 |
75 | useEffect(() => {
76 | if (localStorage.getItem("dark") === "true") {
77 | document.documentElement.classList.add("dark");
78 | setDark(true);
79 | } else {
80 | document.documentElement.classList.remove("dark");
81 | setDark(false);
82 | }
83 | scrollTop();
84 | }, []);
85 |
86 | useEffect(() => {
87 | if (listening) return;
88 | if (!menuRef.current) return;
89 | setListening(true);
90 | [`click`, `touchstart`].forEach((type) => {
91 | document.addEventListener(`click`, (evt) => {
92 | const cur = menuRef.current;
93 | const node = evt.target;
94 | if (cur.contains(node)) return;
95 | setOpen(false);
96 | });
97 | });
98 | }, [listening]);
99 |
100 | return (
101 |
210 | );
211 | }
212 |
213 | export default Navbar;
214 |
--------------------------------------------------------------------------------
/src/components/projects.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Card from "./card";
3 | import quranWebAppNext from "../asset/projects/Quran Web App Next js.png";
4 | import quranWebApp from "../asset/projects/Quran Web App.png";
5 | import ToDoList from "../asset/projects/To Do List.png";
6 | import AnimeFinder from "../asset/projects/Anime Finder.png";
7 | import MovieFinder from "../asset/projects/movie finder.png";
8 | import MealFinder from "../asset/projects/Mealdb app.png";
9 |
10 | function Projects() {
11 | return (
12 |
16 |
17 | My Recent Projects
18 |
19 |
20 |
29 |
44 |
76 | 
422 |
423 | }
424 | >
425 |
434 |
461 |
477 |
478 | }
479 | >
480 |
481 |
482 | );
483 | }
484 |
485 | export default Projects;
486 |
--------------------------------------------------------------------------------
/src/components/skill.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import { gsap } from "gsap";
3 | import { ScrollTrigger } from "gsap/ScrollTrigger";
4 |
5 | function Skill() {
6 | gsap.registerPlugin(ScrollTrigger);
7 |
8 | useEffect(() => {
9 | const scaleIn = gsap.fromTo(
10 | ".skill",
11 | { scale: 0 },
12 | { duration: 1.5, scale: 1, ease: "elastic", delay: 0.5 }
13 | );
14 |
15 | ScrollTrigger.create({
16 | trigger: ".skill",
17 | animation: scaleIn,
18 | });
19 | }, []);
20 |
21 | return (
22 |
23 |
24 | My Skills
25 |
26 |
27 |
28 |
52 |
HTML
53 |
54 |
55 |
79 |
CSS
80 |
81 |
82 |
105 |
Javascript
106 |
107 |
108 |
136 |
React Js
137 |
138 |
139 |
159 |
Redux
160 |
161 |
162 |
187 |
188 |
Tailwind
189 |
190 |
191 |
234 |
Material Ui
235 |
236 |
237 |
252 |
Bootstrap
253 |
254 |
255 |
278 |
Firebase
279 |
280 |
281 |
292 |
Git
293 |
294 |
296 | Coming soon
297 |
298 |
299 |
300 |
324 |
MongoDB
325 |
326 |
327 |
334 |
Express JS
335 |
336 |
337 |
352 |
Node JS
353 |
354 |
355 |
375 |
React Native
376 |
377 |
378 |
400 |
Typescript
401 |
402 |