├── .babelrc
├── .github
├── FUNDING.yml
└── workflows
│ └── linters.yml
├── .gitignore
├── .stylelintrc.json
├── README.md
├── Screenshot from 2023-07-01 22-15-34.png
├── package-lock.json
├── package.json
├── public
├── about.txt
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── f.png
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── ff.png
├── fizlogo (1).png
├── fizlogo.png
├── index.html
└── site.webmanifest
├── reactportfolio.png
└── src
├── App.css
├── App.jsx
├── assets
├── 1200px-Pharmaniaga_logo.png
├── 3dsmax.png
├── IntelliJ_IDEA_Icon.svg.png
├── Kotlin_Icon.svg.png
├── MCMC_Logo.png
├── SQLyog.ico
├── TEAMS.png
├── XMins.ico
├── androidstudio.png
├── bitbucket.png
├── blender.png
├── bootstrap.png
├── canva.png
├── cdt.png
├── close.png
├── css.png
├── discord.png
├── django.png
├── djangoo.png
├── drawio.png
├── effect.png
├── equal.png
├── f.png
├── figma.png
├── firebase.png
├── fiz.jpg
├── fiz2.jpg
├── fizlogo.png
├── fizloki.jpeg
├── flutter.png
├── git.png
├── github.png
├── gitlab.svg
├── heroku_icon_130912.png
├── html.png
├── imu.png
├── innoveam.png
├── javascript.png
├── jest.png
├── jquery.png
├── litera.png
├── mariadb.png
├── matlab.png
├── maya.png
├── mdec.webp
├── meet.png
├── mehhsa.png
├── metaspark.webp
├── mui.png
├── mysql.png
├── mysqll.png
├── netlify.svg
├── next.webp
├── npm.png
├── perkeso.png
├── petronas-logo.png
├── petronas.png
├── pharma.jpg
├── pharmaniaga.png
├── pixyz.ico
├── pngtree-cyberpunk-city-purple-background-image_2120128.jpg
├── postgres.png
├── postman.png
├── profile.jpg
├── rails.png
├── react.png
├── redux.png
├── rspec.png
├── rtm.png
├── rtmm.png
├── ruby.png
├── sass.png
├── skype.png
├── slack.png
├── spring-boot-logo.png
├── springboot.png
├── sushi.jpg
├── unity.png
├── uob.png
├── uoblogo.jpg
├── upm.png
├── upmlogo.png
├── upmm.png
├── vscode.png
├── vuforia.png
├── vuforiaa.png
├── webpack.png
├── wordpress.png
├── xD-logo.png
├── xdd.png
└── zoom.webp
├── components
├── Footer.jsx
├── NavBar.css
├── NavBar.jsx
├── ProjectCard.css
└── ProjectCard.jsx
├── index.jsx
└── pages
├── About.css
├── About.jsx
├── Achievement.css
├── Achievements.jsx
├── Contact.css
├── Contact.jsx
├── Hero.css
├── Hero.jsx
├── Projects.css
└── Projects.jsx
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/preset-react"
4 | ],
5 | "plugins": ["@babel/plugin-syntax-jsx"]
6 | }
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
4 | patreon: # Replace with a single Patreon username
5 | open_collective: # Replace with a single Open Collective username
6 | ko_fi: criedfizcken
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
13 | custom:
14 |
--------------------------------------------------------------------------------
/.github/workflows/linters.yml:
--------------------------------------------------------------------------------
1 | name: Linters
2 |
3 | on: pull_request
4 |
5 | env:
6 | FORCE_COLOR: 1
7 |
8 | jobs:
9 | stylelint:
10 | name: Stylelint
11 | runs-on: ubuntu-22.04
12 | steps:
13 | - uses: actions/checkout@v3
14 | - uses: actions/setup-node@v3
15 | with:
16 | node-version: "18.x"
17 | - name: Setup Stylelint
18 | run: |
19 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
20 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/react-redux/.stylelintrc.json
21 | - name: Stylelint Report
22 | run: npx stylelint "**/*.{css,scss}"
23 | nodechecker:
24 | name: node_modules checker
25 | runs-on: ubuntu-22.04
26 | steps:
27 | - uses: actions/checkout@v3
28 | - name: Check node_modules existence
29 | run: |
30 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/.stylelintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["stylelint-config-standard"],
3 | "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
4 | "rules": {
5 | "at-rule-no-unknown": [
6 | true,
7 | {
8 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
9 | }
10 | ],
11 | "scss/at-rule-no-unknown": [
12 | true,
13 | {
14 | "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
15 | }
16 | ],
17 | "csstree/validator": true
18 | },
19 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
20 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Portfolio - Hafiz Kadir 🤟🏻
4 |
5 | # Table of Contents
6 |
7 | - [Table of Contents](#-table-of-contents)
8 | - [ Portfolio - Hafiz Kadir 🤟🏻](#-about-project-)
9 | - [🛠 Built With ](#-built-with-)
10 | - [Tech Stack ](#tech-stack-)
11 | - [Key Features ](#key-features-)
12 | - [💻 Getting Started ](#-getting-started-)
13 | - [Prerequisites](#prerequisites)
14 | - [Setup](#setup)
15 | - [Install](#install)
16 | - [Usage](#usage)
17 | - [👥 Authors ](#-authors-)
18 | - [🤝 Contributing ](#-contributing-)
19 | - [⭐️ Show your support ](#️-show-your-support-)
20 | -
21 | - [❓ FAQ ](#-faq-)
22 |
23 |
24 |
25 | # Portfolio - Hafiz Kadir 🤟🏻
26 |
27 | This Personal Portfolio is a dynamic and interactive portfolio website built with React and Redux in the Front-End. It provides a modern and visually appealing platform for showcasing your skills, projects, and achievements to potential employers or clients.
28 |
29 | ## 🛠 Built With
30 |
31 | ### Tech Stack
32 |
33 |
34 |
35 | Client
36 |
39 |
40 |
41 | ### App Screenshot
42 | 
43 |
44 |
45 | (back to top )
46 |
47 |
48 |
49 | ## 💻 Getting Started
50 |
51 |
52 | To get a local copy up and running, follow these steps.
53 |
54 | ### Prerequisites
55 |
56 | In order to run this project you need:
57 | - [x] A web browser like Google Chrome.
58 | - [x] A code editor like Visual Studio Code with Git and Node.js.
59 |
60 | You can check if Git is installed by running the following command in the terminal.
61 | ```
62 | $ git --version
63 | ```
64 |
65 | Likewise for Node.js and npm for package installation.
66 | ```
67 | $ node --version && npm --version
68 | ```
69 | ### Setup
70 |
71 | Clone this repository using the GitHub link provided below.
72 |
73 |
74 | ### Install
75 |
76 | In the terminal, go to your file directory and run this command.
77 |
78 | ```
79 | $ git clone https://github.com/itsFiz/react-portfolio.git
80 | ```
81 |
82 |
83 |
84 | ### Usage
85 |
86 | Kindly modify the files as needed.
87 |
88 | In the project directory, you can run:
89 | ```
90 | $ npm start
91 | ```
92 | Runs the app in the development mode.\
93 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
94 |
95 | The page will reload when you make changes.
96 |
97 | You may also see any lint errors in the console.
98 |
99 |
100 | (back to top )
101 |
102 |
103 |
104 | ## 👥 Authors
105 |
106 | 👤 **Hafiz Kadir**
107 |
108 | - GitHub: [@itsFiz](https://github.com/itsFiz)
109 | - Twitter: [@criedfizcken](https://twitter.com/criedfizcken)
110 | - LinkedIn: [Hafiz Kadir](https://www.linkedin.com/in/hfzkdr/)
111 | - Youtube: [Hafiz Kadir](https://www.youtube.com/@criedfizcken6200)
112 |
113 |
114 |
115 |
116 | (back to top )
117 |
118 |
119 | ## 🤝 Contributing
120 |
121 | Contributions, issues, and feature requests are welcome!
122 |
123 | Feel free to check the [issues page](../../issues/).
124 |
125 | (back to top )
126 |
127 |
128 |
129 | ## ⭐️ Show your support
130 |
131 |
132 | Give a ⭐️ if you like this project!
133 |
134 | (back to top )
135 |
136 |
137 | ## 📝 License
138 |
139 | This project is copyright free. But I'll be grateful if you consider mentioning me.
140 |
141 | (back to top )
142 |
143 |
144 | Support if you can 💗
145 |
146 | [](https://ko-fi.com/criedfizcken)
147 |
--------------------------------------------------------------------------------
/Screenshot from 2023-07-01 22-15-34.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/Screenshot from 2023-07-01 22-15-34.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "portfolio",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@emailjs/browser": "^3.11.0",
7 | "@reduxjs/toolkit": "^1.9.5",
8 | "@testing-library/jest-dom": "^5.16.5",
9 | "@testing-library/react": "^13.4.0",
10 | "@testing-library/user-event": "^13.5.0",
11 | "emailjs": "^4.0.2",
12 | "rc-tabs": "^12.8.1",
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0",
15 | "react-redux": "^8.1.1",
16 | "react-scripts": "^5.0.1",
17 | "react-scroll": "^1.8.9",
18 | "react-toastify": "^9.1.3",
19 | "typewriter-effect": "^2.19.0",
20 | "web-vitals": "^2.1.4"
21 | },
22 | "scripts": {
23 | "start": "react-scripts start",
24 | "build": "react-scripts build",
25 | "test": "react-scripts test",
26 | "eject": "react-scripts eject"
27 | },
28 | "browserslist": {
29 | "production": [
30 | ">0.2%",
31 | "not dead",
32 | "not op_mini all"
33 | ],
34 | "development": [
35 | "last 1 chrome version",
36 | "last 1 firefox version",
37 | "last 1 safari version"
38 | ]
39 | },
40 | "devDependencies": {
41 | "@babel/core": "^7.22.5",
42 | "@babel/eslint-parser": "^7.22.5",
43 | "@babel/plugin-syntax-jsx": "^7.22.5",
44 | "@babel/preset-react": "^7.22.5",
45 | "stylelint": "^15.11.0",
46 | "stylelint-config-standard": "^34.0.0",
47 | "stylelint-csstree-validator": "^3.0.0",
48 | "stylelint-scss": "^5.3.0"
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/public/about.txt:
--------------------------------------------------------------------------------
1 | This favicon was generated using the following font:
2 |
3 | - Font Title: Leckerli One
4 | - Font Author: Copyright (c) 2011 Gesine Todt (www.gesine-todt.de), with Reserved Font Names "Leckerli"
5 | - Font Source: http://fonts.gstatic.com/s/leckerlione/v16/V8mCoQH8VCsNttEnxnGQ-1itLZxcBtItFw.ttf
6 | - Font License: SIL Open Font License, 1.1 (http://scripts.sil.org/OFL))
7 |
--------------------------------------------------------------------------------
/public/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/public/android-chrome-192x192.png
--------------------------------------------------------------------------------
/public/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/public/android-chrome-512x512.png
--------------------------------------------------------------------------------
/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/public/apple-touch-icon.png
--------------------------------------------------------------------------------
/public/f.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/public/f.png
--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/public/favicon-16x16.png
--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/public/favicon-32x32.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/public/favicon.ico
--------------------------------------------------------------------------------
/public/ff.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/public/ff.png
--------------------------------------------------------------------------------
/public/fizlogo (1).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/public/fizlogo (1).png
--------------------------------------------------------------------------------
/public/fizlogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/public/fizlogo.png
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
10 |
11 |
12 |
15 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
32 |
33 |
34 | Fiz 🤟| Portfolio
35 |
36 |
37 |
38 | You need to enable JavaScript to run this app.
39 |
40 |
42 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/public/site.webmanifest:
--------------------------------------------------------------------------------
1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
--------------------------------------------------------------------------------
/reactportfolio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/reactportfolio.png
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | * {
2 | font-family: sans-serif;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | background: #000;
8 | }
9 |
10 | body::-webkit-scrollbar {
11 | display: none;
12 | }
13 |
14 | ul > li {
15 | list-style: none;
16 | font-weight: bold;
17 | }
18 |
19 | button {
20 | border: 2px solid white;
21 | padding: 0.7rem 3rem;
22 | border-radius: 50px;
23 | cursor: pointer;
24 | font-size: 1.3rem;
25 | background: #950740;
26 | transition: 0.5s;
27 | }
28 |
29 | button:hover {
30 | background: white;
31 | color: black;
32 | border: 2px solid black;
33 | }
34 |
35 | a {
36 | text-decoration: none;
37 | color: inherit;
38 | cursor: pointer;
39 | }
40 |
41 | .App {
42 | background-image: url('./assets/effect.png');
43 | animation: static 3s steps(5, end) infinite;
44 | z-index: 999;
45 | background-size: 200px;
46 | }
47 |
48 | footer h3 {
49 | text-align: center;
50 | color: white;
51 | margin: 0;
52 | padding: 2% 0;
53 | letter-spacing: 0.1rem;
54 | }
55 |
56 | @keyframes static {
57 | 0% {
58 | background-position: 0% 0%;
59 | }
60 |
61 | 20% {
62 | background-position: 25% 15%;
63 | }
64 |
65 | 40% {
66 | background-position: 50% 69%;
67 | }
68 |
69 | 60% {
70 | background-position: 33% 25%;
71 | }
72 |
73 | 80% {
74 | background-position: 72% 4%;
75 | }
76 |
77 | 100% {
78 | background-position: 80% 91%;
79 | }
80 | }
81 |
82 | @media screen and (min-resolution: 100dpi) {
83 | button {
84 | font-size: 1rem;
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import './App.css';
2 | import NavBar from './components/NavBar';
3 | import Hero from './pages/Hero';
4 | import About from './pages/About';
5 | import Projects from './pages/Projects';
6 | import Contact from './pages/Contact';
7 | import Achievements from './pages/Achievements'
8 |
9 | function App() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | );
24 | }
25 |
26 | export default App;
27 |
--------------------------------------------------------------------------------
/src/assets/1200px-Pharmaniaga_logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/1200px-Pharmaniaga_logo.png
--------------------------------------------------------------------------------
/src/assets/3dsmax.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/3dsmax.png
--------------------------------------------------------------------------------
/src/assets/IntelliJ_IDEA_Icon.svg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/IntelliJ_IDEA_Icon.svg.png
--------------------------------------------------------------------------------
/src/assets/Kotlin_Icon.svg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/Kotlin_Icon.svg.png
--------------------------------------------------------------------------------
/src/assets/MCMC_Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/MCMC_Logo.png
--------------------------------------------------------------------------------
/src/assets/SQLyog.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/SQLyog.ico
--------------------------------------------------------------------------------
/src/assets/TEAMS.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/TEAMS.png
--------------------------------------------------------------------------------
/src/assets/XMins.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/XMins.ico
--------------------------------------------------------------------------------
/src/assets/androidstudio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/androidstudio.png
--------------------------------------------------------------------------------
/src/assets/bitbucket.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/bitbucket.png
--------------------------------------------------------------------------------
/src/assets/blender.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/blender.png
--------------------------------------------------------------------------------
/src/assets/bootstrap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/bootstrap.png
--------------------------------------------------------------------------------
/src/assets/canva.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/canva.png
--------------------------------------------------------------------------------
/src/assets/cdt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/cdt.png
--------------------------------------------------------------------------------
/src/assets/close.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/close.png
--------------------------------------------------------------------------------
/src/assets/css.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/css.png
--------------------------------------------------------------------------------
/src/assets/discord.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/discord.png
--------------------------------------------------------------------------------
/src/assets/django.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/django.png
--------------------------------------------------------------------------------
/src/assets/djangoo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/djangoo.png
--------------------------------------------------------------------------------
/src/assets/drawio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/drawio.png
--------------------------------------------------------------------------------
/src/assets/effect.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/effect.png
--------------------------------------------------------------------------------
/src/assets/equal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/equal.png
--------------------------------------------------------------------------------
/src/assets/f.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/f.png
--------------------------------------------------------------------------------
/src/assets/figma.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/figma.png
--------------------------------------------------------------------------------
/src/assets/firebase.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/firebase.png
--------------------------------------------------------------------------------
/src/assets/fiz.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/fiz.jpg
--------------------------------------------------------------------------------
/src/assets/fiz2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/fiz2.jpg
--------------------------------------------------------------------------------
/src/assets/fizlogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/fizlogo.png
--------------------------------------------------------------------------------
/src/assets/fizloki.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/fizloki.jpeg
--------------------------------------------------------------------------------
/src/assets/flutter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/flutter.png
--------------------------------------------------------------------------------
/src/assets/git.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/git.png
--------------------------------------------------------------------------------
/src/assets/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/github.png
--------------------------------------------------------------------------------
/src/assets/gitlab.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/heroku_icon_130912.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/heroku_icon_130912.png
--------------------------------------------------------------------------------
/src/assets/html.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/html.png
--------------------------------------------------------------------------------
/src/assets/imu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/imu.png
--------------------------------------------------------------------------------
/src/assets/innoveam.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/innoveam.png
--------------------------------------------------------------------------------
/src/assets/javascript.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/javascript.png
--------------------------------------------------------------------------------
/src/assets/jest.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/jest.png
--------------------------------------------------------------------------------
/src/assets/jquery.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/jquery.png
--------------------------------------------------------------------------------
/src/assets/litera.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/litera.png
--------------------------------------------------------------------------------
/src/assets/mariadb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/mariadb.png
--------------------------------------------------------------------------------
/src/assets/matlab.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/matlab.png
--------------------------------------------------------------------------------
/src/assets/maya.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/maya.png
--------------------------------------------------------------------------------
/src/assets/mdec.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/mdec.webp
--------------------------------------------------------------------------------
/src/assets/meet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/meet.png
--------------------------------------------------------------------------------
/src/assets/mehhsa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/mehhsa.png
--------------------------------------------------------------------------------
/src/assets/metaspark.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/metaspark.webp
--------------------------------------------------------------------------------
/src/assets/mui.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/mui.png
--------------------------------------------------------------------------------
/src/assets/mysql.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/mysql.png
--------------------------------------------------------------------------------
/src/assets/mysqll.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/mysqll.png
--------------------------------------------------------------------------------
/src/assets/netlify.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/next.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/next.webp
--------------------------------------------------------------------------------
/src/assets/npm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/npm.png
--------------------------------------------------------------------------------
/src/assets/perkeso.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/perkeso.png
--------------------------------------------------------------------------------
/src/assets/petronas-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/petronas-logo.png
--------------------------------------------------------------------------------
/src/assets/petronas.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/petronas.png
--------------------------------------------------------------------------------
/src/assets/pharma.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/pharma.jpg
--------------------------------------------------------------------------------
/src/assets/pharmaniaga.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/pharmaniaga.png
--------------------------------------------------------------------------------
/src/assets/pixyz.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/pixyz.ico
--------------------------------------------------------------------------------
/src/assets/pngtree-cyberpunk-city-purple-background-image_2120128.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/pngtree-cyberpunk-city-purple-background-image_2120128.jpg
--------------------------------------------------------------------------------
/src/assets/postgres.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/postgres.png
--------------------------------------------------------------------------------
/src/assets/postman.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/postman.png
--------------------------------------------------------------------------------
/src/assets/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/profile.jpg
--------------------------------------------------------------------------------
/src/assets/rails.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/rails.png
--------------------------------------------------------------------------------
/src/assets/react.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/react.png
--------------------------------------------------------------------------------
/src/assets/redux.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/redux.png
--------------------------------------------------------------------------------
/src/assets/rspec.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/rspec.png
--------------------------------------------------------------------------------
/src/assets/rtm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/rtm.png
--------------------------------------------------------------------------------
/src/assets/rtmm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/rtmm.png
--------------------------------------------------------------------------------
/src/assets/ruby.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/ruby.png
--------------------------------------------------------------------------------
/src/assets/sass.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/sass.png
--------------------------------------------------------------------------------
/src/assets/skype.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/skype.png
--------------------------------------------------------------------------------
/src/assets/slack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/slack.png
--------------------------------------------------------------------------------
/src/assets/spring-boot-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/spring-boot-logo.png
--------------------------------------------------------------------------------
/src/assets/springboot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/springboot.png
--------------------------------------------------------------------------------
/src/assets/sushi.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/sushi.jpg
--------------------------------------------------------------------------------
/src/assets/unity.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/unity.png
--------------------------------------------------------------------------------
/src/assets/uob.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/uob.png
--------------------------------------------------------------------------------
/src/assets/uoblogo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/uoblogo.jpg
--------------------------------------------------------------------------------
/src/assets/upm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/upm.png
--------------------------------------------------------------------------------
/src/assets/upmlogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/upmlogo.png
--------------------------------------------------------------------------------
/src/assets/upmm.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/upmm.png
--------------------------------------------------------------------------------
/src/assets/vscode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/vscode.png
--------------------------------------------------------------------------------
/src/assets/vuforia.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/vuforia.png
--------------------------------------------------------------------------------
/src/assets/vuforiaa.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/vuforiaa.png
--------------------------------------------------------------------------------
/src/assets/webpack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/webpack.png
--------------------------------------------------------------------------------
/src/assets/wordpress.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/wordpress.png
--------------------------------------------------------------------------------
/src/assets/xD-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/xD-logo.png
--------------------------------------------------------------------------------
/src/assets/xdd.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/xdd.png
--------------------------------------------------------------------------------
/src/assets/zoom.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsFiz/react-portfolio/7435ad2c3c36c9f9bfd09362e36f571a6af28897/src/assets/zoom.webp
--------------------------------------------------------------------------------
/src/components/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Footer = () => (
4 | <>
5 |
6 | >
7 | );
8 |
9 | export default Footer;
10 |
--------------------------------------------------------------------------------
/src/components/NavBar.css:
--------------------------------------------------------------------------------
1 | nav {
2 | display: flex;
3 | align-items: center;
4 | justify-content: space-between;
5 | color: #fff;
6 | position: fixed;
7 | top: 0;
8 | background-color: transparent;
9 | width: 100%;
10 | z-index: 99;
11 | padding: 0 0 0 10%;
12 | }
13 |
14 | .scrolled {
15 | backdrop-filter: blur(5px);
16 | }
17 |
18 | .menu {
19 | display: flex;
20 | margin-right: 20%;
21 | }
22 |
23 | .menu > li {
24 | padding: 0 0.75rem;
25 | font-size: 1.2rem;
26 | font-weight: 600;
27 | }
28 |
29 | .tophead > h1 {
30 | display: flex;
31 | }
32 |
33 | .name-logo {
34 | font-family: 'Space Mono', monospace;
35 | font-size: 1.3em;
36 | }
37 |
38 | .blink {
39 | height: 2rem;
40 | width: 15px;
41 | animation: blink 0.5s step-end infinite alternate;
42 | white-space: nowrap;
43 | overflow: hidden;
44 | border-bottom: 3px solid white;
45 | display: block;
46 | }
47 |
48 | .logo-image {
49 | height: 4rem;
50 | width: 4rem;
51 | }
52 |
53 | @keyframes blink {
54 | 50% {
55 | border-color: transparent;
56 | }
57 | }
58 |
59 | .menu-btn {
60 | display: none;
61 | }
62 |
63 | .scroll-to-top {
64 | position: fixed;
65 | bottom: 3%;
66 | right: 3%;
67 | display: none;
68 | }
69 |
70 | /* for mobile and tablet devices */
71 |
72 | @media only screen and (max-width: 768px) {
73 | nav {
74 | padding: 5% 0 0 5%;
75 | flex-direction: column;
76 | align-items: flex-start;
77 | position: static;
78 | background: transparent;
79 | backdrop-filter: blur(0);
80 | width: auto;
81 | }
82 |
83 | .menu {
84 | margin: 40% 15% !important;
85 | padding: 0;
86 | transition: transform 0.5s ease-in-out;
87 | display: none;
88 | }
89 |
90 | .menu > li {
91 | font-size: 1.5rem;
92 | padding: 0;
93 | }
94 |
95 | .tophead > h1 {
96 | margin: 0;
97 | display: flex;
98 | }
99 |
100 | .name-logo {
101 | font-size: 1.2em;
102 | }
103 |
104 | .blink {
105 | height: 1.8rem;
106 | }
107 |
108 | .tophead {
109 | display: flex;
110 | width: 100%;
111 | align-items: center;
112 | justify-content: space-between;
113 | }
114 |
115 | .menu-btn {
116 | display: block;
117 | background-image: url('../assets/equal.png');
118 | width: 25px;
119 | height: 25px;
120 | background-size: cover;
121 | margin-right: 5%;
122 | }
123 |
124 | .opened-btn {
125 | background-image: url('../assets/close.png');
126 | width: 25px;
127 | height: 25px;
128 | margin-right: 10%;
129 | }
130 |
131 | .open {
132 | display: flex;
133 | flex-direction: column;
134 | gap: 4rem;
135 | }
136 |
137 | .nav-open {
138 | transition: all 0.3s ease-in-out;
139 | background: rgba(0, 0, 0, 0.8);
140 | backdrop-filter: blur(10px);
141 | height: 110vh;
142 | position: fixed;
143 | width: 100%;
144 | justify-content: flex-start;
145 | }
146 |
147 | .scroll-true {
148 | z-index: 99;
149 | background-color: #fff;
150 | border-radius: 50%;
151 | width: 50px;
152 | height: 50px;
153 | align-items: center;
154 | justify-content: center;
155 | cursor: pointer;
156 | transition: all 0.3s ease-in-out;
157 | display: flex;
158 | }
159 | }
160 |
--------------------------------------------------------------------------------
/src/components/NavBar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react'
2 | import './NavBar.css'
3 | import { Link } from 'react-scroll'
4 |
5 | const NavBar = () => {
6 | const [navbarStyle, setNavbarStyle] = useState({})
7 | const [open, setOpen] = useState(false)
8 | const [scroll, setScroll] = useState(false)
9 |
10 | const toggleMenu = () => {
11 | setOpen(!open)
12 | }
13 |
14 | useEffect(() => {
15 | const handleScroll = () => {
16 | const scrollTop = window.scrollY || document.documentElement.scrollTop
17 | const scrollHeight =
18 | document.documentElement.scrollHeight -
19 | document.documentElement.clientHeight
20 | const scrollPercentage = (scrollTop / scrollHeight) * 100
21 |
22 | if (scrollPercentage >= 2) {
23 | setScroll(true)
24 |
25 | setNavbarStyle({
26 | backgroundColor: 'rgba(0, 0, 0, 0.2)',
27 | })
28 | } else {
29 | setNavbarStyle({})
30 | setScroll(false)
31 | }
32 | }
33 |
34 | window.addEventListener('scroll', handleScroll)
35 | return () => {
36 | window.removeEventListener('scroll', handleScroll)
37 | }
38 | }, [])
39 |
40 | return (
41 | <>
42 |
48 |
49 |
50 |
58 | Hafiz Kadir
59 | {' '}
60 |
61 |
62 |
66 |
67 |
68 |
69 |
77 | Home,
78 |
79 |
80 |
81 |
89 | About,
90 |
91 |
92 |
93 |
101 | Achievement,
102 |
103 |
104 |
105 |
113 | Projects,
114 |
115 |
116 |
117 |
118 |
126 | Contact
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 | >
138 | )
139 | }
140 |
141 | export default NavBar
142 |
--------------------------------------------------------------------------------
/src/components/ProjectCard.css:
--------------------------------------------------------------------------------
1 | .project-card {
2 | background-color: rgb(0, 0, 0);
3 | color: white;
4 | break-inside: avoid;
5 | border-radius: 10px;
6 | overflow: hidden;
7 | position: relative;
8 | }
9 |
10 | .project-card img {
11 | transition: all 0.3s;
12 | width: 100%;
13 | border-top-left-radius: 10px;
14 | border-top-right-radius: 10px;
15 | object-fit: cover;
16 | }
17 |
18 | .project-card:hover img {
19 | transform: scale(1.1);
20 | filter: brightness(0.3);
21 | }
22 |
23 | .project-card p {
24 | line-height: 1.5rem;
25 | }
26 |
27 | .card-description {
28 | padding: 2% 4% 5% 4%;
29 | }
30 |
31 | .stacks {
32 | display: flex;
33 | flex-wrap: wrap;
34 | gap: 0.8rem;
35 | }
36 |
37 | .tech-stack {
38 | border-radius: 3px;
39 | font-size: 1rem;
40 | padding: 0.4rem 0.8rem;
41 | color: white;
42 | border: 0;
43 | cursor: none;
44 | background-color: #950740;
45 | }
46 |
47 | .tech-stack:hover {
48 | border: none;
49 | background-color: #ee4c7c;
50 | color: white;
51 | }
52 |
53 | .arrow {
54 | position: absolute;
55 | rotate: -45deg;
56 | font-size: 2.7rem;
57 | opacity: 0;
58 | -webkit-transform: translate(-50%, -50%);
59 | -moz-transform: translate(-50%, -50%);
60 | transform: translate(-50%, -50%);
61 | -webkit-transition: all 0.3s ease-in-out 0s;
62 | -moz-transition: all 0.3s ease-in-out 0s;
63 | transition: all 0.3s ease-in-out 0s;
64 | color: white;
65 | }
66 |
67 | .project-card:hover .arrow {
68 | top: 2%;
69 | left: 95.5%;
70 | opacity: 0.7;
71 | z-index: 55;
72 | }
73 |
74 | @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
75 | only screen and (min-resolution: 125dpi) {
76 | .project-card p {
77 | font-size: 0.9rem;
78 | }
79 | }
80 |
81 | /* for mobile and tablet devices */
82 |
83 | @media only screen and (max-width: 768px) {
84 | .tech-stack {
85 | font-size: 0.8rem;
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/src/components/ProjectCard.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './ProjectCard.css';
3 |
4 | const ProjectCard = (props) => (
5 |
6 | {
7 | props.source_link !== 'N/A' ? (
8 |
9 |
10 |
11 | ) :
12 | }
13 |
14 |
15 |
16 |
{props.title}
17 |
{props.description}
18 |
19 | {
20 | props.stacks.map((stack, id) => (
21 |
22 | {stack}
23 |
24 | ))
25 | }
26 |
27 |
28 |
29 | );
30 |
31 | export default ProjectCard;
32 |
--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import { Provider } from 'react-redux';
4 | import App from './App';
5 | import store from './store/store';
6 |
7 | const root = ReactDOM.createRoot(document.getElementById('root'));
8 | root.render(
9 |
10 |
11 |
12 |
13 | ,
14 | );
15 |
--------------------------------------------------------------------------------
/src/pages/About.css:
--------------------------------------------------------------------------------
1 | .about {
2 | padding: 0 10%;
3 | display: flex;
4 | align-items: flex-start;
5 | margin-bottom: 10%;
6 | }
7 |
8 | .about-title {
9 | margin: 0;
10 | }
11 |
12 | .about-me {
13 | width: 100%;
14 | position: sticky;
15 | top: 15%;
16 | }
17 |
18 | .about-para {
19 | width: 90% !important;
20 | margin-bottom: 2rem;
21 | }
22 |
23 | .about-skills {
24 | padding: 0 0 0 4%;
25 | border-left: 0.2px solid rgba(136, 158, 168, 0.2);
26 | margin-left: 0%;
27 | }
28 |
29 | .skills {
30 | margin-top: 2rem;
31 | display: flex;
32 | flex-wrap: wrap;
33 | gap: 2rem;
34 | }
35 |
36 | .skill {
37 | display: flex;
38 | flex-direction: column;
39 | justify-content: space-between;
40 | margin-bottom: 1rem;
41 | align-items: center;
42 | color: white;
43 | }
44 |
45 | .skill img {
46 | width: 40px;
47 | }
48 |
49 | .skill .large-image {
50 | width: 120px; /* Adjust the width to your preference */
51 | height: 20px; /* Adjust the height to maintain aspect ratio */
52 | /* You can adjust the width and height to make the images larger as needed. */
53 | }
54 |
55 | .skill .large-image2 {
56 | width: 90px; /* Adjust the width to your preference */
57 | height: 20px; /* Adjust the height to maintain aspect ratio */
58 | /* You can adjust the width and height to make the images larger as needed. */
59 | }
60 |
61 | .skill .image2 {
62 | width: 70px; /* Adjust the width to your preference */
63 | height: 70px; /* Adjust the height to maintain aspect ratio */
64 | /* You can adjust the width and height to make the images larger as needed. */
65 | }
66 |
67 | .skill-title {
68 | color: white;
69 | font-size: 2rem;
70 | margin: 0 0 1rem 0;
71 | }
72 |
73 | .soft-skill {
74 | color: white;
75 | font-size: 1.2rem;
76 | text-transform: lowercase;
77 | border-radius: 50px;
78 | margin: 0;
79 | font-family: 'Orbit', sans-serif;
80 | }
81 |
82 | @media only screen and (min-width: 900px) and (max-width: 1440px) {
83 | .about-skills {
84 | padding: 0 0 0 5%;
85 | border-left: 0.2px solid rgba(136, 158, 168, 0.2);
86 | margin-left: 0%;
87 | width: 100% !important;
88 | }
89 |
90 | .skills {
91 | margin-top: 2rem;
92 | display: flex;
93 | flex-wrap: wrap;
94 | gap: 2.5rem;
95 | }
96 |
97 | .skill {
98 | display: flex;
99 | flex-direction: column;
100 | justify-content: space-between;
101 | margin-bottom: 1rem;
102 | align-items: center;
103 | color: white;
104 | }
105 |
106 | .skill img {
107 | width: 40px;
108 | }
109 |
110 | .skill-title {
111 | color: white;
112 | font-size: 1.3rem;
113 | margin-bottom: 1rem;
114 | }
115 |
116 | .soft-skill {
117 | color: white;
118 | font-size: 1rem;
119 | text-transform: lowercase;
120 | border-radius: 50px;
121 | margin: 0;
122 | font-family: 'Orbit', sans-serif;
123 | }
124 | }
125 |
126 | /* for mobile and tablet devices */
127 |
128 | @media only screen and (max-width: 900px) {
129 | .about {
130 | padding: 5%;
131 | flex-direction: column;
132 | margin-bottom: 25%;
133 | }
134 |
135 | .about-me {
136 | position: static;
137 | }
138 |
139 | .about-para {
140 | width: 100% !important;
141 | }
142 |
143 | .about-skills {
144 | padding: 0;
145 | border-left: 0;
146 | margin-top: 20%;
147 | }
148 |
149 | .skills {
150 | margin-top: 2rem;
151 | display: flex;
152 | flex-wrap: wrap;
153 | gap: 2.5rem;
154 | }
155 |
156 | .skill {
157 | display: flex;
158 | flex-direction: column;
159 | justify-content: space-between;
160 | margin-bottom: 1rem;
161 | align-items: center;
162 | color: white;
163 | }
164 |
165 | .skill img {
166 | width: 35px;
167 | }
168 |
169 | .skill p {
170 | font-size: 0.75rem;
171 | }
172 |
173 | .skill-title {
174 | color: white;
175 | font-size: 1.3rem;
176 | margin-bottom: 1rem;
177 | }
178 |
179 | .soft-skill {
180 | color: white;
181 | font-size: 1rem;
182 | text-transform: lowercase;
183 | border-radius: 50px;
184 | margin: 0;
185 | font-family: 'Orbit', sans-serif;
186 | }
187 | }
188 |
--------------------------------------------------------------------------------
/src/pages/About.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import './About.css'
3 | import ReduxIcon from '../assets/redux.png'
4 | import HTML from '../assets/html.png'
5 | import jQuery from '../assets/jquery.png'
6 | import Ruby from '../assets/ruby.png'
7 | import Flutter from '../assets/flutter.png'
8 | import VSCode from '../assets/vscode.png'
9 | import Figma from '../assets/figma.png'
10 | import ReactIcon from '../assets/react.png'
11 | import RSpecLogo from '../assets/rspec.png'
12 | import NPMlogo from '../assets/npm.png'
13 | import GitLogo from '../assets/git.png'
14 | import GitHublogo from '../assets/github.png'
15 | import GMeet from '../assets/meet.png'
16 | import Zoomlogo from '../assets/zoom.webp'
17 | import SkypeLogo from '../assets/skype.png'
18 | import Canva from '../assets/canva.png'
19 | import CDT from '../assets/cdt.png'
20 | import CSS from '../assets/css.png'
21 | import BootStrap from '../assets/bootstrap.png'
22 | import JavaScript from '../assets/javascript.png'
23 | import Sass from '../assets/sass.png'
24 | import PostMan from '../assets/postman.png'
25 | import MySql from '../assets/mysqll.png'
26 | import Django from '../assets/djangoo.png'
27 | import Firebase from '../assets/firebase.png'
28 | import Unity from '../assets/unity.png'
29 | import xD from '../assets/xdd.png'
30 | import SpringBoot from '../assets/springboot.png'
31 | import Teams from '../assets/TEAMS.png'
32 | import Petronas from '../assets/petronas-logo.png'
33 | import UOB from '../assets/uoblogo.jpg'
34 | import UPM from '../assets/upmm.png'
35 | import Pharmaniaga from '../assets/1200px-Pharmaniaga_logo.png'
36 | import Perkeso from '../assets/perkeso.png'
37 | import Litera from '../assets/litera.png'
38 | import Pixyz from '../assets/pixyz.ico'
39 | import XMind from '../assets/XMins.ico'
40 | import SQLyog from '../assets/SQLyog.ico'
41 | import PostgreSQL from '../assets/postgres.png'
42 | import Android from '../assets/androidstudio.png'
43 | import Blender from '../assets/blender.png'
44 | import DsMax from '../assets/3dsmax.png'
45 | import Vuforia from '../assets/vuforiaa.png'
46 | import Gitlab from '../assets/gitlab.svg'
47 | import Bitbucket from '../assets/bitbucket.png'
48 | import Innoveam from '../assets/innoveam.png'
49 | import Drawio from '../assets/drawio.png'
50 | import RTM from '../assets/rtmm.png'
51 | import MetaSpark from '../assets/metaspark.webp'
52 | import MDEC from '../assets/mdec.webp'
53 | import matlab from '../assets/matlab.png'
54 | import MCMC from '../assets/MCMC_Logo.png'
55 | import Mui from '../assets/mui.png'
56 | import Discord from '../assets/discord.png'
57 | import Netlify from '../assets/netlify.svg'
58 | import Heroku from '../assets/heroku_icon_130912.png'
59 | import Intellij from '../assets/IntelliJ_IDEA_Icon.svg.png'
60 | import Kotlin from '../assets/Kotlin_Icon.svg.png'
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 | const About = () => (
70 |
71 |
72 |
aBOUT mE
73 |
74 | A Computer Science (Multimedia) graduate from Universiti Putra Malaysia,
75 | formerly a 3D Content Developer at Innoveam, currently an IT Associate -
76 | Digital Banking at UOB Innovation Hub 2. Passionate about Fullstack
77 | Development, UI/UX designing, 3D Modeling, Augmented Reality,
78 | Photography, and Video Editing.
79 |
80 |
81 |
86 | GET MY CV
87 |
88 |
89 |
90 |
91 |
Clients & Collaborators
92 |
93 |
94 |
95 |
Petronas
96 |
97 |
98 |
99 |
UOB
100 |
101 |
102 |
103 |
RTM
104 |
105 |
106 |
107 |
Innoveam
108 |
109 |
110 |
111 |
UPM
112 |
113 |
114 |
115 |
MDEC
116 |
117 |
118 |
119 |
Perkeso
120 |
121 |
122 |
123 |
MCMC
124 |
125 |
126 |
127 |
Pharmaniaga
128 |
129 |
130 |
131 |
LiteraLearn
132 |
133 |
134 |
Front-End
135 |
136 |
137 |
138 |
React
139 |
140 |
141 |
142 |
JavaScript
143 |
144 |
145 |
146 |
Redux
147 |
148 |
149 |
150 |
HTML5
151 |
152 |
153 |
154 |
CSS3
155 |
156 |
157 |
158 |
jQuery
159 |
160 |
161 |
162 |
163 |
Bootstrap
164 |
165 |
166 |
167 |
MUI
168 |
169 |
170 |
Back-End
171 |
172 |
173 |
174 |
Ruby
175 |
176 |
177 |
178 |
Django
179 |
180 |
181 |
182 |
SpringBoot
183 |
184 |
185 |
186 |
MySQL
187 |
188 |
189 |
190 |
SQLyog
191 |
192 |
193 |
194 |
PostgreSQL
195 |
196 |
197 |
198 |
199 |
Firebase
200 |
201 |
202 |
3D
203 |
204 |
205 |
206 |
Pixyz
207 |
208 |
209 |
210 |
Meta Spark
211 |
212 |
213 |
214 |
Blender
215 |
216 |
217 |
218 |
Unity
219 |
220 |
221 |
222 |
Vuforia
223 |
224 |
225 |
226 |
227 |
3ds Max
228 |
229 |
230 |
Mobile
231 |
232 |
233 |
234 |
Flutter
235 |
236 |
237 |
React Native
238 |
239 |
240 |
241 |
242 |
243 |
Kotlin
244 |
245 |
246 |
Version Control & Deployment
247 |
248 |
249 |
250 |
Git
251 |
252 |
253 |
254 |
GitHub
255 |
256 |
257 |
258 |
GitLab
259 |
260 |
261 |
262 |
Bitbucket
263 |
264 |
265 |
266 |
Netlify
267 |
268 |
269 |
270 |
Heroku
271 |
272 |
273 |
Tools
274 |
275 |
276 |
277 |
VS Code
278 |
279 |
280 |
281 |
IntelliJ
282 |
283 |
284 |
285 |
Matlab
286 |
287 |
288 |
289 |
290 |
Postman
291 |
292 |
293 |
294 |
Android Studio
295 |
296 |
297 |
298 |
npm
299 |
300 |
301 |
302 |
Design
303 |
304 |
305 |
306 |
Canva
307 |
308 |
309 |
310 |
Figma
311 |
312 |
313 |
314 |
Adobe XD
315 |
316 |
317 |
318 |
XMind
319 |
320 |
321 |
322 |
draw.io
323 |
324 |
325 |
Communication
326 |
327 |
328 |
329 |
Discord
330 |
331 |
332 |
333 |
Teams
334 |
335 |
336 |
337 |
338 |
Skype
339 |
340 |
341 |
342 |
Google Meet
343 |
344 |
345 |
346 |
Zoom
347 |
348 |
349 |
Soft Skills
350 |
351 |
Critical Thinking
352 |
Communication
353 |
Teamwork
354 |
Collaboration
355 |
Creativity
356 |
357 |
Leadership
358 |
Problem Solving
359 |
Time Management
360 |
Emotional Intelligence
361 |
Adaptability
362 |
363 |
364 |
365 | )
366 |
367 | export default About
368 |
--------------------------------------------------------------------------------
/src/pages/Achievement.css:
--------------------------------------------------------------------------------
1 | .achievements {
2 | padding: 0 10%;
3 | margin-bottom: 10%;
4 | }
5 |
6 | .achievements-container {
7 | display: grid;
8 | grid-template-columns: repeat(3, 1fr);
9 | gap: 1rem;
10 | }
11 |
12 | .achievement-title {
13 | margin-top: 2rem !important;
14 | text-align: end;
15 | }
16 |
17 | .projects-para {
18 | font-size: 1rem;
19 | color: white;
20 | margin: 2% 0 4rem 0;
21 | font-family: 'Orbit', sans-serif;
22 | text-align: justify;
23 | }
24 |
25 | @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
26 | only screen and (min-resolution: 125dpi) {
27 | .projects-para {
28 | font-size: 1.2rem;
29 | }
30 | }
31 |
32 | @media only screen and (max-width: 768px) {
33 | .projects-container {
34 | grid-template-columns: repeat(1, 1fr);
35 | }
36 |
37 | .projects {
38 | padding: 0 5%;
39 | margin-bottom: 20%;
40 | }
41 |
42 | .projects-para {
43 | font-size: 1rem;
44 | }
45 | }
46 |
47 | @media only screen and (min-width: 769px) and (max-width: 1200px) {
48 | .projects-container {
49 | grid-template-columns: repeat(2, 1fr);
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/pages/Achievements.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import './Achievement.css'
3 | import ProjectCard from '../components/ProjectCard'
4 |
5 | const Achievements = () => {
6 | // Manually define the project data
7 | const projectData = [
8 | {
9 | image_url: 'https://i.imgur.com/ewJQJM7.jpg',
10 | project_name:
11 | 'International University Carnival on E-Learning (IUCEL) 2022 - Gold Medal Winner',
12 | description:
13 | "My passion project, an Augmented Reality mobile application for learning the anatomy and physiology of respiratory system, has earned international recognition and a prestigious Gold Medal at IUCEL 2022! 🌐🏅🧬 What makes this achievement even more special is the invaluable impact it has on medical education. We all know that understanding the human body''s intricacies is a critical foundation for any healthcare professional, and my app aims to make this learning experience not only effective but also engaging and interactive.",
14 | tech_stack: ['IIDEL', 'IUCEL', 'Gold Medal', 'Adobe XD'],
15 | source_link:
16 | 'https://www.linkedin.com/posts/hfzkdr_arlearning-medicaleducation-innovation-activity-7125663966193758208-TGvP?utm_source=share&utm_medium=member_desktop',
17 | },
18 | {
19 | image_url: 'https://i.imgur.com/MmBGiz7.jpg',
20 | project_name: 'PutraLova Trailer Editor - Featured in RTM',
21 | description:
22 | 'I am immensely proud to have participated in the prestigious Putra Longest Nonstop Volunteerism Activities (PutraLOVA), a remarkable event organized by the Co-curriculum and Student Development Centre, UPM. PutraLOVA is an extraordinary endeavor, setting a record by successfully conducting 40 hours of nonstop volunteerism activities, and earning a well-deserved place in the Malaysia Book of Records. In this event, I had the privilege to serve as the Trailer Volunteerism Editor, which was a challenging and fulfilling role. This experience not only allowed me to contribute to the community but also honed my organizational and communication skills. It is an accomplishment that I hold dear and consider a significant highlight in my portfolio, reflecting my dedication to making a positive impact through volunteerism and my ability to take on responsible roles in noteworthy initiatives.',
23 | tech_stack: ['Volunteerism', 'MBOR', 'RTM', 'VN'],
24 | source_link:
25 | 'https://www.youtube.com/watch?v=bFQIHZKmY-s&ab_channel=BeritaRTM',
26 | },
27 |
28 | {
29 | image_url:
30 | ' https://i.imgur.com/QYXqttx.jpg',
31 | project_name: 'MDEC-PRISMA Top 100 Creative Streamer',
32 | description:
33 | "Awarded by Malaysia Digital Economic Corporation (MDEC) in Pakej Rangsangan Industri Kreatif Malaysia (PRISMA) Digital Content Grant. Excited to have made it to the Top 100 Creative Streamers, a testament to the power of digital creativity in shaping the future. 🎮💡",
34 | tech_stack: ['E-Sport', 'Valorant', 'MASUM'],
35 | source_link:
36 | 'https://www.linkedin.com/posts/hfzkdr_contentcreator-creative-streaming-activity-7064923382227619840--mof?utm_source=share&utm_medium=member_desktop',
37 | },
38 | {
39 | image_url: 'https://i.imgur.com/oF88WvT.jpg',
40 | project_name: 'Inter-University E-Sport Competition (MASUM) - Valorant UPM Team ',
41 | description:
42 | "I am incredibly proud to have represented Universiti Putra Malaysia in the interuniversity esports championship organized by Majlis Sukan Universiti Malaysia (MASUM). Through skill, teamwork, and dedication, our team not only made it through the challenging group stage but also secured a spot among the top 16 teams in the competition. This accomplishment is a testament to our hard work and commitment to excellence in Valorant. It's an honor to compete at this level and to showcase the talent and competitive spirit of our university on a national stage. ",
43 | tech_stack: ['E-Sport', 'Valorant', 'MASUM'],
44 | source_link:
45 | 'https://www.facebook.com/deARTsa.UPM/videos/1058452658362783/',
46 | },
47 | {
48 | image_url: 'https://i.imgur.com/GJNXnuL.jpg',
49 | project_name: 'E-Sport Forum - Speaker',
50 | description:
51 | "🎮 Excited to be a part of the Esports Forum organized by KPZ TV during the Za'ba Esport 21 Closing Ceremony! 🌐 As a representative of Universiti Putra Malaysia and having recently competed in the MASUM Interuniversity Esports Championship, I've shared insights into our journey, the challenges we overcame, and the lessons learned in the world of Valorant. 🏆 I bring the audience explore the dynamic landscape of esports, celebrating the spirit of competition, and discussed the future of gaming at this prestigious event! 🚀",
52 | tech_stack: ['E-Sport','KPZtv', 'Forum'],
53 | source_link:
54 | 'https://www.youtube.com/watch?v=0SQseOXalc8&ab_channel=KPZtv%21Channel',
55 | },
56 | {
57 | image_url:
58 | 'https://i.imgur.com/PeA07RZ.jpg',
59 | project_name: 'Industrial Visit UPM to Innoveam - Presenter',
60 | description:
61 | "Thrilled to have had the opportunity to showcase the cutting-edge world of 3D simulation and Extended Reality (XR) at Innoveam during the recent industrial visit by the talented juniors from Universiti Putra Malaysia! 🎓I had the privilege of presenting Innoveam's dynamic profile to the bright minds from UPM, giving them a glimpse into our journey of creating immersive digital solutions, fostering deeper connections between academia and industry to create mutually beneficial partnerships that bridge the gap between theory and real-world application.",
62 | tech_stack: ['Internship', 'AcademiaXIndustry', 'Innoveam'],
63 | source_link:
64 | 'https://www.linkedin.com/posts/hfzkdr_industrialvisit-digitaltwin-metaverse-activity-7077438812720680960-9TJb?utm_source=share&utm_medium=member_desktop',
65 | },
66 | ]
67 |
68 | return (
69 |
70 |
Achievement Highlights
71 |
72 | During my time at university, I've actively pursued involvement in
73 | various aspects of campus life. Academically, I've maintained a strong
74 | commitment to my studies, consistently striving to excel in my
75 | coursework and achieve second class upper honours. Simultaneously, I've
76 | also been highly engaged outside the classroom joining student clubs,
77 | organizations and extracurricular activities. My university years have
78 | been characterized by a balanced commitment to both academic excellence
79 | and active participation in extracurricular activities, fostering
80 | personal growth, and a well-rounded education.
81 |
82 |
83 | {projectData.map((project, id) => (
84 |
92 | ))}
93 |
94 |
95 | )
96 | }
97 |
98 | export default Achievements
99 |
--------------------------------------------------------------------------------
/src/pages/Contact.css:
--------------------------------------------------------------------------------
1 | .contact {
2 | display: flex;
3 | height: 100vh;
4 | padding: 5% 10% 0 10%;
5 | align-items: center;
6 | background: rgba(255, 255, 255, 0.733);
7 | gap: 5%;
8 | }
9 |
10 | .footer-left {
11 | width: 40%;
12 | }
13 |
14 | .footer-text {
15 | color: rgb(48, 9, 8)
16 | }
17 |
18 | .footer-left h1 {
19 | -webkit-text-fill-color: transparent;
20 | -webkit-background-clip: text;
21 | background-image: url('https://wallpapers-clan.com/wp-content/uploads/2023/01/clouds-aesthetic-red-wallpaper.jpg');
22 | font-size: 9rem;
23 | font-family: 'Oswald', sans-serif;
24 | letter-spacing: 0.2rem;
25 | }
26 |
27 | .footer-right {
28 | width: 60%;
29 | }
30 |
31 | .footer-right h3 {
32 | font-size: 2.2rem;
33 | font-family: 'Oswald', sans-serif;
34 | letter-spacing: 0.2rem;
35 | opacity: 0.8;
36 | }
37 |
38 | .interests {
39 | display: flex;
40 | flex-wrap: wrap;
41 | gap: 1rem;
42 | }
43 |
44 | .interests p {
45 | font-size: 1.5rem;
46 | padding: 0.4rem 1rem;
47 | border-radius: 100px;
48 | border: 1px solid black;
49 | font-family: 'Orbit', sans-serif;
50 | }
51 |
52 | hr {
53 | width: 100%;
54 | margin: 3% 0;
55 | border-bottom: 0.5px rgba(32, 32, 32, 0.247);
56 | }
57 |
58 | h3 span {
59 | letter-spacing: 0;
60 | color: rgb(53, 31, 2);
61 | }
62 |
63 | h3 span a::after {
64 | content: '';
65 | position: absolute;
66 | bottom: -5px;
67 | left: 0;
68 | height: 7px;
69 | width: 100%;
70 | border: solid 2px #d8061b;
71 | border-color: #e20017 transparent transparent transparent;
72 | border-radius: 30%;
73 | }
74 |
75 | .social {
76 | display: flex;
77 | align-items: center;
78 | gap: 2rem;
79 | }
80 |
81 | .social p {
82 | margin: 0;
83 | font-size: 14px;
84 | white-space: nowrap; /* Prevent line breaks within the text */
85 | display: inline;
86 | }
87 |
88 | @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
89 | only screen and (min-resolution: 125dpi) {
90 | .footer-left h1 {
91 | font-size: 7rem;
92 | }
93 |
94 | .footer-right h3 {
95 | font-size: 2rem;
96 | }
97 |
98 | .interests p {
99 | font-size: 1.2rem;
100 | margin: 0.5rem 0;
101 | }
102 | }
103 |
104 | /* for mobile and tablet devices */
105 |
106 | @media only screen and (max-width: 768px) {
107 | .contact {
108 | flex-direction: column;
109 | padding: 5%;
110 | height: auto !important;
111 | }
112 |
113 | .footer-left,
114 | .footer-right {
115 | width: 100%;
116 | }
117 |
118 | .footer-left h1 {
119 | font-size: 5rem;
120 | }
121 |
122 | .footer-right h3 {
123 | font-size: 1.2rem;
124 | letter-spacing: 0.1rem;
125 | }
126 |
127 | .interests {
128 | gap: 0.5rem;
129 | }
130 |
131 | .interests p {
132 | font-size: 0.9rem;
133 | margin: 0.5rem 0;
134 | }
135 |
136 | .social {
137 | flex-wrap: wrap;
138 | }
139 |
140 | h3 span a::after {
141 | bottom: -5px;
142 | }
143 | }
144 |
145 | @media screen and (min-width: 769px) and (max-width: 1920px) {
146 | .about-skills {
147 | width: 80%;
148 | }
149 |
150 | .footer-right h3 {
151 | font-size: 1.5rem;
152 | }
153 |
154 | .footer-left {
155 | width: 60%;
156 | }
157 |
158 | .interests p {
159 | font-size: 1rem;
160 | margin: 0.5rem 0;
161 | }
162 | }
163 |
--------------------------------------------------------------------------------
/src/pages/Contact.jsx:
--------------------------------------------------------------------------------
1 | import React, { useRef }from 'react'
2 | import './Contact.css'
3 | import emailjs from "@emailjs/browser";
4 |
5 | import { ToastContainer, toast } from 'react-toastify';
6 |
7 | import 'react-toastify/dist/ReactToastify.css';
8 | const Contact = () => {
9 |
10 | const notify = () => toast("Wow so easy !");
11 | const form = useRef();
12 |
13 | const sendEmail = (e) => {
14 | e.preventDefault();
15 |
16 | emailjs
17 | .sendForm(
18 | "service_nnumsqs","template_nlqzrsa",
19 | form.current,
20 | "L1nXwHkN6KpTJN_Uv"
21 | )
22 | .then(
23 | (result) => {
24 |
25 | console.log(result.text);
26 | console.log("message sent");
27 | },
28 | (error) => {
29 | console.log(error.text);
30 | }
31 | );
32 | };
33 |
34 | return(
35 |
137 | )
138 | }
139 |
140 | export default Contact
141 |
--------------------------------------------------------------------------------
/src/pages/Hero.css:
--------------------------------------------------------------------------------
1 | .hero {
2 | height: 100vh;
3 | padding: 0 10%;
4 | display: flex;
5 | flex-direction: column;
6 | justify-content: center;
7 | gap: 3%;
8 | margin-bottom: 10%;
9 | }
10 |
11 | .hero-overlay {
12 | display: flex;
13 | align-items: center;
14 | justify-content: space-between;
15 | padding: 10% 0 0;
16 | }
17 |
18 | .description {
19 | width: 75%;
20 | }
21 |
22 | .hero-image {
23 | display: flex;
24 | flex-direction: column;
25 | align-items: center;
26 | justify-content: center;
27 | width: 35%;
28 | animation-name: floating;
29 | animation-duration: 3s;
30 | animation-iteration-count: infinite;
31 | animation-timing-function: ease-in-out;
32 | }
33 |
34 | .title {
35 | font-size: 5rem;
36 | color: white;
37 | margin: 0;
38 | font-family: 'Indie Flower', cursive;
39 | overflow: hidden;
40 | }
41 |
42 | .tagline {
43 | font-size: 1.1rem;
44 | color: #c3073f;
45 | margin: -1% 0 0 0;
46 | font-family: 'Orbit', sans-serif;
47 | }
48 |
49 | .paragraph {
50 | font-size: 1.2rem;
51 | text-transform: uppercase;
52 | color: white;
53 | opacity: 0.8;
54 | font-weight: normal;
55 | line-height: 2.2rem;
56 | margin: 2rem 0;
57 | text-align: justify;
58 | width: 85%;
59 | }
60 |
61 | .hero-btns {
62 | display: flex;
63 | align-items: center;
64 | gap: 2rem;
65 | color: #c3073f;
66 | }
67 |
68 | .hire-me {
69 | color: #fff;
70 | background-color: #c3073f;
71 | }
72 |
73 | .hire-me:hover {
74 | color: #fff;
75 | background-color: #ee4c7c;
76 | }
77 |
78 | .lets-talk {
79 | background: transparent;
80 | color: white;
81 | }
82 |
83 | .social-icons {
84 | display: flex;
85 | align-items: center;
86 | gap: 2.5rem;
87 | }
88 |
89 | .social-icons a {
90 | color: #fafafa;
91 | display: flex;
92 | align-items: center;
93 | justify-content: center;
94 | border-radius: 50%;
95 | text-decoration: none;
96 | font-size: 2.5rem;
97 | }
98 |
99 | .social-icons a i {
100 | transition: 0.3s ease-in-out;
101 | }
102 |
103 | .social-icons a:hover i {
104 | transition: 0.3s ease-in-out;
105 | transform: scale(1.8);
106 | }
107 |
108 | @keyframes floating {
109 | 0% {
110 | transform: translate(0, 0);
111 | }
112 |
113 | 50% {
114 | transform: translate(0, 15px);
115 | }
116 |
117 | 100% {
118 | transform: translate(0, -0);
119 | }
120 | }
121 |
122 | /* for MacBook ~ 13 inch */
123 |
124 | @media only screen and (min-width: 900px) and (max-width: 1440px) {
125 | .title {
126 | font-size: 4.5vw;
127 | }
128 |
129 | .tagline {
130 | font-size: 1.2rem;
131 | }
132 |
133 | .hero-image {
134 | width: 35%;
135 | }
136 |
137 | .paragraph {
138 | font-size: 1rem;
139 | width: 95% !important;
140 | margin: 2% 0 5% 0;
141 | }
142 |
143 | .social-icons a {
144 | font-size: 1.8rem;
145 | }
146 | }
147 |
148 | /* for mobile and tablet devices */
149 |
150 | @media only screen and (max-width: 900px) {
151 | .hero {
152 | padding: 10% 5% 0 5%;
153 | height: auto;
154 | margin-bottom: 20%;
155 | }
156 |
157 | .tagline {
158 | font-size: 1rem;
159 | }
160 |
161 | .paragraph {
162 | font-size: 0.85rem;
163 | margin: 4% 0 5% 0;
164 | width: 100% !important;
165 | }
166 |
167 | .hero-overlay {
168 | flex-direction: column;
169 | }
170 |
171 | .description {
172 | width: 100%;
173 | }
174 |
175 | .hero-image {
176 | padding: 15% 0;
177 | display: flex;
178 | align-items: center;
179 | justify-content: center;
180 | width: 80%;
181 | }
182 |
183 | .hero-btns {
184 | gap: 1rem;
185 | margin-top: 10%;
186 | }
187 |
188 | button {
189 | font-size: 0.8rem;
190 | padding: 0.7rem 2rem;
191 | }
192 |
193 | .title {
194 | font-size: 1.8rem;
195 | margin: 5% 0;
196 | }
197 |
198 | .social-icons {
199 | justify-content: center;
200 | }
201 |
202 | .social-icons a {
203 | font-size: 1.5rem;
204 | }
205 | }
206 |
--------------------------------------------------------------------------------
/src/pages/Hero.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./Hero.css";
3 | import { Link } from "react-scroll";
4 | import Imu from "../assets/fizloki.jpeg";
5 | import Typewriter from "typewriter-effect";
6 |
7 | const Hero = () => (
8 |
9 |
10 |
11 |
hELLO. i aM Hafiz Kadir
12 |
13 |
14 | I do AR, Fullstack Dev, Ui/Ux, Photography and stream on Twitch for
15 | fun!
16 |
17 |
18 |
19 |
20 |
21 |
22 | I'm passionate about crafting exceptional digital experiences. I bring
23 | ideas to life in the virtual realm with a keyboard as my paintbrush
24 | and lines of code as my canvas. Let's join forces and bring your
25 | digital dreams to fruition. Get in touch, and let's embark on this
26 | exciting journey together!
27 |
28 |
44 |
45 |
46 |
47 |
48 |
49 | {" "}
50 | {" "}
54 |
55 |
56 |
107 |
108 | );
109 |
110 | export default Hero;
111 |
--------------------------------------------------------------------------------
/src/pages/Projects.css:
--------------------------------------------------------------------------------
1 | .projects {
2 | padding: 0 10%;
3 | margin-bottom: 10%;
4 | }
5 |
6 | .projects-container {
7 | display: grid;
8 | grid-template-columns: repeat(3, 1fr);
9 | gap: 1rem;
10 | }
11 |
12 | .projects-title {
13 | margin-top: 2rem !important;
14 | text-align: start;
15 | }
16 |
17 | .projects-para {
18 | font-size: 1.5rem;
19 | color: white;
20 | margin: 2% 0 4rem 0;
21 | font-family: 'Orbit', sans-serif;
22 | text-align: justify;
23 | }
24 |
25 | @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
26 | only screen and (min-resolution: 125dpi) {
27 | .projects-para {
28 | font-size: 1.2rem;
29 | }
30 | }
31 |
32 | @media only screen and (max-width: 768px) {
33 | .projects-container {
34 | grid-template-columns: repeat(1, 1fr);
35 | }
36 |
37 | .projects {
38 | padding: 0 5%;
39 | margin-bottom: 20%;
40 | }
41 |
42 | .projects-para {
43 | font-size: 1rem;
44 | }
45 | }
46 |
47 | @media only screen and (min-width: 769px) and (max-width: 1200px) {
48 | .projects-container {
49 | grid-template-columns: repeat(2, 1fr);
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/pages/Projects.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import './Projects.css'
3 | import ProjectCard from '../components/ProjectCard'
4 |
5 | const Projects = () => {
6 | // Manually define the project data
7 | const projectData = [
8 | {
9 | image_url:
10 | 'https://i.imgur.com/6CPRhzM.jpg',
11 | project_name: 'ARespiratory',
12 | description:
13 | 'ARespiratory is developed in collaboration with Faculty Medical & Health Science, UPM. This mobile application has Augmented Reality(AR) features to assist medical students in learning the anatomy and physiology of the respiratory system. \n This application has obtained copyright by MyIPO.',
14 | tech_stack: ['Unity', 'Vuforia', 'Blender', 'Adobe XD'],
15 | source_link:
16 | 'https://www.linkedin.com/posts/hfzkdr_arlearning-medicaleducation-innovation-activity-7125663966193758208-TGvP?utm_source=share&utm_medium=member_desktop',
17 | },
18 | {
19 | image_url: 'https://i.imgur.com/gJm1g1J.jpg',
20 | project_name: 'EV',
21 | description:
22 | 'The EV Mobile Application is a solution developed for Educity Village (EV) to address the growing demand for a reliable booking system. Traditional booking methods proved fragile and prone to errors, leading to the development of this user-friendly mobile application for space booking. The app caters to the needs of EV residents and guests, offering efficient booking for sports courts, spaces, pool tables, and BBQ pits.',
23 | tech_stack: ['Flutter', 'Django', 'MySQL', 'Adobe XD'],
24 | source_link:
25 | 'https://www.youtube.com/watch?v=LkATF4jqDlU&list=PLX3AEknl3ENJFVaBkrFAJlFyuyBgpo6ZI',
26 | },
27 |
28 | {
29 | image_url: 'https://i.imgur.com/g4F2ezv.jpg',
30 | project_name: 'CozyShop',
31 | description:
32 | 'Cozyshop is an exciting and innovative ecommerce project that aims to redefine the online shopping experience. With a commitment to providing customers with top-quality products, outstanding service, and a seamless user experience.',
33 | tech_stack: ['Adobe XD', 'Canva'],
34 | source_link:
35 | 'https://xd.adobe.com/view/dfd74d8e-99b2-497e-9184-ccc7c11577be-8a84/',
36 | },
37 | {
38 | image_url: 'https://i.imgur.com/wPtMnTl.jpg',
39 | project_name: 'PutraClass',
40 | description:
41 | 'A proposed web system prototype for SK SERDANG to deal with Covid-19 back to school program. A complete website prototype consist of a classroom, a timetable, and a specified tab for submitting Covid-19 test result. ',
42 | tech_stack: ['Adobe XD'],
43 | source_link:
44 | 'https://xd.adobe.com/view/5bd33c80-56bb-4607-9950-eaed180a760c-0e80/?hints=off',
45 | },
46 |
47 | {
48 | image_url: 'https://i.imgur.com/M37BH5Q.jpg',
49 | project_name: 'Aphasia Assist',
50 | description:
51 | 'Application is developed in a collaboration project with PERKESO for patients that has been diagnosed with aphasia (language disorder). The application has image-to-speech features and is developed as an alternative for aphasia patients to communicate with other people in their daily life.',
52 | tech_stack: ['Adobe XD', 'Android Studio', 'Kotlin'],
53 | source_link:
54 | 'https://drive.google.com/file/d/1-1_QVy3umJ7YzCTPjfuyjGcKv9XE389I/view',
55 | },
56 | {
57 | image_url: 'https://i.imgur.com/VkacRVe.jpg',
58 | project_name: 'Pendekar Jahat',
59 | description:
60 | '"Pendekar Jahat" is a menacing 3D warrior character brought to life through meticulous 3D modeling and texturing. This dark and enigmatic character represents the embodiment of evil in a fantasy world. The project showcases an intricately designed evil warrior, featuring sinister armor, menacing weapons, and a foreboding presence."Pendekar Jahat" effectively conveys a character with a dark backstory and a malevolent purpose, adding depth to the character design.',
61 | tech_stack: ['Blender','3D Modeling'],
62 | source_link: 'https://streamable.com/tzlm44',
63 | },
64 | {
65 | image_url: 'https://i.imgur.com/zSBFJB6.jpg',
66 | project_name: '3D Donut Oreo',
67 | description:
68 | 'The "3D Donut Oreo" is a visually delectable 3D modeling project crafted using the powerful Blender software. This artful project takes a delicious spin on the classic donut and Oreo cookie. Careful attention is paid to texturing and lighting, creating an enticing and lifelike appearance. This delightful 3D project offers a visual treat to viewers, celebrating the art of 3D modeling and rendering with a scrumptious twist.',
69 | tech_stack: ['Blender','3D Modeling'],
70 | source_link:
71 | 'https://hafizkadirwork.wixsite.com/hfzkdr/portfolio-collections/recent-works/animation',
72 | },
73 | {
74 | image_url: 'https://i.imgur.com/Xq5c2BQ.png',
75 | project_name: '3D Sushi',
76 | description:
77 | "3D Sushi project is an exciting endeavor that harnesses the power of Blender, a versatile 3D modeling and rendering software. Using Blender's advanced tools and techniques, we aim to create highly realistic and visually appealing 3D models of sushi dishes. ",
78 | tech_stack: ['Blender','3D Modeling'],
79 | source_link: 'N/A',
80 | },
81 | {
82 | image_url: 'https://i.imgur.com/5uklNxT.jpg',
83 | project_name: 'Wedding Montage #HairulFitriah',
84 | description:
85 | 'The Wedding Montage at Summer Leisure Garden is a creative and heartwarming project that captures the magic and romance of a wedding day set against the lush and enchanting backdrop of Summer Leisure Garden. This project aims to provide newlyweds with a beautifully crafted video montage that encapsulates the most memorable moments of their special day.',
86 | tech_stack: [
87 | 'Cinematic Videography',
88 | 'Summer Leisure Garden',
89 | 'Filmora X',
90 | 'iPhone 13 Pro',
91 | ],
92 | source_link: 'https://youtu.be/kX58qHrBia0?si=Mzxe8EmELiHA6nOq',
93 | },
94 | {
95 | image_url: 'https://imgur.com/FypSU6k.jpg',
96 | project_name: 'Pre Convo #Uitm Seremban',
97 | description:
98 | 'The Pre-Convocation Photoshoot at Tamarind Square is an exciting project that offers graduating students a vibrant urban setting for capturing their achievements and celebrating their upcoming convocation. Set in the modern and creative atmosphere of Tamarind Square, this project aims to provide graduates with a memorable and contemporary photography experience.',
99 | tech_stack: ['Photography', 'Tamarind Square', 'Canon 1300D'],
100 | source_link: 'https://imgur.com/a/rodqhYT',
101 | },
102 | {
103 | image_url: 'https://i.imgur.com/T1mhvjU.jpg',
104 | project_name: 'Pre Convo #Uitm Penang',
105 | description:
106 | 'The Pre-Convocation UiTM Photoshoot project is designed to capture the memorable moments of graduating students from Universiti Teknologi MARA (UiTM) in the lead-up to their convocation ceremony. This project aims to provide graduates with a professional and unforgettable photography experience, creating lasting memories of their academic journey and achievements.',
107 | tech_stack: ['Photography', 'Tamarind Square', 'Canon 1300D'],
108 | source_link: 'https://imgur.com/a/GbZR06g',
109 | },
110 | {
111 | image_url: 'https://i.imgur.com/T1vFWvP.jpg',
112 | project_name: 'Pre Wedding #UnaFarhat',
113 | description:
114 | "Pre-wedding photoshoot at the picturesque Taman Saujana Hijau in Putrajaya. This project aims to create a visual narrative that encapsulates the unique love story of Una and her partner, highlighting the natural beauty of the location while focusing on the couple's genuine connection and emotions.",
115 | tech_stack: ['Photography', 'Taman Saujana', 'Canon 1300D'],
116 | source_link: 'https://imgur.com/a/IOl6r5S',
117 | },
118 |
119 | // Add more projects as needed
120 | ]
121 |
122 | return (
123 |
124 |
Featured Projects
125 |
126 | Deployed 20+ prototypes, websites, mobile applications and 3D models.
127 | Collaborated in projects with 10+ clients. Feel free to contact me for any inquiries.
128 |
129 |
130 | {projectData.map((project, id) => (
131 |
139 | ))}
140 |
141 |
142 | )
143 | }
144 |
145 | export default Projects
146 |
--------------------------------------------------------------------------------