Added back to top button and fixed links

Author: sivert-io

components/MdxConvertedComponents.tsx

@@ -67,7 +67,7 @@ Components["KBD"] = (props) => {
 
 Components["Link"] = (props) => {
   return (
-    <Link target="_blank" {...props}>
+    <Link target={props.href !== undefined && props.href[0] !== '/' ? "_blank" : '_self'} {...props}>
       {props.children}
     </Link>
   );

config/animations.ts

@@ -1,5 +1,5 @@
 const exitAnimation = { opacity: 0, y: 10, transition: { duration: .1, ease: 'linear' } }
-const transition = { type: 'spring', stiffness: 200 }
+export const transition = { type: 'spring', stiffness: 200 }
 export const staggerTransition = { staggerChildren: 0.05 } as const
 
 export const ArticleCardVariant = {

pages/posts/[slug].tsx

@@ -2,13 +2,15 @@ import { format, parseISO } from "date-fns";
 import { allPosts, Post } from "contentlayer/generated";
 import { useMDXComponent } from "next-contentlayer/hooks";
 import MotionWrapper from "components/MotionWrapper";
-import { ArticleContentVariant, staggerTransition } from "config/animations";
+import { ArticleContentVariant, staggerTransition, transition } from "config/animations";
 import StaggerWrapper from "components/StaggerWrapper";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Components } from "components/MdxConvertedComponents";
 import { ImageWithFallback } from "components/ImageWithFallback";
 import { Comments } from "components/Comments";
 import { HeadMetaGenerator } from "components/HeadMetaGenerator";
+import {FaArrowUp} from 'react-icons/fa';
+import {motion, useMotionValueEvent, useScroll} from 'framer-motion'
 
 export async function getStaticPaths() {
   const paths: string[] = allPosts.map((post) => post.url);
@@ -31,6 +33,9 @@ export async function getStaticProps({ params }) {
 
 const PostLayout = ({ post }: { post: Post }) => {
   const MDXContent = useMDXComponent(post.body.code);
+  const [isOpen, setIsOpen] = useState(false);
+  const scroll = useScroll();
+  useMotionValueEvent(scroll.scrollY, "change", (latest) => setIsOpen(latest > 360))
 
   return (
     <>
@@ -40,6 +45,24 @@ const PostLayout = ({ post }: { post: Post }) => {
         metaImg={post.image ? `${post.image}` : null}
         title={post.title}
       />
+      <motion.div
+        initial={false}
+        animate={isOpen ? "open" : "closed"}
+        className="fixed bottom-64 left-0 right-0 flex justify-center px-4"
+        variants={{
+          open: { y: 0, opacity: 1 },
+          closed: { y: '100%', opacity: 0 }
+        }}
+        transition={transition}
+      >
+          <div className="w-full max-w-[55rem] flex justify-end">
+          <button onClick={() => {
+            if (window !== undefined) window.scrollTo({top: 0})
+        }} className="btn btn-ghost border-0 text-base-content bg-base-100 btn-circle">
+          <FaArrowUp className="w-4 h-4"/>
+        </button>
+        </div>
+      </motion.div>
       <article
         className={`mx-auto ${
           post.image ? "py-12" : "py-32"

posts/introduction.mdx

@@ -14,16 +14,28 @@ I'm excited to share my thoughts and experiences with you, and I thought I'd sta
 
 ### My name is Sivert
 
-and I'm the creator of this blog. I've been a coding enthusiast since around the age of 13 and have over 7 years of experience in programming. I'm currently working as a Front-End developer, and in my free time, I love doing indie-game development, working on open-source projects and listening to music. I'm passionate about coding, knowledge-sharing and meeting new people, and I can't stand ananas on pizza, crowded places and an empty stomach.
+and I'm the creator of this blog. I've been passionate about coding since I was around 13, and I have over 7 years of experience in programming. Currently, I'm a Full-Stack Developer, specializing in creating sustainable web solutions. My journey in academia began with a bachelor's degree in Web Development, focusing on Sustainable Web Design. Notably, our dedication to sustainability led to the honor of receiving the prestigious Eurekaprize for our outstanding bachelor project.
 
 ### When I'm not working
 
-you can usually find me watching some serie/anime, or looking for my next Raspberry Pi project. One of my favorite things to do is **learning by doing**. I also love watching movies/series/anime, which I find super calming. Watching movies and series help fuel my passion for game development.
+you can usually find me watching some series/anime, or looking for my next Raspberry Pi project. One of my favorite things to do is **learning by doing**, and this drive extends to my academic pursuits. I'm currently studying for a master's degree in Interaction Design at the Norwegian University of Science and Technology (NTNU) in Gjøvik. My academic journey has been nothing short of rewarding.
 
 ### In terms of my professional experience
 
-I've published a research paper ([Link](https://orcid.org/0000-0001-7555-2983)), been the first bachelor student of my university to publish such a paper, and been invited to speak at the Human Computer Interaction International conference of 2023. I've published 1 paper on The Awareness and Practices of Web Developers toward Sustainable Web Design, and my work has been recognized by HCII and NTNU. I'm passionate about sustainable web development, and I'm always looking for new and exciting ways to innovate and make an impact.
+I've published two scientific papers on sustainable web design, which you can find on [Google Scholar](https://scholar.google.com/citations?hl=no&user=lB4I4UUAAAAJ) or my ORCID profile (ORCID: 0000-0001-7555-2983). These papers delve into the latest research and advancements in sustainable web design practices. My work in this field has not only garnered academic recognition but also allowed me to contribute as a Digital Sustainability Researcher.
 
-Overall, I'm excited to share my journey with you through this blog, and I hope you find my posts informative and entertaining. If you have any questions or suggestions, feel free to comment down below or [contact me through Linkedin](https://www.linkedin.com/in/sivertgullberghansen/). 
+I'm also thrilled to be developing Gryt, an open-source alternative to Discord. Gryt provides a platform for seamless communication and collaboration, and you can check it out at [Gryt.Chat](https://gryt.chat).
+
+Professionally, I work as a Front-End Developer at Norsk Tipping, where I apply my expertise in web development to create intuitive and engaging user experiences.
+
+I'm always eager to connect with like-minded individuals and contribute to exciting projects in the web development realm. Don't hesitate to reach out and let's discuss how we can create a more sustainable and innovative digital future together!
+
+Feel free to explore my [GitHub profile](https://github.com/SivertGullbergHansen), where you can find an assortment of intriguing projects in NodeJS, as well as projects showcasing my proficiency in languages like HTML, Tailwind, and TypeScript. My journey in the world of web development has been a diverse one, encompassing both front-end and back-end development.
+
+### Get in Touch
+
+If you want to reach out or simply chat, you can find me at [LinkedIn](https://www.linkedin.com/in/sivertgullberghansen).
+
+Let's embark on this journey of exploration and innovation together. Stay tuned for more exciting insights and discoveries in the world of web development and sustainability!
 
 Thanks for stopping by! :wave:

posts/sivert.mdx

@@ -0,0 +1,44 @@
+---
+title: "Hello!"
+short: Introduction
+description: Welcome to my blog
+published: true
+date: "2023-10-20T23:04:00"
+image: eurekaprize.webp
+allowComments: true
+---
+
+Hi, I'm Sivert Gullberg Hansen, and I'm thrilled to welcome you to my blog!
+
+### Education
+
+Currently, I am pursuing a master's degree in Interaction Design at the Norwegian University of Science and Technology (NTNU) in Gjøvik. My journey in academia began with a bachelor's degree in Web Development, where I specialized in Sustainable Web Design. Our dedication to sustainability led to the honor of receiving the prestigious Eurekaprize for our outstanding bachelor project.
+
+### Professional Endeavors
+
+As a Full-Stack Developer, I have a passion for creating sustainable web solutions that align with environmental values. In fact, my dedication to sustainable web design has resulted in the publication of two scientific papers on the subject. You can find these papers by searching for my name on Google Scholar or visiting my ORCID profile (ORCID: 0000-0001-7555-2983). These papers delve into the latest research and advancements in sustainable web design practices.
+
+Professionally, I currently serve as a Front-end Developer at Norsk Tipping. In this role, I leverage my expertise in web development to craft intuitive and engaging user experiences.
+
+### Personal Ventures
+
+In addition to my academic and professional pursuits, I am actively engaged in open-source projects. I'm particularly excited about Gryt, an open-source alternative to Discord that I'm currently developing. Gryt provides a platform for seamless communication and collaboration. You can check it out at [Gryt.Chat](https://gryt.chat).
+
+### Beyond Work
+
+Aside from my work, I enjoy delving into indie game development, where I apply my skills in networking, object-oriented programming, and modeling/texture design. It's a creative outlet that allows me to explore new horizons.
+
+I'm always eager to connect with like-minded individuals and contribute to exciting projects in the web development realm. Don't hesitate to reach out, and let's discuss how we can create a more sustainable and innovative digital future together!
+
+Feel free to explore my GitHub profile, where you can find a variety of intriguing projects in NodeJS, as well as projects showcasing my proficiency in languages like HTML, Tailwind, and TypeScript.
+
+### Get in Touch
+
+If you want to reach out or simply chat, you can find me at:
+- Mobile: +47 413 63 454
+- Email: [[email protected]](mailto:[email protected])
+- LinkedIn: [linkedin.com/in/sivertgullberghansen](https://www.linkedin.com/in/sivertgullberghansen)
+- Portfolio: [sivert.io](https://sivert.io)
+- Blog: [blog.sivert.io](https://blog.sivert.io)
+
+Let's embark on this journey of exploration and innovation together. Stay tuned for more exciting insights and discoveries in the world of web development and sustainability!