image and video render fix

package.json

@@ -31,14 +31,14 @@
     "slick-carousel": "^1.8.1",
     "three": "^0.163.0",
     "typescript": "^4.9.5",
-    "vercel": "^34.1.3",
+    "vercel": "^34.1.4",
     "web-vitals": "^3.5.2",
     "webpack": "^5.91.0",
     "webpack-bundle-analyzer": "^4.10.2"
   },
   "scripts": {
     "analyze": "node analyzer.js",
-    "deploy": "pnpm run build && vercel --prod && gh-pages -d build",
+    "deploy": "pnpm run build; vercel --prod; gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",

src/components/common/navbar.tsx

@@ -45,7 +45,7 @@ export const NavBar: React.FC = () => {
           <NavbarBrand className='navBrand' id="name" >Austin Hutchen </NavbarBrand>
           <CustomNavbarToggler onClick={toggle} isOpen={isOpen} isToggled={isToggled} />        </div>
 
-        <Collapse isOpen={isOpen} navbar classname="navFlex">
+        <Collapse isOpen={isOpen} navbar className="navFlex">
           <Nav className="mr-auto d-flex justify-content-center align-items-center nav-horizontal" navbar>
             <NavItem className="nav-item">
               <Button style={{ border: '1px solid white' }} onClick={() => nav('/')}>

src/components/pages/landing.tsx

@@ -81,7 +81,10 @@ export const Landing: React.FC = () => {
         <h2 className="hlight-mini" style={{ paddingTop: '3svw', fontSize: '4.0svh' }}>
           <b>Welcome to my website! I'm Austin, a Software Engineer & Computer Optimization Nerd.</b>
         </h2>
-        <div ><iframe title="math" src="https://giphy.com/embed/zPbnEgxsPJOJSD3qfr" allowFullScreen></iframe></div>
+        <div ><iframe height="50%" width="auto" title="math" src="https://giphy.com/embed/zPbnEgxsPJOJSD3qfr" allowFullScreen></iframe>
+
+        </div>
+        <br />
         <div className="max-w-screen-lg mx-auto flex flex-col items-center justify-center h-full px-4 md:flex-row">
           <div className="flex flex-col justify-center h-full">
 
@@ -114,6 +117,8 @@ export const Landing: React.FC = () => {
           <HiArrowNarrowRight size={'1em'} className="ml-3" />
         </button>
         <br />
+        <Spinner />
+
         <button
           style={{ marginBottom: '0.2em' }}
           className="btn btn-success"
@@ -130,7 +135,6 @@ export const Landing: React.FC = () => {
         <img height="150vh" width="auto" src="https://github-readme-stats.vercel.app/api/top-langs/?username=austinhutchen&hide_progress=true&langs_count=12&theme=react&hide=cmake,html,css,Objective-C++" alt="GitHub Stats" />
         <img height="150vh" width="auto" src="https://github-readme-stats.vercel.app/api?username=austinhutchen&show_icons=true&theme=gruvbox&include_all_commits=false" alt="GitHub Stats" />
         <div className="aside">
-          <Spinner />
 
         </div>
         <TextSphere />