Make to konsila landing page (#1)

* Make One Pager

* Add IONOS Deploy Now workflow

* Remove IONOS Deploy Now workflow from project

* Update some stuff

* Update some stuff

* Fix some more things

* Add more stuff

* Save colours

* Finalise coloring

* Make nice in mobile

* Remove google analytics

* Add PR template

---------

Co-authored-by: Lennard Schwarz <[email protected]>
Co-authored-by: ionos-deploy-now[bot] <78917126+ionos-deploy-now[bot]@users.noreply.github.com>

.github/workflows/deploy-to-ionos.yaml

@@ -2,7 +2,7 @@
 # More information under https://docs.ionos.space/docs/github-actions-customization/
 # version: 2022-07-21
 
-name: "Deploy Now: Deploy to IONOS"
+name: 'Deploy Now: Deploy to IONOS'
 
 on:
   workflow_dispatch:
@@ -72,7 +72,7 @@ jobs:
         id: template
         with:
           deployment-id: ${{ matrix.deployment-id }}
-          data: "[${{ steps.deployment.outputs.template-variables }}, ${{ toJson(secrets) }}]"
+          data: '[${{ steps.deployment.outputs.template-variables }}, ${{ toJson(secrets) }}]'
           input-directory: deployment
           output-directory: deployment
           intermediate-data-file: deployment/.template-renderer-data

.github/workflows/konsila.de-build.yaml

@@ -1,7 +1,7 @@
 # To better understand this file read this:
 # https://docs.ionos.space/docs/github-actions-customization/
 
-name: "Deploy Now: Execute Build"
+name: 'Deploy Now: Execute Build'
 
 on:
   workflow_call:
@@ -17,7 +17,7 @@ env:
   DEPLOYMENT_FOLDER: public
 
 jobs:
-# Please do not rename this job
+  # Please do not rename this job
   build-project:
     name: build konsila.de
     runs-on: ubuntu-latest
@@ -40,7 +40,7 @@ jobs:
           npm ci
           npm run build
 
-# Please do not touch the following action
+      # Please do not touch the following action
       - name: Store deployment content
         uses: ionos-deploy-now/artifact-action@v1
         with:

.github/workflows/konsila.de-orchestration.yaml

@@ -3,7 +3,7 @@
 # More information under https://docs.ionos.space/docs/github-actions-customization/
 # version: 2022-07-21
 
-name: "Deploy Now: Orchestration"
+name: 'Deploy Now: Orchestration'
 run-name: "Deploy Now: Build konsila.de · ${{ github.event.head_commit.message || format('Triggered by {0}', github.triggering_actor) }}"
 
 on:
@@ -27,7 +27,6 @@ jobs:
           project-id: dafd769b-850b-4316-a7f0-264bd9554d78
           action: retrieve-info
 
-
   build:
     name: build
     needs: retrieve-project

README.md

@@ -1,3 +1,27 @@
-# Supacode
+# konsila.de
 
-https://supacode.dev
+Landing page for konsila.de
+
+# Development
+
+### Install
+
+```bash
+npm install
+```
+
+### Run live server for dev
+
+```bash
+npm run dev
+```
+
+### Build
+
+```bash
+npm run build
+```
+
+# Acknowledgement
+
+This project is based on Maverick's amazing [portfolio website](https://www.supacode.dev/#hero), which I found on the on the [developer portfolios](https://github.com/emmabostian/developer-portfolios) repository.

consts/path/path.ts

@@ -22,4 +22,4 @@ export const experienceRoutes = {
   url: '/#experience',
 };
 
-export const routes = [aboutRoutes, contactRoutes, blogRoutes];
+export const routes = [];

consts/siteData/siteData.ts

@@ -1,6 +1,6 @@
 export const siteData = {
-  title: 'Supacode.dev',
+  title: 'konsila.de',
   description:
-    "Hey there! I'm Maverick, a Software Developer with a primary focus on Frontend Engineering.",
+    "Hey there! I'm Lennard, a Software Developer with a primary focus on backend engineering.",
   themeColor: '#1a2130',
 };

consts/socialLinks/socialLinks.ts

@@ -1,29 +1,24 @@
-import { codepen, email, twitter, linkedIn, github } from 'assets/icons';
+import { email, linkedIn, github } from 'assets/icons';
 
 export const socialLinks = [
   {
-    name: 'Twitter',
-    url: 'https://twitter.com/supacode',
-    icon: twitter,
-  },
-  {
-    name: 'GitHub',
-    url: 'https://github.com/supacode',
+    name: 'GitHub - personal',
+    url: 'https://github.com/lennardschwarz',
     icon: github,
   },
   {
-    name: 'CodePen',
-    url: 'https://codepen.io/supacode',
-    icon: codepen,
+    name: 'GitHub - work',
+    url: 'https://github.com/konsila',
+    icon: github,
   },
   {
     name: 'LinkedIn',
-    url: 'https://linkedin.com/in/supacode',
+    url: 'https://www.linkedin.com/in/lennard-schwarz/',
     icon: linkedIn,
   },
   {
     name: 'E-mail',
-    url: 'mailto:[email protected]',
+    url: 'mailto:[email protected]',
     icon: email,
   },
 ];

content/projects/supacode.dev.md

@@ -1,6 +1,6 @@
 ---
 index: 1
-title: 'Supacode.dev'
+title: 'konsila.de'
 tools:
   - React
   - Typescript

modules/HeroSection/HeroSection.tsx

@@ -6,27 +6,26 @@ export const HeroSection: React.FC = () => (
   <section className="hero" id="hero">
     <div className="hero__left">
       <h2 className="hero__lead-text">
-        My name is <span className="hero__lead-text--highlight">Maverick</span>.
+        My name is <span className="hero__lead-text--highlight">Lennard</span>.
       </h2>
 
       <h3 className="hero__tag-text">I code for fun, and as a job.</h3>
 
       <p className="hero__desc-text">
         <span aria-label="emoji wave" role="img">
-          👋🏽
+          👋🏻
         </span>{' '}
-        Hey there! I&apos;m Maverick, a Software Developer with a primary focus
-        on Frontend Engineering. <br /> Welcome to my little corner of the web,
-        where I share notes, code snippets, and resources on topics that
-        interest me.
+        Hey there! I&apos;m Lennard, a Software Developer with a primary focus
+        on backend engineering. <br /> I also do some consulting and freelancing
+        on the side. Need a hand to accelerate your projec?
       </p>
 
       <div className="hero__btn">
         <AppLink
           className="hero__btn--link"
           text="Contact Me"
           title="Send me an email"
-          to="mailto:[email protected]"
+          to="mailto:[email protected]"
           newTab
           asButton
         >

modules/layout/AppLayout.tsx

@@ -1,29 +1,18 @@
-import dynamic from 'next/dynamic';
-
 import { SkipToContent } from 'components/SkipToContent';
 import { AppHeader } from 'modules/mainHeader/AppHeader';
 
-const AppFooter = dynamic(() =>
-  import('components/AppFooter').then((mod) => mod.AppFooter),
-);
-
 type AppLayoutProps = {
   children: React.ReactNode;
   fullHeightFooter?: boolean;
 };
 
-export const AppLayout: React.FC<AppLayoutProps> = ({
-  children,
-  fullHeightFooter = true,
-}) => (
+export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => (
   <>
     <SkipToContent to="#content" />
 
     <AppHeader />
 
     <div className="app-container">{children}</div>
-
-    {fullHeightFooter && <AppFooter fullHeight={fullHeightFooter} />}
   </>
 );
 

modules/mainHeader/AppHeader/AppHeader.tsx

@@ -25,7 +25,7 @@ export const AppHeader: React.FC = () => {
     <header className={className}>
       <div className="main-header__inner">
         <h1 className="main-header__logo">
-          <AppLink to="/">Supacode</AppLink>
+          <AppLink to="/">konsila Systemberatung - Lennard Schwarz</AppLink>
         </h1>
 
         <Navbar />

modules/mainHeader/Navbar/Navbar.tsx

@@ -2,9 +2,7 @@ import { useRef, useState, useCallback } from 'react';
 import cn from 'classnames';
 import { useIsomorphicLayoutEffect, useOnClickOutside } from 'usehooks-ts';
 
-import { routes } from 'consts';
 import { useIsMobile } from 'hooks';
-import { AppLink } from 'components/AppLink';
 import { ThemeToggle } from 'modules/mainHeader/ThemeToggle';
 
 export const Navbar: React.FC = () => {
@@ -67,25 +65,6 @@ export const Navbar: React.FC = () => {
         })}
       >
         <ol className="main-nav__list">
-          {routes.map((link) => (
-            <li
-              key={link.id}
-              className="main-nav__list--item"
-              onClick={closeMenu}
-              onKeyDown={closeMenu}
-              role="presentation"
-            >
-              <AppLink
-                className={cn('main-nav__link', {
-                  'main-nav__link--active': false, // TODO: Replace with active link logic.
-                })}
-                to={link.url}
-              >
-                {link.text}
-              </AppLink>
-            </li>
-          ))}
-
           <li className="main-nav__list--item">
             <ThemeToggle />
           </li>

package.json

@@ -1,9 +1,9 @@
 {
-  "name": "supacode.dev",
+  "name": "konsila.de",
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "start": "next dev",
+    "dev": "next dev",
     "build": "next build",
     "live": "next start",
     "lint": "next lint",

pages/_app.tsx

@@ -32,8 +32,6 @@ const MyApp: React.FC<MyAppProps> = ({ Component, pageProps }) => (
 
       <link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
 
-      <meta name="twitter:creator" content="@supacode" />
-
       <meta property="og:type" content="website" />
 
       <link

pages/_document.tsx

@@ -1,23 +1,8 @@
 import { Html, Head, Main, NextScript } from 'next/document';
-import Script from 'next/script';
-
-const googleAnalyticsTag = process.env.GOOGLE_ANALYTICS_ID;
 
 const Document: React.FC = () => (
   <Html lang="en">
     <Head>
-      <Script
-        src={`https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsTag}`}
-        id="google-analytics"
-        strategy="afterInteractive"
-      >
-        {`
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){window.dataLayer.push(arguments);}
-          gtag('js', new Date());
-          gtag('config', '${googleAnalyticsTag}');
-        `}
-      </Script>
       <link rel="preconnect" href="https://fonts.googleapis.com" />
       <link
         rel="preconnect"