├── public
├── favicon.ico
├── logo192.png
├── logo512.png
├── robots.txt
├── planet
│ ├── scene.bin
│ ├── textures
│ │ ├── Clouds_baseColor.png
│ │ └── Planet_baseColor.png
│ ├── license.txt
│ └── scene.gltf
├── manifest.json
└── index.html
├── src
├── images
│ └── HeroImage.jpg
├── components
│ ├── HeroBgAnimation
│ │ ├── HeroBgAnimationStyle.js
│ │ └── index.js
│ ├── canvas
│ │ ├── Earth.jsx
│ │ └── Stars.jsx
│ ├── sections
│ │ ├── Education.jsx
│ │ ├── Experience.jsx
│ │ ├── Footer.jsx
│ │ ├── Skills.jsx
│ │ ├── Projects.jsx
│ │ ├── Contact.jsx
│ │ └── Hero.jsx
│ ├── cards
│ │ ├── ProjectCard.jsx
│ │ ├── EducationCard.jsx
│ │ └── ExperienceCard.jsx
│ └── Navbar.jsx
├── index.js
├── utils
│ ├── Themes.js
│ └── motion.js
├── index.css
├── App.js
└── data
│ └── constants.js
├── 3D Image ganerator
├── public
│ ├── robots.txt
│ ├── favicon.ico
│ ├── logo192.png
│ ├── logo512.png
│ ├── planet
│ │ ├── scene.bin
│ │ ├── textures
│ │ │ ├── Clouds_baseColor.png
│ │ │ └── Planet_baseColor.png
│ │ ├── license.txt
│ │ └── scene.gltf
│ └── index.html
├── src
│ ├── images
│ │ └── HeroImage.jpg
│ ├── components
│ │ ├── HeroBgAnimation
│ │ │ ├── HeroBgAnimationStyle.js
│ │ │ └── index.js
│ │ ├── canvas
│ │ │ ├── Earth.jsx
│ │ │ └── Stars.jsx
│ │ ├── sections
│ │ │ ├── Education.jsx
│ │ │ ├── Experience.jsx
│ │ │ ├── Footer.jsx
│ │ │ ├── Skills.jsx
│ │ │ ├── Projects.jsx
│ │ │ ├── Contact.jsx
│ │ │ └── Hero.jsx
│ │ ├── cards
│ │ │ ├── ProjectCard.jsx
│ │ │ ├── EducationCard.jsx
│ │ │ └── ExperienceCard.jsx
│ │ └── Navbar.jsx
│ ├── index.js
│ ├── utils
│ │ ├── Themes.js
│ │ └── motion.js
│ ├── index.css
│ └── App.js
└── README.md
└── README.md
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FNICKE/3D-Image-Ganetator/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FNICKE/3D-Image-Ganetator/HEAD/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FNICKE/3D-Image-Ganetator/HEAD/public/logo512.png
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/public/planet/scene.bin:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FNICKE/3D-Image-Ganetator/HEAD/public/planet/scene.bin
--------------------------------------------------------------------------------
/src/images/HeroImage.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FNICKE/3D-Image-Ganetator/HEAD/src/images/HeroImage.jpg
--------------------------------------------------------------------------------
/3D Image ganerator/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/3D Image ganerator/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FNICKE/3D-Image-Ganetator/HEAD/3D Image ganerator/public/favicon.ico
--------------------------------------------------------------------------------
/3D Image ganerator/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FNICKE/3D-Image-Ganetator/HEAD/3D Image ganerator/public/logo192.png
--------------------------------------------------------------------------------
/3D Image ganerator/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FNICKE/3D-Image-Ganetator/HEAD/3D Image ganerator/public/logo512.png
--------------------------------------------------------------------------------
/3D Image ganerator/public/planet/scene.bin:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FNICKE/3D-Image-Ganetator/HEAD/3D Image ganerator/public/planet/scene.bin
--------------------------------------------------------------------------------
/3D Image ganerator/src/images/HeroImage.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FNICKE/3D-Image-Ganetator/HEAD/3D Image ganerator/src/images/HeroImage.jpg
--------------------------------------------------------------------------------
/public/planet/textures/Clouds_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FNICKE/3D-Image-Ganetator/HEAD/public/planet/textures/Clouds_baseColor.png
--------------------------------------------------------------------------------
/public/planet/textures/Planet_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FNICKE/3D-Image-Ganetator/HEAD/public/planet/textures/Planet_baseColor.png
--------------------------------------------------------------------------------
/3D Image ganerator/public/planet/textures/Clouds_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FNICKE/3D-Image-Ganetator/HEAD/3D Image ganerator/public/planet/textures/Clouds_baseColor.png
--------------------------------------------------------------------------------
/3D Image ganerator/public/planet/textures/Planet_baseColor.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/FNICKE/3D-Image-Ganetator/HEAD/3D Image ganerator/public/planet/textures/Planet_baseColor.png
--------------------------------------------------------------------------------
/src/components/HeroBgAnimation/HeroBgAnimationStyle.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 |
4 | export const Div = styled.div`
5 | width:600px;
6 | height: 500px;
7 | `
--------------------------------------------------------------------------------
/3D Image ganerator/src/components/HeroBgAnimation/HeroBgAnimationStyle.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 |
4 | export const Div = styled.div`
5 | width:600px;
6 | height: 500px;
7 | `
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import "./index.css";
4 | import App from "./App";
5 |
6 | const root = ReactDOM.createRoot(document.getElementById("root"));
7 | root.render(
8 |
9 |
10 |
11 | );
12 |
--------------------------------------------------------------------------------
/3D Image ganerator/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import "./index.css";
4 | import App from "./App";
5 |
6 | const root = ReactDOM.createRoot(document.getElementById("root"));
7 | root.render(
8 |
9 |
10 |
11 | );
12 |
--------------------------------------------------------------------------------
/src/utils/Themes.js:
--------------------------------------------------------------------------------
1 | export const darkTheme = {
2 | bg: "#090917",
3 | bgLight: "#1C1E27",
4 | primary: "#854CE6",
5 | text_primary: "#F2F3F4",
6 | text_secondary: "#b1b2b3",
7 | card: "#171721",
8 | card_light: "#191924",
9 | button: "#854CE6",
10 | white: "#FFFFFF",
11 | black: "#000000",
12 | };
13 |
14 | export const lightTheme = {
15 | bg: "#FFFFFF",
16 | bgLight: "#f0f0f0",
17 | primary: "#be1adb",
18 | text_primary: "#111111",
19 | text_secondary: "#48494a",
20 | card: "#FFFFFF",
21 | button: "#5c5b5b",
22 | };
23 |
--------------------------------------------------------------------------------
/3D Image ganerator/src/utils/Themes.js:
--------------------------------------------------------------------------------
1 | export const darkTheme = {
2 | bg: "#090917",
3 | bgLight: "#1C1E27",
4 | primary: "#854CE6",
5 | text_primary: "#F2F3F4",
6 | text_secondary: "#b1b2b3",
7 | card: "#171721",
8 | card_light: "#191924",
9 | button: "#854CE6",
10 | white: "#FFFFFF",
11 | black: "#000000",
12 | };
13 |
14 | export const lightTheme = {
15 | bg: "#FFFFFF",
16 | bgLight: "#f0f0f0",
17 | primary: "#be1adb",
18 | text_primary: "#111111",
19 | text_secondary: "#48494a",
20 | card: "#FFFFFF",
21 | button: "#5c5b5b",
22 | };
23 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/planet/license.txt:
--------------------------------------------------------------------------------
1 | Model Information:
2 | * title: Stylized planet
3 | * source: https://sketchfab.com/3d-models/stylized-planet-789725db86f547fc9163b00f302c3e70
4 | * author: cmzw (https://sketchfab.com/cmzw)
5 |
6 | Model License:
7 | * license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
8 | * requirements: Author must be credited. Commercial use is allowed.
9 |
10 | If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
11 | This work is based on "Stylized planet" (https://sketchfab.com/3d-models/stylized-planet-789725db86f547fc9163b00f302c3e70) by cmzw (https://sketchfab.com/cmzw) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
--------------------------------------------------------------------------------
/3D Image ganerator/public/planet/license.txt:
--------------------------------------------------------------------------------
1 | Model Information:
2 | * title: Stylized planet
3 | * source: https://sketchfab.com/3d-models/stylized-planet-789725db86f547fc9163b00f302c3e70
4 | * author: cmzw (https://sketchfab.com/cmzw)
5 |
6 | Model License:
7 | * license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
8 | * requirements: Author must be credited. Commercial use is allowed.
9 |
10 | If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
11 | This work is based on "Stylized planet" (https://sketchfab.com/3d-models/stylized-planet-789725db86f547fc9163b00f302c3e70) by cmzw (https://sketchfab.com/cmzw) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
2 |
3 | * {
4 | box-sizing: border-box;
5 | margin: 0;
6 | padding: 0;
7 | scroll-behavior: smooth;
8 | font-family: "Poppins", sans-serif;
9 | }
10 |
11 | body {
12 | margin: 0px !important;
13 | padding: 0;
14 | font-family: "Montserrat", sans-serif;
15 | }
16 |
17 | /* width */
18 | ::-webkit-scrollbar {
19 | width: 4px;
20 | height: 80px;
21 | }
22 |
23 | /* Track */
24 | ::-webkit-scrollbar-track {
25 | background: #222a35;
26 | }
27 |
28 | /* Handle */
29 | ::-webkit-scrollbar-thumb {
30 | background: #575c66;
31 | border-radius: 6px;
32 | }
33 |
34 | /* Handle on hover */
35 | ::-webkit-scrollbar-thumb:hover {
36 | background: #626970;
37 | }
38 |
39 | ::-webkit-backdrop-filter {
40 | blur: 3px saturate(106%);
41 | }
--------------------------------------------------------------------------------
/3D Image ganerator/src/index.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
2 |
3 | * {
4 | box-sizing: border-box;
5 | margin: 0;
6 | padding: 0;
7 | scroll-behavior: smooth;
8 | font-family: "Poppins", sans-serif;
9 | }
10 |
11 | body {
12 | margin: 0px !important;
13 | padding: 0;
14 | font-family: "Montserrat", sans-serif;
15 | }
16 |
17 | /* width */
18 | ::-webkit-scrollbar {
19 | width: 4px;
20 | height: 80px;
21 | }
22 |
23 | /* Track */
24 | ::-webkit-scrollbar-track {
25 | background: #222a35;
26 | }
27 |
28 | /* Handle */
29 | ::-webkit-scrollbar-thumb {
30 | background: #575c66;
31 | border-radius: 6px;
32 | }
33 |
34 | /* Handle on hover */
35 | ::-webkit-scrollbar-thumb:hover {
36 | background: #626970;
37 | }
38 |
39 | ::-webkit-backdrop-filter {
40 | blur: 3px saturate(106%);
41 | }
--------------------------------------------------------------------------------
/src/components/canvas/Earth.jsx:
--------------------------------------------------------------------------------
1 | import React, { Suspense } from "react";
2 | import { Canvas } from "@react-three/fiber";
3 | import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
4 |
5 | const Earth = () => {
6 | const earth = useGLTF("./planet/scene.gltf");
7 | return (
8 |
9 | );
10 | };
11 |
12 | const EarthCanvas = () => {
13 | return (
14 |
37 | );
38 | };
39 |
40 | export default EarthCanvas;
41 |
--------------------------------------------------------------------------------
/3D Image ganerator/src/components/canvas/Earth.jsx:
--------------------------------------------------------------------------------
1 | import React, { Suspense } from "react";
2 | import { Canvas } from "@react-three/fiber";
3 | import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
4 |
5 | const Earth = () => {
6 | const earth = useGLTF("./planet/scene.gltf");
7 | return (
8 |
9 | );
10 | };
11 |
12 | const EarthCanvas = () => {
13 | return (
14 |
37 | );
38 | };
39 |
40 | export default EarthCanvas;
41 |
--------------------------------------------------------------------------------
/src/components/canvas/Stars.jsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState, Suspense } from "react";
2 | import { Canvas, useFrame } from "@react-three/fiber";
3 | import { Points, PointMaterial, Preload } from "@react-three/drei";
4 | import * as random from "maath/random/dist/maath-random.esm";
5 | import styled from "styled-components";
6 |
7 | const StyledCanvasWrapper = styled.div`
8 | width: 100%;
9 | height: auto;
10 | position: absolute;
11 | inset: 0;
12 | `;
13 |
14 | const Stars = (props) => {
15 | const ref = useRef();
16 | const [sphere] = useState(() =>
17 | random.inSphere(new Float32Array(5000), { radius: 1.2 })
18 | );
19 |
20 | useFrame((state, delta) => {
21 | ref.current.rotation.x -= delta / 10;
22 | ref.current.rotation.y -= delta / 15;
23 | });
24 |
25 | return (
26 |
27 |
28 |
35 |
36 |
37 | );
38 | };
39 |
40 | const StyledStarsCanvas = () => {
41 | return (
42 |
43 |
49 |
50 | );
51 | };
52 |
53 | export default StyledStarsCanvas;
54 |
--------------------------------------------------------------------------------
/3D Image ganerator/src/components/canvas/Stars.jsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState, Suspense } from "react";
2 | import { Canvas, useFrame } from "@react-three/fiber";
3 | import { Points, PointMaterial, Preload } from "@react-three/drei";
4 | import * as random from "maath/random/dist/maath-random.esm";
5 | import styled from "styled-components";
6 |
7 | const StyledCanvasWrapper = styled.div`
8 | width: 100%;
9 | height: auto;
10 | position: absolute;
11 | inset: 0;
12 | `;
13 |
14 | const Stars = (props) => {
15 | const ref = useRef();
16 | const [sphere] = useState(() =>
17 | random.inSphere(new Float32Array(5000), { radius: 1.2 })
18 | );
19 |
20 | useFrame((state, delta) => {
21 | ref.current.rotation.x -= delta / 10;
22 | ref.current.rotation.y -= delta / 15;
23 | });
24 |
25 | return (
26 |
27 |
28 |
35 |
36 |
37 | );
38 | };
39 |
40 | const StyledStarsCanvas = () => {
41 | return (
42 |
43 |
49 |
50 | );
51 | };
52 |
53 | export default StyledStarsCanvas;
54 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/3D Image ganerator/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import styled, { ThemeProvider } from "styled-components";
2 | import { darkTheme } from "./utils/Themes";
3 | import Navbar from "./components/Navbar";
4 | import { BrowserRouter } from "react-router-dom";
5 | import Hero from "./components/sections/Hero";
6 | import Skills from "./components/sections/Skills";
7 | import Experience from "./components/sections/Experience";
8 | import Education from "./components/sections/Education";
9 | import StartCanvas from "./components/canvas/Stars";
10 | import Projects from "./components/sections/Projects";
11 | import Contact from "./components/sections/Contact";
12 | import Footer from "./components/sections/Footer";
13 |
14 | const Body = styled.div`
15 | background-color: ${({ theme }) => theme.bg};
16 | width: 100%;
17 | overflow-x: hidden;
18 | position: relative;
19 | `;
20 |
21 | const Wrapper = styled.div`
22 | padding-bottom: 100px;
23 | background: linear-gradient(
24 | 38.73deg,
25 | rgba(204, 0, 187, 0.15) 0%,
26 | rgba(201, 32, 184, 0) 50%
27 | ),
28 | linear-gradient(
29 | 141.27deg,
30 | rgba(0, 70, 209, 0) 50%,
31 | rgba(0, 70, 209, 0.15) 100%
32 | );
33 | width: 100%;
34 | clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 98%, 0 100%);
35 | `;
36 |
37 | function App() {
38 | return (
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
104 | {project.title}
105 | {project.date}
106 | {project.description}
107 |
108 |
109 | {project.member?.map((member) => (
110 |
111 | ))}
112 |
113 |
116 |
117 | );
118 | };
119 |
120 | export default ProjectCard;
121 |
--------------------------------------------------------------------------------
/3D Image ganerator/src/components/cards/ProjectCard.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 |
4 | const Card = styled.div`
5 | width: 330px;
6 | height: 490px;
7 | background-color: ${({ theme }) => theme.card};
8 | cursor: pointer;
9 | border-radius: 10px;
10 | box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.4);
11 | overflow: hidden;
12 | padding: 26px 20px;
13 | display: flex;
14 | flex-direction: column;
15 | gap: 14px;
16 | transition: all 0.5s ease-in-out;
17 | &:hover {
18 | transform: translateY(-10px);
19 | box-shadow: 0 0 50px 4px rgba(0, 0, 0, 0.6);
20 | filter: brightness(1.1);
21 | }
22 | `;
23 | const Image = styled.img`
24 | width: 100%;
25 | height: 180px;
26 | background-color: ${({ theme }) => theme.white};
27 | border-radius: 10px;
28 | box-shadow: 0 0 16px 2px rgba(0, 0, 0, 0.3);
29 | `;
30 | const Tags = styled.div`
31 | width: 100%;
32 | display: flex;
33 | align-items: center;
34 | flex-wrap: wrap;
35 | gap: 8px;
36 | margin-top: 4px;
37 | `;
38 | const Details = styled.div`
39 | width: 100%;
40 | display: flex;
41 | flex-direction: column;
42 | gap: 0px;
43 | padding: 0px 2px;
44 | `;
45 | const Title = styled.div`
46 | font-size: 20px;
47 | font-weight: 600;
48 | color: ${({ theme }) => theme.text_secondary};
49 | overflow: hidden;
50 | display: -webkit-box;
51 | max-width: 100%;
52 | -webkit-line-clamp: 2;
53 | -webkit-box-orient: vertical;
54 | overflow: hidden;
55 | text-overflow: ellipsis;
56 | `;
57 | const Date = styled.div`
58 | font-size: 12px;
59 | margin-left: 2px;
60 | font-weight: 400;
61 | color: ${({ theme }) => theme.text_secondary + 80};
62 | @media only screen and (max-width: 768px) {
63 | font-size: 10px;
64 | }
65 | `;
66 | const Description = styled.div`
67 | font-weight: 400;
68 | color: ${({ theme }) => theme.text_secondary + 99};
69 | overflow: hidden;
70 | margin-top: 8px;
71 | display: -webkit-box;
72 | max-width: 100%;
73 | -webkit-line-clamp: 3;
74 | -webkit-box-orient: vertical;
75 | text-overflow: ellipsis;
76 | `;
77 | const Members = styled.div`
78 | display: flex;
79 | align-items: center;
80 | padding-left: 10px;
81 | `;
82 | const Avatar = styled.img`
83 | width: 38px;
84 | height: 38px;
85 | border-radius: 50%;
86 | margin-left: -10px;
87 | background-color: ${({ theme }) => theme.white};
88 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
89 | border: 3px solid ${({ theme }) => theme.card};
90 | `;
91 | const Button = styled.a`
92 | color: ${({ theme }) => theme.primary};
93 | text-decoration: none;
94 | font-weight: 600;
95 | text-align: center;
96 | `;
97 |
98 | const ProjectCard = ({ project }) => {
99 | return (
100 |
101 |
102 |
103 |
104 | {project.title}
105 | {project.date}
106 | {project.description}
107 |
108 |
109 | {project.member?.map((member) => (
110 |
111 | ))}
112 |
113 |
116 |
117 | );
118 | };
119 |
120 | export default ProjectCard;
121 |
--------------------------------------------------------------------------------
/src/components/sections/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import { Bio } from "../../data/constants";
4 | import {
5 | FacebookRounded,
6 | Instagram,
7 | LinkedIn,
8 | Twitter,
9 | } from "@mui/icons-material";
10 |
11 | const FooterContainer = styled.div`
12 | width: 100%;
13 | padding: 2rem 0;
14 | display: flex;
15 | justify-content: center;
16 | z-index: 10;
17 | position: relative;
18 | `;
19 | const FooterWrapper = styled.div`
20 | width: 100%;
21 | max-width: 1200px;
22 | display: flex;
23 | flex-direction: column;
24 | gap: 14px;
25 | align-items: center;
26 | padding: 1rem;
27 | color: ${({ theme }) => theme.text_primary};
28 | `;
29 | const Logo = styled.div`
30 | font-weight: 600;
31 | font-size: 20px;
32 | color: ${({ theme }) => theme.primary};
33 | `;
34 | const Nav = styled.ul`
35 | width: 100%;
36 | max-width: 800px;
37 | margin-top: 0.5rem;
38 | display: flex;
39 | flex-direction: row;
40 | gap: 2rem;
41 | justify-content: center;
42 | @media (max-width: 768px) {
43 | flex-wrap: wrap;
44 | gap: 1rem;
45 | justify-content: center;
46 | text-align: center;
47 | font-size: 12px;
48 | }
49 | `;
50 | const NavLink = styled.a`
51 | color: ${({ theme }) => theme.text_primary};
52 | text-decoration: none;
53 | font-size: 1.2rem;
54 | transition: color 0.2s ease-in-out;
55 | &:hover {
56 | color: ${({ theme }) => theme.primary};
57 | }
58 | @media (max-width: 768px) {
59 | font-size: 1rem;
60 | }
61 | `;
62 | const SocialMediaIcons = styled.div`
63 | display: flex;
64 | margin-top: 1rem;
65 | `;
66 | const SocialMediaIcon = styled.a`
67 | display: inline-block;
68 | margin: 0 1rem;
69 | font-size: 1.5rem;
70 | color: ${({ theme }) => theme.text_primary};
71 | transition: color 0.2s ease-in-out;
72 | &:hover {
73 | color: ${({ theme }) => theme.primary};
74 | }
75 | `;
76 | const Copyright = styled.p`
77 | margin-top: 1.5rem;
78 | font-size: 0.9rem;
79 | color: ${({ theme }) => theme.soft2};
80 | text-align: center;
81 | `;
82 |
83 | const Footer = () => {
84 | return (
85 |
86 |
87 | Rishav Chanda
88 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 | © 2024 Rishav Chanda. All rights reserved.
110 |
111 |
112 | );
113 | };
114 |
115 | export default Footer;
116 |
--------------------------------------------------------------------------------
/3D Image ganerator/src/components/sections/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import { Bio } from "../../data/constants";
4 | import {
5 | FacebookRounded,
6 | Instagram,
7 | LinkedIn,
8 | Twitter,
9 | } from "@mui/icons-material";
10 |
11 | const FooterContainer = styled.div`
12 | width: 100%;
13 | padding: 2rem 0;
14 | display: flex;
15 | justify-content: center;
16 | z-index: 10;
17 | position: relative;
18 | `;
19 | const FooterWrapper = styled.div`
20 | width: 100%;
21 | max-width: 1200px;
22 | display: flex;
23 | flex-direction: column;
24 | gap: 14px;
25 | align-items: center;
26 | padding: 1rem;
27 | color: ${({ theme }) => theme.text_primary};
28 | `;
29 | const Logo = styled.div`
30 | font-weight: 600;
31 | font-size: 20px;
32 | color: ${({ theme }) => theme.primary};
33 | `;
34 | const Nav = styled.ul`
35 | width: 100%;
36 | max-width: 800px;
37 | margin-top: 0.5rem;
38 | display: flex;
39 | flex-direction: row;
40 | gap: 2rem;
41 | justify-content: center;
42 | @media (max-width: 768px) {
43 | flex-wrap: wrap;
44 | gap: 1rem;
45 | justify-content: center;
46 | text-align: center;
47 | font-size: 12px;
48 | }
49 | `;
50 | const NavLink = styled.a`
51 | color: ${({ theme }) => theme.text_primary};
52 | text-decoration: none;
53 | font-size: 1.2rem;
54 | transition: color 0.2s ease-in-out;
55 | &:hover {
56 | color: ${({ theme }) => theme.primary};
57 | }
58 | @media (max-width: 768px) {
59 | font-size: 1rem;
60 | }
61 | `;
62 | const SocialMediaIcons = styled.div`
63 | display: flex;
64 | margin-top: 1rem;
65 | `;
66 | const SocialMediaIcon = styled.a`
67 | display: inline-block;
68 | margin: 0 1rem;
69 | font-size: 1.5rem;
70 | color: ${({ theme }) => theme.text_primary};
71 | transition: color 0.2s ease-in-out;
72 | &:hover {
73 | color: ${({ theme }) => theme.primary};
74 | }
75 | `;
76 | const Copyright = styled.p`
77 | margin-top: 1.5rem;
78 | font-size: 0.9rem;
79 | color: ${({ theme }) => theme.soft2};
80 | text-align: center;
81 | `;
82 |
83 | const Footer = () => {
84 | return (
85 |
86 |
87 | Rishav Chanda
88 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 | © 2024 Rishav Chanda. All rights reserved.
110 |
111 |
112 | );
113 | };
114 |
115 | export default Footer;
116 |
--------------------------------------------------------------------------------
/src/components/cards/EducationCard.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { VerticalTimelineElement } from "react-vertical-timeline-component";
3 | import styled from "styled-components";
4 |
5 | const Top = styled.div`
6 | width: 100%;
7 | display: flex;
8 | max-width: 100%;
9 | gap: 12px;
10 | `;
11 | const Image = styled.img`
12 | height: 50px;
13 | border-radius: 10px;
14 | margin-top: 4px;
15 | @media only screen and (max-width: 768px) {
16 | height: 40px;
17 | }
18 | `;
19 | const Body = styled.div`
20 | width: 100%;
21 | display: flex;
22 | flex-direction: column;
23 | `;
24 | const School = styled.div`
25 | font-size: 18px;
26 | font-weight: 600px;
27 | color: ${({ theme }) => theme.text_primary + 99};
28 | @media only screen and (max-width: 768px) {
29 | font-size: 14px;
30 | }
31 | `;
32 | const Degree = styled.div`
33 | font-size: 14px;
34 | font-weight: 500px;
35 | color: ${({ theme }) => theme.text_secondary + 99};
36 | @media only screen and (max-width: 768px) {
37 | font-size: 12px;
38 | }
39 | `;
40 | const Date = styled.div`
41 | font-size: 12px;
42 | font-weight: 400px;
43 | color: ${({ theme }) => theme.text_secondary + 80};
44 |
45 | @media only screen and (max-width: 768px) {
46 | font-size: 10px;
47 | }
48 | `;
49 |
50 | const Description = styled.div`
51 | width: 100%;
52 | font-size: 15px;
53 | font-weight: 400;
54 | color: ${({ theme }) => theme.text_primary + 99};
55 | margin-bottom: 10px;
56 | @media only screen and (max-width: 768px) {
57 | font-size: 12px;
58 | }
59 | `;
60 |
61 | const Grade = styled.div`
62 | font-size: 14px;
63 | font-weight: 500;
64 | color: ${({ theme }) => theme.text_secondary + 99};
65 | @media only screen and (max-width: 768px) {
66 | font-size: 12px;
67 | }
68 | `;
69 | const Span = styled.div`
70 | display: -webkit-box;
71 | max-width: 100%;
72 | `;
73 |
74 | const EducationCard = ({ education }) => {
75 | return (
76 |
85 | }
86 | contentStyle={{
87 | display: "flex",
88 | flexDirection: "column",
89 | gap: "12px",
90 | background: "#1d1836",
91 | color: "#fff",
92 | boxShadow: "rgba(23, 92, 230, 0.15) 0px 4px 24px",
93 | backgroundColor: "rgba(17, 25, 40, 0.83)",
94 | border: "1px solid rgba(255, 255, 255, 0.125)",
95 | borderRadius: "6px",
96 | }}
97 | contentArrowStyle={{
98 | borderRight: "7px solid rgba(255, 255, 255, 0.3)",
99 | }}
100 | date={education?.date}
101 | >
102 |
103 |
104 |
105 | {education?.school}
106 | {education?.degree}
107 | {education?.date}
108 |
109 |
110 |
111 | Grade :
112 | {education?.grade}
113 |
114 |
115 | {education?.desc && {education.desc}}
116 |
117 |
118 | );
119 | };
120 |
121 | export default EducationCard;
122 |
--------------------------------------------------------------------------------
/3D Image ganerator/src/components/cards/EducationCard.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { VerticalTimelineElement } from "react-vertical-timeline-component";
3 | import styled from "styled-components";
4 |
5 | const Top = styled.div`
6 | width: 100%;
7 | display: flex;
8 | max-width: 100%;
9 | gap: 12px;
10 | `;
11 | const Image = styled.img`
12 | height: 50px;
13 | border-radius: 10px;
14 | margin-top: 4px;
15 | @media only screen and (max-width: 768px) {
16 | height: 40px;
17 | }
18 | `;
19 | const Body = styled.div`
20 | width: 100%;
21 | display: flex;
22 | flex-direction: column;
23 | `;
24 | const School = styled.div`
25 | font-size: 18px;
26 | font-weight: 600px;
27 | color: ${({ theme }) => theme.text_primary + 99};
28 | @media only screen and (max-width: 768px) {
29 | font-size: 14px;
30 | }
31 | `;
32 | const Degree = styled.div`
33 | font-size: 14px;
34 | font-weight: 500px;
35 | color: ${({ theme }) => theme.text_secondary + 99};
36 | @media only screen and (max-width: 768px) {
37 | font-size: 12px;
38 | }
39 | `;
40 | const Date = styled.div`
41 | font-size: 12px;
42 | font-weight: 400px;
43 | color: ${({ theme }) => theme.text_secondary + 80};
44 |
45 | @media only screen and (max-width: 768px) {
46 | font-size: 10px;
47 | }
48 | `;
49 |
50 | const Description = styled.div`
51 | width: 100%;
52 | font-size: 15px;
53 | font-weight: 400;
54 | color: ${({ theme }) => theme.text_primary + 99};
55 | margin-bottom: 10px;
56 | @media only screen and (max-width: 768px) {
57 | font-size: 12px;
58 | }
59 | `;
60 |
61 | const Grade = styled.div`
62 | font-size: 14px;
63 | font-weight: 500;
64 | color: ${({ theme }) => theme.text_secondary + 99};
65 | @media only screen and (max-width: 768px) {
66 | font-size: 12px;
67 | }
68 | `;
69 | const Span = styled.div`
70 | display: -webkit-box;
71 | max-width: 100%;
72 | `;
73 |
74 | const EducationCard = ({ education }) => {
75 | return (
76 |
85 | }
86 | contentStyle={{
87 | display: "flex",
88 | flexDirection: "column",
89 | gap: "12px",
90 | background: "#1d1836",
91 | color: "#fff",
92 | boxShadow: "rgba(23, 92, 230, 0.15) 0px 4px 24px",
93 | backgroundColor: "rgba(17, 25, 40, 0.83)",
94 | border: "1px solid rgba(255, 255, 255, 0.125)",
95 | borderRadius: "6px",
96 | }}
97 | contentArrowStyle={{
98 | borderRight: "7px solid rgba(255, 255, 255, 0.3)",
99 | }}
100 | date={education?.date}
101 | >
102 |
103 |
104 |
105 | {education?.school}
106 | {education?.degree}
107 | {education?.date}
108 |
109 |
110 |
111 | Grade :
112 | {education?.grade}
113 |
114 |
115 | {education?.desc && {education.desc}}
116 |
117 |
118 | );
119 | };
120 |
121 | export default EducationCard;
122 |
--------------------------------------------------------------------------------
/3D Image ganerator/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `npm start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 |
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 |
17 | ### `npm test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `npm run build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `npm run eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 |
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 |
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
48 | ### Code Splitting
49 |
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 |
52 | ### Analyzing the Bundle Size
53 |
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 |
56 | ### Making a Progressive Web App
57 |
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 |
60 | ### Advanced Configuration
61 |
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 |
64 | ### Deployment
65 |
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 |
68 | ### `npm run build` fails to minify
69 |
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 |
--------------------------------------------------------------------------------
/src/components/cards/ExperienceCard.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { VerticalTimelineElement } from "react-vertical-timeline-component";
3 | import styled from "styled-components";
4 |
5 | const Top = styled.div`
6 | width: 100%;
7 | display: flex;
8 | max-width: 100%;
9 | gap: 12px;
10 | `;
11 | const Image = styled.img`
12 | height: 50px;
13 | border-radius: 10px;
14 | margin-top: 4px;
15 | @media only screen and (max-width: 768px) {
16 | height: 40px;
17 | }
18 | `;
19 | const Body = styled.div`
20 | width: 100%;
21 | display: flex;
22 | flex-direction: column;
23 | `;
24 | const Role = styled.div`
25 | font-size: 18px;
26 | font-weight: 600px;
27 | color: ${({ theme }) => theme.text_primary + 99};
28 | @media only screen and (max-width: 768px) {
29 | font-size: 14px;
30 | }
31 | `;
32 | const Company = styled.div`
33 | font-size: 14px;
34 | font-weight: 500px;
35 | color: ${({ theme }) => theme.text_secondary + 99};
36 | @media only screen and (max-width: 768px) {
37 | font-size: 12px;
38 | }
39 | `;
40 | const Date = styled.div`
41 | font-size: 12px;
42 | font-weight: 400px;
43 | color: ${({ theme }) => theme.text_secondary + 80};
44 |
45 | @media only screen and (max-width: 768px) {
46 | font-size: 10px;
47 | }
48 | `;
49 |
50 | const Description = styled.div`
51 | width: 100%;
52 | font-size: 15px;
53 | font-weight: 400;
54 | color: ${({ theme }) => theme.text_primary + 99};
55 | margin-bottom: 10px;
56 | @media only screen and (max-width: 768px) {
57 | font-size: 12px;
58 | }
59 | `;
60 | const Skills = styled.div`
61 | width: 100%;
62 | display: flex;
63 | gap: 12px;
64 | margin-top: -10px;
65 | `;
66 | const Span = styled.div`
67 | display: -webkit-box;
68 | max-width: 100%;
69 | `;
70 |
71 | const Skill = styled.div`
72 | font-size: 15px;
73 | font-weight: 400;
74 | color: ${({ theme }) => theme.text_primary + 99};
75 | @media only screen and (max-width: 768px) {
76 | font-size: 12px;
77 | }
78 | `;
79 |
80 | const ItemWrapper = styled.div`
81 | display: flex;
82 | flex-wrap: wrap;
83 | gap: 8px;
84 | `;
85 |
86 | const ExperienceCard = ({ experience }) => {
87 | return (
88 |
97 | }
98 | contentStyle={{
99 | display: "flex",
100 | flexDirection: "column",
101 | gap: "12px",
102 | background: "#1d1836",
103 | color: "#fff",
104 | boxShadow: "rgba(23, 92, 230, 0.15) 0px 4px 24px",
105 | backgroundColor: "rgba(17, 25, 40, 0.83)",
106 | border: "1px solid rgba(255, 255, 255, 0.125)",
107 | borderRadius: "6px",
108 | }}
109 | contentArrowStyle={{
110 | borderRight: "7px solid rgba(255, 255, 255, 0.3)",
111 | }}
112 | date={experience?.date}
113 | >
114 |
115 |
116 |
117 | {experience?.role}
118 | {experience?.company}
119 | {experience?.date}
120 |
121 |
122 |
123 | {experience?.desc && {experience.desc}}
124 | {experience?.skills && (
125 | <>
126 |
127 |
128 | Skills
129 |
130 | {experience?.skills?.map((skill, index) => (
131 | • {skill}
132 | ))}
133 |
134 |
135 |
136 | )}
137 |
138 |
139 | );
140 | };
141 |
142 | export default ExperienceCard;
143 |
--------------------------------------------------------------------------------
/3D Image ganerator/src/components/cards/ExperienceCard.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { VerticalTimelineElement } from "react-vertical-timeline-component";
3 | import styled from "styled-components";
4 |
5 | const Top = styled.div`
6 | width: 100%;
7 | display: flex;
8 | max-width: 100%;
9 | gap: 12px;
10 | `;
11 | const Image = styled.img`
12 | height: 50px;
13 | border-radius: 10px;
14 | margin-top: 4px;
15 | @media only screen and (max-width: 768px) {
16 | height: 40px;
17 | }
18 | `;
19 | const Body = styled.div`
20 | width: 100%;
21 | display: flex;
22 | flex-direction: column;
23 | `;
24 | const Role = styled.div`
25 | font-size: 18px;
26 | font-weight: 600px;
27 | color: ${({ theme }) => theme.text_primary + 99};
28 | @media only screen and (max-width: 768px) {
29 | font-size: 14px;
30 | }
31 | `;
32 | const Company = styled.div`
33 | font-size: 14px;
34 | font-weight: 500px;
35 | color: ${({ theme }) => theme.text_secondary + 99};
36 | @media only screen and (max-width: 768px) {
37 | font-size: 12px;
38 | }
39 | `;
40 | const Date = styled.div`
41 | font-size: 12px;
42 | font-weight: 400px;
43 | color: ${({ theme }) => theme.text_secondary + 80};
44 |
45 | @media only screen and (max-width: 768px) {
46 | font-size: 10px;
47 | }
48 | `;
49 |
50 | const Description = styled.div`
51 | width: 100%;
52 | font-size: 15px;
53 | font-weight: 400;
54 | color: ${({ theme }) => theme.text_primary + 99};
55 | margin-bottom: 10px;
56 | @media only screen and (max-width: 768px) {
57 | font-size: 12px;
58 | }
59 | `;
60 | const Skills = styled.div`
61 | width: 100%;
62 | display: flex;
63 | gap: 12px;
64 | margin-top: -10px;
65 | `;
66 | const Span = styled.div`
67 | display: -webkit-box;
68 | max-width: 100%;
69 | `;
70 |
71 | const Skill = styled.div`
72 | font-size: 15px;
73 | font-weight: 400;
74 | color: ${({ theme }) => theme.text_primary + 99};
75 | @media only screen and (max-width: 768px) {
76 | font-size: 12px;
77 | }
78 | `;
79 |
80 | const ItemWrapper = styled.div`
81 | display: flex;
82 | flex-wrap: wrap;
83 | gap: 8px;
84 | `;
85 |
86 | const ExperienceCard = ({ experience }) => {
87 | return (
88 |
97 | }
98 | contentStyle={{
99 | display: "flex",
100 | flexDirection: "column",
101 | gap: "12px",
102 | background: "#1d1836",
103 | color: "#fff",
104 | boxShadow: "rgba(23, 92, 230, 0.15) 0px 4px 24px",
105 | backgroundColor: "rgba(17, 25, 40, 0.83)",
106 | border: "1px solid rgba(255, 255, 255, 0.125)",
107 | borderRadius: "6px",
108 | }}
109 | contentArrowStyle={{
110 | borderRight: "7px solid rgba(255, 255, 255, 0.3)",
111 | }}
112 | date={experience?.date}
113 | >
114 |
115 |
116 |
117 | {experience?.role}
118 | {experience?.company}
119 | {experience?.date}
120 |
121 |
122 |
123 | {experience?.desc && {experience.desc}}
124 | {experience?.skills && (
125 | <>
126 |
127 |
128 | Skills
129 |
130 | {experience?.skills?.map((skill, index) => (
131 | • {skill}
132 | ))}
133 |
134 |
135 |
136 | )}
137 |
138 |
139 | );
140 | };
141 |
142 | export default ExperienceCard;
143 |
--------------------------------------------------------------------------------
/src/components/sections/Skills.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import { skills } from "../../data/constants";
4 | import { Tilt } from "react-tilt";
5 |
6 | const Container = styled.div`
7 | display: flex;
8 | flex-direction: column;
9 | justify-contnet: center;
10 | position: rlative;
11 | z-index: 1;
12 | align-items: center;
13 | `;
14 |
15 | const Wrapper = styled.div`
16 | position: relative;
17 | display: flex;
18 | justify-content: space-between;
19 | align-items: center;
20 | flex-direction: column;
21 | width: 100%;
22 | max-width: 1100px;
23 | gap: 12px;
24 | @media (max-width: 960px) {
25 | flex-direction: column;
26 | }
27 | `;
28 | const Title = styled.div`
29 | font-size: 52px;
30 | text-align: center;
31 | font-weight: 600;
32 | margin-top: 20px;
33 | color: ${({ theme }) => theme.text_primary};
34 | @media (max-width: 768px) {
35 | margin-top: 12px;
36 | font-size: 32px;
37 | }
38 | `;
39 | const Desc = styled.div`
40 | font-size: 18px;
41 | text-align: center;
42 | font-weight: 600;
43 | color: ${({ theme }) => theme.text_secondary};
44 | @media (max-width: 768px) {
45 | font-size: 16px;
46 | }
47 | `;
48 |
49 | const SkillsContainer = styled.div`
50 | width: 100%;
51 | display: flex;
52 | flex-wrap: wrap;
53 | margin-top: 20px;
54 | gap: 50px;
55 | justify-content: center;
56 | `;
57 |
58 | const Skill = styled.div`
59 | width: 100%;
60 | max-width: 500px;
61 | background-color: rgba(17, 25, 40, 0.83);
62 | border: 1px solid rgba(255, 255, 255, 0.125);
63 | box-shadow: rgba(23, 92, 230, 0.15) 0px 4px 24px;
64 | border-radius: 16px;
65 | padding: 18px 36px;
66 | @media (max-width: 768px) {
67 | max-width: 400px;
68 | padding: 10px 36px;
69 | }
70 |
71 | @media (max-width: 500px) {
72 | max-width: 330px;
73 | padding: 10px 36px;
74 | }
75 | `;
76 |
77 | const SkillTitle = styled.div`
78 | font-size: 28px;
79 | font-weight: 600;
80 | margin-bottom: 20px;
81 | text-align: center;
82 | color: ${({ theme }) => theme.text_secondary};
83 | `;
84 |
85 | const SkillList = styled.div`
86 | display: flex;
87 | justify-content: center;
88 | flex-wrap: wrap;
89 | gap: 12px;
90 | margin-bottom: 20px;
91 | `;
92 | const SkillItem = styled.div`
93 | font-size: 16px;
94 | font-weight: 400;
95 | color: ${({ theme }) => theme.text_primary + 80};
96 | border: 1px solid ${({ theme }) => theme.text_primary + 80};
97 | border-radius: 12px;
98 | padding: 12px 16px;
99 | display: flex;
100 | align-items: center;
101 | justify-content: center;
102 | gap: 8px;
103 |
104 | @media (max-width: 768px) {
105 | font-size: 14px;
106 | padding: 8px 12px;
107 | }
108 | @media (max-width: 500px) {
109 | font-size: 14px;
110 | padding: 6px 12px;
111 | }
112 | `;
113 | const SkillImage = styled.img`
114 | width: 24px;
115 | height: 24px;
116 | `;
117 |
118 | const Skills = () => {
119 | return (
120 |
121 |
122 | Skills
123 |
128 | Here are some of my skills on which I have been working on for the
129 | past 3 years.
130 |
131 |
132 |
133 | {skills.map((skill, index) => (
134 |
135 |
136 | {skill.title}
137 |
138 | {skill.skills.map((item, index_x) => (
139 |
140 |
141 | {item.name}
142 |
143 | ))}
144 |
145 |
146 |
147 | ))}
148 |
149 |
150 |
151 | );
152 | };
153 |
154 | export default Skills;
155 |
--------------------------------------------------------------------------------
/3D Image ganerator/src/components/sections/Skills.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import { skills } from "../../data/constants";
4 | import { Tilt } from "react-tilt";
5 |
6 | const Container = styled.div`
7 | display: flex;
8 | flex-direction: column;
9 | justify-contnet: center;
10 | position: rlative;
11 | z-index: 1;
12 | align-items: center;
13 | `;
14 |
15 | const Wrapper = styled.div`
16 | position: relative;
17 | display: flex;
18 | justify-content: space-between;
19 | align-items: center;
20 | flex-direction: column;
21 | width: 100%;
22 | max-width: 1100px;
23 | gap: 12px;
24 | @media (max-width: 960px) {
25 | flex-direction: column;
26 | }
27 | `;
28 | const Title = styled.div`
29 | font-size: 52px;
30 | text-align: center;
31 | font-weight: 600;
32 | margin-top: 20px;
33 | color: ${({ theme }) => theme.text_primary};
34 | @media (max-width: 768px) {
35 | margin-top: 12px;
36 | font-size: 32px;
37 | }
38 | `;
39 | const Desc = styled.div`
40 | font-size: 18px;
41 | text-align: center;
42 | font-weight: 600;
43 | color: ${({ theme }) => theme.text_secondary};
44 | @media (max-width: 768px) {
45 | font-size: 16px;
46 | }
47 | `;
48 |
49 | const SkillsContainer = styled.div`
50 | width: 100%;
51 | display: flex;
52 | flex-wrap: wrap;
53 | margin-top: 20px;
54 | gap: 50px;
55 | justify-content: center;
56 | `;
57 |
58 | const Skill = styled.div`
59 | width: 100%;
60 | max-width: 500px;
61 | background-color: rgba(17, 25, 40, 0.83);
62 | border: 1px solid rgba(255, 255, 255, 0.125);
63 | box-shadow: rgba(23, 92, 230, 0.15) 0px 4px 24px;
64 | border-radius: 16px;
65 | padding: 18px 36px;
66 | @media (max-width: 768px) {
67 | max-width: 400px;
68 | padding: 10px 36px;
69 | }
70 |
71 | @media (max-width: 500px) {
72 | max-width: 330px;
73 | padding: 10px 36px;
74 | }
75 | `;
76 |
77 | const SkillTitle = styled.div`
78 | font-size: 28px;
79 | font-weight: 600;
80 | margin-bottom: 20px;
81 | text-align: center;
82 | color: ${({ theme }) => theme.text_secondary};
83 | `;
84 |
85 | const SkillList = styled.div`
86 | display: flex;
87 | justify-content: center;
88 | flex-wrap: wrap;
89 | gap: 12px;
90 | margin-bottom: 20px;
91 | `;
92 | const SkillItem = styled.div`
93 | font-size: 16px;
94 | font-weight: 400;
95 | color: ${({ theme }) => theme.text_primary + 80};
96 | border: 1px solid ${({ theme }) => theme.text_primary + 80};
97 | border-radius: 12px;
98 | padding: 12px 16px;
99 | display: flex;
100 | align-items: center;
101 | justify-content: center;
102 | gap: 8px;
103 |
104 | @media (max-width: 768px) {
105 | font-size: 14px;
106 | padding: 8px 12px;
107 | }
108 | @media (max-width: 500px) {
109 | font-size: 14px;
110 | padding: 6px 12px;
111 | }
112 | `;
113 | const SkillImage = styled.img`
114 | width: 24px;
115 | height: 24px;
116 | `;
117 |
118 | const Skills = () => {
119 | return (
120 |
121 |
122 | Skills
123 |
128 | Here are some of my skills on which I have been working on for the
129 | past 3 years.
130 |
131 |
132 |
133 | {skills.map((skill, index) => (
134 |
135 |
136 | {skill.title}
137 |
138 | {skill.skills.map((item, index_x) => (
139 |
140 |
141 | {item.name}
142 |
143 | ))}
144 |
145 |
146 |
147 | ))}
148 |
149 |
150 |
151 | );
152 | };
153 |
154 | export default Skills;
155 |
--------------------------------------------------------------------------------
/src/components/sections/Projects.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import styled from "styled-components";
3 | import { projects } from "../../data/constants";
4 | import ProjectCard from "../cards/ProjectCard";
5 |
6 | const Container = styled.div`
7 | display: flex;
8 | flex-direction: column;
9 | justify-contnet: center;
10 | margin-top: 50px;
11 | padding: 0px 16px;
12 | position: rlative;
13 | z-index: 1;
14 | align-items: center;
15 | `;
16 |
17 | const Wrapper = styled.div`
18 | position: relative;
19 | display: flex;
20 | justify-content: space-between;
21 | align-items: center;
22 | flex-direction: column;
23 | width: 100%;
24 | max-width: 1100px;
25 | gap: 12px;
26 | @media (max-width: 960px) {
27 | flex-direction: column;
28 | }
29 | `;
30 | const Title = styled.div`
31 | font-size: 52px;
32 | text-align: center;
33 | font-weight: 600;
34 | margin-top: 20px;
35 | color: ${({ theme }) => theme.text_primary};
36 | @media (max-width: 768px) {
37 | margin-top: 12px;
38 | font-size: 32px;
39 | }
40 | `;
41 | const Desc = styled.div`
42 | font-size: 18px;
43 | text-align: center;
44 | font-weight: 600;
45 | color: ${({ theme }) => theme.text_secondary};
46 | @media (max-width: 768px) {
47 | font-size: 16px;
48 | }
49 | `;
50 |
51 | const ToggleButtonGroup = styled.div`
52 | display: flex;
53 | border: 1.5px solid ${({ theme }) => theme.primary};
54 | color: ${({ theme }) => theme.primary};
55 | font-size: 16px;
56 | border-radius: 12px;
57 | font-weight 500;
58 | margin: 22px 0;
59 | @media (max-width: 768px){
60 | font-size: 12px;
61 | }
62 | `;
63 | const ToggleButton = styled.div`
64 | padding: 8px 18px;
65 | border-radius: 6px;
66 | cursor: pointer;
67 | &:hover {
68 | background: ${({ theme }) => theme.primary + 20};
69 | }
70 | @media (max-width: 768px) {
71 | padding: 6px 8px;
72 | border-radius: 4px;
73 | }
74 | ${({ active, theme }) =>
75 | active &&
76 | `
77 | background: ${theme.primary + 20};
78 | `}
79 | `;
80 | const Divider = styled.div`
81 | width: 1.5px;
82 | background: ${({ theme }) => theme.primary};
83 | `;
84 |
85 | const CardContainer = styled.div`
86 | display: flex;
87 | justify-content: center;
88 | align-items: center;
89 | gap: 28px;
90 | flex-wrap: wrap;
91 | `;
92 |
93 | const Projects = () => {
94 | const [toggle, setToggle] = useState("all");
95 | return (
96 |
97 |
98 | Projects
99 |
104 | I have worked on a wide range of projects. From web apps to android
105 | apps. Here are some of my projects.
106 |
107 |
108 |
109 | setToggle("all")}
112 | >
113 | ALL
114 |
115 |
116 | setToggle("web app")}
119 | >
120 | WEB APP"S
121 |
122 |
123 | setToggle("android app")}
126 | >
127 | ANDROID APP'S
128 |
129 |
130 | setToggle("machine learning")}
133 | >
134 | MACHINE LEARNING
135 |
136 |
137 |
138 |
139 | {toggle === "all" &&
140 | projects.map((project) => )}
141 | {projects
142 | .filter((item) => item.category === toggle)
143 | .map((project) => (
144 |
145 | ))}
146 |
147 |
148 |
149 | );
150 | };
151 |
152 | export default Projects;
153 |
--------------------------------------------------------------------------------
/3D Image ganerator/src/components/sections/Projects.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import styled from "styled-components";
3 | import { projects } from "../../data/constants";
4 | import ProjectCard from "../cards/ProjectCard";
5 |
6 | const Container = styled.div`
7 | display: flex;
8 | flex-direction: column;
9 | justify-contnet: center;
10 | margin-top: 50px;
11 | padding: 0px 16px;
12 | position: rlative;
13 | z-index: 1;
14 | align-items: center;
15 | `;
16 |
17 | const Wrapper = styled.div`
18 | position: relative;
19 | display: flex;
20 | justify-content: space-between;
21 | align-items: center;
22 | flex-direction: column;
23 | width: 100%;
24 | max-width: 1100px;
25 | gap: 12px;
26 | @media (max-width: 960px) {
27 | flex-direction: column;
28 | }
29 | `;
30 | const Title = styled.div`
31 | font-size: 52px;
32 | text-align: center;
33 | font-weight: 600;
34 | margin-top: 20px;
35 | color: ${({ theme }) => theme.text_primary};
36 | @media (max-width: 768px) {
37 | margin-top: 12px;
38 | font-size: 32px;
39 | }
40 | `;
41 | const Desc = styled.div`
42 | font-size: 18px;
43 | text-align: center;
44 | font-weight: 600;
45 | color: ${({ theme }) => theme.text_secondary};
46 | @media (max-width: 768px) {
47 | font-size: 16px;
48 | }
49 | `;
50 |
51 | const ToggleButtonGroup = styled.div`
52 | display: flex;
53 | border: 1.5px solid ${({ theme }) => theme.primary};
54 | color: ${({ theme }) => theme.primary};
55 | font-size: 16px;
56 | border-radius: 12px;
57 | font-weight 500;
58 | margin: 22px 0;
59 | @media (max-width: 768px){
60 | font-size: 12px;
61 | }
62 | `;
63 | const ToggleButton = styled.div`
64 | padding: 8px 18px;
65 | border-radius: 6px;
66 | cursor: pointer;
67 | &:hover {
68 | background: ${({ theme }) => theme.primary + 20};
69 | }
70 | @media (max-width: 768px) {
71 | padding: 6px 8px;
72 | border-radius: 4px;
73 | }
74 | ${({ active, theme }) =>
75 | active &&
76 | `
77 | background: ${theme.primary + 20};
78 | `}
79 | `;
80 | const Divider = styled.div`
81 | width: 1.5px;
82 | background: ${({ theme }) => theme.primary};
83 | `;
84 |
85 | const CardContainer = styled.div`
86 | display: flex;
87 | justify-content: center;
88 | align-items: center;
89 | gap: 28px;
90 | flex-wrap: wrap;
91 | `;
92 |
93 | const Projects = () => {
94 | const [toggle, setToggle] = useState("all");
95 | return (
96 |
97 |
98 | Projects
99 |
104 | I have worked on a wide range of projects. From web apps to android
105 | apps. Here are some of my projects.
106 |
107 |
108 |
109 | setToggle("all")}
112 | >
113 | ALL
114 |
115 |
116 | setToggle("web app")}
119 | >
120 | WEB APP"S
121 |
122 |
123 | setToggle("android app")}
126 | >
127 | ANDROID APP'S
128 |
129 |
130 | setToggle("machine learning")}
133 | >
134 | MACHINE LEARNING
135 |
136 |
137 |
138 |
139 | {toggle === "all" &&
140 | projects.map((project) => )}
141 | {projects
142 | .filter((item) => item.category === toggle)
143 | .map((project) => (
144 |
145 | ))}
146 |
147 |
148 |
149 | );
150 | };
151 |
152 | export default Projects;
153 |
--------------------------------------------------------------------------------
/src/components/sections/Contact.jsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from "react";
2 | import styled from "styled-components";
3 | import emailjs from "@emailjs/browser";
4 |
5 | const Container = styled.div`
6 | display: flex;
7 | flex-direction: column;
8 | justify-contnet: center;
9 | position: rlative;
10 | z-index: 1;
11 | align-items: center;
12 | `;
13 |
14 | const Wrapper = styled.div`
15 | position: relative;
16 | display: flex;
17 | justify-content: space-between;
18 | align-items: center;
19 | flex-direction: column;
20 | width: 100%;
21 | max-width: 1100px;
22 | gap: 12px;
23 | @media (max-width: 960px) {
24 | flex-direction: column;
25 | }
26 | `;
27 | const Title = styled.div`
28 | font-size: 52px;
29 | text-align: center;
30 | font-weight: 600;
31 | margin-top: 20px;
32 | color: ${({ theme }) => theme.text_primary};
33 | @media (max-width: 768px) {
34 | margin-top: 12px;
35 | font-size: 32px;
36 | }
37 | `;
38 | const Desc = styled.div`
39 | font-size: 18px;
40 | text-align: center;
41 | font-weight: 600;
42 | color: ${({ theme }) => theme.text_secondary};
43 | @media (max-width: 768px) {
44 | font-size: 16px;
45 | }
46 | `;
47 |
48 | const ContactForm = styled.div`
49 | width: 95%;
50 | max-width: 600px;
51 | display: flex;
52 | flex-direction: column;
53 | background-color: rgba(17, 25, 40, 0.83);
54 | border: 1px solid rgba(255, 255, 255, 0.125);
55 | padding: 32px;
56 | border-radius: 12px;
57 | box-shadow: rgba(23, 92, 230, 0.1) 0px 4px 24px;
58 | margin-top: 28px;
59 | gap: 12px;
60 | `;
61 | const ContactTitle = styled.div`
62 | font-size: 28px;
63 | margin-bottom: 6px;
64 | font-weight: 600;
65 | color: ${({ theme }) => theme.text_primary};
66 | `;
67 | const ContactInput = styled.input`
68 | flex: 1;
69 | background-color: transparent;
70 | border: 1px solid ${({ theme }) => theme.text_secondary + 50};
71 | outline: none;
72 | font-size: 18px;
73 | color: ${({ theme }) => theme.text_primary};
74 | border-radius: 12px;
75 | padding: 12px 16px;
76 | &:focus {
77 | border: 1px solid ${({ theme }) => theme.primary};
78 | }
79 | `;
80 | const ContactInputMessage = styled.textarea`
81 | flex: 1;
82 | background-color: transparent;
83 | border: 1px solid ${({ theme }) => theme.text_secondary + 50};
84 | outline: none;
85 | font-size: 18px;
86 | color: ${({ theme }) => theme.text_primary};
87 | border-radius: 12px;
88 | padding: 12px 16px;
89 | &:focus {
90 | border: 1px solid ${({ theme }) => theme.primary};
91 | }
92 | `;
93 | const ContactButton = styled.input`
94 | width: 100%;
95 | text-decoration: none;
96 | text-align: center;
97 | background: hsla(271, 100%, 50%, 1);
98 | padding: 13px 16px;
99 | margin-top: 2px;
100 | border-radius: 12px;
101 | border: none;
102 | color: ${({ theme }) => theme.text_primary};
103 | font-size: 18px;
104 | font-weight: 600;
105 | `;
106 |
107 | const Contact = () => {
108 | const form = useRef();
109 | const handelSubmit = (e) => {
110 | e.preventDefault();
111 | emailjs
112 | .sendForm(
113 | "service_tox7kqs",
114 | "template_nv7k7mj",
115 | form.current,
116 | "SybVGsYS52j2TfLbi"
117 | )
118 | .then(
119 | (result) => {
120 | alert("Message Sent");
121 | form.current.result();
122 | },
123 | (error) => {
124 | alert(error);
125 | }
126 | );
127 | };
128 | return (
129 |
130 |
131 | Contact
132 |
137 | Feel free to reach out to me for any questions or opportunities!
138 |
139 |
140 | Email Me 🚀
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 | );
150 | };
151 |
152 | export default Contact;
153 |
--------------------------------------------------------------------------------
/3D Image ganerator/src/components/sections/Contact.jsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from "react";
2 | import styled from "styled-components";
3 | import emailjs from "@emailjs/browser";
4 |
5 | const Container = styled.div`
6 | display: flex;
7 | flex-direction: column;
8 | justify-contnet: center;
9 | position: rlative;
10 | z-index: 1;
11 | align-items: center;
12 | `;
13 |
14 | const Wrapper = styled.div`
15 | position: relative;
16 | display: flex;
17 | justify-content: space-between;
18 | align-items: center;
19 | flex-direction: column;
20 | width: 100%;
21 | max-width: 1100px;
22 | gap: 12px;
23 | @media (max-width: 960px) {
24 | flex-direction: column;
25 | }
26 | `;
27 | const Title = styled.div`
28 | font-size: 52px;
29 | text-align: center;
30 | font-weight: 600;
31 | margin-top: 20px;
32 | color: ${({ theme }) => theme.text_primary};
33 | @media (max-width: 768px) {
34 | margin-top: 12px;
35 | font-size: 32px;
36 | }
37 | `;
38 | const Desc = styled.div`
39 | font-size: 18px;
40 | text-align: center;
41 | font-weight: 600;
42 | color: ${({ theme }) => theme.text_secondary};
43 | @media (max-width: 768px) {
44 | font-size: 16px;
45 | }
46 | `;
47 |
48 | const ContactForm = styled.div`
49 | width: 95%;
50 | max-width: 600px;
51 | display: flex;
52 | flex-direction: column;
53 | background-color: rgba(17, 25, 40, 0.83);
54 | border: 1px solid rgba(255, 255, 255, 0.125);
55 | padding: 32px;
56 | border-radius: 12px;
57 | box-shadow: rgba(23, 92, 230, 0.1) 0px 4px 24px;
58 | margin-top: 28px;
59 | gap: 12px;
60 | `;
61 | const ContactTitle = styled.div`
62 | font-size: 28px;
63 | margin-bottom: 6px;
64 | font-weight: 600;
65 | color: ${({ theme }) => theme.text_primary};
66 | `;
67 | const ContactInput = styled.input`
68 | flex: 1;
69 | background-color: transparent;
70 | border: 1px solid ${({ theme }) => theme.text_secondary + 50};
71 | outline: none;
72 | font-size: 18px;
73 | color: ${({ theme }) => theme.text_primary};
74 | border-radius: 12px;
75 | padding: 12px 16px;
76 | &:focus {
77 | border: 1px solid ${({ theme }) => theme.primary};
78 | }
79 | `;
80 | const ContactInputMessage = styled.textarea`
81 | flex: 1;
82 | background-color: transparent;
83 | border: 1px solid ${({ theme }) => theme.text_secondary + 50};
84 | outline: none;
85 | font-size: 18px;
86 | color: ${({ theme }) => theme.text_primary};
87 | border-radius: 12px;
88 | padding: 12px 16px;
89 | &:focus {
90 | border: 1px solid ${({ theme }) => theme.primary};
91 | }
92 | `;
93 | const ContactButton = styled.input`
94 | width: 100%;
95 | text-decoration: none;
96 | text-align: center;
97 | background: hsla(271, 100%, 50%, 1);
98 | padding: 13px 16px;
99 | margin-top: 2px;
100 | border-radius: 12px;
101 | border: none;
102 | color: ${({ theme }) => theme.text_primary};
103 | font-size: 18px;
104 | font-weight: 600;
105 | `;
106 |
107 | const Contact = () => {
108 | const form = useRef();
109 | const handelSubmit = (e) => {
110 | e.preventDefault();
111 | emailjs
112 | .sendForm(
113 | "service_tox7kqs",
114 | "template_nv7k7mj",
115 | form.current,
116 | "SybVGsYS52j2TfLbi"
117 | )
118 | .then(
119 | (result) => {
120 | alert("Message Sent");
121 | form.current.result();
122 | },
123 | (error) => {
124 | alert(error);
125 | }
126 | );
127 | };
128 | return (
129 |
130 |
131 | Contact
132 |
137 | Feel free to reach out to me for any questions or opportunities!
138 |
139 |
140 | Email Me 🚀
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 | );
150 | };
151 |
152 | export default Contact;
153 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 🌟 3D Image Generator
2 |
3 | ## 🖼️ Overview
4 | Welcome to **3D Image Generator** – a powerful web application that allows users to generate stunning 3D images dynamically using modern web technologies! This project is built with **React, HTML, CSS, JavaScript**, and utilizes a **database** to store and manage generated images.
5 |
6 | This project is designed for developers, designers, and enthusiasts looking to create and manipulate 3D visuals seamlessly. It provides an intuitive UI with smooth rendering, offering various customization options to tweak and enhance 3D images in real time.
7 |
8 | ---
9 |
10 | ## 🚀 Features
11 | ✅ Generate high-quality 3D images dynamically
12 | ✅ Interactive UI with smooth animations and real-time previews
13 | ✅ Database integration for storing and retrieving images
14 | ✅ Customizable rendering settings, textures, and lighting
15 | ✅ Ability to save and share generated images
16 | ✅ User authentication for personalized image storage
17 | ✅ Responsive layout for seamless experience on all devices
18 | ✅ Secure API for fetching and managing images
19 | ✅ Cross-browser compatibility
20 |
21 | ---
22 |
23 | ## 🛠️ Tech Stack
24 | - **Frontend:**
25 | 🎨 **React** 
26 | 🌐 **HTML5** 
27 | 🎨 **CSS3** 
28 | ⚡ **JavaScript** 
29 |
30 | - **Backend:**
31 | 🖥️ **Node.js** 
32 | ⚙️ **Express.js** 
33 |
34 | - **Database:**
35 | 🗄️ **MongoDB**  / 🔥 **Firebase** 
36 |
37 | - **Other Tools:**
38 | 🎭 **Three.js** 
39 | 🔄 **Redux** 
40 | 📦 **Webpack** 
41 |
42 | ---
43 |
44 | ## 📦 Installation
45 | Follow these steps to set up the project on your local machine:
46 |
47 | ### 1️⃣ Clone the Repository
48 | ```bash
49 | git clone https://github.com/FNICKE/3d-image-generator.git
50 | cd 3d-image-generator
51 | ```
52 |
53 | ### 2️⃣ Install Dependencies
54 | ```bash
55 | npm install
56 | ```
57 |
58 | ### 3️⃣ Start the Development Server
59 | ```bash
60 | npm start
61 | ```
62 | The app should now be running at `http://localhost:3000/` 🚀
63 |
64 | ---
65 |
66 | ## 🗃️ Database Setup
67 | 1. **MongoDB** (if using MongoDB):
68 | - Install MongoDB and run: `mongod`
69 | - Create a `.env` file and set up `MONGO_URI`
70 | 2. **Firebase** (if using Firebase):
71 | - Create a Firebase project and configure the credentials
72 | - Update `firebaseConfig.js` with your API keys
73 |
74 | ---
75 |
76 | ## 💡 How to Use
77 | 1️⃣ Open the app in your browser
78 | 2️⃣ Customize your image settings (textures, lighting, rotation, depth, etc.)
79 | 3️⃣ Click **Generate** to create a 3D image
80 | 4️⃣ Preview and modify the image in real time
81 | 5️⃣ Save or share the image with others!
82 | 6️⃣ Login to store images in the database for future use
83 |
84 | ---
85 |
86 | ## 🏗️ Future Enhancements
87 | 🔹 AI-based image enhancement for better rendering
88 | 🔹 More 3D effects, materials, and filters
89 | 🔹 Drag-and-drop model importing
90 | 🔹 User authentication with OAuth
91 | 🔹 WebGL optimizations for improved performance
92 | 🔹 Mobile-friendly touch-based interactions
93 | 🔹 Integration with cloud storage for seamless access
94 |
95 | ---
96 |
97 | ## 🤝 Contributing
98 | Contributions are welcome! Feel free to fork this repo, create a new branch, and submit a pull request. Make sure to follow the contribution guidelines.
99 |
100 | ---
101 |
102 | ## 📜 License
103 | This project is licensed under the **MIT License**.
104 |
105 | ---
106 |
107 | ## 📬 Contact
108 | For queries or suggestions, reach out at: [rathodsachin0766@gmail.com](mailto:rathodsachin0766@gmail.com)
109 |
110 | ---
111 |
112 | ### 🎉 Happy Coding & Enjoy Creating 3D Images! 🚀
113 |
114 |
--------------------------------------------------------------------------------
/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { Link as LinkR } from "react-router-dom";
3 | import styled, { useTheme } from "styled-components";
4 | import { Bio } from "../data/constants";
5 | import { MenuRounded } from "@mui/icons-material";
6 |
7 | const Nav = styled.div`
8 | background-color: ${({ theme }) => theme.bg};
9 | height: 80px;
10 | display: flex;
11 | align-items: center;
12 | justify-content: center;
13 | font-size: 1rem;
14 | position: sticky;
15 | top: 0;
16 | z-index: 10;
17 | color: white;
18 | `;
19 |
20 | const NavbarContainer = styled.div`
21 | width: 100%;
22 | max-width: 1200px;
23 | padding: 0 24px;
24 | display: flex;
25 | align-items: center;
26 | justify-content: space-between;
27 | font-size: 1rem;
28 | `;
29 | const NavLogo = styled(LinkR)`
30 | width: 80%;
31 | padding: 0 6px;
32 | font-weight: 500;
33 | font-size: 18px;
34 | text-decoration: none;
35 | color: inherit;
36 | `;
37 |
38 | const NavItems = styled.ul`
39 | width: 100%;
40 | display: flex;
41 | align-items: center;
42 | justify-content: center;
43 | gap: 32px;
44 | padding: 0 6px;
45 | list-style: none;
46 |
47 | @media screen and (max-width: 768px) {
48 | display: none;
49 | }
50 | `;
51 |
52 | const NavLink = styled.a`
53 | color: ${({ theme }) => theme.text_primary};
54 | font-weight: 500;
55 | cursor: pointer;
56 | transition: all 0.2s ease-in-out;
57 | text-decoration: none;
58 | &:hover {
59 | color: ${({ theme }) => theme.primary};
60 | }
61 | `;
62 |
63 | const ButtonContainer = styled.div`
64 | width: 80%;
65 | height: 100%;
66 | display: flex;
67 | justify-content: end;
68 | align-items: center;
69 | padding: 0 6px;
70 | @media screen and (max-width: 768px) {
71 | display: none;
72 | }
73 | `;
74 |
75 | const GithubButton = styled.a`
76 | border: 1px solid ${({ theme }) => theme.primary};
77 | color: ${({ theme }) => theme.primary};
78 | justify-content: center;
79 | display: flex;
80 | align-items: center;
81 | border-radius: 20px;
82 | cursor: pointer;
83 | padding: 10px 20px;
84 | font-size: 16px;
85 | font-weight: 500;
86 | transition: all 0.6s ease-in-out;
87 | text-decoration: none;
88 | &:hover {
89 | background: ${({ theme }) => theme.primary};
90 | color: ${({ theme }) => theme.text_primary};
91 | }
92 | `;
93 |
94 | const MobileIcon = styled.div`
95 | height: 100%;
96 | display: flex;
97 | align-items: center;
98 | color: ${({ theme }) => theme.text_primary};
99 | display: none;
100 | @media screen and (max-width: 768px) {
101 | display: block;
102 | }
103 | `;
104 |
105 | const MobileMenu = styled.ul`
106 | width: 100%;
107 | display: flex;
108 | flex-direction: column;
109 | align-items: start;
110 | gap: 16px;
111 | padding: 0 6px;
112 | list-style: none;
113 | width: 100%;
114 | padding: 12px 40px 24px 40px;
115 | background: ${({ theme }) => theme.card_light + 99};
116 | position: absolute;
117 | top: 80px;
118 | right: 0;
119 |
120 | transition: all 0.6s ease-in-out;
121 | transform: ${({ isOpen }) =>
122 | isOpen ? "translateY(0)" : "translateY(-100%)"};
123 | border-radius: 0 0 20px 20px;
124 | box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
125 | opacity: ${({ isOpen }) => (isOpen ? "100%" : "0")};
126 | z-index: ${({ isOpen }) => (isOpen ? "1000" : "-1000")};
127 | `;
128 |
129 | const Navbar = () => {
130 | const [isOpen, setIsOpen] = useState(false);
131 | const theme = useTheme();
132 | return (
133 |
186 | );
187 | };
188 |
189 | export default Navbar;
190 |
--------------------------------------------------------------------------------
/3D Image ganerator/src/components/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { Link as LinkR } from "react-router-dom";
3 | import styled, { useTheme } from "styled-components";
4 | import { Bio } from "../data/constants";
5 | import { MenuRounded } from "@mui/icons-material";
6 |
7 | const Nav = styled.div`
8 | background-color: ${({ theme }) => theme.bg};
9 | height: 80px;
10 | display: flex;
11 | align-items: center;
12 | justify-content: center;
13 | font-size: 1rem;
14 | position: sticky;
15 | top: 0;
16 | z-index: 10;
17 | color: white;
18 | `;
19 |
20 | const NavbarContainer = styled.div`
21 | width: 100%;
22 | max-width: 1200px;
23 | padding: 0 24px;
24 | display: flex;
25 | align-items: center;
26 | justify-content: space-between;
27 | font-size: 1rem;
28 | `;
29 | const NavLogo = styled(LinkR)`
30 | width: 80%;
31 | padding: 0 6px;
32 | font-weight: 500;
33 | font-size: 18px;
34 | text-decoration: none;
35 | color: inherit;
36 | `;
37 |
38 | const NavItems = styled.ul`
39 | width: 100%;
40 | display: flex;
41 | align-items: center;
42 | justify-content: center;
43 | gap: 32px;
44 | padding: 0 6px;
45 | list-style: none;
46 |
47 | @media screen and (max-width: 768px) {
48 | display: none;
49 | }
50 | `;
51 |
52 | const NavLink = styled.a`
53 | color: ${({ theme }) => theme.text_primary};
54 | font-weight: 500;
55 | cursor: pointer;
56 | transition: all 0.2s ease-in-out;
57 | text-decoration: none;
58 | &:hover {
59 | color: ${({ theme }) => theme.primary};
60 | }
61 | `;
62 |
63 | const ButtonContainer = styled.div`
64 | width: 80%;
65 | height: 100%;
66 | display: flex;
67 | justify-content: end;
68 | align-items: center;
69 | padding: 0 6px;
70 | @media screen and (max-width: 768px) {
71 | display: none;
72 | }
73 | `;
74 |
75 | const GithubButton = styled.a`
76 | border: 1px solid ${({ theme }) => theme.primary};
77 | color: ${({ theme }) => theme.primary};
78 | justify-content: center;
79 | display: flex;
80 | align-items: center;
81 | border-radius: 20px;
82 | cursor: pointer;
83 | padding: 10px 20px;
84 | font-size: 16px;
85 | font-weight: 500;
86 | transition: all 0.6s ease-in-out;
87 | text-decoration: none;
88 | &:hover {
89 | background: ${({ theme }) => theme.primary};
90 | color: ${({ theme }) => theme.text_primary};
91 | }
92 | `;
93 |
94 | const MobileIcon = styled.div`
95 | height: 100%;
96 | display: flex;
97 | align-items: center;
98 | color: ${({ theme }) => theme.text_primary};
99 | display: none;
100 | @media screen and (max-width: 768px) {
101 | display: block;
102 | }
103 | `;
104 |
105 | const MobileMenu = styled.ul`
106 | width: 100%;
107 | display: flex;
108 | flex-direction: column;
109 | align-items: start;
110 | gap: 16px;
111 | padding: 0 6px;
112 | list-style: none;
113 | width: 100%;
114 | padding: 12px 40px 24px 40px;
115 | background: ${({ theme }) => theme.card_light + 99};
116 | position: absolute;
117 | top: 80px;
118 | right: 0;
119 |
120 | transition: all 0.6s ease-in-out;
121 | transform: ${({ isOpen }) =>
122 | isOpen ? "translateY(0)" : "translateY(-100%)"};
123 | border-radius: 0 0 20px 20px;
124 | box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
125 | opacity: ${({ isOpen }) => (isOpen ? "100%" : "0")};
126 | z-index: ${({ isOpen }) => (isOpen ? "1000" : "-1000")};
127 | `;
128 |
129 | const Navbar = () => {
130 | const [isOpen, setIsOpen] = useState(false);
131 | const theme = useTheme();
132 | return (
133 |
186 | );
187 | };
188 |
189 | export default Navbar;
190 |
--------------------------------------------------------------------------------
/src/components/sections/Hero.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import { Bio } from "../../data/constants";
4 | import Typewriter from "typewriter-effect";
5 | import HeroImg from "../../images/HeroImage.jpg";
6 | import HeroBgAnimation from "../HeroBgAnimation";
7 | import { Tilt } from "react-tilt";
8 | import { motion } from "framer-motion";
9 | import {
10 | headContainerAnimation,
11 | headContentAnimation,
12 | headTextAnimation,
13 | } from "../../utils/motion";
14 | import StarCanvas from "../canvas/Stars";
15 |
16 | const HeroContainer = styled.div`
17 | display: flex;
18 | justify-content: center;
19 | position: relative;
20 | padding: 80px 30px;
21 | z-index: 1;
22 |
23 | @media (max-width: 960px) {
24 | padding: 66px 16px;
25 | }
26 |
27 | @media (max-width: 640px) {
28 | padding: 32px 16px;
29 | }
30 |
31 | clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 95%, 0 100%);
32 | `;
33 | const HeroInnerContainer = styled.div`
34 | position: relative;
35 | display: flex;
36 | justify-content: space-between;
37 | align-items: center;
38 | width: 100%;
39 | max-width: 1100px;
40 |
41 | @media (max-width: 960px) {
42 | flex-direction: column;
43 | }
44 | `;
45 | const HeroLeftContainer = styled.div`
46 | width: 100%;
47 | order: 1;
48 | @media (max-width: 960px) {
49 | order: 2;
50 | margin-bottom: 30px;
51 | display: flex;
52 | gap: 6px;
53 | flex-direction: column;
54 | align-items: center;
55 | }
56 | `;
57 | const HeroRightContainer = styled.div`
58 | width: 100%;
59 | order: 2;
60 | display: flex;
61 | justify-content: end;
62 | @media (max-width: 960px) {
63 | order: 1;
64 | display: flex;
65 | flex-direction: column;
66 | align-items: center;
67 | justify-contents: center;
68 | margin-bottom: 80px;
69 | }
70 |
71 | @media (max-width: 640px) {
72 | margin-bottom: 30px;
73 | }
74 | `;
75 |
76 | const Title = styled.div`
77 | font-weight: 700;
78 | font-size: 50px;
79 | color: ${({ theme }) => theme.text_primary};
80 | line-height: 68px;
81 |
82 | @media (max-width: 960px) {
83 | text-align: center;
84 | }
85 |
86 | @media (max-width: 960px) {
87 | font-size: 40px;
88 | line-height: 48px;
89 | margin-bottom: 8px;
90 | }
91 | `;
92 |
93 | const TextLoop = styled.div`
94 | font-weight: 600;
95 | font-size: 32px;
96 | display: flex;
97 | gap: 12px;
98 | color: ${({ theme }) => theme.text_primary};
99 | line-height: 68px;
100 |
101 | @media (max-width: 960px) {
102 | text-align: center;
103 | }
104 |
105 | @media (max-width: 960px) {
106 | font-size: 22px;
107 | line-height: 48px;
108 | margin-bottom: 16px;
109 | }
110 | `;
111 |
112 | const Span = styled.div`
113 | cursor: pointer;
114 | color: ${({ theme }) => theme.primary};
115 | `;
116 |
117 | const SubTitle = styled.div`
118 | font-size: 20px;
119 | line-height: 32px;
120 | margin-bottom: 42px;
121 | color: ${({ theme }) => theme.text_primary + 95};
122 |
123 | @media (max-width: 960px) {
124 | text-align: center;
125 | }
126 |
127 | @media (max-width: 960px) {
128 | font-size: 16px;
129 | line-height: 32px;
130 | }
131 | `;
132 |
133 | const ResumeButton = styled.a`
134 | -webkit-appearance: button;
135 | -moz-appearance: button;
136 | appearance: button;
137 | text-decoration: none;
138 |
139 | width: 95%;
140 | max-width: 300px;
141 | text-align: center;
142 | padding: 16px 0;
143 |
144 | background: hsla(271, 100%, 50%, 1);
145 | background: linear-gradient(
146 | 225deg,
147 | hsla(271, 100%, 50%, 1) 0%,
148 | hsla(294, 100%, 50%, 1) 100%
149 | );
150 | background: -moz-linear-gradient(
151 | 225deg,
152 | hsla(271, 100%, 50%, 1) 0%,
153 | hsla(294, 100%, 50%, 1) 100%
154 | );
155 | background: -webkit-linear-gradient(
156 | 225deg,
157 | hsla(271, 100%, 50%, 1) 0%,
158 | hsla(294, 100%, 50%, 1) 100%
159 | );
160 | box-shadow: 20px 20px 60px #1f2634, -20px -20px 60px #1f2634;
161 | border-radius: 50px;
162 | font-weight: 600;
163 | font-size: 20px;
164 |
165 | &:hover {
166 | transform: scale(1.05);
167 | transition: all 0.4s ease-in-out;
168 | box-shadow: 20px 20px 60px #1F2634,
169 | filter: brightness(1);
170 | }
171 |
172 |
173 | @media (max-width: 640px) {
174 | padding: 12px 0;
175 | font-size: 18px;
176 | }
177 | color: white;
178 | `;
179 |
180 | const Img = styled.img`
181 | border-radius: 50%;
182 | width: 100%;
183 | height: 100%;
184 | max-width: 400px;
185 | max-height: 400px;
186 | border: 2px solid ${({ theme }) => theme.primary};
187 |
188 | @media (max-width: 640px) {
189 | max-width: 280px;
190 | max-height: 280px;
191 | }
192 | `;
193 |
194 | const HeroBg = styled.div`
195 | position: absolute;
196 | display: flex;
197 | justify-content: end;
198 | top: 0;
199 | right: 0;
200 | bottom: 0;
201 | left: 0;
202 | width: 100%;
203 | height: 100%;
204 | max-width: 1360px;
205 | overflow: hidden;
206 | padding: 0 30px;
207 | top: 50%;
208 | left: 50%;
209 | -webkit-transform: translateX(-50%) translateY(-50%);
210 | transform: translateX(-50%) translateY(-50%);
211 |
212 | @media (max-width: 960px) {
213 | justify-content: center;
214 | padding: 0 0px;
215 | }
216 | `;
217 |
218 | const Hero = () => {
219 | return (
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 | Hi, I am <br /> {Bio.name}
233 |
234 |
235 | I am a
236 |
237 |
244 |
245 |
246 |
247 |
248 |
249 | {Bio.description}
250 |
251 |
252 |
253 | Check Resume
254 |
255 |
256 |
257 |
258 |
259 | 
260 |
261 |
262 |
263 |
264 |
265 |
266 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 | Hi, I am <br /> {Bio.name}
233 |
234 |
235 | I am a
236 |
237 |
244 |
245 |
246 |
247 |
248 |
249 | {Bio.description}
250 |
251 |
252 |
253 | Check Resume
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
5 |
362 |
5 |
362 |