Fixed Glow Outline

frontend/src/App.jsx

@@ -10,6 +10,32 @@ import Scene from './components/Scene.jsx';
 import * as THREE from 'three';
 import { useGLTF } from '@react-three/drei';
 
+/**
+ * App component is the main entry point of the application. 
+ * It manages the application state, including hovered and clicked 3D objects,
+ * splash screen visibility, and fade animations. It uses Three.js for rendering
+ * 3D scenes and manages navigation link interactions.
+ * 
+ * State:
+ * - hoveredObject: Tracks the object currently hovered by the user.
+ * - clickedObject: Tracks the object currently clicked by the user.
+ * - showSplash: Determines whether the splash screen should be displayed.
+ * - startFade: Controls the fade-in effect of the home page.
+ * 
+ * Refs:
+ * - mobileTextBoxRef: Reference to the mobile text box container.
+ * - desktopTextBoxRef: Reference to the desktop text box container.
+ * 
+ * Effects:
+ * - GLTF model initialization and shadow settings.
+ * - Splash screen and background color fade timing.
+ * 
+ * Handlers:
+ * - handlePointerOver: Sets the hovered object.
+ * - handlePointerOut: Resets the hovered object.
+ * - handleClick: Updates the clicked object and resets scroll position.
+ * - handleNavLinkClick: Updates the clicked object based on navigation link interaction.
+ */
 function App() {
   const [hoveredObject, setHoveredObject] = useState(null);
   const [clickedObject, setClickedObject] = useState(null);
@@ -149,4 +175,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

frontend/src/components/Scene.jsx

@@ -54,16 +54,16 @@ const Scene = ({ collegeAppAssist, gear,
   useFrame(() => {
 
     const selectedObjects = [];
-    if (hoveredObject !== 'collegeAppAssist') {
+    if (hoveredObject === 'collegeAppAssist' || clickedObject === 'collegeAppAssist') {
       selectedObjects.push(collegeAppAssist);
     }
-    if (hoveredObject !== 'gear') {
+    if (hoveredObject === 'gear' || clickedObject === 'gear') {
       selectedObjects.push(gear);
     }
-    if (hoveredObject !== 'briefcase') {
+    if (hoveredObject === 'briefcase' || clickedObject === 'briefcase') {
       selectedObjects.push(briefcase);
     }
-    if (hoveredObject !== 'shoppingBag') {
+    if (hoveredObject === 'shoppingBag' || clickedObject === 'shoppingBag') {
       selectedObjects.push(shoppingBag);
     }
     outlinePassRef.current.selectedObjects = selectedObjects;
@@ -186,7 +186,8 @@ const Scene = ({ collegeAppAssist, gear,
         minAzimuthAngle={0}
         maxAzimuthAngle={0}
         minPolarAngle={Math.PI / 4}
-        maxPolarAngle={Math.PI / 4}
+        maxP
+        olarAngle={Math.PI / 4}
       />
     </>
   );

frontend/src/components/TextboxContent.jsx

@@ -5,9 +5,14 @@ const TextboxContent = ({ clickedObjectId }) => {
   switch (clickedObjectId) {
     case "briefcase":
       return <div className="md:p-5 p-3 px-6 md:px-8">
-        <h4 className="text-center text-2xl font-bold p-3 pb-6 md:text-3xl">Careers</h4>
-        <p className='text-md pb-5'>Whether you're a developer, marketer, designer, or product manager, there's a place for you here at Arctex. We are always on the lookout for passionate, innovative, and driven individuals to help us make an impact on the world.
-        </p>
+        <h4 className="text-center text-2xl font-bold text-slate-500 p-3 pb-6 md:text-3xl">Careers</h4>
+        <div className = "text-md text-xl pb-5">
+        <span>Whether you're a </span> 
+        <span className='text-gray-500 font-bold'>developer, marketer, designer, or product manager, </span>
+        <span>there's a place for you here at Arctex. We are always on the lookout for passionate, innovative, and driven individuals to help us make an impact on the world.</span>
+        </div>
+
+
         <p className='text-md pb-5'>Interested in joining us? We post jobs on LinkedIn and Handshake.</p>
         <p>Our Handshake:</p>
         <a target="_blank" className='text-md text-blue-500' href="https://app.joinhandshake.com/e/983808">app.joinhandshake.com/e/983808</a>
@@ -41,7 +46,7 @@ const TextboxContent = ({ clickedObjectId }) => {
       <a target="_blank" className='text-md pb-5 md:text-md text-blue-500' href="https://cal.com/chrisho/contract">cal.com/chrisho/contract</a>
     </div>;
     case "gear":
-      return <div className="md:p-5 p-3 px-6 md:px-8">
+      return <div className="max-xl:flex-col max-container md:p-5 p-3 px-6 md:px-8">
       <h4 className="text-center text-2xl font-bold p-3 pb-6 md:text-3xl">Services</h4>
       <p className='text-md pb-5'>Arctex offers contract software development services for organizations wanting custom software solutions.
       </p>

frontend/src/main.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import Index from './index'
+//import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>