Skip to content

Instantly share code, notes, and snippets.

@adrianhajdin

adrianhajdin/constants.js

Created March 3, 2023 09:28
Show Gist options
  • Save adrianhajdin/b1d33c262941a7e21aad833a1cfc84b1 to your computer and use it in GitHub Desktop.
Save adrianhajdin/b1d33c262941a7e21aad833a1cfc84b1 to your computer and use it in GitHub Desktop.
Download ZIP
Build and Deploy an Amazing 3D Web Developer Portfolio with ThreeJS | React Three Fiber
Raw
constants.js
import {
mobile,
backend,
creator,
web,
javascript,
typescript,
html,
css,
reactjs,
redux,
tailwind,
nodejs,
mongodb,
git,
figma,
docker,
meta,
starbucks,
tesla,
shopify,
carrent,
jobit,
tripguide,
threejs,
} from "../assets";
export const navLinks = [
{
id: "about",
title: "About",
},
{
id: "work",
title: "Work",
},
{
id: "contact",
title: "Contact",
},
];
const services = [
{
title: "Web Developer",
icon: web,
},
{
title: "React Native Developer",
icon: mobile,
},
{
title: "Backend Developer",
icon: backend,
},
{
title: "Content Creator",
icon: creator,
},
];
const technologies = [
{
name: "HTML 5",
icon: html,
},
{
name: "CSS 3",
icon: css,
},
{
name: "JavaScript",
icon: javascript,
},
{
name: "TypeScript",
icon: typescript,
},
{
name: "React JS",
icon: reactjs,
},
{
name: "Redux Toolkit",
icon: redux,
},
{
name: "Tailwind CSS",
icon: tailwind,
},
{
name: "Node JS",
icon: nodejs,
},
{
name: "MongoDB",
icon: mongodb,
},
{
name: "Three JS",
icon: threejs,
},
{
name: "git",
icon: git,
},
{
name: "figma",
icon: figma,
},
{
name: "docker",
icon: docker,
},
];
const experiences = [
{
title: "React.js Developer",
company_name: "Starbucks",
icon: starbucks,
iconBg: "#383E56",
date: "March 2020 - April 2021",
points: [
"Developing and maintaining web applications using React.js and other related technologies.",
"Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
"Implementing responsive design and ensuring cross-browser compatibility.",
"Participating in code reviews and providing constructive feedback to other developers.",
],
},
{
title: "React Native Developer",
company_name: "Tesla",
icon: tesla,
iconBg: "#E6DEDD",
date: "Jan 2021 - Feb 2022",
points: [
"Developing and maintaining web applications using React.js and other related technologies.",
"Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
"Implementing responsive design and ensuring cross-browser compatibility.",
"Participating in code reviews and providing constructive feedback to other developers.",
],
},
{
title: "Web Developer",
company_name: "Shopify",
icon: shopify,
iconBg: "#383E56",
date: "Jan 2022 - Jan 2023",
points: [
"Developing and maintaining web applications using React.js and other related technologies.",
"Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
"Implementing responsive design and ensuring cross-browser compatibility.",
"Participating in code reviews and providing constructive feedback to other developers.",
],
},
{
title: "Full stack Developer",
company_name: "Meta",
icon: meta,
iconBg: "#E6DEDD",
date: "Jan 2023 - Present",
points: [
"Developing and maintaining web applications using React.js and other related technologies.",
"Collaborating with cross-functional teams including designers, product managers, and other developers to create high-quality products.",
"Implementing responsive design and ensuring cross-browser compatibility.",
"Participating in code reviews and providing constructive feedback to other developers.",
],
},
];
const testimonials = [
{
testimonial:
"I thought it was impossible to make a website as beautiful as our product, but Rick proved me wrong.",
name: "Sara Lee",
designation: "CFO",
company: "Acme Co",
image: "https://randomuser.me/api/portraits/women/4.jpg",
},
{
testimonial:
"I've never met a web developer who truly cares about their clients' success like Rick does.",
name: "Chris Brown",
designation: "COO",
company: "DEF Corp",
image: "https://randomuser.me/api/portraits/men/5.jpg",
},
{
testimonial:
"After Rick optimized our website, our traffic increased by 50%. We can't thank them enough!",
name: "Lisa Wang",
designation: "CTO",
company: "456 Enterprises",
image: "https://randomuser.me/api/portraits/women/6.jpg",
},
];
const projects = [
{
name: "Car Rent",
description:
"Web-based platform that allows users to search, book, and manage car rentals from various providers, providing a convenient and efficient solution for transportation needs.",
tags: [
{
name: "react",
color: "blue-text-gradient",
},
{
name: "mongodb",
color: "green-text-gradient",
},
{
name: "tailwind",
color: "pink-text-gradient",
},
],
image: carrent,
source_code_link: "https://github.com/",
},
{
name: "Job IT",
description:
"Web application that enables users to search for job openings, view estimated salary ranges for positions, and locate available jobs based on their current location.",
tags: [
{
name: "react",
color: "blue-text-gradient",
},
{
name: "restapi",
color: "green-text-gradient",
},
{
name: "scss",
color: "pink-text-gradient",
},
],
image: jobit,
source_code_link: "https://github.com/",
},
{
name: "Trip Guide",
description:
"A comprehensive travel booking platform that allows users to book flights, hotels, and rental cars, and offers curated recommendations for popular destinations.",
tags: [
{
name: "nextjs",
color: "blue-text-gradient",
},
{
name: "supabase",
color: "green-text-gradient",
},
{
name: "css",
color: "pink-text-gradient",
},
],
image: tripguide,
source_code_link: "https://github.com/",
},
];
export { services, technologies, experiences, testimonials, projects };
Raw
index.css
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
color-scheme: dark;
}
.hash-span {
margin-top: -100px;
padding-bottom: 100px;
display: block;
}
.black-gradient {
background: #000000; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right,
#434343,
#000000
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right,
#434343,
#000000
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.violet-gradient {
background: #804dee;
background: linear-gradient(-90deg, #804dee 0%, rgba(60, 51, 80, 0) 100%);
background: -webkit-linear-gradient(
-90deg,
#804dee 0%,
rgba(60, 51, 80, 0) 100%
);
}
.green-pink-gradient {
background: "#00cea8";
background: linear-gradient(90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
background: -webkit-linear-gradient(-90.13deg, #00cea8 1.9%, #bf61ff 97.5%);
}
.orange-text-gradient {
background: #f12711; /* fallback for old browsers */
background: -webkit-linear-gradient(
to top,
#f12711,
#f5af19
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to top,
#f12711,
#f5af19
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.green-text-gradient {
background: #11998e; /* fallback for old browsers */
background: -webkit-linear-gradient(
to top,
#11998e,
#38ef7d
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to top,
#11998e,
#38ef7d
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.blue-text-gradient {
/* background: -webkit-linear-gradient(#eee, #333); */
background: #56ccf2; /* fallback for old browsers */
background: -webkit-linear-gradient(
to top,
#2f80ed,
#56ccf2
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to top,
#2f80ed,
#56ccf2
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.pink-text-gradient {
background: #ec008c; /* fallback for old browsers */
background: -webkit-linear-gradient(
to top,
#ec008c,
#fc6767
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to top,
#ec008c,
#fc6767
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* canvas- styles */
.canvas-loader {
font-size: 10px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
animation: mulShdSpin 1.1s infinite ease;
transform: translateZ(0);
}
@keyframes mulShdSpin {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #ffffff,
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff,
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff,
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff,
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff,
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff,
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
}
}
Raw
motion.js
export const textVariant = (delay) => {
return {
hidden: {
y: -50,
opacity: 0,
},
show: {
y: 0,
opacity: 1,
transition: {
type: "spring",
duration: 1.25,
delay: delay,
},
},
};
};
export const fadeIn = (direction, type, delay, duration) => {
return {
hidden: {
x: direction === "left" ? 100 : direction === "right" ? -100 : 0,
y: direction === "up" ? 100 : direction === "down" ? -100 : 0,
opacity: 0,
},
show: {
x: 0,
y: 0,
opacity: 1,
transition: {
type: type,
delay: delay,
duration: duration,
ease: "easeOut",
},
},
};
};
export const zoomIn = (delay, duration) => {
return {
hidden: {
scale: 0,
opacity: 0,
},
show: {
scale: 1,
opacity: 1,
transition: {
type: "tween",
delay: delay,
duration: duration,
ease: "easeOut",
},
},
};
};
export const slideIn = (direction, type, delay, duration) => {
return {
hidden: {
x: direction === "left" ? "-100%" : direction === "right" ? "100%" : 0,
y: direction === "up" ? "100%" : direction === "down" ? "100%" : 0,
},
show: {
x: 0,
y: 0,
transition: {
type: type,
delay: delay,
duration: duration,
ease: "easeOut",
},
},
};
};
export const staggerContainer = (staggerChildren, delayChildren) => {
return {
hidden: {},
show: {
transition: {
staggerChildren: staggerChildren,
delayChildren: delayChildren || 0,
},
},
};
};
Raw
styles.js
const styles = {
paddingX: "sm:px-16 px-6",
paddingY: "sm:py-16 py-6",
padding: "sm:px-16 px-6 sm:py-16 py-10",
heroHeadText:
"font-black text-white lg:text-[80px] sm:text-[60px] xs:text-[50px] text-[40px] lg:leading-[98px] mt-2",
heroSubText:
"text-[#dfd9ff] font-medium lg:text-[30px] sm:text-[26px] xs:text-[20px] text-[16px] lg:leading-[40px]",
sectionHeadText:
"text-white font-black md:text-[60px] sm:text-[50px] xs:text-[40px] text-[30px]",
sectionSubText:
"sm:text-[18px] text-[14px] text-secondary uppercase tracking-wider",
};
export { styles };
Raw
tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx}"],
mode: "jit",
theme: {
extend: {
colors: {
primary: "#050816",
secondary: "#aaa6c3",
tertiary: "#151030",
"black-100": "#100d25",
"black-200": "#090325",
"white-100": "#f3f3f3",
},
boxShadow: {
card: "0px 35px 120px -15px #211e35",
},
screens: {
xs: "450px",
},
backgroundImage: {
"hero-pattern": "url('/src/assets/herobg.png')",
},
},
},
plugins: [],
};
@Gunkirat15
Copy link

@subhransu720 did your issue get solved? Am getting the same error

@HannesAlexandersson
Copy link

Have you checked the index file in the assets folder and made sure it imports and exports the actual images correctly?

@ShailyMacwan
Copy link

@subhransu720 did your issue get solved? Am getting the same error

Yes, I mean the issue was with the logo, menu, close from assets only. I could not figure out what the issue was. I just pasted them in public folder and then imported it from there only in my code. This solve my issue

@AsimRamdurg12
Copy link

In the NavBar Section, when I click on About, Work, or Contact instead of going to that particular section it refreshes the page. Anyone has a solution for this?

@saschaschmittinger
Copy link

saschaschmittinger commented Oct 30, 2024 •
edited
Loading

i have so mutch problems with this Project its not funny . In the Computer Comp. the hemisphereLight intensity={1.5} groundColor="black" dosnt work i get nothing in the browser. i find out that it works with hemisphereLight intensity={Math.PI} groundColor="black" You have to write Math.PI not 1.5. The SectionWrapper dosnt work at all. I dont know i cant fix it.

@Ogieriakhi17
Copy link

Hi has anyone had problems with creating the initial homepage. None of the components are beinn rendered when I run. Like none. even when i copy and paste the components straight from github. Did you guys modify the components? Let me know.

@Z4hn
Copy link

Z4hn commented Jan 14, 2025

Hey just getting into this space of work and this might be a stupid problem to have or maybe not a problem at all... however if anyone is still active on this page and can help that'd be great. Coming right out the starting place i am having an issue. This image is what my vscode looks like. I noticed in his tutorial that the "bg-primary" was picked up by his editor as a color value and mine is being submitted as a string it seems? Why does his color value in the div className="relative z-0 bg-primary" (BG-PRIMARY) have a swatch next to it indicating that his value has passed through as a color value and mine is just orange an passes through as a string. I don't think that i've done any step that he said wrong but clearly, I have somewhere?

My screen:
problem1

His screen:
soultion1

What exactly is the problem here because when I run "npx run dev" we don't have the same result?

@Rowenna000
Copy link

Please help it says: Failed to resolve import "../styles" from "src/components/Feedbacks.jsx". Does the file exist?
image

@RodnyPHP
Copy link

RodnyPHP commented Feb 3, 2025 via email

@Rowenna000
Copy link

Hi Rowenna, I hope you're doing great! I noticed that you're encountering an issue with resolving the import of "../styles" from "src/components/Feedbacks.jsx." This error usually occurs when the file path is incorrect or if the file doesn't exist in the specified location. Could you please double-check to see if the "../styles" file is present in the directory you mentioned? Sometimes, a small typo or misplaced file can cause such issues. If the file is indeed there, it might be worth verifying the exact path is correct. Feel free to let me know if you need any further assistance, and I'll be happy to help you troubleshoot this problem. Good luck! Best regards,
…
___________________________________________ R. Berzins - IT MANAGMENT
________________________________ No: Rowenna000 @.> Nosūtīts: Monday, February 3, 2025 11:33:09 AM Kam: Rowenna000 @.> Kopija: Manual @.***> Tēma: Re: adrianhajdin/constants.js @Rowenna000 commented on this gist.
________________________________ Please help it says: Failed to resolve import "../styles" from "src/components/Feedbacks.jsx". Does the file exist? image.png (view on web)https://gist.github.com/user-attachments/assets/323b56ea-70ad-4fd8-b335-d2347f4a51dd — Reply to this email directly, view it on GitHubhttps://gist.github.com/adrianhajdin/b1d33c262941a7e21aad833a1cfc84b1#gistcomment-5420146 or unsubscribehttps://github.com/notifications/unsubscribe-auth/ASFVTGW5KVJLLOEVBGA5CCL2N5AWPBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTEMJSGAZDCNBQU52HE2LHM5SXFJTDOJSWC5DF. You are receiving this email because you are subscribed to this thread. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

Thanks RodnyPHP!

@Rowenna000
Copy link

image
Why i got white screen, Actually i am in minutes 19.42

Can share the console log too?

My problem have fixed.. thank u broo

Hi, how do you fix this? Mine showing white screen too at the same minutes..

@areejirshad
Copy link

vgfjvh
I am showing this error in lighting part of desktop model Model is showing but all lighting properties are not showing on it saying unknown properties How can I resolve this? Does anybody elese encounter this problem

@yassinebenkacem123
Copy link

vgfjvh I am showing this error in lighting part of desktop model Model is showing but all lighting properties are not showing on it saying unknown properties How can I resolve this? Does anybody elese encounter this problem

i have the same error as yours, and when i asked deepseek he told me that the problem in the @react-three-models.... and don't know how can i solve it :'(

@yassinebenkacem123
Copy link

guys i think the problem in react version if the canvas is not work with you, canvas work only in react 18 + ...< 19

@Code-With-Bitwizards-20
Copy link

I have a lot of problems and heache because the tailwind css is not working at starting and he is guiding tailwind debug around 30mins and also using the oldest version of tailwind css please guide me according to tailwind css version 4

@Nivnivu
Copy link

Nivnivu commented Mar 5, 2025

I have a lot of problems and heache because the tailwind css is not working at starting and he is guiding tailwind debug around 30mins and also using the oldest version of tailwind css please guide me according to tailwind css version 4
@Code-With-Bitwizards-20
i suggest you will work with the exact versions on this rep, you can copy the package json and npm install it .
you can visit my github for working with Vercel version at 3d-portfolio , this is how it looks - www.nivbarsh.com
i am also using whatsapp bot for contact and not email service. and much more changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment