initial page

assets/js/dateUtils.js

@@ -0,0 +1,40 @@
+function calculateDuration(startDate, endDate) {
+  const start = new Date(startDate);
+  const end = endDate ? new Date(endDate) : new Date();
+
+  const years = end.getFullYear() - start.getFullYear();
+  const months = end.getMonth() - start.getMonth();
+
+  let totalMonths = years * 12 + months;
+  if (end.getDate() < start.getDate()) {
+    totalMonths--;
+  }
+
+  const finalYears = Math.floor(totalMonths / 12);
+  const finalMonths = totalMonths % 12;
+
+  let duration = "";
+  if (finalYears > 0) {
+    duration += `${finalYears} year${finalYears > 1 ? "s" : ""}`;
+  }
+  if (finalMonths > 0) {
+    if (duration) duration += " ";
+    duration += `${finalMonths} month${finalMonths > 1 ? "s" : ""}`;
+  }
+  return duration;
+}
+
+function formatDateRange(startDate, endDate) {
+  const start = new Date(startDate);
+  const end = endDate ? new Date(endDate) : new Date();
+
+  const formatDate = (date) => {
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      year: "numeric",
+    });
+  };
+
+  const duration = calculateDuration(startDate, endDate);
+  return `${formatDate(start)} - ${endDate ? formatDate(end) : "Present"} · ${duration}`;
+}

assets/js/landing-page-animations.js

@@ -0,0 +1,23 @@
+const { animate, scroll } = Motion;
+
+const yearsExperience = document.getElementById("years-experience");
+const programmingLangues = document.getElementById("programming-languages");
+
+const startDate = new Date("2019-01-01");
+years = Math.floor((new Date() - startDate) / 1000 / 60 / 60 / 24 / 365);
+
+animate(0, years, {
+  duration: 2,
+  ease: "circOut",
+  onUpdate: (latest) => {
+    yearsExperience.innerHTML = Math.round(latest);
+  },
+});
+
+animate(0, 4, {
+  duration: 2,
+  ease: "circOut",
+  onUpdate: (latest) => {
+    programmingLangues.innerHTML = Math.round(latest);
+  },
+});

assets/json/experiences.json

@@ -0,0 +1,126 @@
+[
+  {
+    "start_date": "2022-07-01T00:00:00.000Z",
+    "end_date": null,
+    "company": {
+      "name": "Awaze",
+      "logo": "",
+      "link": "https://www.awaze.com/",
+      "location_link": "https://www.google.com/maps/place//data=!4m2!3m1!1s0x465252660a2125a1:0x5a2e60c905a1fd5a?sa=X&ved=1t:8290&ictx=111",
+      "city": "Virum (Copenhagen)",
+      "description": "Awaze is the largest managed vacation rentals and holiday resorts business in Europe, which brings together some of the continent's most trusted travel brands, including cottages.com, Hoseasons and NOVASOL."
+    },
+    "Job": {
+      "title": "Software Engineer",
+      "description": "I am working as a Software Engineer in the Awaze's Digital team. I am responsible for developing and maintaining the company's websites and internal tools. I am also involved in the development of new features and improvements to the existing systems.",
+      "objectives": ["Objective 1", "Objective 2", "Objective 3"],
+      "frontend_stack": [
+        { "name": "NextJS", "link": "https://nextjs.org/" },
+        { "name": "React", "link": "https://reactjs.org/" },
+        { "name": "Zustand", "link": "https://zustand-demo.pmnd.rs/" },
+        { "name": "Bit", "link": "https://bit.dev/" },
+        {
+          "name": "ApolloClient",
+          "link": "https://www.apollographql.com/docs/react"
+        },
+        { "name": "Storybook", "link": "https://storybook.js.org/" },
+        {
+          "name": "Styled-Components",
+          "link": "https://styled-components.com/"
+        }
+      ],
+      "backend_stack": [
+        { "name": "Nodejs", "link": "https://nodejs.org/en" },
+        { "name": "GraphQL", "link": "https://graphql.org/" },
+        { "name": "Apollo", "link": "https://www.apollographql.com/docs/" },
+        { "name": "Lambda", "link": "https://aws.amazon.com/lambda/" },
+        { "name": "Traveller (MSSQL)", "link": "" }
+      ],
+      "infrastructure_stack": [
+        { "name": "Serverless", "link": "https://www.serverless.com/" },
+        { "name": "Cognito", "link": "https://aws.amazon.com/cognito/" },
+        { "name": "AWS SES", "link": "" },
+        { "name": "Github", "link": "https://github.com/" }
+      ]
+    }
+  },
+  {
+    "start_date": "2021-08-01T00:00:00.000Z",
+    "end_date": "2022-07-30T00:00:00.000Z",
+    "company": {
+      "name": "Kiapro",
+      "logo": "",
+      "link": "https://www.kiapro.dk/om-kiapro",
+      "location_link": "https://www.google.com/maps/place//data=!4m2!3m1!1s0x46525052d1d32a6d:0x47b68788842d92aa?sa=X&ved=1t:8290&ictx=111",
+      "city": "Herlev (Copenhagen)",
+      "description": "Kiapro is a Danish company that provides software solutions both for Fin-Tech and Healthcare sector. The company's main product is a platform that helps Fin-Tech management engage with employees through an interactive intranet.\nOther products include all-round applications for Chiropractors to follow patients through their transformation which is called BackTrace."
+    },
+    "Job": {
+      "title": "Full Stack Developer",
+      "description": "As a Full Stack Developer at Doctolib, I contributed to the development of the core booking platform and various healthcare professional tools, focusing on both performance optimization and feature development.",
+      "objectives": [
+        "Improved platform performance and scalability",
+        "Developed new features for healthcare professionals",
+        "Implemented real-time notification systems"
+      ],
+      "frontend_stack": [
+        { "name": "React", "link": "https://reactjs.org/" },
+        { "name": "Redux", "link": "https://redux.js.org/" },
+        { "name": "Capacitor", "link": "https://capacitorjs.com/" },
+        { "name": "TypeScript", "link": "https://www.typescriptlang.org/" }
+      ],
+      "backend_stack": [
+        { "name": "PHP", "link": "https://www.ruby-lang.org/" },
+        { "name": "PostgreSQL", "link": "https://www.postgresql.org/" },
+        { "name": "Go", "link": "https://go.dev/" },
+        { "name": "Fiber", "link": "https://gofiber.io/" },
+        { "name": "Laravel", "link": "https://laravel.com/" }
+      ],
+      "infrastructure_stack": [
+        { "name": "Docker", "link": "https://www.docker.com/" },
+        { "name": "Self-hosted VM", "link": "" }
+      ]
+    }
+  },
+  {
+    "start_date": "2019-10-01T00:00:00.000Z",
+    "end_date": "2021-07-31T00:00:00.000Z",
+    "company": {
+      "name": "Fellowmind",
+      "logo": "",
+      "link": "https://www.fellowmind.com/da-dk/",
+      "location_link": "https://maps.google.com/maps?hl=da&gl=se&um=1&ie=UTF-8&fb=1&sa=X&ftid=0x465253083f4d1201:0x8e4ee256108ec86a",
+      "city": "Copenhagen Area",
+      "description": "Fellowmind helps customers with accelerating their digital transformation by using Microsoft's cloud-solutions, progress to agile development, implement integrated platforms and help end-users to apply those techonologies. With other words, to allow people to enjoy working with technology, and to make the technology work for them."
+    },
+    "Job": {
+      "title": "Software Engineer",
+      "description": "I was apart of the team called IntraActive which was responsible for creating Interactive Components that can be added to their pre-built Microsoft pages. I Developed and maintained a customisable Phonebook that can be configured to any company theme.",
+      "objectives": [
+        "Developed new monitoring integrations",
+        "Optimized data processing pipelines",
+        "Enhanced visualization components"
+      ],
+      "frontend_stack": [
+        {
+          "name": "Microsoft SPFX",
+          "link": "https://learn.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-framework-overview"
+        },
+        {
+          "name": "Microsoft Sharepoint",
+          "link": "https://learn.microsoft.com/en-us/sharepoint/"
+        },
+        { "name": "TypeScript", "link": "https://www.typescriptlang.org/" },
+        { "name": "React", "link": "https://reactjs.org/" },
+        { "name": "Mobx", "link": "https://mobx.js.org/README.html" }
+      ],
+      "backend_stack": [
+        { "name": "C#", "link": "" },
+        { "name": ".NET", "link": "" },
+        { "name": "Azure Functions", "link": "" },
+        { "name": "Cosmos", "link": "" }
+      ],
+      "infrastructure_stack": [{ "name": "Microservices", "link": "" }]
+    }
+  }
+]

assets/json/projects.json

@@ -0,0 +1,22 @@
+[
+  {
+    "name": "Invoice Management System",
+    "start": null,
+    "end": null,
+    "stack": ["Go", "Wails", "React", "SQLite3", "TailwindCSS"],
+    "description": "Invoie Management System that helps mechanics create invoices, manage customers, finances and more.",
+    "thumbnail": "/static/images/invoice-manager-thumbnail.png",
+    "github_link": "",
+    "status": "In Progress"
+  },
+  {
+    "name": "Portfolio",
+    "start": null,
+    "end": null,
+    "stack": ["Go", "Templ", "Motion", "TailwindCSS"],
+    "description": "The website you are currently on. A portfolio website that showcases my projects, experiences and skills.",
+    "thumbnail": "",
+    "github_link": "",
+    "status": "Completed"
+  }
+]