warlock/portfolio_jenna
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Sewmina 2025-03-12 06:55:45 +05:30
commit 32ecca0578
66 changed files with 20798 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
.gitignore vendored Normal file
View File

@ -0,0 +1,39 @@
.DS_STORE
node_modules
scripts/flow/*/.flowconfig
.flowconfig
*~
*.pyc
.grunt
_SpecRunner.html
__benchmarks__
build/
remote-repo/
coverage/
.module-cache
fixtures/dom/public/react-dom.js
fixtures/dom/public/react.js
test/the-files-to-test.generated.js
*.log*
chrome-user-data
*.sublime-project
*.sublime-workspace
.idea
*.iml
.vscode
*.swp
*.swo
packages/react-devtools-core/dist
packages/react-devtools-extensions/chrome/build
packages/react-devtools-extensions/chrome/*.crx
packages/react-devtools-extensions/chrome/*.pem
packages/react-devtools-extensions/firefox/build
packages/react-devtools-extensions/firefox/*.xpi
packages/react-devtools-extensions/firefox/*.pem
packages/react-devtools-extensions/shared/build
packages/react-devtools-extensions/.tempUserDataDir
packages/react-devtools-fusebox/dist
packages/react-devtools-inline/dist
packages/react-devtools-shell/dist
packages/react-devtools-timeline/dist

17865
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

50
package.json Normal file
View File

@ -0,0 +1,50 @@
{
"name": "jenna-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"aos": "^2.3.4",
"bootstrap": "^5.3.0",
"html-react-parser": "^4.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.2",
"react-scripts": "5.0.1",
"react-scroll": "^1.8.9",
"react-slick": "^0.29.0",
"react-type-animation": "^3.1.0",
"slick-carousel": "^1.8.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@iconify/react": "^4.1.1",
"sass": "^1.64.1"
}
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/images/about-banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
public/images/avatar-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
public/images/avatar-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
public/images/avatar-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
public/images/avatar-4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

12
public/images/brand-1.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="133" height="35" viewBox="0 0 133 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.5856 12.25C30.9456 12.25 31.0656 12.38 31.0656 12.73V20.65H35.1356C35.4856 20.65 35.6156 20.78 35.6156 21.13V21.83C35.6156 22.18 35.4856 22.31 35.1356 22.31H29.7756C29.4256 22.31 29.2856 22.18 29.2856 21.83V12.73C29.2856 12.38 29.4256 12.25 29.7756 12.25H30.5856Z" fill="#fff"/>
<path d="M39.1655 15.74C39.1655 13.43 40.6255 12.04 43.1655 12.04C45.7055 12.04 47.1655 13.43 47.1655 15.74V18.82C47.1655 21.13 45.6955 22.52 43.1655 22.52C40.6355 22.52 39.1655 21.13 39.1655 18.82V15.74ZM45.4855 15.74C45.4855 14.44 44.6755 13.74 43.2155 13.74C41.7555 13.74 40.9555 14.45 40.9555 15.74V18.84C40.9555 20.15 41.7555 20.84 43.2155 20.84C44.6755 20.84 45.4855 20.12 45.4855 18.84V15.74Z" fill="#fff"/>
<path d="M59.0756 16.8C59.4656 16.8 59.5556 16.93 59.5556 17.28V19.18C59.5662 19.6275 59.4765 20.0718 59.2931 20.4801C59.1096 20.8885 58.8372 21.2506 58.4956 21.54C57.6473 22.2155 56.5777 22.5506 55.4956 22.48C52.9056 22.48 51.4956 21.09 51.4956 18.78V15.68C51.4956 13.4 52.9556 12 55.4956 12C57.4956 12 58.7956 12.79 59.3456 14.37C59.3764 14.4294 59.3929 14.4951 59.3938 14.5619C59.3947 14.6288 59.38 14.695 59.3509 14.7551C59.3218 14.8153 59.279 14.8679 59.226 14.9087C59.173 14.9494 59.1112 14.9773 59.0456 14.99L58.2656 15.26C57.9256 15.38 57.7856 15.31 57.6656 14.96C57.4999 14.5329 57.1966 14.1731 56.8036 13.9377C56.4106 13.7023 55.9504 13.6045 55.4956 13.66C54.0256 13.66 53.2256 14.37 53.2256 15.66V18.84C53.2256 20.15 54.0356 20.84 55.4956 20.84C56.9556 20.84 57.8556 20.17 57.8556 19.19V18.45H55.6856C55.3256 18.45 55.1956 18.31 55.1956 17.96V17.28C55.1956 16.93 55.3256 16.8 55.6856 16.8H59.0756Z" fill="#fff"/>
<path d="M63.6855 15.74C63.6855 13.43 65.1456 12.04 67.6856 12.04C70.2256 12.04 71.6856 13.43 71.6856 15.74V18.82C71.6856 21.13 70.2156 22.52 67.6856 22.52C65.1556 22.52 63.6855 21.13 63.6855 18.82V15.74ZM69.9955 15.74C69.9955 14.44 69.1855 13.74 67.7355 13.74C66.2855 13.74 65.4655 14.45 65.4655 15.74V18.84C65.4655 20.15 66.2755 20.84 67.7355 20.84C69.1955 20.84 69.9955 20.12 69.9955 18.84V15.74Z" fill="#fff"/>
<path d="M76.3955 12.54C76.3955 12.32 76.4655 12.25 76.6855 12.25H77.1455C77.3655 12.25 77.4155 12.32 77.4155 12.54V22.02C77.4155 22.24 77.4155 22.31 77.1455 22.31H76.6855C76.4655 22.31 76.3955 22.24 76.3955 22.02V12.54Z" fill="#fff"/>
<path d="M86.5254 12.25C87.3582 12.25 88.1568 12.5808 88.7457 13.1697C89.3346 13.7585 89.6654 14.5572 89.6654 15.39C89.6654 16.2228 89.3346 17.0215 88.7457 17.6103C88.1568 18.1992 87.3582 18.53 86.5254 18.53H83.5254V22.02C83.5254 22.24 83.4754 22.31 83.2654 22.31H82.7954C82.5854 22.31 82.5054 22.24 82.5054 22.02V12.54C82.5054 12.32 82.5854 12.25 82.7954 12.25H86.5254ZM86.4354 17.54C86.7217 17.54 87.0052 17.4836 87.2697 17.3741C87.5341 17.2645 87.7745 17.1039 87.9769 16.9015C88.1793 16.6991 88.3399 16.4587 88.4495 16.1943C88.559 15.9298 88.6154 15.6463 88.6154 15.36C88.6154 15.0737 88.559 14.7902 88.4495 14.5257C88.3399 14.2613 88.1793 14.0209 87.9769 13.8185C87.7745 13.6161 87.5341 13.4555 87.2697 13.3459C87.0052 13.2364 86.7217 13.18 86.4354 13.18H83.4354V17.54H86.4354Z" fill="#fff"/>
<path d="M97.4753 12.0501C98.2474 11.9649 99.0263 12.131 99.6965 12.5237C100.366 12.9165 100.892 13.5149 101.195 14.2301C101.275 14.3901 101.195 14.5201 101.035 14.6001L100.595 14.8001C100.415 14.8701 100.345 14.8601 100.235 14.6701C100.009 14.1393 99.6192 13.6943 99.123 13.3995C98.6269 13.1047 98.0498 12.9753 97.4753 13.0301C95.7853 13.0301 94.8653 13.7001 94.8653 14.9001C94.8555 15.2668 94.9786 15.6248 95.2121 15.9078C95.4455 16.1908 95.7734 16.3799 96.1353 16.4401C96.6731 16.6155 97.2308 16.723 97.7953 16.7601C98.4786 16.7965 99.1527 16.9347 99.7953 17.1701C100.288 17.326 100.712 17.6466 100.996 18.0782C101.28 18.5098 101.407 19.026 101.355 19.5401C101.355 21.4101 99.9953 22.5401 97.4953 22.5401C96.6753 22.6339 95.8479 22.4439 95.151 22.0017C94.4541 21.5596 93.9297 20.8919 93.6653 20.1101C93.6476 20.0745 93.6381 20.0354 93.6373 19.9956C93.6365 19.9558 93.6446 19.9164 93.6608 19.8801C93.677 19.8438 93.7011 19.8115 93.7313 19.7856C93.7614 19.7596 93.7969 19.7407 93.8353 19.7301L94.2753 19.5701C94.3099 19.5559 94.3472 19.5491 94.3846 19.5501C94.422 19.5511 94.4588 19.5599 94.4927 19.5759C94.5265 19.5919 94.5567 19.6147 94.5812 19.643C94.6058 19.6713 94.6242 19.7043 94.6353 19.7401C94.859 20.305 95.2568 20.784 95.771 21.1077C96.2852 21.4313 96.8892 21.5828 97.4953 21.5401C99.3853 21.5401 100.315 20.8801 100.315 19.5401C100.333 19.1879 100.225 18.8408 100.011 18.5606C99.7965 18.2805 99.4898 18.0854 99.1453 18.0101C98.6279 17.8558 98.0943 17.7618 97.5553 17.7301L96.4753 17.5901C96.1373 17.5184 95.8035 17.4282 95.4753 17.3201C95.1511 17.2222 94.8489 17.0626 94.5853 16.8501C94.32 16.6099 94.1109 16.3143 93.9726 15.9842C93.8344 15.6541 93.7704 15.2977 93.7853 14.9401C93.8553 13.1901 95.1653 12.0501 97.4753 12.0501Z" fill="#fff"/>
<path d="M106.745 18.89C106.787 19.5972 107.098 20.2615 107.614 20.7472C108.13 21.2329 108.812 21.5033 109.52 21.5033C110.228 21.5033 110.91 21.2329 111.426 20.7472C111.942 20.2615 112.252 19.5972 112.295 18.89V12.54C112.295 12.32 112.365 12.25 112.585 12.25H113.045C113.265 12.25 113.335 12.32 113.335 12.54V18.88C113.335 21.15 111.995 22.52 109.525 22.52C107.055 22.52 105.715 21.15 105.715 18.88V12.54C105.715 12.32 105.785 12.25 105.995 12.25H106.465C106.675 12.25 106.745 12.32 106.745 12.54V18.89Z" fill="#fff"/>
<path d="M127.136 12.25C127.356 12.25 127.426 12.32 127.426 12.54V22.02C127.426 22.24 127.356 22.31 127.136 22.31H126.716C126.506 22.31 126.436 22.24 126.436 22.02V16.25C126.436 15.4105 126.493 14.5719 126.606 13.74H126.546C126.234 14.5007 125.869 15.2391 125.456 15.95L123.306 19.74C123.28 19.8058 123.234 19.862 123.175 19.9013C123.116 19.9405 123.047 19.961 122.976 19.96H122.696C122.624 19.9604 122.554 19.9397 122.493 19.9007C122.433 19.8616 122.385 19.8058 122.356 19.74L120.176 15.91C119.789 15.2093 119.455 14.4806 119.176 13.73H119.116C119.218 14.5695 119.272 15.4143 119.276 16.26V22.02C119.276 22.24 119.206 22.31 118.986 22.31H118.596C118.376 22.31 118.306 22.24 118.306 22.02V12.54C118.306 12.32 118.376 12.25 118.596 12.25H118.956C119.038 12.2424 119.121 12.2603 119.192 12.3015C119.264 12.3427 119.321 12.4051 119.356 12.48L122.856 18.7L126.336 12.54C126.446 12.33 126.506 12.3 126.726 12.3L127.136 12.25Z" fill="#fff"/>
<path d="M12.7954 20.79V28.02C12.7954 28.2972 12.6853 28.563 12.4893 28.7589C12.2934 28.9549 12.0276 29.065 11.7504 29.065C11.4733 29.065 11.2075 28.9549 11.0115 28.7589C10.8155 28.563 10.7054 28.2972 10.7054 28.02V20.8C10.9964 21.0125 11.3452 21.1311 11.7054 21.14C12.098 21.1512 12.4827 21.0277 12.7954 20.79ZM21.6954 18.7C21.4302 18.7 21.1758 18.8054 20.9883 18.9929C20.8008 19.1804 20.6954 19.4348 20.6954 19.7V20.96C20.6954 21.2372 20.8055 21.503 21.0015 21.6989C21.1974 21.8949 21.4632 22.005 21.7404 22.005C22.0176 22.005 22.2834 21.8949 22.4793 21.6989C22.6753 21.503 22.7854 21.2372 22.7854 20.96V19.75C22.7932 19.6066 22.77 19.4632 22.7174 19.3296C22.6648 19.196 22.5841 19.0752 22.4806 18.9756C22.3772 18.876 22.2535 18.7998 22.1181 18.7522C21.9826 18.7047 21.8384 18.6869 21.6954 18.7ZM8.43543 23.53C8.0756 23.5192 7.72726 23.4008 7.43543 23.19V30.44C7.43543 30.7185 7.54605 30.9856 7.74297 31.1825C7.93988 31.3794 8.20695 31.49 8.48543 31.49C8.76391 31.49 9.03098 31.3794 9.22789 31.1825C9.42481 30.9856 9.53543 30.7185 9.53543 30.44V23.24C9.20888 23.4511 8.82359 23.5527 8.43543 23.53ZM18.4354 16.53C18.2999 16.5232 18.1645 16.5441 18.0373 16.5913C17.9102 16.6385 17.794 16.7111 17.6957 16.8046C17.5975 16.8982 17.5194 17.0107 17.466 17.1354C17.4127 17.2601 17.3852 17.3944 17.3854 17.53V23.1C17.3854 23.3785 17.496 23.6456 17.6929 23.8425C17.8899 24.0394 18.1569 24.15 18.4354 24.15C18.7139 24.15 18.981 24.0394 19.1779 23.8425C19.3748 23.6456 19.4854 23.3785 19.4854 23.1V17.6C19.4934 17.4557 19.47 17.3114 19.4168 17.177C19.3636 17.0426 19.282 16.9213 19.1774 16.8215C19.0728 16.7217 18.9479 16.6457 18.8112 16.5989C18.6745 16.552 18.5292 16.5353 18.3854 16.55L18.4354 16.53ZM15.1154 18.67C14.7387 18.6674 14.3721 18.5487 14.0654 18.33V25.6C14.0654 25.8785 14.176 26.1456 14.3729 26.3425C14.5699 26.5394 14.8369 26.65 15.1154 26.65C15.3939 26.65 15.6609 26.5394 15.8579 26.3425C16.0548 26.1456 16.1654 25.8785 16.1654 25.6V18.34C15.8482 18.5763 15.4609 18.6995 15.0654 18.69L15.1154 18.67ZM6.16543 24.24V3.93C6.1628 3.68243 6.0626 3.44591 5.8866 3.27178C5.7106 3.09765 5.47301 2.99999 5.22543 3H5.00543C4.75785 2.99999 4.52026 3.09765 4.34426 3.27178C4.16826 3.44591 4.06806 3.68243 4.06543 3.93V24.24C4.06543 24.4893 4.16447 24.7284 4.34075 24.9047C4.51703 25.081 4.75613 25.18 5.00543 25.18H5.22543C5.47474 25.18 5.71383 25.081 5.89011 24.9047C6.0664 24.7284 6.16543 24.4893 6.16543 24.24ZM8.54543 22.76H8.32543C8.07613 22.76 7.83703 22.661 7.66075 22.4847C7.48447 22.3084 7.38543 22.0693 7.38543 21.82V6.35C7.38807 6.10244 7.48826 5.8659 7.66426 5.69178C7.84026 5.51765 8.07785 5.41999 8.32543 5.42H8.54543C8.79301 5.41999 9.0306 5.51765 9.2066 5.69178C9.3826 5.8659 9.4828 6.10244 9.48543 6.35V21.84C9.48543 22.0893 9.38639 22.3284 9.21011 22.5047C9.03383 22.681 8.79473 22.78 8.54543 22.78V22.76ZM11.8554 20.38H11.6254C11.3788 20.38 11.1422 20.282 10.9678 20.1076C10.7934 19.9332 10.6954 19.6967 10.6954 19.45V8.75C10.6941 8.62703 10.7172 8.50502 10.7633 8.39103C10.8094 8.27704 10.8777 8.17334 10.9642 8.08592C11.0507 7.9985 11.1537 7.9291 11.2672 7.88174C11.3807 7.83438 11.5024 7.80999 11.6254 7.81H11.8554C12.103 7.81264 12.3395 7.91283 12.5136 8.08883C12.6878 8.26483 12.7854 8.50242 12.7854 8.75V19.45C12.7854 19.6967 12.6874 19.9332 12.513 20.1076C12.3386 20.282 12.1021 20.38 11.8554 20.38ZM15.1654 17.93H14.9554C14.7078 17.93 14.4702 17.8324 14.2942 17.6582C14.1182 17.4841 14.018 17.2476 14.0154 17V11.24C14.0072 11.1116 14.0254 10.9829 14.069 10.8618C14.1125 10.7408 14.1805 10.6299 14.2686 10.5362C14.3567 10.4424 14.4631 10.3678 14.5813 10.3168C14.6994 10.2659 14.8267 10.2397 14.9554 10.24H15.1754C15.4247 10.24 15.6638 10.339 15.8401 10.5153C16.0164 10.6916 16.1154 10.9307 16.1154 11.18V16.98C16.1167 17.1043 16.0934 17.2276 16.0467 17.3428C16.0001 17.458 15.9311 17.5628 15.8436 17.6512C15.7562 17.7395 15.6522 17.8096 15.5374 17.8575C15.4227 17.9054 15.2997 17.93 15.1754 17.93H15.1654ZM18.4854 15.78H18.2654C18.0161 15.78 17.777 15.681 17.6007 15.5047C17.4244 15.3284 17.3254 15.0893 17.3254 14.84V13.35C17.328 13.1024 17.4282 12.8659 17.6042 12.6918C17.7802 12.5176 18.0178 12.42 18.2654 12.42H18.4854C18.733 12.42 18.9706 12.5176 19.1466 12.6918C19.3226 12.8659 19.4228 13.1024 19.4254 13.35V14.84C19.4254 15.0876 19.3278 15.3252 19.1536 15.5012C18.9795 15.6772 18.743 15.7774 18.4954 15.78H18.4854Z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

15
public/images/brand-2.svg Normal file
View File

@ -0,0 +1,15 @@
<svg width="141" height="31" viewBox="0 0 141 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.0655 13.871C22.6865 14.2523 22.3963 14.7125 22.2155 15.2187C22.0347 15.725 21.9678 16.2649 22.0195 16.8L22.0015 16.782C22.0547 17.4119 21.9697 18.0457 21.7526 18.6394C21.5355 19.233 21.1915 19.7721 20.7446 20.2191C20.2976 20.666 19.7585 21.0101 19.1648 21.2271C18.5712 21.4442 17.9373 21.5292 17.3075 21.476L17.3255 21.494C16.5721 21.4239 15.8154 21.5878 15.1585 21.9635C14.5017 22.3392 13.9767 22.9083 13.6552 23.5933C13.3337 24.2783 13.2312 25.0457 13.3618 25.7911C13.4925 26.5364 13.8498 27.2233 14.3851 27.7581C14.9204 28.2929 15.6076 28.6496 16.353 28.7795C17.0985 28.9095 17.8658 28.8063 18.5505 28.4842C19.2352 28.162 19.8038 27.6366 20.1789 26.9794C20.554 26.3222 20.7173 25.5654 20.6465 24.812L20.6655 24.83C20.6123 24.2002 20.6972 23.5663 20.9143 22.9726C21.1314 22.379 21.4755 21.8399 21.9224 21.3929C22.3694 20.946 22.9085 20.6019 23.5021 20.3849C24.0958 20.1678 24.7296 20.0828 25.3595 20.136L25.3405 20.118C25.9559 20.1733 26.5754 20.0724 27.1415 19.8246C27.7075 19.5768 28.2019 19.1901 28.5787 18.7004C28.9555 18.2107 29.2027 17.6337 29.2971 17.0231C29.3916 16.4124 29.3304 15.7878 29.1192 15.207C28.908 14.6263 28.5536 14.1083 28.0889 13.701C27.6242 13.2937 27.0642 13.0103 26.4608 12.8771C25.8574 12.7439 25.2301 12.7651 24.6371 12.9388C24.0441 13.1126 23.5046 13.4332 23.0685 13.871H23.0655Z" fill="#fff"/>
<path d="M15.6886 19.136L15.6696 19.118C16.2049 19.1719 16.7455 19.1062 17.2524 18.9256C17.7592 18.745 18.2196 18.4541 18.6002 18.0738C18.9807 17.6935 19.2721 17.2333 19.453 16.7266C19.634 16.2199 19.7001 15.6794 19.6466 15.144L19.6656 15.162C19.6124 14.5321 19.6974 13.8983 19.9144 13.3046C20.1315 12.711 20.4756 12.1719 20.9225 11.7249C21.3695 11.278 21.9086 10.9339 22.5022 10.7169C23.0959 10.4998 23.7297 10.4148 24.3596 10.468L24.3406 10.45C25.0941 10.5208 25.851 10.3574 26.5082 9.9821C27.1655 9.60684 27.6909 9.03797 28.0129 8.3531C28.3349 7.66824 28.4378 6.90071 28.3076 6.1552C28.1774 5.40969 27.8204 4.72251 27.2852 4.18737C26.7501 3.65224 26.0629 3.2952 25.3174 3.16498C24.5719 3.03475 23.8044 3.13766 23.1195 3.45968C22.4346 3.78169 21.8658 4.30714 21.4905 4.96435C21.1152 5.62155 20.9518 6.37852 21.0226 7.132L21.0046 7.113C21.0579 7.74289 20.9731 8.37683 20.7561 8.97055C20.5391 9.56427 20.195 10.1035 19.7481 10.5505C19.3011 10.9974 18.7619 11.3415 18.1682 11.5585C17.5744 11.7755 16.9405 11.8603 16.3106 11.807L16.3286 11.826C15.7933 11.7721 15.2526 11.8378 14.7458 12.0184C14.239 12.1989 13.7786 12.4899 13.398 12.8702C13.0174 13.2505 12.7261 13.7107 12.5451 14.2174C12.3642 14.7241 12.2981 15.2646 12.3516 15.8L12.3336 15.782C12.3866 16.4118 12.3015 17.0456 12.0844 17.6392C11.8672 18.2327 11.5232 18.7718 11.0763 19.2187C10.6294 19.6656 10.0904 20.0096 9.4968 20.2268C8.90324 20.4439 8.26945 20.529 7.63964 20.476L7.65764 20.494C6.90416 20.4232 6.14719 20.5866 5.48998 20.9619C4.83278 21.3372 4.30733 21.906 3.98532 22.5909C3.6633 23.2758 3.56038 24.0433 3.69061 24.7888C3.82084 25.5343 4.17788 26.2215 4.71301 26.7566C5.24815 27.2918 5.93533 27.6488 6.68084 27.779C7.42635 27.9092 8.19388 27.8063 8.87875 27.4843C9.56361 27.1623 10.1325 26.6369 10.5077 25.9797C10.883 25.3224 11.0464 24.5655 10.9756 23.812L10.9946 23.83C10.9414 23.2001 11.0264 22.5663 11.2435 21.9726C11.4605 21.379 11.8046 20.8399 12.2515 20.3929C12.6985 19.946 13.2376 19.6019 13.8312 19.3849C14.4249 19.1678 15.0587 19.0828 15.6886 19.136Z" fill="#fff"/>
<path d="M8.9867 17.1289C9.36572 16.7477 9.6559 16.2875 9.83654 15.7812C10.0172 15.2749 10.0838 14.7349 10.0317 14.1999L10.0507 14.2179C9.99749 13.5879 10.0824 12.9538 10.2997 12.36C10.5169 11.7662 10.8611 11.227 11.3083 10.78C11.7555 10.333 12.2948 9.98907 12.8887 9.77212C13.4826 9.55516 14.1167 9.47046 14.7467 9.52394L14.7277 9.50594C15.4809 9.57651 16.2376 9.41302 16.8945 9.03778C17.5514 8.66255 18.0765 8.09382 18.3984 7.40917C18.7202 6.72451 18.823 5.95726 18.6928 5.21203C18.5626 4.4668 18.2056 3.77988 17.6707 3.24494C17.1358 2.71 16.4488 2.35308 15.7036 2.22286C14.9584 2.09263 14.1911 2.19545 13.5065 2.51727C12.8218 2.83909 12.2531 3.36426 11.8779 4.02116C11.5026 4.67806 11.3391 5.43472 11.4097 6.18794L11.3917 6.16994C11.4449 6.79979 11.3599 7.43366 11.1428 8.0273C10.9257 8.62094 10.5817 9.16005 10.1348 9.60701C9.68781 10.0539 9.14869 10.398 8.55505 10.615C7.96141 10.8321 7.32755 10.9171 6.6977 10.8639L6.7157 10.8819C6.10027 10.8267 5.48086 10.9278 4.91488 11.1757C4.3489 11.4236 3.85465 11.8104 3.47794 12.3002C3.10123 12.7899 2.85425 13.3669 2.75987 13.9775C2.6655 14.5882 2.72679 15.2128 2.93806 15.7934C3.14933 16.3741 3.50376 16.892 3.96849 17.2992C4.43322 17.7065 4.99322 17.9898 5.5966 18.123C6.19997 18.2561 6.8272 18.2348 7.42017 18.0611C8.01313 17.8873 8.55263 17.5667 8.98869 17.1289H8.9867Z" fill="#fff"/>
<path d="M39.9634 7.15503H42.9334V21.608H39.9634V7.15503Z" fill="#fff"/>
<path d="M44.6154 16.6591C44.6113 15.6205 44.9155 14.6039 45.4895 13.7383C46.0635 12.8727 46.8815 12.1969 47.8399 11.7966C48.7983 11.3962 49.8539 11.2893 50.8731 11.4894C51.8923 11.6895 52.8292 12.1875 53.5651 12.9205C54.301 13.6534 54.8028 14.5883 55.007 15.6067C55.2112 16.6251 55.1085 17.6812 54.712 18.6412C54.3155 19.6011 53.643 20.4219 52.7797 20.9993C51.9163 21.5768 50.9011 21.8851 49.8624 21.8851C49.173 21.893 48.4889 21.7633 47.8501 21.5037C47.2113 21.2441 46.6307 20.8598 46.1422 20.3733C45.6536 19.8867 45.267 19.3076 45.0049 18.6699C44.7427 18.0322 44.6103 17.3486 44.6154 16.6591ZM52.1394 16.6591C52.127 16.2114 51.9829 15.7773 51.7252 15.411C51.4674 15.0448 51.1074 14.7626 50.6902 14.5999C50.2729 14.4371 49.817 14.4009 49.3793 14.4959C48.9416 14.5909 48.5416 14.8127 48.2293 15.1338C47.9171 15.4548 47.7063 15.8608 47.6236 16.301C47.5408 16.7411 47.5895 17.1959 47.7638 17.6085C47.9381 18.0211 48.2301 18.3731 48.6033 18.6206C48.9766 18.8681 49.4146 19.0001 49.8624 19.0001C50.1691 19.0083 50.4742 18.9528 50.7585 18.8372C51.0427 18.7216 51.2999 18.5484 51.5138 18.3285C51.7277 18.1085 51.8938 17.8466 52.0014 17.5593C52.1091 17.272 52.1561 16.9655 52.1394 16.6591Z" fill="#fff"/>
<path d="M66.9464 11.7091V21.1091C66.9464 24.4351 64.3524 25.8411 61.7194 25.8411C60.7924 25.9105 59.8641 25.7232 59.0364 25.2999C58.2088 24.8765 57.5137 24.2334 57.0274 23.4411L59.5614 21.9761C59.7658 22.3891 60.0915 22.7298 60.4948 22.9527C60.8982 23.1755 61.36 23.2699 61.8184 23.2231C62.1114 23.2637 62.4098 23.2379 62.6915 23.1476C62.9731 23.0573 63.2309 22.9048 63.4457 22.7015C63.6605 22.4981 63.8268 22.2491 63.9324 21.9727C64.0379 21.6964 64.0799 21.3999 64.0554 21.1051V20.2001C63.7076 20.6256 63.265 20.9637 62.7629 21.1872C62.2608 21.4107 61.7134 21.5134 61.1644 21.4871C59.8582 21.4459 58.6193 20.8981 57.7099 19.9595C56.8005 19.021 56.292 17.7654 56.292 16.4586C56.292 15.1518 56.8005 13.8962 57.7099 12.9577C58.6193 12.0191 59.8582 11.4713 61.1644 11.4301C61.7134 11.4038 62.2608 11.5065 62.7629 11.73C63.265 11.9535 63.7076 12.2916 64.0554 12.7171V11.7071L66.9464 11.7091ZM64.0564 16.4601C64.0764 15.9815 63.9526 15.5078 63.7011 15.1001C63.4496 14.6923 63.0818 14.3692 62.6451 14.1723C62.2084 13.9753 61.7228 13.9136 61.2507 13.995C60.7786 14.0764 60.3417 14.2972 59.9961 14.6291C59.6506 14.9609 59.4123 15.3885 59.3118 15.8569C59.2114 16.3253 59.2534 16.8131 59.4326 17.2574C59.6117 17.7017 59.9197 18.0823 60.3169 18.3501C60.7141 18.6179 61.1824 18.7607 61.6614 18.7601C61.9735 18.7819 62.2866 18.7381 62.5807 18.6315C62.8748 18.5249 63.1433 18.3578 63.3689 18.1412C63.5945 17.9245 63.7723 17.663 63.8907 17.3734C64.0091 17.0839 64.0656 16.7728 64.0564 16.4601Z" fill="#fff"/>
<path d="M68.6286 16.6591C68.6245 15.6205 68.9286 14.6039 69.5027 13.7383C70.0767 12.8727 70.8947 12.1969 71.8531 11.7966C72.8115 11.3962 73.8671 11.2893 74.8863 11.4894C75.9055 11.6895 76.8424 12.1875 77.5783 12.9205C78.3142 13.6534 78.816 14.5883 79.0202 15.6067C79.2244 16.6251 79.1217 17.6812 78.7252 18.6412C78.3287 19.6011 77.6562 20.4219 76.7929 20.9993C75.9295 21.5768 74.9143 21.8851 73.8756 21.8851C73.1862 21.893 72.502 21.7633 71.8633 21.5037C71.2245 21.2441 70.6439 20.8598 70.1554 20.3733C69.6668 19.8867 69.2802 19.3076 69.0181 18.6699C68.7559 18.0322 68.6235 17.3486 68.6286 16.6591ZM76.1526 16.6591C76.1402 16.2114 75.9961 15.7773 75.7384 15.411C75.4806 15.0448 75.1206 14.7626 74.7034 14.5999C74.2861 14.4371 73.8301 14.4009 73.3925 14.4959C72.9548 14.5909 72.5548 14.8127 72.2425 15.1338C71.9303 15.4548 71.7195 15.8608 71.6367 16.301C71.5539 16.7411 71.6027 17.1959 71.777 17.6085C71.9513 18.0211 72.2433 18.3731 72.6165 18.6206C72.9898 18.8681 73.4277 19.0001 73.8756 19.0001C74.1823 19.0083 74.4874 18.9528 74.7716 18.8372C75.0559 18.7216 75.3131 18.5484 75.527 18.3285C75.7409 18.1085 75.907 17.8466 76.0146 17.5593C76.1223 17.272 76.1693 16.9655 76.1526 16.6591Z" fill="#fff"/>
<path d="M80.5073 9.05593C80.5073 8.70348 80.6118 8.35895 80.8076 8.06591C81.0034 7.77286 81.2818 7.54445 81.6074 7.40958C81.933 7.2747 82.2913 7.23941 82.637 7.30817C82.9826 7.37693 83.3002 7.54665 83.5494 7.79587C83.7986 8.04508 83.9683 8.3626 84.0371 8.70828C84.1058 9.05395 84.0705 9.41225 83.9357 9.73787C83.8008 10.0634 83.5724 10.3418 83.2793 10.5376C82.9863 10.7334 82.6418 10.8379 82.2893 10.8379C81.8182 10.8332 81.3676 10.644 81.0344 10.3108C80.7013 9.97763 80.512 9.52709 80.5073 9.05593ZM80.8073 11.7089H83.7783V21.6089H80.8033L80.8073 11.7089Z" fill="#fff"/>
<path d="M96.6027 16.659C96.637 17.3133 96.5417 17.9679 96.3221 18.5852C96.1026 19.2025 95.7632 19.7703 95.3234 20.256C94.8837 20.7416 94.3522 21.1356 93.7597 21.4152C93.1671 21.6947 92.5252 21.8544 91.8707 21.885C91.3203 21.915 90.7702 21.8222 90.2601 21.6133C89.75 21.4043 89.2929 21.0845 88.9217 20.677V25.568H85.9517V11.709H88.9217V12.639C89.293 12.2318 89.7503 11.9122 90.2603 11.7035C90.7704 11.4947 91.3204 11.402 91.8707 11.432C92.5253 11.4625 93.1674 11.6221 93.7601 11.9017C94.3528 12.1813 94.8843 12.5753 95.3241 13.0611C95.7639 13.5469 96.1033 14.1149 96.3227 14.7324C96.5421 15.3498 96.6373 16.0046 96.6027 16.659ZM93.6327 16.659C93.6211 16.1957 93.4731 15.7461 93.2072 15.3664C92.9413 14.9868 92.5694 14.694 92.138 14.5248C91.7065 14.3555 91.2347 14.3172 90.7816 14.4148C90.3285 14.5123 89.9143 14.7413 89.5907 15.0731C89.2671 15.405 89.0486 15.8248 88.9625 16.2803C88.8764 16.7357 88.9265 17.2063 89.1066 17.6334C89.2866 18.0605 89.5887 18.4249 89.9749 18.6812C90.3611 18.9374 90.8142 19.0741 91.2777 19.074C91.5959 19.0882 91.9135 19.0349 92.2097 18.9177C92.5058 18.8006 92.7739 18.6221 92.9962 18.3941C93.2186 18.166 93.3902 17.8936 93.4999 17.5946C93.6096 17.2956 93.6549 16.9767 93.6327 16.659Z" fill="#fff"/>
<path d="M105.768 18.6381C105.768 20.9151 103.789 21.8851 101.651 21.8851C100.787 21.9633 99.9193 21.7807 99.1604 21.3606C98.4015 20.9406 97.7861 20.3026 97.3936 19.5291L99.9666 18.0641C100.071 18.4216 100.294 18.7327 100.6 18.9452C100.906 19.1578 101.276 19.2591 101.647 19.2321C102.359 19.2321 102.716 19.0141 102.716 18.6191C102.716 17.5291 97.8446 18.1041 97.8446 14.6791C97.8446 12.5201 99.6666 11.4321 101.726 11.4321C102.5 11.4076 103.266 11.5912 103.945 11.9637C104.624 12.3363 105.191 12.8841 105.586 13.5501L103.052 14.9161C102.941 14.6568 102.756 14.4359 102.52 14.281C102.284 14.1261 102.008 14.0441 101.726 14.0451C101.211 14.0451 100.894 14.2451 100.894 14.5991C100.898 15.7281 105.768 14.9751 105.768 18.6381Z" fill="#fff"/>
<path d="M116.617 11.709V21.609H113.647V20.678C113.304 21.0888 112.869 21.4125 112.377 21.6225C111.885 21.8325 111.351 21.9228 110.817 21.886C108.817 21.886 107.117 20.461 107.117 17.786V11.709H110.087V17.351C110.062 17.5868 110.089 17.8252 110.166 18.0495C110.242 18.2739 110.367 18.4789 110.531 18.6502C110.695 18.8215 110.894 18.955 111.115 19.0415C111.335 19.128 111.572 19.1654 111.809 19.151C112.898 19.151 113.65 18.518 113.65 17.112V11.712L116.617 11.709Z" fill="#fff"/>
<path d="M133.646 15.53V21.608H130.676V15.787C130.676 14.797 130.201 14.164 129.251 14.164C128.261 14.164 127.706 14.857 127.706 16.025V21.608H124.737V15.787C124.737 14.797 124.262 14.164 123.311 14.164C122.321 14.164 121.767 14.857 121.767 16.025V21.608H118.797V11.708H121.767V12.618C122.075 12.2143 122.479 11.8941 122.942 11.6868C123.406 11.4794 123.914 11.3915 124.42 11.431C124.928 11.4061 125.434 11.5134 125.889 11.7423C126.343 11.9711 126.73 12.3139 127.013 12.737C127.342 12.2943 127.778 11.9423 128.28 11.7139C128.782 11.4855 129.334 11.3882 129.884 11.431C132.157 11.432 133.646 13.055 133.646 15.53Z" fill="#fff"/>
<path d="M136.159 11.648C137.376 11.648 138.363 10.6612 138.363 9.44399C138.363 8.22675 137.376 7.23999 136.159 7.23999C134.942 7.23999 133.955 8.22675 133.955 9.44399C133.955 10.6612 134.942 11.648 136.159 11.648Z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/images/contact-us.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
public/images/dotnet_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

14
public/images/effect-1.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

9
public/images/effect-2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

58
public/images/effect-3.svg Normal file
View File

@ -0,0 +1,58 @@
<svg width="139" height="108" viewBox="0 0 139 108" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M135.27 1.63957C135.27 2.54507 136.006 3.27913 136.914 3.27913C137.822 3.27913 138.558 2.54507 138.558 1.63957C138.558 0.734059 137.822 3.96919e-08 136.914 0C136.006 -3.96915e-08 135.27 0.734059 135.27 1.63957Z" fill="#7AE7C7"/>
<path d="M136.914 20.7044C136.004 20.7044 135.27 19.9727 135.27 19.0649C135.27 18.157 136.004 17.4253 136.914 17.4253C137.825 17.4253 138.558 18.157 138.558 19.0649C138.558 19.9727 137.825 20.7044 136.914 20.7044Z" fill="#7AE7C7"/>
<path d="M136.914 38.1165C136.004 38.1165 135.27 37.3848 135.27 36.477C135.27 35.5691 136.004 34.8374 136.914 34.8374C137.825 34.8374 138.558 35.5691 138.558 36.477C138.558 37.3848 137.825 38.1165 136.914 38.1165Z" fill="#7AE7C7"/>
<path d="M135.27 53.8891C135.27 54.7946 136.006 55.5286 136.914 55.5286C137.822 55.5286 138.558 54.7946 138.558 53.8891C138.558 52.9836 137.822 52.2495 136.914 52.2495C136.006 52.2495 135.27 52.9836 135.27 53.8891Z" fill="#7AE7C7"/>
<path d="M135.27 71.3007C135.27 72.2062 136.006 72.9403 136.914 72.9403C137.822 72.9403 138.558 72.2062 138.558 71.3007C138.558 70.3952 137.822 69.6611 136.914 69.6611C136.006 69.6611 135.27 70.3952 135.27 71.3007Z" fill="white"/>
<path d="M136.914 90.3661C136.004 90.3661 135.27 89.6343 135.27 88.7265C135.27 87.8186 136.004 87.0869 136.914 87.0869C137.825 87.0869 138.558 87.8186 138.558 88.7265C138.558 89.6343 137.825 90.3661 136.914 90.3661Z" fill="#7AE7C7"/>
<path d="M135.27 106.138C135.27 107.044 136.006 107.778 136.914 107.778C137.822 107.778 138.558 107.044 138.558 106.138C138.558 105.233 137.822 104.499 136.914 104.499C136.006 104.499 135.27 105.233 135.27 106.138Z" fill="#7AE7C7"/>
<path d="M117.592 3.2928C116.681 3.2928 115.948 2.5611 115.948 1.65324C115.948 0.745379 116.681 0.0136719 117.592 0.0136719C118.502 0.0136719 119.236 0.745379 119.236 1.65324C119.236 2.5611 118.502 3.2928 117.592 3.2928Z" fill="white"/>
<path d="M117.592 20.7044C116.681 20.7044 115.948 19.9727 115.948 19.0649C115.948 18.157 116.681 17.4253 117.592 17.4253C118.502 17.4253 119.236 18.157 119.236 19.0649C119.236 19.9727 118.502 20.7044 117.592 20.7044Z" fill="#7AE7C7"/>
<path d="M117.592 38.1165C116.681 38.1165 115.948 37.3848 115.948 36.477C115.948 35.5691 116.681 34.8374 117.592 34.8374C118.502 34.8374 119.236 35.5691 119.236 36.477C119.236 37.3848 118.502 38.1165 117.592 38.1165Z" fill="#7AE7C7"/>
<path d="M117.592 55.5286C116.681 55.5286 115.948 54.7969 115.948 53.8891C115.948 52.9812 116.681 52.2495 117.592 52.2495C118.502 52.2495 119.236 52.9812 119.236 53.8891C119.236 54.7969 118.502 55.5286 117.592 55.5286Z" fill="#7AE7C7"/>
<path d="M117.592 72.9403C116.681 72.9403 115.948 72.2086 115.948 71.3007C115.948 70.3928 116.681 69.6611 117.592 69.6611C118.502 69.6611 119.236 70.3928 119.236 71.3007C119.236 72.2086 118.502 72.9403 117.592 72.9403Z" fill="#7AE7C7"/>
<path d="M117.592 90.3661C116.681 90.3661 115.948 89.6343 115.948 88.7265C115.948 87.8186 116.681 87.0869 117.592 87.0869C118.502 87.0869 119.236 87.8186 119.236 88.7265C119.236 89.6343 118.502 90.3661 117.592 90.3661Z" fill="#7AE7C7"/>
<path d="M117.592 107.778C116.681 107.778 115.948 107.046 115.948 106.138C115.948 105.23 116.681 104.499 117.592 104.499C118.502 104.499 119.236 105.23 119.236 106.138C119.236 107.046 118.502 107.778 117.592 107.778Z" fill="#7AE7C7"/>
<path d="M96.6121 1.63957C96.6121 2.54507 97.348 3.27913 98.256 3.27913C99.164 3.27913 99.9001 2.54507 99.9001 1.63957C99.9001 0.734059 99.164 3.96918e-08 98.256 0C97.348 -3.96916e-08 96.6121 0.734059 96.6121 1.63957Z" fill="#7AE7C7"/>
<path d="M98.256 20.7044C97.346 20.7044 96.6121 19.9727 96.6121 19.0649C96.6121 18.157 97.346 17.4253 98.256 17.4253C99.166 17.4253 99.9001 18.157 99.9001 19.0649C99.9001 19.9727 99.166 20.7044 98.256 20.7044Z" fill="#7AE7C7"/>
<path d="M98.256 38.1165C97.346 38.1165 96.6121 37.3848 96.6121 36.477C96.6121 35.5691 97.346 34.8374 98.256 34.8374C99.166 34.8374 99.9001 35.5691 99.9001 36.477C99.9001 37.3848 99.166 38.1165 98.256 38.1165Z" fill="white"/>
<path d="M96.6121 53.8891C96.6121 54.7946 97.348 55.5286 98.256 55.5286C99.164 55.5286 99.9001 54.7946 99.9001 53.8891C99.9001 52.9836 99.164 52.2495 98.256 52.2495C97.348 52.2495 96.6121 52.9836 96.6121 53.8891Z" fill="#7AE7C7"/>
<path d="M96.6121 71.3007C96.6121 72.2062 97.348 72.9403 98.256 72.9403C99.164 72.9403 99.9001 72.2062 99.9001 71.3007C99.9001 70.3952 99.164 69.6611 98.256 69.6611C97.348 69.6611 96.6121 70.3952 96.6121 71.3007Z" fill="#7AE7C7"/>
<path d="M98.256 90.3661C97.346 90.3661 96.6121 89.6343 96.6121 88.7265C96.6121 87.8186 97.346 87.0869 98.256 87.0869C99.166 87.0869 99.9001 87.8186 99.9001 88.7265C99.9001 89.6343 99.166 90.3661 98.256 90.3661Z" fill="#7AE7C7"/>
<path d="M96.6121 106.138C96.6121 107.044 97.348 107.778 98.256 107.778C99.164 107.778 99.9001 107.044 99.9001 106.138C99.9001 105.233 99.164 104.499 98.256 104.499C97.348 104.499 96.6121 105.233 96.6121 106.138Z" fill="#7AE7C7"/>
<path d="M78.9341 3.2928C78.0231 3.2928 77.2891 2.5611 77.2891 1.65324C77.2891 0.745379 78.0231 0.0136719 78.9341 0.0136719C79.8441 0.0136719 80.5781 0.745379 80.5781 1.65324C80.5781 2.5611 79.8441 3.2928 78.9341 3.2928Z" fill="#7AE7C7"/>
<path d="M78.9341 20.7044C78.0231 20.7044 77.2891 19.9727 77.2891 19.0649C77.2891 18.157 78.0231 17.4253 78.9341 17.4253C79.8441 17.4253 80.5781 18.157 80.5781 19.0649C80.5781 19.9727 79.8441 20.7044 78.9341 20.7044Z" fill="#7AE7C7"/>
<path d="M78.9341 38.1165C78.0231 38.1165 77.2891 37.3848 77.2891 36.477C77.2891 35.5691 78.0231 34.8374 78.9341 34.8374C79.8441 34.8374 80.5781 35.5691 80.5781 36.477C80.5781 37.3848 79.8441 38.1165 78.9341 38.1165Z" fill="#7AE7C7"/>
<path d="M78.9341 55.5286C78.0231 55.5286 77.2891 54.7969 77.2891 53.8891C77.2891 52.9812 78.0231 52.2495 78.9341 52.2495C79.8441 52.2495 80.5781 52.9812 80.5781 53.8891C80.5781 54.7969 79.8441 55.5286 78.9341 55.5286Z" fill="#7AE7C7"/>
<path d="M78.9341 72.9403C78.0231 72.9403 77.2891 72.2086 77.2891 71.3007C77.2891 70.3928 78.0231 69.6611 78.9341 69.6611C79.8441 69.6611 80.5781 70.3928 80.5781 71.3007C80.5781 72.2086 79.8441 72.9403 78.9341 72.9403Z" fill="white"/>
<path d="M78.9341 90.3661C78.0231 90.3661 77.2891 89.6343 77.2891 88.7265C77.2891 87.8186 78.0231 87.0869 78.9341 87.0869C79.8441 87.0869 80.5781 87.8186 80.5781 88.7265C80.5781 89.6343 79.8441 90.3661 78.9341 90.3661Z" fill="#7AE7C7"/>
<path d="M78.9341 107.778C78.0231 107.778 77.2891 107.046 77.2891 106.138C77.2891 105.23 78.0231 104.499 78.9341 104.499C79.8441 104.499 80.5781 105.23 80.5781 106.138C80.5781 107.046 79.8441 107.778 78.9341 107.778Z" fill="#7AE7C7"/>
<path d="M57.967 1.63957C57.967 2.54507 58.703 3.27913 59.611 3.27913C60.519 3.27913 61.256 2.54507 61.256 1.63957C61.256 0.734059 60.519 3.96919e-08 59.611 0C58.703 -3.96915e-08 57.967 0.734059 57.967 1.63957Z" fill="#7AE7C7"/>
<path d="M59.611 20.7044C58.701 20.7044 57.967 19.9727 57.967 19.0649C57.967 18.157 58.701 17.4253 59.611 17.4253C60.522 17.4253 61.256 18.157 61.256 19.0649C61.256 19.9727 60.522 20.7044 59.611 20.7044Z" fill="#7AE7C7"/>
<path d="M59.611 38.1165C58.701 38.1165 57.967 37.3848 57.967 36.477C57.967 35.5691 58.701 34.8374 59.611 34.8374C60.522 34.8374 61.256 35.5691 61.256 36.477C61.256 37.3848 60.522 38.1165 59.611 38.1165Z" fill="#7AE7C7"/>
<path d="M57.967 53.8891C57.967 54.7946 58.703 55.5286 59.611 55.5286C60.519 55.5286 61.256 54.7946 61.256 53.8891C61.256 52.9836 60.519 52.2495 59.611 52.2495C58.703 52.2495 57.967 52.9836 57.967 53.8891Z" fill="#7AE7C7"/>
<path d="M57.967 71.3007C57.967 72.2062 58.703 72.9403 59.611 72.9403C60.519 72.9403 61.256 72.2062 61.256 71.3007C61.256 70.3952 60.519 69.6611 59.611 69.6611C58.703 69.6611 57.967 70.3952 57.967 71.3007Z" fill="#7AE7C7"/>
<path d="M59.611 90.3661C58.701 90.3661 57.967 89.6343 57.967 88.7265C57.967 87.8186 58.701 87.0869 59.611 87.0869C60.522 87.0869 61.256 87.8186 61.256 88.7265C61.256 89.6343 60.522 90.3661 59.611 90.3661Z" fill="#7AE7C7"/>
<path d="M57.967 106.138C57.967 107.044 58.703 107.778 59.611 107.778C60.519 107.778 61.256 107.044 61.256 106.138C61.256 105.233 60.519 104.499 59.611 104.499C58.703 104.499 57.967 105.233 57.967 106.138Z" fill="#7AE7C7"/>
<path d="M38.645 1.63957C38.645 2.54507 39.381 3.27913 40.289 3.27913C41.197 3.27913 41.933 2.54507 41.933 1.63957C41.933 0.734059 41.197 3.96917e-08 40.289 0C39.381 -3.96918e-08 38.645 0.734059 38.645 1.63957Z" fill="#7AE7C7"/>
<path d="M40.289 20.7044C39.379 20.7044 38.645 19.9727 38.645 19.0649C38.645 18.157 39.379 17.4253 40.289 17.4253C41.2 17.4253 41.933 18.157 41.933 19.0649C41.933 19.9727 41.2 20.7044 40.289 20.7044Z" fill="#7AE7C7"/>
<path d="M40.289 38.1165C39.379 38.1165 38.645 37.3848 38.645 36.477C38.645 35.5691 39.379 34.8374 40.289 34.8374C41.2 34.8374 41.933 35.5691 41.933 36.477C41.933 37.3848 41.2 38.1165 40.289 38.1165Z" fill="#7AE7C7"/>
<path d="M38.645 53.8891C38.645 54.7946 39.381 55.5286 40.289 55.5286C41.197 55.5286 41.933 54.7946 41.933 53.8891C41.933 52.9836 41.197 52.2495 40.289 52.2495C39.381 52.2495 38.645 52.9836 38.645 53.8891Z" fill="white"/>
<path d="M38.645 71.3007C38.645 72.2062 39.381 72.9403 40.289 72.9403C41.197 72.9403 41.933 72.2062 41.933 71.3007C41.933 70.3952 41.197 69.6611 40.289 69.6611C39.381 69.6611 38.645 70.3952 38.645 71.3007Z" fill="#7AE7C7"/>
<path d="M40.289 90.3661C39.379 90.3661 38.645 89.6343 38.645 88.7265C38.645 87.8186 39.379 87.0869 40.289 87.0869C41.2 87.0869 41.933 87.8186 41.933 88.7265C41.933 89.6343 41.2 90.3661 40.289 90.3661Z" fill="#7AE7C7"/>
<path d="M38.645 106.138C38.645 107.044 39.381 107.778 40.289 107.778C41.197 107.778 41.933 107.044 41.933 106.138C41.933 105.233 41.197 104.499 40.289 104.499C39.381 104.499 38.645 105.233 38.645 106.138Z" fill="#7AE7C7"/>
<path d="M20.9668 3.2928C20.0558 3.2928 19.3228 2.5611 19.3228 1.65324C19.3228 0.745379 20.0558 0.0136719 20.9668 0.0136719C21.8768 0.0136719 22.6107 0.745379 22.6107 1.65324C22.6107 2.5611 21.8768 3.2928 20.9668 3.2928Z" fill="#7AE7C7"/>
<path d="M20.9668 20.7044C20.0558 20.7044 19.3228 19.9727 19.3228 19.0649C19.3228 18.157 20.0558 17.4253 20.9668 17.4253C21.8768 17.4253 22.6107 18.157 22.6107 19.0649C22.6107 19.9727 21.8768 20.7044 20.9668 20.7044Z" fill="#7AE7C7"/>
<path d="M20.9668 38.1165C20.0558 38.1165 19.3228 37.3848 19.3228 36.477C19.3228 35.5691 20.0558 34.8374 20.9668 34.8374C21.8768 34.8374 22.6107 35.5691 22.6107 36.477C22.6107 37.3848 21.8768 38.1165 20.9668 38.1165Z" fill="#7AE7C7"/>
<path d="M20.9668 55.5286C20.0558 55.5286 19.3228 54.7969 19.3228 53.8891C19.3228 52.9812 20.0558 52.2495 20.9668 52.2495C21.8768 52.2495 22.6107 52.9812 22.6107 53.8891C22.6107 54.7969 21.8768 55.5286 20.9668 55.5286Z" fill="#7AE7C7"/>
<path d="M20.9668 72.9403C20.0558 72.9403 19.3228 72.2086 19.3228 71.3007C19.3228 70.3928 20.0558 69.6611 20.9668 69.6611C21.8768 69.6611 22.6107 70.3928 22.6107 71.3007C22.6107 72.2086 21.8768 72.9403 20.9668 72.9403Z" fill="#7AE7C7"/>
<path d="M20.9668 90.3661C20.0558 90.3661 19.3228 89.6343 19.3228 88.7265C19.3228 87.8186 20.0558 87.0869 20.9668 87.0869C21.8768 87.0869 22.6107 87.8186 22.6107 88.7265C22.6107 89.6343 21.8768 90.3661 20.9668 90.3661Z" fill="white"/>
<path d="M20.9668 107.778C20.0558 107.778 19.3228 107.046 19.3228 106.138C19.3228 105.23 20.0558 104.499 20.9668 104.499C21.8768 104.499 22.6107 105.23 22.6107 106.138C22.6107 107.046 21.8768 107.778 20.9668 107.778Z" fill="#7AE7C7"/>
<path d="M0 1.63957C0 2.54507 0.736989 3.27913 1.64499 3.27913C2.55299 3.27913 3.289 2.54507 3.289 1.63957C3.289 0.734059 2.55299 3.96917e-08 1.64499 0C0.736989 -3.96919e-08 0 0.734059 0 1.63957Z" fill="#7AE7C7"/>
<path d="M1.64499 20.7044C0.733989 20.7044 0 19.9727 0 19.0649C0 18.157 0.733989 17.4253 1.64499 17.4253C2.55499 17.4253 3.289 18.157 3.289 19.0649C3.289 19.9727 2.55499 20.7044 1.64499 20.7044Z" fill="white"/>
<path d="M1.64499 38.1165C0.733989 38.1165 0 37.3848 0 36.477C0 35.5691 0.733989 34.8374 1.64499 34.8374C2.55499 34.8374 3.289 35.5691 3.289 36.477C3.289 37.3848 2.55499 38.1165 1.64499 38.1165Z" fill="#7AE7C7"/>
<path d="M0 53.8891C0 54.7946 0.736989 55.5286 1.64499 55.5286C2.55299 55.5286 3.289 54.7946 3.289 53.8891C3.289 52.9836 2.55299 52.2495 1.64499 52.2495C0.736989 52.2495 0 52.9836 0 53.8891Z" fill="#7AE7C7"/>
<path d="M0 71.3007C0 72.2062 0.736989 72.9403 1.64499 72.9403C2.55299 72.9403 3.289 72.2062 3.289 71.3007C3.289 70.3952 2.55299 69.6611 1.64499 69.6611C0.736989 69.6611 0 70.3952 0 71.3007Z" fill="#7AE7C7"/>
<path d="M1.64499 90.3661C0.733989 90.3661 0 89.6343 0 88.7265C0 87.8186 0.733989 87.0869 1.64499 87.0869C2.55499 87.0869 3.289 87.8186 3.289 88.7265C3.289 89.6343 2.55499 90.3661 1.64499 90.3661Z" fill="#7AE7C7"/>
<path d="M0 106.138C0 107.044 0.736989 107.778 1.64499 107.778C2.55299 107.778 3.289 107.044 3.289 106.138C3.289 105.233 2.55299 104.499 1.64499 104.499C0.736989 104.499 0 105.233 0 106.138Z" fill="#7AE7C7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

3
public/images/effect-4.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/images/fiverr_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/images/flutter_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
public/images/home-banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
public/images/home-banner_bkp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

9
public/images/logo-light.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="156" height="35" viewBox="0 0 156 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M47.8762 31.0225C45.1497 31.0225 42.9786 30.2776 41.363 28.7877C39.7725 27.2978 38.9773 25.2144 38.9773 22.5377V20.0377H43.9758V22.5377C43.9758 23.7245 44.304 24.6589 44.9604 25.3407C45.6168 25.9973 46.5382 26.3255 47.7247 26.3255C48.8355 26.3255 49.6938 25.9973 50.2997 25.3407C50.9309 24.6841 51.2464 23.7498 51.2464 22.5377V8.52251H46.7023V3.97705H59.2744V8.52251H56.245V22.5377C56.245 25.2902 55.5002 27.3988 54.0108 28.8634C52.5213 30.3028 50.4764 31.0225 47.8762 31.0225Z" fill="white"/>
<path d="M63.3774 30.4922V3.97705H80.4178V8.52251H68.3759V14.8483H79.3575V19.3937H68.3759V25.9467H80.645V30.4922H63.3774Z" fill="white"/>
<path d="M84.3451 30.4922V3.97705H93.8499L99.1135 27.0831H99.7951V3.97705H104.718V30.4922H95.2131L89.9495 7.38614H89.2679V30.4922H84.3451Z" fill="white"/>
<path d="M109.714 30.4922V3.97705H119.218L124.482 27.0831H125.164V3.97705H130.086V30.4922H120.582L115.318 7.38614H114.636V30.4922H109.714Z" fill="white"/>
<path d="M133.264 30.4922L140.232 3.97705H148.941L155.909 30.4922H150.759L149.32 24.6589H139.853L138.414 30.4922H133.264ZM141.027 20.0377H148.146L144.927 7.12099H144.246L141.027 20.0377Z" fill="white"/>
<rect width="35" height="35" rx="3" fill="#0788FF"/>
<path d="M18.9419 31.0225C21.6684 31.0225 23.8395 30.2776 25.4552 28.7877C27.0456 27.2978 27.8408 25.2144 27.8408 22.5377V20.0377H22.8423V22.5377C22.8423 23.7245 22.5141 24.6589 21.8577 25.3407C21.2014 25.9973 20.2799 26.3255 19.0934 26.3255C17.9826 26.3255 17.1243 25.9973 16.5184 25.3407C15.8873 24.6841 15.5717 23.7498 15.5717 22.5377V8.52251L21.7067 18.8634L16.934 3.97705H7.54375V8.52251H10.5732V22.5377C10.5732 25.2902 11.3179 27.3988 12.8074 28.8634C14.2968 30.3028 16.3417 31.0225 18.9419 31.0225Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
public/images/nodejs_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
public/images/popup-project-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/images/popup-project-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/images/popup-project-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/images/popup-project-4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/images/popup-project-5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/images/popup-project-6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/images/service-01.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/images/service-02.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/images/service-03.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/images/service-04.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/images/unity_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

15
public/index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Laralink React.js App" />
<title>Jenna- ReactJs Portfolio Template</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

23
src/App.js Normal file
View File

@ -0,0 +1,23 @@
import { Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import Layout from './components/Layout';
import Aos from 'aos';
import 'aos/dist/aos.css';
import { useEffect } from 'react';
function App() {
useEffect(() => {
Aos.init({
once: true,
});
}, []);
return (
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
</Route>
</Routes>
);
}
export default App;

90
src/components/About.jsx Normal file
View File

@ -0,0 +1,90 @@
import { Icon } from '@iconify/react';
import React from 'react';
import parser from 'html-react-parser';
import { Link as ScrollLink } from 'react-scroll';
export default function About({ data }) {
const { imgSrc, miniTitle, title, description, funfacts, btnText, btnUrl } =
data;
return (
<section className="about-section section" id="about">
<div className="container">
<div className="effect-1">
{/* <img
src="/images/effect-1.svg"
alt="Shape"
data-aos="zoom-in"
data-aos-duration="1200"
data-aos-delay="500"
/> */}
</div>
<div className="effect-2">
<img
src="/images/effect-2.svg"
alt="Shape"
data-aos="zoom-in"
data-aos-duration="1200"
data-aos-delay="400"
/>
</div>
<div className="row align-items-center justify-content-center gy-5">
{/* <div
className="col-lg-6 col-xl-5"
data-aos="fade-right"
data-aos-duration="1200"
data-aos-delay="500"
>
<div className="about-banner text-center">
<img src={imgSrc} alt="Thumb" />
</div>
</div> */}
<div className="col-lg-6 col-xl-10 px-lg-5">
<div
className="about-text"
data-aos="fade"
data-aos-duration="1200"
data-aos-delay="400"
>
<div className="section-heading">
{miniTitle && (
<h6>
<span>{miniTitle}</span>
</h6>
)}
{title && <h2>{parser(title)}</h2>}
</div>
<p>{description}</p>
<div className="review-box">
{funfacts?.map((item, index) => (
<div className="r-box" key={index}>
<h3>
{item.number}
<span>+</span>
</h3>
<label>{item.title}</label>
</div>
))}
</div>
<div className="btn-bar">
<ScrollLink
to={btnUrl}
spy={true}
smooth={true}
offset={-80}
duration={300}
className="px-btn"
>
<span>{btnText}</span>{' '}
<i>
<Icon icon="bi:arrow-right" />
</i>
</ScrollLink>
</div>
</div>
</div>
</div>
</div>
</section>
);
}

62
src/components/Brands.jsx Normal file
View File

@ -0,0 +1,62 @@
import React from 'react';
import Slider from 'react-slick';
export default function Brands({ data }) {
var settings = {
dots: false,
arrows: false,
infinite: true,
autoplay: false,
autoplaySpeed: 4000,
speed: 1000,
slidesToShow: 5,
slidesToScroll: 1,
initialSlide: 0,
responsive: [
{
breakpoint: 1400,
settings: {
slidesToShow: 4,
},
},
{
breakpoint: 1200,
settings: {
slidesToShow: 3,
},
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
},
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
},
},
],
};
return (
<div className="py-3 py-md-4 brand-section gray-bg">
<div
className="container"
data-aos="fade"
data-aos-duration="1200"
data-aos-delay="500"
>
<Slider {...settings} className="slider-gap-50">
{data.map((item, index) => (
<div key={index}>
<div className="pt-3 pb-3 text-center d-flex align-items-center justify-content-center w-100">
<img src={item.src} alt={item.alt} className="w-100" />
</div>
</div>
))}
</Slider>
</div>
</div>
);
}

44
src/components/Contact.jsx Normal file
View File

@ -0,0 +1,44 @@
import React from 'react';
import SocialBtns from './SocialBtns';
import ContactInfo from './ContactInfo';
import ContactForm from './ContactForm';
export default function Contact({ data, socialData }) {
const { sectionHeading, contactImg, contactInfo } = data;
return (
<section id="contactus" className="section contactus-section">
<div className="container">
<div className="contactus-box rounded oveflow-hidden gray-bg">
<div className="row g-0 p-4 p-lg-5">
<div className="col-lg-4" />
<div className="col-lg-8">
<div
className="contactus-title"
data-aos="fade-left"
data-aos-duration="1200"
data-aos-delay="200"
>
<h5>{sectionHeading.title}</h5>
<p className="m-0">{sectionHeading.subTitle}</p>
</div>
</div>
</div>
<div className="row g-0 contactus-form p-4 p-lg-5 flex-row-reverse">
<div className="col-lg-8">
<div className="contact-form">
<ContactForm />
</div>
</div>
<div className="col-lg-4 pe-md-5">
<div className="contact-banner d-none d-lg-block">
<img src={contactImg} title alt="Avatar" />
</div>
<ContactInfo contactInfoData={contactInfo} />
<SocialBtns socialBtns={socialData} />
</div>
</div>
</div>
</div>
</section>
);
}

117
src/components/ContactForm.jsx Normal file
View File

@ -0,0 +1,117 @@
import React, { useState } from 'react';
export default function ContactForm() {
const [loading, setLoading] = useState(false);
const [formData, setFormData] = useState({
name: '',
email: '',
subject: '',
message: '',
});
// Handler for input field changes
const handleInputChange = event => {
const { name, value } = event.target;
setFormData(prevFormData => ({
...prevFormData,
[name]: value,
}));
};
const onSubmit = async event => {
event.preventDefault();
setLoading(true);
const formData = new FormData(event.target);
formData.append('access_key', '6d7bc3fc-6190-43c5-8298-89ac5ef7494f');
const object = Object.fromEntries(formData);
const json = JSON.stringify(object);
const res = await fetch('https://api.web3forms.com/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
body: json,
}).then(res => res.json());
if (res.success) {
setFormData({ name: '', email: '', subject: '', message: '' });
setLoading(false);
}
};
return (
<form id="contact-form" onSubmit={onSubmit}>
<div className="row gx-3 gy-4">
<div className="col-md-6">
<div className="form-group">
<label className="form-label">Your Name</label>
<input
name="name"
placeholder="Name *"
className="form-control"
type="text"
value={formData.name}
onChange={handleInputChange}
required
/>
</div>
</div>
<div className="col-md-6">
<div className="form-group">
<label className="form-label">Your Email</label>
<input
name="email"
placeholder="Email *"
className="form-control"
type="email"
value={formData.email}
onChange={handleInputChange}
required
/>
</div>
</div>
<div className="col-12">
<div className="form-group">
<label className="form-label">Subject</label>
<input
name="subject"
placeholder="Subject *"
className="form-control"
type="text"
value={formData.subject}
onChange={handleInputChange}
required
/>
</div>
</div>
<div className="col-md-12">
<div className="form-group">
<label className="form-label">Your message</label>
<textarea
name="message"
placeholder="Your message *"
rows={4}
className="form-control"
value={formData.message}
onChange={handleInputChange}
required
/>
</div>
</div>
<div className="col-md-12">
<div className="send">
<button
className={`px-btn w-100 ${loading ? 'disabled' : ''}`}
type="submit"
>
{loading ? 'Sending...' : 'Send Message'}
</button>
</div>
</div>
</div>
</form>
);
}

21
src/components/ContactInfo.jsx Normal file
View File

@ -0,0 +1,21 @@
import React from 'react';
export default function ContactInfo({ contactInfoData }) {
return (
<div className="contact-info">
{contactInfoData.map((item, index) => (
<div
className="contact-info-in"
key={index}
data-aos="fade-up"
data-aos-duration="1200"
data-aos-delay={index * 100}
>
<label>{item.title}</label>
{item.email && <a href={`mailto:${item.email}`}>{item.email}</a>}
{item.tel && <a href={`tel:${item.tel}`}>{item.tel}</a>}
</div>
))}
</div>
);
}

74
src/components/CustomCursor.jsx Normal file
View File

@ -0,0 +1,74 @@
import React from 'react';
const CustomCursor = () => {
const cursorSm = React.useRef(null);
const cursorLg = React.useRef(null);
const positionRef = React.useRef({
mouseX: 0,
mouseY: 0,
destinationX: 0,
destinationY: 0,
distanceX: 0,
distanceY: 0,
key: -1,
});
React.useEffect(() => {
document.addEventListener('mousemove', event => {
const { clientX, clientY } = event;
const mouseX = clientX;
const mouseY = clientY;
positionRef.current.mouseX = mouseX - cursorSm.current.clientWidth / 2;
positionRef.current.mouseY = mouseY - cursorSm.current.clientHeight / 2;
positionRef.current.mouseX = mouseX - cursorLg.current.clientWidth / 2;
positionRef.current.mouseY = mouseY - cursorLg.current.clientHeight / 2;
});
return () => {};
}, []);
React.useEffect(() => {
const followMouse = () => {
positionRef.current.key = requestAnimationFrame(followMouse);
const {
mouseX,
mouseY,
destinationX,
destinationY,
distanceX,
distanceY,
} = positionRef.current;
if (!destinationX || !destinationY) {
positionRef.current.destinationX = mouseX;
positionRef.current.destinationY = mouseY;
} else {
positionRef.current.distanceX = (mouseX - destinationX) * 0.1;
positionRef.current.distanceY = (mouseY - destinationY) * 0.1;
if (
Math.abs(positionRef.current.distanceX) +
Math.abs(positionRef.current.distanceY) <
0.1
) {
positionRef.current.destinationX = mouseX;
positionRef.current.destinationY = mouseY;
} else {
positionRef.current.destinationX += distanceX;
positionRef.current.destinationY += distanceY;
}
}
cursorSm.current.style.transform = `translate3d(${destinationX}px, ${destinationY}px, 0)`;
cursorLg.current.style.transform = `translate3d(${destinationX}px, ${destinationY}px, 0)`;
};
followMouse();
}, []);
return (
<>
<div className="cs-cursor_lg" ref={cursorLg}></div>
<div className="cs-cursor_sm" ref={cursorSm}></div>
</>
);
};
export default CustomCursor;

47
src/components/Experience.jsx Normal file
View File

@ -0,0 +1,47 @@
import React from 'react';
import SectionHeading from './SectionHeading';
export default function Experience({ data }) {
const { sectionHeading, allExperience } = data;
return (
<section className="section gray-bg">
<div className="container">
<SectionHeading
miniTitle={sectionHeading.miniTitle}
title={sectionHeading.title}
/>
<div className="row gy-3">
{allExperience?.map((item, index) => (
<div
className="col-12"
key={index}
data-aos="fade-up"
data-aos-duration="1200"
data-aos-delay={index * 100}
>
<div className="ex-box">
<div className="row gy-4">
<div className="col-md-4 col-lg-3">
<div className="ex-left">
<h4>{item.designation}</h4>
<span>{item.company}</span>
<p>{item.duration}</p>
<label>{item.jobType}</label>
</div>
</div>
<div className="col-md-8 col-lg-9">
<div className="ex-right">
<h5>{item.companyTitle}</h5>
<p className="m-0">{item.companyDescription}</p>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</section>
);
}

11
src/components/Footer.jsx Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
export default function Footer() {
return (
<footer className="footer">
<div className="container">
<p className="m-0 text-center">© 2023 copyright all right reserved</p>
</div>
</footer>
);
}

126
src/components/Header.jsx Normal file
View File

@ -0,0 +1,126 @@
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Link as ScrollLink } from 'react-scroll';
export default function Header() {
const [mobileToggle, setMobileToggle] = useState(false);
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const handleScroll = () => {
const scrollY = window.scrollY;
if (scrollY > 50) {
setScrolled(true);
} else {
setScrolled(false);
}
};
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return (
<div
className={`header-top-fixed one-page-nav ${
mobileToggle ? 'menu-open menu-open-desk' : ''
} ${scrolled ? 'fixed-header' : ''}`}
>
<div className="container">
<div className="logo">
<Link className="navbar-brand" href="#">
<img
className="logo-light"
title
alt="Logo"
src="/images/logo-light.svg"
/>
</Link>
</div>
{/* / */}
<ul className="main-menu">
<li>
<ScrollLink
to="home"
spy={true}
smooth={true}
offset={-80}
duration={500}
onClick={() => setMobileToggle(false)}
>
Home
</ScrollLink>
</li>
<li>
<ScrollLink
to="about"
spy={true}
smooth={true}
offset={-80}
duration={500}
onClick={() => setMobileToggle(false)}
>
About Me
</ScrollLink>
</li>
<li>
<ScrollLink
to="project"
spy={true}
smooth={true}
offset={-80}
duration={500}
onClick={() => setMobileToggle(false)}
>
Projects
</ScrollLink>
</li>
<li>
<ScrollLink
to="services"
spy={true}
smooth={true}
offset={-80}
duration={500}
onClick={() => setMobileToggle(false)}
>
Services
</ScrollLink>
</li>
<li>
<ScrollLink
to="contactus"
spy={true}
smooth={true}
offset={-80}
duration={500}
onClick={() => setMobileToggle(false)}
>
Contact
</ScrollLink>
</li>
</ul>
{/* Top Menu */}
<div className="d-flex">
<ScrollLink
to="contactus"
spy={true}
smooth={true}
offset={-80}
duration={500}
onClick={() => setMobileToggle(false)}
className="px-btn d-none d-lg-inline-flex"
>
Lets' Talk
</ScrollLink>
<button
className="toggler-menu d-lg-none"
onClick={() => setMobileToggle(!mobileToggle)}
>
<span />
</button>
</div>
{/* / */}
</div>
</div>
);
}

81
src/components/Hero.jsx Normal file
View File

@ -0,0 +1,81 @@
import { Icon } from '@iconify/react';
import React from 'react';
import { TypeAnimation } from 'react-type-animation';
import { Link as ScrollLink } from 'react-scroll';
import SocialBtns from './SocialBtns';
export default function Hero({ data, socialData }) {
const { imgUrl, name, heading, typingText, description, btnText, btnUrl } =
data;
return (
<section className="home-section" id="home" data-scroll-index={0}>
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6">
<div className="hs-text-box">
<h6 data-aos="fade-up" data-aos-duration="1200">
<span>{name}</span>
</h6>
<h1
data-aos="fade-up"
data-aos-duration="1200"
data-aos-delay="100"
>
{heading}
</h1>
<h2
data-aos="fade-up"
data-aos-duration="1200"
data-aos-delay="200"
>
<TypeAnimation
sequence={typingText}
speed={0}
repeat={Infinity}
/>
</h2>
<p
className="text"
data-aos="fade-up"
data-aos-duration="1200"
data-aos-delay="300"
>
{description}
</p>
<div
className="btn-bar d-flex align-items-sm-center flex-column flex-sm-row"
data-aos="fade-up"
data-aos-duration="1200"
data-aos-delay="400"
>
<ScrollLink
to={btnUrl}
spy={true}
smooth={true}
offset={-80}
duration={500}
className="px-btn"
>
<span>{btnText}</span>{' '}
<i className="d-flex">
<Icon icon="bi:arrow-right" />
</i>
</ScrollLink>
<SocialBtns
socialBtns={socialData}
variant="ps-sm-4 pt-4 pt-sm-0 d-flex justify-content-center justify-content-sm-start"
/>
</div>
</div>
</div>
<div className="col-lg-6">
<div className="hs-banner">
<img src={imgUrl} title alt="Admin" />
</div>
</div>
</div>
</div>
</section>
);
}

21
src/components/Layout.jsx Normal file
View File

@ -0,0 +1,21 @@
import React, { useEffect } from 'react';
import { Outlet } from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';
import CustomCursor from './CustomCursor';
export default function Layout() {
useEffect(() => {
window.scrollTo(0, 0);
}, []);
return (
<>
<Header />
<main>
<Outlet />
</main>
<CustomCursor />
<Footer />
</>
);
}

57
src/components/Modal.jsx Normal file
View File

@ -0,0 +1,57 @@
import React from 'react';
import parser from 'html-react-parser';
export default function Modal({ modalData }) {
const { thumbUrl, details } = modalData;
const { title, description, type, langages, platform, country, url } =
details;
return (
<div className="px-modal">
<div className="single-project-box">
<div className="row align-items-start">
<div className="col-lg-7">
<img className="border" src={thumbUrl} title alt="Thumbnail" />
</div>
<div className="col-lg-5 pt-4 pt-lg-0">
{title && <h4>{parser(title)}</h4>}
{description && <p>{parser(description)}</p>}
<div className="about-content">
<ul>
{type && (
<li className="d-flex">
<span className="col-4 col-lg-3">Type:</span>
<span>{type}</span>
</li>
)}
{langages && (
<li className="d-flex">
<span className="col-4 col-lg-3">Langages:</span>
<span>{langages}</span>
</li>
)}
{platform && (
<li className="d-flex">
<span className="col-4 col-lg-3">Platform:</span>
<span>{platform}</span>
</li>
)}
{country && (
<li className="d-flex">
<span className="col-4 col-lg-3">Country:</span>
<span>{country}</span>
</li>
)}
{url && (
<li className="d-flex">
<span className="col-4 col-lg-3">Live URL:</span>
<span>{url}</span>
</li>
)}
</ul>
</div>
</div>
</div>
</div>
</div>
);
}

110
src/components/Projects.jsx Normal file
View File

@ -0,0 +1,110 @@
import { Icon } from '@iconify/react';
import React, { useState } from 'react';
import SectionHeading from './SectionHeading';
import Slider from 'react-slick';
import Modal from './Modal';
export default function Projects({ data }) {
const [modal, setModal] = useState(false);
const [modalType, setModalType] = useState('image');
const [modalData, setModalData] = useState({});
const { sectionHeading, allProjects } = data;
const handelProjectDetails = (item, itemType) => {
if (itemType === 'image') {
setModalData(item);
} else {
setModalData(item);
}
setModalType(itemType);
setModal(!modal);
console.log(modalType);
};
var settings = {
dots: true,
arrows: false,
infinite: true,
autoplay: false,
autoplaySpeed: 4000,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: 0,
variableWidth: true,
};
return (
<>
<section className="project-section section gray-bg" id="project">
<div className="container">
<SectionHeading
miniTitle={sectionHeading.miniTitle}
title={sectionHeading.title}
/>
<div
className="full-width"
data-aos="fade"
data-aos-duration="1200"
data-aos-delay="400"
>
<Slider {...settings} className="slider-gap-24">
{allProjects?.map((item, index) => (
<div key={index} style={{ width: '416px' }}>
<div className="project-box">
<div className="project-media">
<img src={item.thumbUrl} alt="Thumb" />
<span
className="gallery-link"
onClick={() => handelProjectDetails(item, 'details')}
>
<i>
<Icon icon="bi:plus" />
</i>
</span>
</div>
<div className="project-body">
<div className="text">
<h5>{item.title}</h5>
<span>{item.subTitle}</span>
</div>
<div className="link">
<span
className="p-link"
onClick={() => handelProjectDetails(item, 'details')}
>
<Icon icon="bi:arrow-right" />
</span>
</div>
</div>
</div>
</div>
))}
</Slider>
</div>
</div>
</section>
{modal && (
<div className="mfp-wrap">
<div className="mfp-container">
<div className="mfp-bg" onClick={() => setModal(!modal)}></div>
<div className="mfp-content">
<button
type="button"
className="mfp-close"
onClick={() => setModal(!modal)}
>
×
</button>
{modalType === 'image' ? (
<img src={modalData.thumbUrl} alt="Thumbnail" />
) : (
<Modal modalData={modalData} />
)}
</div>
</div>
</div>
)}
</>
);
}

43
src/components/Ratings.jsx Normal file
View File

@ -0,0 +1,43 @@
import { Icon } from '@iconify/react';
import React from 'react';
export default function Ratings({ ratings }) {
return (
<div className="ratings">
<div className="rating">
<i>
<Icon icon="bi:star" />
</i>
<i>
<Icon icon="bi:star" />
</i>
<i>
<Icon icon="bi:star" />
</i>
<i>
<Icon icon="bi:star" />
</i>
<i>
<Icon icon="bi:star" />
</i>
</div>
<div className="rating" style={{ width: `${ratings * 20}%` }}>
<i>
<Icon icon="bi:star-fill" />
</i>
<i>
<Icon icon="bi:star-fill" />
</i>
<i>
<Icon icon="bi:star-fill" />
</i>
<i>
<Icon icon="bi:star-fill" />
</i>
<i>
<Icon icon="bi:star-fill" />
</i>
</div>
</div>
);
}

17
src/components/SectionHeading.jsx Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
import parser from 'html-react-parser';
export default function SectionHeading({ miniTitle, title, variant }) {
return (
<div className={`section-heading ${variant ? variant : ''}`}>
<h6
data-aos={variant === 'text-center' ? 'fade-up' : 'fade-right'}
data-aos-duration="1200"
data-aos-delay="200"
>
<span>{miniTitle}</span>
</h6>
<h2>{parser(title)}</h2>
</div>
);
}

42
src/components/Service.jsx Normal file
View File

@ -0,0 +1,42 @@
import { Icon } from '@iconify/react';
import React from 'react';
import SectionHeading from './SectionHeading';
import Ratings from './Ratings';
export default function Service({ data }) {
const { sectionHeading, allService } = data;
return (
<section className="section" id="services">
<div className="container">
<SectionHeading
miniTitle={sectionHeading.miniTitle}
title={sectionHeading.title}
/>
<div className="row gy-5">
{allService?.map((item, index) => (
<div className="col-sm-6 col-lg-3" key={index}>
<div
className="services-box"
style={{ backgroundImage: `url(${item.imgUrl})` }}
data-aos="fade-left"
data-aos-duration="1200"
data-aos-delay={index * 100}
>
<div className="services-body">
<div className="icon">
<Icon icon={item.icon} />
</div>
<h5>{item.title}</h5>
<p>{item.subTitle}</p>
<div className="rating-wrap">
<Ratings ratings={item.ratings} />
</div>
</div>
</div>
</div>
))}
</div>
</div>
</section>
);
}

25
src/components/SocialBtns.jsx Normal file
View File

@ -0,0 +1,25 @@
import { Icon } from '@iconify/react';
import React from 'react';
import { Link } from 'react-router-dom';
export default function SocialBtns({ variant, socialBtns }) {
return (
<div
className={`social-icon ${variant ? variant : ''}`}
data-aos="zoom-in"
data-aos-duration="1200"
data-aos-delay="300"
>
{socialBtns?.map((item, index) => (
<Link
className={item.iconBgClass}
to={item.href}
key={index}
target="_blank"
>
<Icon icon={item.icon}/>
</Link>
))}
</div>
);
}

53
src/components/Testimonial.jsx Normal file
View File

@ -0,0 +1,53 @@
import React from 'react';
import SectionHeading from './SectionHeading';
import Slider from 'react-slick';
export default function Testimonial({ data }) {
const { sectionHeading, allTestimonial } = data;
var settings = {
dots: true,
arrows: false,
infinite: true,
autoplay: false,
autoplaySpeed: 4000,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: 0,
};
return (
<section className="section effect-section pb-0">
<div className="effect-3">
<img src="/images/effect-3.svg" title alt="" />
</div>
<div className="effect-4">
<img src="/images/effect-4.svg" title alt="" />
</div>
<div className="container">
<SectionHeading
miniTitle={sectionHeading.miniTitle}
title={sectionHeading.title}
variant="text-center"
/>
<div data-aos="fade" data-aos-duration="1200" data-aos-delay="300">
<Slider {...settings}>
{allTestimonial?.map((item, index) => (
<div key={index}>
<div className="testimonial-box">
<div className="t-user">
<img src={item.avatarImg} alt="Avatar" />
</div>
<div className="t-text">{item.reviewText}</div>
<div className="t-person">
<h6>{item.avatarName}</h6>
<span>{item.avatarCompany}</span>
</div>
</div>
</div>
))}
</Slider>
</div>
</div>
</section>
);
}

273
src/data/HomePagdData.json Normal file
View File

@ -0,0 +1,273 @@
{
"hero": {
"imgUrl": "/images/home-banner.png",
"name": "Sewmina Dilshan",
"heading": "Hey! I’m Sewmina",
"typingText": ["I'm a Programmer", 1500, "I'm a Developer", 1500, "I'm a Problem Solver", 1500, "I'm an Out-of-the-box Thinker", 1500],
"description": "I'm a passionate backend developer with a knack for problem-solving and out-of-the-box thinking. Self-taught and always learning, I thrive in building scalable systems and exploring game development. While I tackle frontend when needed, my true focus is crafting efficient, high-performance backend solutions. 🚀",
"btnText": "Get in touch",
"btnUrl": "contactus"
},
"socialBtns": [
{
"icon": "fa-brands:facebook-f",
"iconBgClass": "fiverr",
"href": "https://www.fiverr.com/sewminadilsh973?public_mode=true"
},
{
"icon": "fa-brands:linkedin-in",
"iconBgClass": "linkedin",
"href": "https://www.linkedin.com/in/sewmina-dilshan-b288aa22b"
},
{ "icon": "fa-brands:github", "iconBgClass": "github", "href": "https://github.com/Sewmina7" },
{ "icon": "fa-brands:blogger", "iconBgClass": "blogger", "href": "https://devlogofsewmina.blogspot.com/" }
],
"brands": [
{
"src": "/images/fiverr_logo.png",
"alt": "Logolpsum"
},
{
"src": "/images/unity_logo.png",
"alt": "Logolpsum"
},
{
"src": "/images/dotnet_logo.png",
"alt": "Logolpsum"
},
{
"src": "/images/nodejs_logo.png",
"alt": "Logolpsum"
},
{
"src": "/images/flutter_logo.png",
"alt": "Logolpsum"
}
],
"about": {
"imgSrc": "/images/about-banner.png",
"miniTitle": "About Me",
"title": "I AM AVAILABLE FOR <span>Development & Software Solutions</span> PROJECTS",
"description": "I specialize in backend development, crafting scalable systems and solving complex problems with creative, out-of-the-box thinking. Whether it's building robust applications, developing engaging games, optimizing backend infrastructures, or designing efficient server solutions, I bring expertise and a passion for innovation to every project. While I handle frontend when needed, my focus remains on delivering high-performance, well-architected solutions that push boundaries and drive results. Let's build something great together! 🚀",
"funfacts": [
{
"title": "5⭐ Fiverr Reviews",
"number": 100
},
{
"title": "Years Experience",
"number": 8
},
{
"title": "Published Games",
"number": 5
},
{
"title": "Github Repos",
"number": 5
}
],
"btnText": "Get in touch",
"btnUrl": "contactus"
},
"projects": {
"sectionHeading": {
"miniTitle": "My Work",
"title": "RECENT PROJECT"
},
"allProjects": [
{
"thumbUrl": "/images/popup-project-1.jpg",
"title": "Unity Car Controller",
"subTitle": "Custom Car Controller built from scratch",
"details": {
"title": "Simple Car Controller for Unity",
"description": "https://github.com/Sewmina7/SimpleCarController <br /><br />This project was inspired by the lack of customization in unity's built-in wheel colliders. I wanted a fully functioning and flexible wheel physics. And of course I wanted to learn how real cars behave, So what's a better way to learn something other than implementing it on my own?<br /><br /><a>https://devlogofsewmina.blogspot.com/2022/10/simple-car-controller.html</a> (Devlog)",
"type": "Game Development",
"languages": "Unity, C#",
"platform": "Unity",
"url": "https://github.com/Sewmina7/SimpleCarController"
}
},
{
"thumbUrl": "/images/popup-project-2.jpg",
"title": "Website Design",
"subTitle": "Web Design, App Design",
"details": {
"title": "Website Design for Marketing Agency Startup",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br><br>xcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"type": "Website",
"langages": "PHP, HTML, CSS, JS",
"platform": "WordPress",
"country": "USA",
"url": "www.example.com"
}
},
{
"thumbUrl": "/images/popup-project-3.jpg",
"title": "Dashboard Design",
"subTitle": "Web Design, App Design",
"details": {
"title": "Website Design for Marketing Agency Startup",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br><br>xcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"type": "Website",
"langages": "PHP, HTML, CSS, JS",
"platform": "WordPress",
"country": "USA",
"url": "www.example.com"
}
},
{
"thumbUrl": "/images/popup-project-4.jpg",
"title": "Mobile App Design",
"subTitle": "Web Design, App Design",
"details": {
"title": "Website Design for Marketing Agency Startup",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br><br>xcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"type": "Website",
"langages": "PHP, HTML, CSS, JS",
"platform": "WordPress",
"country": "USA",
"url": "www.example.com"
}
},
{
"thumbUrl": "/images/popup-project-5.jpg",
"title": "Website Design",
"subTitle": "Web Design, App Design",
"details": {
"title": "Website Design for Marketing Agency Startup",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br><br>xcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"type": "Website",
"langages": "PHP, HTML, CSS, JS",
"platform": "WordPress",
"country": "USA",
"url": "www.example.com"
}
},
{
"thumbUrl": "/images/popup-project-6.jpg",
"title": "Website Design",
"subTitle": "Web Design, App Design",
"details": {
"title": "Website Design for Marketing Agency Startup",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br><br>xcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
"type": "Website",
"langages": "PHP, HTML, CSS, JS",
"platform": "WordPress",
"country": "USA",
"url": "www.example.com"
}
}
]
},
"service": {
"sectionHeading": {
"miniTitle": "SERVICES",
"title": "Design <span>services</span> I am providing"
},
"allService": [
{
"imgUrl": "/images/service-01.jpg",
"title": "Website Design",
"subTitle": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.",
"icon": "bi:brush-fill",
"ratings": 5
},
{
"imgUrl": "/images/service-02.jpg",
"title": "Website Design",
"subTitle": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.",
"icon": "bi:code-square",
"ratings": 4.5
},
{
"imgUrl": "/images/service-03.jpg",
"title": "SEO Marketing",
"subTitle": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.",
"icon": "bi:speedometer2",
"ratings": 5
},
{
"imgUrl": "/images/service-04.jpg",
"title": "Graphic Design",
"subTitle": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.",
"icon": "bi:palette",
"ratings": 5
}
]
},
"experience": {
"sectionHeading": {
"miniTitle": "Experience",
"title": "My Work <span>Experience</span>"
},
"allExperience": [
{
"designation": "Front-end Developer",
"company": "WELAB | REMOTE",
"duration": "JAN 2019 - PRESENT",
"jobType": "Full time",
"companyTitle": "About Company",
"companyDescription": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ."
},
{
"designation": "Front-end Developer",
"company": "WELAB | REMOTE",
"duration": "JAN 2019 - PRESENT",
"jobType": "Full time",
"companyTitle": "About Company",
"companyDescription": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ."
},
{
"designation": "Front-end Developer",
"company": "WELAB | REMOTE",
"duration": "JAN 2019 - PRESENT",
"jobType": "Full time",
"companyTitle": "About Company",
"companyDescription": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ."
}
]
},
"testimonial": {
"sectionHeading": {
"miniTitle": "Testimonial",
"title": "Over <span>8,000+</span> <br /> PEOPLE TRUST ME"
},
"allTestimonial": [
{
"reviewText": "Donec tellus sem, tempor ac purus a, porttitor lobortis purus. Etiam quis nisl eget ex pulvinar consectetur. Suspendisse potenti. Cras non elementum risus. Fusce massa tellus, consequat a rutrum et, aliquam a lacus. Quisque viverra egestas tincidunt. Nunc nec nisi sed enim consectetur ullamcorper. Vestibulum at neque tortor. Pellentesque urna enim, ultricies at tortor eu, elementum egestas leo. In hac habitasse platea dictumst.",
"avatarImg": "/images/avatar-1.jpg",
"avatarName": "Pamela Anders",
"avatarCompany": "Company Name"
},
{
"reviewText": "Donec tellus sem, tempor ac purus a, porttitor lobortis purus. Etiam quis nisl eget ex pulvinar consectetur. Suspendisse potenti. Cras non elementum risus. Fusce massa tellus, consequat a rutrum et, aliquam a lacus. Quisque viverra egestas tincidunt. Nunc nec nisi sed enim consectetur ullamcorper. Vestibulum at neque tortor. Pellentesque urna enim, ultricies at tortor eu, elementum egestas leo. In hac habitasse platea dictumst.",
"avatarImg": "/images/avatar-2.jpg",
"avatarName": "Pamela Anders",
"avatarCompany": "Company Name"
},
{
"reviewText": "Donec tellus sem, tempor ac purus a, porttitor lobortis purus. Etiam quis nisl eget ex pulvinar consectetur. Suspendisse potenti. Cras non elementum risus. Fusce massa tellus, consequat a rutrum et, aliquam a lacus. Quisque viverra egestas tincidunt. Nunc nec nisi sed enim consectetur ullamcorper. Vestibulum at neque tortor. Pellentesque urna enim, ultricies at tortor eu, elementum egestas leo. In hac habitasse platea dictumst.",
"avatarImg": "/images/avatar-3.jpg",
"avatarName": "Pamela Anders",
"avatarCompany": "Company Name"
}
]
},
"contact": {
"sectionHeading": {
"title": "Let’s Discuss Your Project",
"subTitle": "Always available for freelancing if the right project comes along, Feel free to contact me."
},
"contactImg": "/images/contact-us.png",
"contactInfo": [
{ "title": "Write an e-mail", "email": "sewmina7@gmail.com" },
{ "title": "Call me", "tel": "+94 71 512 7342" }
]
}
}

16
src/index.js Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'slick-carousel/slick/slick.css';
import './scss/style.scss';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
);

36
src/pages/Home.jsx Normal file
View File

@ -0,0 +1,36 @@
import React, { useEffect } from 'react';
import Brands from '../components/Brands';
import Projects from '../components/Projects';
import Testimonial from '../components/Testimonial';
import Hero from '../components/Hero';
import About from '../components/About';
import Service from '../components/Service';
import HomePagdData from '../data/HomePagdData.json';
import Experience from '../components/Experience';
import Contact from '../components/Contact';
export default function Home() {
const {
hero,
socialBtns,
brands,
about,
projects,
service,
experience,
testimonial,
contact,
} = HomePagdData;
return (
<>
<Hero data={hero} socialData={socialBtns} />
<Brands data={brands} />
<About data={about} />
<Projects data={projects} />
<Service data={service} />
<Experience data={experience} />
<Testimonial data={testimonial} />
<Contact data={contact} socialData={socialBtns} />
</>
);
}

196
src/scss/scss/_base.scss Normal file
View File

@ -0,0 +1,196 @@
@media (prefers-reduced-motion: no-preference) {
:root {
scroll-behavior: inherit;
}
}
html,
body {
overflow-x: hidden;
}
img {
max-width: 100%;
}
* {
outline: none !important;
}
/* ----------------------
* Loading
---------------------------*/
#loading {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
//background: $px-theme;
z-index: 99999;
}
.load-circle {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 50px;
height: 50px;
span {
display: inline-block;
width: 64px;
height: 64px;
&:after {
content: ' ';
display: block;
width: 46px;
height: 46px;
margin: 1px;
border-radius: 50%;
animation: lds-dual-ring 1.2s linear infinite;
}
}
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.gray-bg {
background: rgba(var(--px-theme-rgb), 0.1);
}
.theme-bg {
background: var(--px-theme);
}
/* Section
---------------------*/
.section {
padding: 100px 0;
position: relative;
}
@include down-lg {
.section {
padding-top: 80px;
padding-bottom: 80px;
}
}
@include down-sm {
.section {
padding-top: 60px;
padding-bottom: 60px;
}
}
.section-heading {
margin-bottom: 45px;
position: relative;
@include down-sm {
margin-bottom: 35px;
}
h6 {
margin: 0 0 10px;
font-size: 16px;
font-weight: 400;
color: var(--px-text);
text-transform: uppercase;
letter-spacing: 2px;
span {
background: rgba(var(--px-theme-rgb), 0.2);
border-radius: 4px;
padding: 5px 12px;
display: inline-block;
color: var(--px-white);
font-weight: 400;
font-size: 16px;
line-height: 20px;
letter-spacing: 4px;
text-transform: uppercase;
}
}
h2 {
margin: 0;
font-weight: 700;
font-size: 40px;
text-transform: uppercase;
span {
color: var(--px-theme);
}
@include down-sm {
font-size: 35px;
}
}
}
/* Modal
-------------------------------*/
.mfp-bg {
background: rgba(0, 0, 0, 0.6);
opacity: 1;
backdrop-filter: saturate(180%) blur(20px);
}
.px-modal {
max-width: 1200px;
margin: 0 auto;
padding: 30px;
background-color: var(--px-white);
position: relative;
@include down-lg {
padding: 18px;
}
.about-content {
ul {
padding: 0;
margin: 0;
list-style: none;
li {
padding: 5px 0;
}
}
.col-4 {
color: #111;
}
}
}
.mfp-close {
position: absolute;
top: 0;
right: 0;
background: var(--px-gray-2);
color: var(--px-text);
z-index: 1;
opacity: 1;
border: none;
width: 40px;
height: 40px;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
&:hover {
color: red;
}
}
.single-project-box {
h4 {
margin-bottom: 12px;
padding-bottom: 12px;
color: #111;
border-bottom: 1px solid var(--bs-border-color);
}
}

91
src/scss/scss/_button.scss Normal file
View File

@ -0,0 +1,91 @@
.px-btn {
padding: 13px 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 40px;
border: 2px solid var(--px-theme);
background-color: var(--px-theme);
color: var(--px-white);
text-decoration: none;
transition: ease all 0.35s;
font-weight: 500;
outline: none;
box-shadow: none;
text-transform: uppercase;
cursor: pointer;
i {
margin-left: 10px;
}
&:hover {
background-color: var(--px-black);
color: var(--px-white);
border: 2px solid var(--px-white);
}
&.dark {
background: var(--px-black);
border: 1px solid var(--px-black);
color: var(--px-white);
&:hover {
background: var(--px-white);
color: var(--px-black);
}
}
&.light {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--px-white);
&:hover {
background: var(--px-white);
color: var(--px-black);
}
}
&.white {
background: var(--px-white);
border: 1px solid var(--px-white);
color: var(--px-black);
&:hover {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--px-white);
}
}
}
.social-icon {
a {
width: 46px;
height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--px-white);
border: 2px solid var(--px-white);
margin-right: 8px;
position: relative;
transition: ease top 0.35s;
top: 0;
&:hover {
top: -2px;
}
&.dribbble {
background: #f26798;
}
&.facebook {
background: #1877f2;
}
&.linkedin {
background: #1275b1;
}
&.fiverr{
background: #00AA00;
}
&.blogger{
background: #FFAA00;
}
&.github{
background: #222222;
}
}
}

16
src/scss/scss/_footer.scss Normal file
View File

@ -0,0 +1,16 @@
.footer {
padding-top: 20px;
padding-bottom: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.75);
font-size: 14px;
.nav {
a {
font-size: 14px;
color: rgba(255, 255, 255, 0.75);
+ a {
margin-left: 18px;
}
}
}
}

115
src/scss/scss/_header.scss Normal file
View File

@ -0,0 +1,115 @@
.toggler-menu {
background-color: transparent;
color: var(--px-white);
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 5px;
padding: 0 25px;
height: 40px;
line-height: 1;
position: relative;
margin-left: 15px;
span {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 17px;
box-shadow: 0 0 0 1px currentColor, 0px -7px 0 1px currentColor,
0 7px 0 1px currentColor;
height: 0;
}
}
.header-top-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 111;
padding-top: 20px;
padding-bottom: 20px;
transition: ease all 0.35s;
background-color: transparent;
&.fixed-header {
background-color: var(--px-black);
box-shadow: 0 0.125rem 0.25rem rgba(55, 55, 55, 0.075);
}
> .container {
display: flex;
align-items: center;
justify-content: space-between;
@include down-md {
max-width: 100%;
}
}
.main-menu {
display: flex;
list-style: none;
margin: 0 0 0 auto;
padding: 0 50px 0 0;
@include down-md {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--px-black);
border-top: 1px solid rgba(255, 255, 255, 0.2);
flex-direction: column;
padding: 10px 20px;
display: none;
box-shadow: 0 0.125rem 0.25rem rgba(55, 55, 55, 0.075);
}
> li {
padding: 0 20px;
@include down-md {
padding: 8px 0;
}
a {
padding: 8px 0;
text-transform: uppercase;
color: var(--px-white);
font-size: 14px;
letter-spacing: 1px;
font-weight: 500;
position: relative;
cursor: pointer;
transition: all 0.4s ease;
&:hover {
color: var(--px-white);
}
&:after {
content: '';
position: absolute;
left: auto;
right: 0;
bottom: 0;
width: 0;
height: 2px;
transition: ease all 0.35s;
background-color: currentColor;
}
&.active {
&:after {
width: 100%;
left: 0;
right: auto;
}
}
}
}
}
.logo-dark {
display: none;
}
&.menu-open {
@include down-lg {
.main-menu {
display: flex;
align-items: flex-start;
}
}
}
}

48
src/scss/scss/_mixin.scss Normal file
View File

@ -0,0 +1,48 @@
// Media Responsive
@mixin up-xsm {
@media(min-width: $px-media-xsm + 1 ){
@content;
}
}
@mixin down-xsm {
@media(max-width: $px-media-xsm){
@content;
}
}
@mixin up-sm {
@media(min-width: $px-media-sm + 1 ){
@content;
}
}
@mixin down-sm {
@media(max-width: $px-media-sm){
@content;
}
}
@mixin up-md {
@media(min-width: $px-media-md + 1 ){
@content;
}
}
@mixin down-md {
@media(max-width: $px-media-md){
@content;
}
}
@mixin up-lg {
@media(min-width: $px-media-lg + 1 ){
@content;
}
}
@mixin down-lg {
@media(max-width: $px-media-lg){
@content;
}
}

9
src/scss/scss/_root.scss Normal file
View File

@ -0,0 +1,9 @@
:root {
--bs-heading-color: var(--px-heading);
--px-theme: #{$px-theme};
--px-theme-rgb: #{$px-theme-rgb};
--px-black: #{$px-black};
--px-white: #{$px-white};
--px-text: #{$px-text};
--px-heading: #{$px-heading};
}

797
src/scss/scss/_style.scss Normal file
View File

@ -0,0 +1,797 @@
/* Background
-------------------------------*/
body {
background-color: var(--px-bg);
color: var(--px-text);
font-family: $px-font;
--bs-body-font-weight: 400;
--bs-body-font-size: 1rem;
--bs-body-line-height: 1.6;
overflow-x: hidden;
background: linear-gradient(
90deg,
#07233b 1.67%,
#041d34 39.95%,
#04192d 58.24%,
#040e18 80.28%,
#050c16 101.48%
);
}
a {
text-decoration: none;
}
.effect-section {
position: relative;
overflow: hidden;
.effect-3 {
position: absolute;
left: 18%;
top: 15%;
width: 140px;
img {
animation: animo-x 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
}
.effect-4 {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 0;
height: 450px;
img {
height: 100%;
}
}
}
/* ----------------------
* Slider
---------------------------*/
.full-width {
width: 95vw;
.slick-dots {
max-width: 1300px;
}
}
.slick-dots {
text-align: center;
font-size: 0px;
padding-top: 35px;
li {
display: inline-block;
vertical-align: top;
width: 10px;
height: 10px;
background: transparent;
border: 1px solid var(--px-white);
transition: ease all 0.55s;
border-radius: 8px;
margin: 0 4px;
cursor: pointer;
position: relative;
overflow: hidden;
button {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: 1;
cursor: pointer;
opacity: 0;
}
&.slick-active {
background: var(--px-theme);
width: 20px;
}
}
}
.owl-nav {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
pointer-events: none;
.owl-next,
.owl-prev {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 35px;
height: 35px;
background: var(--px-theme);
color: var(--px-theme-text);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
pointer-events: auto;
transition: ease all 0.35s;
&:hover {
background: var(--px-theme-text);
color: var(--px-theme);
}
}
.owl-next {
right: 0px;
@include up-lg {
right: -50px;
}
}
.owl-prev {
left: 0px;
@include up-lg {
left: -50px;
}
}
}
/* ----------------------
* Home Banner
---------------------------*/
.home-section {
position: relative;
overflow: hidden;
z-index: 1;
padding-top: 150px;
@include down-md {
padding-top: 130px;
}
.hs-text-box {
@include down-md {
padding-bottom: 50px;
}
h6 {
margin: 0 0 10px;
span {
background: rgba(var(--px-theme-rgb), 0.2);
border-radius: 4px;
padding: 5px 12px;
display: inline-block;
color: var(--px-white);
font-weight: 400;
font-size: 16px;
line-height: 20px;
letter-spacing: 4px;
text-transform: uppercase;
}
}
h1 {
color: var(--px-white);
font-weight: 700;
font-size: 70px;
text-transform: uppercase;
@include down-lg {
font-size: 45px;
}
@include down-sm {
font-size: 38px;
}
}
h2 {
color: var(--px-theme);
font-weight: 700;
font-size: 70px;
text-transform: uppercase;
margin: 0 0 30px;
@include down-lg {
font-size: 45px;
margin: 0 0 20px;
}
@include down-sm {
font-size: 38px;
margin: 0 0 10px;
}
}
.text {
font-weight: 400;
font-size: 20px;
line-height: 150%;
letter-spacing: 0.01em;
color: var(--px-white);
@include down-lg {
font-size: 18px;
}
@include down-sm {
font-size: 16px;
}
}
.btn-bar {
padding-top: 15px;
}
}
}
/* ----------------------
* About
---------------------------*/
.about-section {
overflow: hidden;
.container {
position: relative;
z-index: 1;
}
.effect-1 {
position: absolute;
bottom: -50px;
left: 0;
z-index: -1;
animation: rotate360 reverse 40s linear infinite;
@include down-md {
display: none;
}
}
.effect-2 {
position: absolute;
top: 80px;
right: -60px;
z-index: -1;
animation: rotate360 40s linear infinite;
@include down-md {
display: none;
}
}
.about-text {
.section-heading {
margin-bottom: 25px;
}
p {
color: var(--px-white);
}
}
.review-box {
display: flex;
padding-top: 15px;
padding-bottom: 45px;
.r-box {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
flex-direction: column;
color: var(--px-white);
border-radius: 8px;
padding: 20px;
h3 {
margin: 0 0 8px;
}
label {
font-size: 13px;
line-height: 130%;
}
+ .r-box {
margin-left: 10px;
}
}
}
}
/* ----------------------
* Projects
---------------------------*/
.project-section {
overflow: hidden;
.owl-stage-outer {
overflow: inherit;
}
}
.project-box {
padding: 14px;
border-radius: 10px;
background: var(--px-white);
.project-media {
position: relative;
overflow: hidden;
border-radius: 8px;
img {
transition: ease all 0.35s;
transform: scale(1);
}
.gallery-link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
cursor: pointer;
transition: ease all 0.35s;
i {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: var(--px-white);
color: var(--px-black);
font-size: 35px;
border-radius: 50%;
}
}
}
&:hover {
.project-media {
img {
transform: scale(1.05);
}
.gallery-link {
opacity: 1;
}
}
}
.project-body {
display: flex;
align-items: center;
padding-top: 20px;
h5 {
font-weight: 700;
color: var(--px-black);
font-weight: 20px;
margin: 0 0 5px;
}
.text {
flex: 0 0 calc(100% - 50px);
padding-right: 10px;
span {
font-size: 14px;
}
}
.link {
width: 50px;
.p-link {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: var(--px-theme);
color: var(--px-white);
font-size: 20px;
border-radius: 50%;
border: 2px solid var(--px-black);
cursor: pointer;
transition: all 0.4s ease;
&:hover {
background: var(--px-black);
}
}
}
}
}
/* ----------------------
* Services
---------------------------*/
.services-box {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 150px;
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: relative;
overflow: hidden;
border-radius: 8px;
&:after {
content: '';
background: linear-gradient(180deg, rgba(4, 12, 22, 0) 0%, #040c16 100%);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.services-body {
padding: 20px;
position: relative;
z-index: 1;
.icon {
width: 50px;
height: 50px;
background: var(--px-theme);
display: flex;
align-items: center;
justify-content: center;
color: var(--px-white);
font-size: 22px;
border-radius: 5px;
margin-bottom: 20px;
}
p {
color: var(--px-white);
font-size: 14px;
line-height: 140%;
opacity: 0.65;
margin: 0 0 15px;
}
.rating-wrap {
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
}
}
.ratings {
position: relative;
width: 102px;
font-size: 16px;
.rating:last-child {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
}
.rating {
display: flex;
color: var(--bs-warning);
i {
margin-right: 5px;
display: flex;
&:last-child {
margin-right: 0;
}
}
}
/* ----------------------
* EXPERIENCE
---------------------------*/
.ex-box {
background: rgba(var(--px-theme-rgb), 0.1);
padding: 25px;
border-radius: 10px;
.ex-left {
padding: 20px;
border-radius: 8px;
background: var(--px-theme);
h4 {
margin: 0 0 8px;
font-weight: 700;
}
span {
font-weight: 400;
font-size: 14px;
text-transform: uppercase;
color: var(--px-white);
opacity: 0.8;
}
p {
font-weight: 400;
font-size: 16px;
color: var(--px-white);
text-transform: uppercase;
margin: 0 0 15px;
}
label {
padding: 8px 16px;
border-radius: 30px;
background: var(--px-white);
color: var(--px-black);
font-size: 12px;
text-transform: uppercase;
line-height: 1;
font-weight: 600;
}
}
.ex-right {
h5 {
font-weight: 700;
font-size: 32px;
@include down-sm {
font-size: 28px;
}
}
p {
color: var(--px-white);
opacity: 0.8;
}
}
}
/* ----------------------
* Testimonials
---------------------------*/
.testimonial-box {
max-width: 780px;
margin: 0 auto;
text-align: center;
.t-user {
width: 130px;
height: 130px;
display: flex;
margin: 0 auto 30px;
border-radius: 50%;
border: 8px solid rgba(255, 255, 255, 0.2);
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
}
.t-text {
margin-bottom: 25px;
font-weight: 500;
font-size: 18px;
color: var(--px-white);
}
.t-person {
h6 {
font-weight: 500;
font-size: 20px;
text-transform: uppercase;
margin: 0 0 8px;
}
span {
font-weight: 400;
font-size: 16px;
line-height: 20px;
text-align: center;
color: var(--px-white);
opacity: 0.5;
}
}
}
/* ----------------------
* Contact Us
---------------------------*/
.contactus-section {
.contactus-title {
h5 {
font-weight: 500;
font-size: 40px;
@include down-sm {
font-size: 32px;
}
}
p {
font-weight: 400;
font-size: 17px;
color: var(--px-white);
max-width: 550px;
opacity: 0.85;
}
}
.contact-banner {
@include up-md {
margin-top: -200px;
}
}
.contact-info {
padding: 20px 0 40px;
@include down-sm {
padding: 20px 0 25px;
}
.contact-info-in {
display: flex;
flex-direction: column;
padding-top: 20px;
label {
font-weight: 400;
font-size: 12px;
color: var(--px-white);
margin: 0 0 2px;
text-transform: uppercase;
letter-spacing: 2px;
opacity: 0.75;
}
a {
color: var(--px-white);
font-size: 22px;
font-weight: 600;
}
}
}
.contactus-box {
border: 1px solid rgba(var(--px-theme-rgb), 0.2);
}
.contact-form {
.form-label {
color: var(--px-white);
margin: 0 0 4px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.85;
}
.form-control {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--px-white);
box-shadow: none;
padding: 0.575rem 0.75rem;
&::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
&:-moz-placeholder {
color: rgba(255, 255, 255, 0.5);
opacity: 1;
}
&::-moz-placeholder {
color: rgba(255, 255, 255, 0.5);
opacity: 1;
}
&:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
&::-ms-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
&::placeholder {
color: rgba(255, 255, 255, 0.5);
}
}
}
.contactus-form {
border-top: 1px solid rgba(var(--px-theme-rgb), 0.2);
background: rgba(var(--px-theme-rgb), 0.1);
}
}
/* ----------------------
* Modal
---------------------------*/
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
overflow: hidden auto;
background: rgba(0, 0, 0, 0.6);
}
.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 30px 15px;
box-sizing: border-box;
&:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
}
.mfp-content {
cursor: auto;
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045;
}
.mfp-bg {
background: rgba(0, 0, 0, 0.6);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100%;
cursor: zoom-out;
}
.slider-gap-24 {
.slick-list {
margin-left: -12px;
margin-right: -12px;
}
.slick-track > * {
padding: 0 12px;
}
}
.slider-gap-50 {
.slick-list {
margin-left: -25px;
margin-right: -25px;
}
.slick-track > * {
padding: 0 25px;
}
@media (max-width: 991px) {
.slick-list {
margin-left: -12px;
margin-right: -12px;
}
.slick-track > * {
padding: 0 12px;
}
}
}
.slick-slider {
.slick-track > * > * {
display: flex;
> * {
width: 100%;
}
}
}
.disabled {
opacity: 0.75;
pointer-events: none;
}
/* ----------------------
* Custom Curosor
---------------------------*/
.cs-cursor_lg,
.cs-cursor_sm {
position: fixed;
border-radius: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: difference;
z-index: 9999;
}
.cs-cursor_lg {
width: 40px;
height: 40px;
border: 1px solid transparent;
left: 0;
top: 0;
pointer-events: none;
transition: 0.15s;
}
.cs-cursor_sm {
width: 10px;
height: 10px;
background-color: #fff;
left: 15px;
top: 15px;
pointer-events: none;
transition: all 0.1s ease;
}
@media screen and (max-width: 575px) {
.cs-cursor_lg,
.cs-cursor_sm {
display: none;
}
}
.index-module_type__E-SaG::after {
position: relative;
top: -5px;
}
@keyframes rotate360 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes animo-x {
50% {
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transform: translateX(35px);
}
}

19
src/scss/scss/_variable.scss Normal file
View File

@ -0,0 +1,19 @@
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
$px-font: 'Space Grotesk', sans-serif !default;
// Theme Variable
$px-theme: #0788ff;
$px-theme-rgb: 7, 136, 255;
$px-white: #fff;
$px-black: #040c16;
$px-text: #707476;
$px-heading: #fff;
// Breakpoints
$px-media-xsm: 567px !default;
$px-media-sm: 767px !default;
$px-media-md: 991px !default;
$px-media-lg: 1200px !default;

29
src/scss/style.scss Normal file
View File

@ -0,0 +1,29 @@
/*------------------------------------------------------------------
Project: Jenna- ReactJs Portfolio Template
Version: 1.0
Primary use:laralink
[Table of contents]
1. Body
2. Header
3. Footer
4. Blog
5. Section
6. Home Banner
7. About
8. Services
9. Portfolio
10. Testimonial
11. Contact Us
-------------------------------------------------------------------*/
@import 'scss/variable';
@import 'scss/mixin';
@import 'scss/root';
@import 'scss/header';
@import 'scss/footer';
@import 'scss/button';
@import 'scss/base';
@import 'scss/style';