resume and pages

imbirdperson · Oct 6, 2024 · c638f73 · c638f73
1 parent b1de1a5
commit c638f73
Show file tree

Hide file tree

Showing 15 changed files with 260 additions and 38 deletions.
diff --git a/components/Footer.js b/components/Footer.js
@@ -1,19 +1,19 @@
 import Link from 'next/link';
-const Footer = () => {
+const Footer = ({mode=""}) => {
     return (
         <>
         <div className='footer-wrapper'>
             <div className='left'>
-                <Link href="https://github.com/imbirdperson">GITHUB</Link>
-                <Link href="https://youtube.com/@DeepakRajan">LINKEDIN</Link>
+                <Link href="https://www.instagram.com/deepak_rajan_/" style={{color:mode}} >Instagram</Link>
+                <Link href="https://youtube.com/@DeepakRajan" style={{color:mode}} >YOUTUBE</Link>
             </div>
             <div className='mid'>
-                <Link href="https://www.instagram.com/deepak_rajan_/">Instagram</Link>
-                <Link href="https://youtube.com/@DeepakRajan">YOUTUBE</Link>
+                <Link href="https://github.com/imbirdperson" style={{color:mode}} >GITHUB</Link>
+                <Link href="https://youtube.com/@DeepakRajan" style={{color:mode}} >LINKEDIN</Link>
             </div>
             <div className='right'>
-                <Link href="https://www.instagram.com/deepak_rajan_/">EMAIL</Link>
-                <Link href="https://youtube.com/@DeepakRajan">CONTACT</Link>
+                <Link href="mailto:example@example.com" style={{color:mode}} >EMAIL</Link>
+                {/* <Link href="https://youtube.com/@DeepakRajan">CONTACT</Link> */}
             </div>
         </div>
         </>

diff --git a/components/ProjectPage.js b/components/ProjectPage.js
@@ -0,0 +1,47 @@
+import Head from 'next/head';
+import Footer from '../components/Footer';
+
+const ProjectPage = ({page_title,title, year_type=[], desc, img_src,banner_height="none", children }) => {
+    let banner_final_height = "100%";
+    if(banner_height !='none'){
+        banner_final_height = banner_height;
+    }
+    return (
+        <>
+        <Head>
+            <title>{page_title}</title>
+        </Head>
+        <div className='content-item'>
+
+        <div className = "work-header-wrapper">
+            <div className='work-header'>
+                <div className="work-title">
+                    {title}
+                </div>
+                <div className="year">
+                    {year_type.map((item, index)=>(
+                        <p key={index}>{item}</p>
+                    ))}
+                </div>
+
+                <div className='desc'>
+                    {desc}
+                </div>
+            </div>
+        </div>
+        <img className='poster' 
+            src={img_src}
+            style={{height: banner_final_height}}
+        />
+        {/* <div className='work-content-wrapper'> */}
+            <div className='work-main-content-wrapper'>
+                {children}
+            </div>
+        {/* </div> */}
+        </div>
+        <Footer/>
+        </>
+    )
+}
+
+export default ProjectPage;
diff --git a/components/elements/BlogImage.js b/components/elements/BlogImage.js
@@ -4,9 +4,9 @@ const BlogImage = ({src, content="" ,height='none'}) => {
         final_height = height;
     }
     return (
-        <div className='image-wrapper'>
-            <img className="image" src={src} style={{height: final_height}}/>
-            <div className='img-content'>{content}</div>
+        <div className='blog-image-wrapper'>
+            <img className="blog-image" src={src} style={{height: final_height}}/>
+            <div className='blog-img-content'>{content}</div>
         </div>
     )
 }

diff --git a/data/art_data.js b/data/art_data.js
@@ -36,9 +36,9 @@ const ImageData = [
             aspect_ratio: 1.8/2,
             name:"Broad Strokes",
         },
-        {img: "https://cdnb.artstation.com/p/assets/images/images/080/661/945/large/deepak-rajan-79857749-653879448692338-1588000486580926311-n-1440x1440.jpg?1728180371",
+        {img: "https://cdnb.artstation.com/p/assets/images/images/080/669/593/large/deepak-rajan-render-0004.jpg?1728214690",
             aspect_ratio: 2/2,
-            name:"Translucent",
+            name:"ASCII",
         },
     ],
     [
@@ -65,17 +65,10 @@ const ImageData = [
     ],
     [
 
-        {img: "https://freight.cargo.site/t/original/i/ea748786d0c688958f163256664009ff0c6e5cc6f79231bfac6610ea90018844/bok_1941_radiationtrap_walton_o.jpg",
-            aspect_ratio: 1.6/2,
-            name:"temp content",
-        },
-        {img: "https://freight.cargo.site/w/900/q/75/i/ae1fac319abc772deba3c678fc0a2da066b5b24c581c763c91b5489846a979d9/14412241190_0c1aa63ede_o.jpg",
-            aspect_ratio: 1.6/2,
-            name:"temp content",
-        },
-        {img: "https://freight.cargo.site/w/800/q/75/i/f45ff1a140ff477d2c7ba6bb88b41e1b910fd33d1321221e9bfcf917fd9fc641/CRI_115793_o.jpg",
-            aspect_ratio: 1.6/2,
-            name:"temp content",
+
+        {img: "https://cdnb.artstation.com/p/assets/images/images/080/661/945/large/deepak-rajan-79857749-653879448692338-1588000486580926311-n-1440x1440.jpg?1728180371",
+            aspect_ratio: 2/2,
+            name:"Translucent",
         },
     ]
 ]

diff --git a/pages/anim-short.js b/pages/anim-short.js
@@ -0,0 +1,49 @@
+import ProjectPage from '../components/ProjectPage';
+import Paragraph from '../components/elements/Paragraph';
+import BlogImage from '../components/elements/BlogImage';
+
+const AnimShort = () => {
+    const year_type = [
+        "2024",
+        "ART",
+        "DEVELOPMENT"
+    ]
+
+    const desc = `
+    This short film is in the early stage of production.
+    If you are willing to join and work with me, please reach out! 
+    `
+    return (
+        <ProjectPage
+            page_title="Animation Short Film — Deepak Rajan"
+            title="Animated Short Film"
+            year_type={year_type}
+            desc={desc}
+            img_src="/images/adya.png"
+            banner_height='700px'
+        >
+
+        <div className="work-main-content">
+
+            <h2>
+                Pre-production
+            </h2>
+            <p>
+                These are some of the concept arts and inital 3d tests I have been doing.
+            </p>
+            <BlogImage
+            src="https://cdna.artstation.com/p/assets/images/images/080/665/830/large/deepak-rajan-img-0230.jpg?1728202000"
+            content='Adya - Concept art'
+            />
+            <BlogImage
+            src="https://cdna.artstation.com/p/assets/images/images/080/667/664/large/deepak-rajan-clipboard-2024-10-06-20-25-50.jpg?1728208606"
+            content='Procedural Tree generation for environment.'
+            />
+        </div>
+
+
+        </ProjectPage>
+    )
+}
+
+export default AnimShort;
diff --git a/pages/art.js b/pages/art.js
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import ImageData from '../data/art_data';
 import Head from 'next/head';
+import Footer from '../components/Footer';
 
 const ArtPage = () => {
     const [isFullScreen, setIsFullScreen] = useState(false);
@@ -34,6 +35,7 @@ const ArtPage = () => {
                 ))}
             </div>
         </div>
+        <Footer mode="black"/>
         </>
     )
 }

diff --git a/pages/blog/index.js b/pages/blog/index.js
@@ -12,7 +12,7 @@ const BlogPostData = [
     {
     name:"Bending branches using Math",
     image:"/images/adya.png",
-    desc:"Branching logic using math and some non-linear transformation to shape them.",
+    desc:"Vegetation branch logic using math and some non-linear transformation to shape them.",
     url:"blog/bending-branches",
     date: "20 Sep 2024",
     },

diff --git a/pages/profile.js b/pages/profile.js
@@ -1,12 +1,34 @@
 import Head from 'next/head';
+import Link from 'next/link';
+import { GoUnread } from "react-icons/go";
+import { GoLinkExternal } from "react-icons/go";
+import Footer from '@/components/Footer';
+
 const Profile = () => {
     return (
         <>
         <Head>
             <title>Deepak Rajan — Profile</title>
         </Head>
         <div className="content-item">
-            Profile
+            <div className='profile-wrapper'>
+                <div className='profile-item-wrapper'>
+                    <div className='profile-item bold'>Visual Effects Artist</div>
+                    <div className='profile-item'>Filmmaker & Animator</div>
+                    <div className='profile-item'>Architect</div>
+                    <Link href="mailto:[email protected]">
+                        <div className='profile-item email'>Email
+                        </div>
+                        <GoUnread />
+                    </Link>
+
+                    <Link href='/resume'>
+                        <div className='profile-item email'>Resume
+                        </div>
+                        <GoLinkExternal />
+                    </Link>
+                </div>
+            </div>
         </div>
         </>
     )

diff --git a/pages/resume.js b/pages/resume.js
@@ -3,6 +3,7 @@ import Link from 'next/link';
 import { GoDotFill } from "react-icons/go";
 import { GoHorizontalRule } from "react-icons/go";
 import { GoArrowUpRight } from "react-icons/go";
+import { GoLinkExternal } from "react-icons/go";
 
 
 const Resume = () => {
@@ -20,16 +21,19 @@ const Resume = () => {
                 <b>Deepak</b> Rajan
             </div>
             <div className="about">
-                Hello! 
-                As an architect and visual effects artist, 
-                I have honed my skills in blending design,
-                technology, and storytelling.
-                My journey across these fields has given me a unique 
-                perspective on spatial aesthetics and visual narratives.
-                Now, driven by a passion for directing,
-                I aim to merge my architectural precision and 
-                creative visual expertise to craft compelling stories on 
-                screen, exploring the limitless possibilities of film and visual storytelling.
+                Hello!
+
+                As both a visual effects artist and architect,
+                I’ve always been deeply passionate about the intersection of art and technology.
+                <br/>
+                <br/>
+                My love for animation led me on a journey to teach myself visual effects and animation software.
+                After three years of working in the visual effects industry,
+                I now have a solid understanding of how these fields operate,
+                combining both creative and technical aspects.
+                I feel that now is the perfect time to bring my skills together to tell the stories 
+                I’ve always wanted to share, using the power of visual effects and animation.
+
             </div>
 
             <div className="heading">

diff --git a/style/components/footer.scss b/style/components/footer.scss
@@ -25,4 +25,10 @@
             color:$text-color;
         }
     }
+
+    .dark{
+        a{
+            color:$background-color;
+        }
+    }
 }
diff --git a/style/components/work-component.scss b/style/components/work-component.scss
@@ -70,3 +70,44 @@
 
 }
 
+.work-main-content-wrapper{
+    display: flex;
+    width:100%;
+    justify-content: center;
+
+    .work-main-content{
+        max-width: 900px;
+        width:100%;
+
+      p{
+            font-family: $font-serif;
+            font-family: $font-inter;
+            font-weight: 350;
+            line-height: 22px;
+            padding: 10px 0px;
+        }
+
+        h1{
+            font-size: 40px;
+            font-family: $font-inter;
+
+        } 
+
+        h2{
+            font-family: $font-inter;
+            font-size: 25px;
+            font-weight: 600;
+            padding: 20px 0px;
+            padding-top:30px;
+        }
+
+        h3{
+
+            font-family: $font-inter;
+            font-size: 18px;
+            font-weight: 500;
+            padding: 10px 0px;
+        }
+
+    }
+}
diff --git a/style/index.scss b/style/index.scss
@@ -30,6 +30,7 @@ $max-width-mobile: 768px;
 @import 'pages/art.scss';
 @import 'pages/resume.scss';
 @import 'pages/showreel.scss';
+@import 'pages/profile.scss';
 
 body{
   background-color: $background-color;

diff --git a/style/pages/art.scss b/style/pages/art.scss
@@ -64,10 +64,10 @@
     .title{
 
                 padding-top:10px;
-                font-size:11px;
+                font-size:12px;
                 font-weight: 400;
-                letter-spacing: 1px;
                 text-transform: uppercase;
+                color:$background-color;
 
     }
   }

diff --git a/style/pages/blog.scss b/style/pages/blog.scss
@@ -147,4 +147,25 @@
         font-size:30px;
     }
 
-}
+}
+
+.blog-image-wrapper{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    .blog-image{
+        width:100%;
+        height: 100%;
+        overflow: hidden;
+        object-fit: cover;
+        padding: 10px 0px;
+
+    }
+
+    .blog-img-content{
+        font-size: 12px; 
+        font-weight: 100;
+        color:$gray-500;
+    }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,4 +25,10 @@ @@
                 color:$text-color;
             }
         }
+        .dark{
+            a{
+                color:$background-color;
+            }
+        }
     }