16 | 
21 |
22 |
29 | );
30 | };
31 |
32 | export default Card;
33 |
--------------------------------------------------------------------------------
/src/components/LabelInput.tsx:
--------------------------------------------------------------------------------
1 | // react
2 | import { FC } from "react";
3 |
4 | interface LabelInputProps {
5 | labelText: string;
6 | placeholderText: string;
7 | textarea?: boolean;
8 | }
9 |
10 | const LabelInput: FC26 | {title} 27 |
28 |
17 |
23 |
24 | {textarea ? (
25 |
32 | ) : (
33 |
41 | )}
42 |
43 | );
44 | };
45 |
46 | export default LabelInput;
47 |
--------------------------------------------------------------------------------
/src/components/Menu.tsx:
--------------------------------------------------------------------------------
1 | // mui
2 | import { IconButton, Tooltip } from "@mui/material";
3 |
4 | // mui - icons
5 | import HomeIcon from "@mui/icons-material/Home";
6 | import PersonIcon from "@mui/icons-material/Person";
7 | import AppsIcon from "@mui/icons-material/Apps";
8 | import MailIcon from "@mui/icons-material/Mail";
9 |
10 | // react-scroll
11 | import { Link } from "react-scroll";
12 |
13 | const Menu = () => {
14 | return (
15 |
19 |
20 |
21 |
22 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
48 |
49 |
50 |
51 | );
52 | };
53 |
54 | export default Menu;
55 |
--------------------------------------------------------------------------------
/src/components/Reveal.tsx:
--------------------------------------------------------------------------------
1 | // framer-motion
2 | import { motion } from "framer-motion";
3 |
4 | // utils
5 | import { transition } from "../utils/transition";
6 |
7 | // react
8 | import { FC, ReactNode } from "react";
9 | import { reveal } from "../utils/variants";
10 |
11 | interface RevealProps {
12 | children: ReactNode;
13 | }
14 |
15 | const Reveal: FC
18 |
32 | {children}
33 |
34 |
43 | );
44 | };
45 |
46 | export default Reveal;
47 |
--------------------------------------------------------------------------------
/src/components/SocialMediaIcon.tsx:
--------------------------------------------------------------------------------
1 | // mui
2 | import { Tooltip } from "@mui/material";
3 |
4 | // react
5 | import { FC } from "react";
6 |
7 | interface SocialMediaIconProps {
8 | imgSrc: string;
9 | title: string;
10 | }
11 |
12 | const SocialMediaIcon: FC
19 |
20 |
21 |
31 |
85 | );
86 | };
87 |
88 | export default About;
89 |
--------------------------------------------------------------------------------
/src/views/Contact.tsx:
--------------------------------------------------------------------------------
1 | // assets
2 | import contactPageImg from "../assets/contact-page.svg";
3 | import contactIllustration from "../assets/contact-illustration.svg";
4 |
5 | // components
6 | import { Button, LabelInput, Reveal } from "../components";
7 |
8 | // framer-motion
9 | import { motion } from "framer-motion";
10 |
11 | // utils
12 | import { fadeIn, scale } from "../utils/variants";
13 | import { transition } from "../utils/transition";
14 |
15 | const Contact = () => {
16 | return (
17 |
35 |
82 |
83 |
84 |
36 |
37 |
44 |
45 |
46 |
53 |
54 |
62 |
67 |
68 |
69 | 41 | About me 42 |
43 |47 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 48 | Reiciendis incidunt quis praesentium voluptates et cupiditate 49 | minus rem. Voluptatibus ullam beatae expedita voluptatum error, 50 | voluptate deserunt impedit similique fuga recusandae sit. 51 |
52 |
70 |
81 |
27 |
80 | );
81 | };
82 |
83 | export default Contact;
84 |
--------------------------------------------------------------------------------
/src/views/Hero.tsx:
--------------------------------------------------------------------------------
1 | // assets
2 | import homePageImg from "../assets/home-page.svg";
3 | import homePageIllustation from "../assets/hero-illustration.svg";
4 | import downloadIcon from "../assets/download-btn-icon.svg";
5 |
6 | // components
7 | import { Button } from "../components";
8 |
9 | // react-simple-typewriter
10 | import { Typewriter } from "react-simple-typewriter";
11 |
12 | // framer-motion
13 | import { motion } from "framer-motion";
14 |
15 | // utils
16 | import { transition } from "../utils/transition";
17 | import { fadeIn, scale } from "../utils/variants";
18 |
19 | const Hero = () => {
20 | return (
21 |
31 |
61 |
76 |
77 |
78 |
79 |
32 |
33 |
40 |
41 |
52 |
53 | 37 | Got a project in mind? 38 |
39 |
62 |
65 |
66 |
67 |
73 |
74 |
75 |
31 |
85 | );
86 | };
87 |
88 | export default Hero;
89 |
--------------------------------------------------------------------------------
/src/views/Projects.tsx:
--------------------------------------------------------------------------------
1 | // react
2 | import { useState } from "react";
3 |
4 | // assets
5 | import projectsPageImg from "../assets/projects-page.svg";
6 |
7 | // components
8 | import { Button, Card, Reveal } from "../components";
9 |
10 | // data
11 | import { projects } from "../data";
12 |
13 | // framer-motion
14 | import { motion } from "framer-motion";
15 |
16 | // utils
17 | import { fadeIn } from "../utils/variants";
18 | import { transition } from "../utils/transition";
19 |
20 | type Category = "uiUx" | "web";
21 |
22 | const Projects = () => {
23 | const [activeCategory, setActiveCategory] = useState
35 |
82 |
83 |
84 |
36 |
45 | Creative
46 |
47 | 48 |
58 |
66 |
67 |
68 |
69 |
70 |
71 | 47 | 48 |
44 |
92 | );
93 | };
94 |
95 | export default Projects;
96 |
--------------------------------------------------------------------------------
/src/views/index.ts:
--------------------------------------------------------------------------------
1 | import Hero from "./Hero";
2 | import About from "./About";
3 | import Projects from "./Projects";
4 | import Contact from "./Contact";
5 |
6 | export { Hero, About, Projects, Contact };
7 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: ["./src/**/*.{js,jsx,ts,tsx}"],
4 | theme: {
5 | extend: {
6 | colors: {
7 | primary: "#222831",
8 | secondary: "#00ADB5",
9 | textPrimary: "#EEE",
10 | textSecondary: "rgba(238, 238, 238, 0.75)",
11 | accent: "rgba(57, 62, 70, 0.75)",
12 | hoverSecondary: "#027378",
13 | hoverPrimary: "#292d33",
14 | divider: "rgba(238, 238, 238, 0.10)",
15 | icons: "#393E46",
16 | overlay: "rgba(0, 0, 0, 0.25)",
17 | },
18 | screens: {
19 | xs: "420px",
20 | xl: "1170px",
21 | },
22 | },
23 | },
24 | plugins: [],
25 | };
26 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "noFallthroughCasesInSwitch": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src"]
20 | }
21 |
--------------------------------------------------------------------------------
45 |
91 |
46 |
47 |
54 |
55 |
63 |
69 |
75 |
76 |
77 |
85 | {filteredProjects().map((item) => (
86 |
89 |
90 |