Added template for developer portfolio

goldy1992 · Nov 11, 2023 · 1d6c58c · 1d6c58c
1 parent 875109c
commit 1d6c58c
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 41 deletions.
diff --git a/app/components/floating_action_button.tsx b/app/components/floating_action_button.tsx
@@ -0,0 +1,11 @@
+import { ArrowUpIcon } from "@/icons/icons";
+
+export default function FloatingHomeButton(
+    {onClick} : 
+    {onClick? : ()=> void}) {
+    return (
+        <div className="fixed bottom-3 end-3 rounded-full bg-cyan-700 items-center p-4" onClick={() => {if (onClick != null) onClick()}}>
+            <ArrowUpIcon className="stroke-sky-800 hover:cursor-pointer dark:stroke-sky-100 w-6 h-6" />
+        </div>
+    )
+}
diff --git a/app/components/styled_button.tsx b/app/components/styled_button.tsx
@@ -1,7 +1,16 @@
+import { scrollToFn } from "@/utils";
 
-export default function StyledButton({name, children}: {name: string, children?: React.ReactNode}) {
+export default function StyledButton(
+  {name, scrollTo, children}
+  : {name: string, scrollTo?: string, children?: React.ReactNode}) {
+
+
+
   return (
-    <button className="uppercase bg-sky-400 dark:bg-sky-800 dark:hover:bg-sky-700 hover:drow-shadow-md hover:bg-sky-500 hover:cursor-pointer text-sky-900 dark:text-sky-100 font-bold py-2 px-4 rounded inline-flex items-center border-0">
+    <button
+      onClick=
+      {() => scrollToFn(scrollTo)}
+      className="uppercase bg-sky-400 dark:bg-sky-800 dark:hover:bg-sky-700 hover:drow-shadow-md hover:bg-sky-500 hover:cursor-pointer text-sky-900 dark:text-sky-100 font-bold py-2 px-4 rounded inline-flex items-center border-0">
     {children}
     <span>{name}</span>
   </button>

diff --git a/app/components/tailwind_app_bar.tsx b/app/components/tailwind_app_bar.tsx
@@ -2,7 +2,6 @@ import Image from 'next/image'
 import { useContext, useEffect, useState } from 'react';
 import DarkModeButton from '../dark_mode_button';
 import { IsDarkModeContext } from '../dark_mode_context';
-import {  motion, useMotionValueEvent, useScroll} from "framer-motion"
 const duration = 0.3
 export default function TailwindAppBar() {
 

diff --git a/app/icons/icons.tsx b/app/icons/icons.tsx
@@ -74,3 +74,23 @@ export function DarkModeIcon({className = ""}: {className?: string}) {
 </svg>
     );
 }
+
+export function ArrowUpIcon({className = ""}: {className?: string}) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" 
+            fill="none" 
+            viewBox="0 0 24 24" 
+            strokeWidth="1.5" 
+            stroke="currentColor" className={className}>
+            <path strokeLinecap="round" 
+                strokeLinejoin="round" 
+                d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" />
+        </svg>
+    );
+}
+
+
+
+
+
+
diff --git a/app/layout_child.tsx b/app/layout_child.tsx
@@ -11,15 +11,16 @@ export default function RootChild({
 }) {
   const darkModeContext = useContext(IsDarkModeContext)
   var darkMode = darkModeContext.enabled
-  const htmlClass = darkMode ? "dark" : ""
-
+  const isDarkMode = darkMode ? "dark" : ""
+  const htmlClass = isDarkMode + " scroll-smooth"
   const bodyClassName = 'bg-neutral-100 dark:bg-neutral-900 ' + inter.className
 return (
 
 
       <html lang="th" className={htmlClass}>
 
         <body className={bodyClassName}>
+          <div id="home" />
           <div className='bg-neutral-100 dark:bg-neutral-900'>
             {children}
           </div>

diff --git a/app/page_content.tsx b/app/page_content.tsx
@@ -5,6 +5,8 @@ import { Project, ProjectBuilder } from "./project";
 import StyledButton from "./components/styled_button";
 import TailwindAppBar from "./components/tailwind_app_bar";
 import TextWriter from "./text_writer";
+import FloatingHomeButton from "./components/floating_action_button";
+import { scrollToFn } from "./utils";
 
 
 const projects : Array<Project> = [
@@ -57,47 +59,84 @@ function Copyright() {
 
 
 export default function PageContent() : JSX.Element {
-    const { scrollYProgress } = useScroll();
+  const { scrollYProgress } = useScroll();
 
-    return (
-        <main> 
-          <div className='flex flex-col'>   
-            <motion.div style={{ scaleX: scrollYProgress }} className='origin-bottom-left fixed place-self-start bottom-0 left-0 right-0 h-1 bg-black dark:bg-white' />
-            <TailwindAppBar /> 
+  return (
+    <main> 
+      <div id="home" />
+      <div className='flex flex-col'>   
+        <motion.div style={{ scaleX: scrollYProgress }} className='origin-bottom-left fixed place-self-start bottom-0 left-0 right-0 h-1 bg-black dark:bg-white' />
+        <TailwindAppBar />
+        <FloatingHomeButton onClick={() =>
+          scrollToFn("home")
+        }
+         /> 
+        {/* Hero unit */}
+        <TextWriter />
+      </div>
 
-          {/* Hero unit */}
-          <TextWriter />
+      {/* Buttons */}
+      <div className="flex justify-center pt-4 space-x-2">
+        <StyledButton name='Projects' scrollTo="projects">
+          <CodeProjectsIcon className="fill-transparent dark:stroke-sky-100 stoke-sky-900 w-4 h-4 mr-2" />
+        </StyledButton>
+
+        <StyledButton name='About' scrollTo="about">
+          <InfoIcon className="fill-transparent dark:stroke-sky-100 stoke-sky-900 w-4 h-4 mr-2" />
+        </StyledButton>
+
+        <StyledButton name='Contact' scrollTo="contact">
+          <ContactIcon className="fill-transparent dark:stroke-sky-100 stoke-sky-900 w-4 h-4 mr-2" />  
+        </StyledButton>
+      </div>
+    <div id="about" />
+    <div className="flex flex-col dark:bg-neutral-800 px-4 py-3 bg-neutral-200 items-center pt-4 mt-8">
+      <div>
+        <h2 className="font-bold text-xl py-2 text-gray-800 dark:text-gray-200">About Me</h2>
+      </div>
+      <div className="rounded py-1 px-7 dark:bg-neutral-700 bg-neutral-300">
+        <ul className="list-disc text-medium py-4 text-gray-800 dark:text-gray-200">
+          <li>7+ years as a full-stack developer working with enterprise applications.</li>
+          <li>Experience developing AWS Cloud Solutions along with writing Infrastructure as Code.</li>
+          <li>Hobbyist Android Developer working with Compose, on custom CI/CD workflows.</li>
+        </ul>
+      </div>
+
+    </div>
+      {/* Project Cards */}
+      <div id="projects" />
+      <div className="flex flex-col dark:bg-neutral-800 bg-neutral-200 items-center pt-4 mt-8">
+        <div>
+          <h2 className="font-bold text-xl text-gray-800 dark:text-gray-200">Projects</h2>
         </div>
-
-
-
-            {/* Buttons */}
-            <div className="flex justify-center pt-4 space-x-2">
-              <StyledButton name='Projects'>
-                <CodeProjectsIcon className="fill-transparent dark:stroke-sky-100 stoke-sky-900 w-4 h-4 mr-2" />
-              </StyledButton>
-
-              <StyledButton name='About' >
-                <InfoIcon className="fill-transparent dark:stroke-sky-100 stoke-sky-900 w-4 h-4 mr-2" />
-              </StyledButton>
+        <div className="p-8 justify-center self-center rounded grid grid-cols-1 sm:grid-cols-2 gap-4 md:grid-cols-4 ">
+          {cards}
+        </div>
+      </div>
+
+      <div id="contact" />
+      <div className="flex flex-col dark:bg-neutral-800 px-4 py-3 bg-neutral-200 items-center pt-4 mt-8">
+      <div>
+        <h2 className="font-bold text-xl py-2 text-gray-800 dark:text-gray-200">Contact</h2>
+      </div>
+      <div className="rounded py-1 px-7 dark:bg-neutral-700 bg-neutral-300">
+        <ul className="list-disc text-medium py-4 text-gray-800 dark:text-gray-200">
+          <li>Find me on Github</li>
+          <li>Send me an email: [email protected]</li>
+        </ul>
+      </div>
+
+    </div>
+
 
-              <StyledButton name='Contact'>
-                <ContactIcon className="fill-transparent dark:stroke-sky-100 stoke-sky-900 w-4 h-4 mr-2" />  
-              </StyledButton>
-            </div>
-
-          {/* Project Cards */}
-          <div className="p-8 justify-center self-center rounded grid grid-cols-1 sm:grid-cols-2 gap-4 md:grid-cols-4 dark:bg-neutral-800 bg-neutral-200">
-             {cards}
-          </div>
 
-        {/* Footer */}
-        <div className='flex-none flex flex-col items-center pt-4 pb-2'>
-          <Copyright />
-          </div>
-        {/* End footer */}
-       
-      </main>
+  {/* Footer */}
+  <div className='flex-none flex flex-col items-center pt-4 pb-2'>
+    <Copyright />
+    </div>
+  {/* End footer */}
+
+</main>
     );
   }
 

diff --git a/app/utils.tsx b/app/utils.tsx
@@ -0,0 +1,9 @@
+
+export const scrollToFn : (arg?: string) => void = (arg) => {
+    if (arg != null) {
+      let el = document.getElementById(arg);
+      if (el != null) {
+        el.scrollIntoView(true);
+      }
+    }
+  }