diff --git a/app/components/floating_action_button.tsx b/app/components/floating_action_button.tsx new file mode 100644 index 0000000..7f80abe --- /dev/null +++ b/app/components/floating_action_button.tsx @@ -0,0 +1,11 @@ +import { ArrowUpIcon } from "@/icons/icons"; + +export default function FloatingHomeButton( + {onClick} : + {onClick? : ()=> void}) { + return ( +
{if (onClick != null) onClick()}}> + +
+ ) +} \ No newline at end of file diff --git a/app/components/styled_button.tsx b/app/components/styled_button.tsx index 99c93b9..5253e73 100644 --- 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 ( - diff --git a/app/components/tailwind_app_bar.tsx b/app/components/tailwind_app_bar.tsx index 35fb98e..f5c2715 100644 --- 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 index 253e59a..cc17999 100644 --- a/app/icons/icons.tsx +++ b/app/icons/icons.tsx @@ -74,3 +74,23 @@ export function DarkModeIcon({className = ""}: {className?: string}) { ); } + +export function ArrowUpIcon({className = ""}: {className?: string}) { + return ( + + + + ); +} + + + + + + diff --git a/app/layout_child.tsx b/app/layout_child.tsx index 9e34ef6..3e164cd 100644 --- a/app/layout_child.tsx +++ b/app/layout_child.tsx @@ -11,8 +11,8 @@ 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 ( @@ -20,6 +20,7 @@ return ( +
{children}
diff --git a/app/page_content.tsx b/app/page_content.tsx index e82dee7..65f1350 100644 --- 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 = [ @@ -57,47 +59,84 @@ function Copyright() { export default function PageContent() : JSX.Element { - const { scrollYProgress } = useScroll(); + const { scrollYProgress } = useScroll(); - return ( -
-
- - + return ( +
+
+
+ + + + scrollToFn("home") + } + /> + {/* Hero unit */} + +
- {/* Hero unit */} - + {/* Buttons */} +
+ + + + + + + + + + + +
+
+
+
+

About Me

+
+
+
    +
  • 7+ years as a full-stack developer working with enterprise applications.
    • +
  • Experience developing AWS Cloud Solutions along with writing Infrastructure as Code.
    • +
  • Hobbyist Android Developer working with Compose, on custom CI/CD workflows.
    • +
+
+ +
+ {/* Project Cards */} +
+
+
+

Projects

- - - - {/* Buttons */} -
- - - - - - - +
+ {cards} +
+
+ +
+
+
+

Contact

+
+
+
    +
  • Find me on Github
    • +
  • Send me an email: goldy131992@gmail.com
    • +
+
+ +
+ - - - -
- - {/* Project Cards */} -
- {cards} -
- {/* Footer */} -
- -
- {/* End footer */} - -
+ {/* Footer */} +
+ +
+ {/* End footer */} + +
); } diff --git a/app/utils.tsx b/app/utils.tsx new file mode 100644 index 0000000..b27a6a2 --- /dev/null +++ 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); + } + } + } \ No newline at end of file