Merge pull request #12 from grzegorzxpatyk/develop

Develop

.prettierrc

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "es5",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

package.json

@@ -24,8 +24,9 @@
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",
 		"postcss": "^8.4.27",
-		"prettier": "^2.8.0",
+		"prettier": "^3.0.3",
 		"prettier-plugin-svelte": "^2.10.1",
+		"prettier-plugin-tailwindcss": "^0.5.4",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
 		"tailwindcss": "^3.3.3",

src/app.css

@@ -6,4 +6,17 @@
     :root {
         font-size: 12px;
     }
-}
+}
+
+@layer utilities {
+      /* Hide scrollbar for Chrome, Safari and Opera */
+      .no-scrollbar::-webkit-scrollbar {
+          display: none;
+      }
+
+      /* Hide scrollbar for IE, Edge and Firefox */
+      .no-scrollbar {
+          -ms-overflow-style: none;  /* IE and Edge */
+          scrollbar-width: none;  /* Firefox */
+      }
+  }

src/lib/components/bio.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <section class="flex flex-col justify-start items-start pb-6 border-b border-b-zinc-800 dark:border-b-zinc-400">
-	<img src={profile} alt={picDescription} class="rounded-full mb-8" />
+	<img src={profile} alt={picDescription} class="rounded-full mb-8 min-w-[120px] w-5/6 self-center sm:self-auto sm:w-full" />
 	<h1 class="text-zinc-950 dark:text-zinc-100 text-3xl mb-4 text-left font-semibold">{name}</h1>
 	<h2 class="dark:text-zinc-300 text-xl font-medium">{jobTitle}</h2>
 </section>

src/lib/components/contact.svelte

@@ -1,5 +1,26 @@
 <script lang="ts">
 	import { EnvelopeClosed, Home, GithubLogo, LinkedinLogo } from 'radix-icons-svelte';
+	import { onMount } from 'svelte';
+
+	let isMediumScreen: boolean | undefined;
+
+	const markIsMedium = () => {
+			console.log(window.innerWidth);
+			if (window.innerWidth > 768 && window.innerWidth < 1350) {
+				isMediumScreen = true;
+			} else {
+				isMediumScreen = false;
+			}
+		};
+
+	onMount(() => {
+		isMediumScreen = window.innerWidth > 768 && window.innerWidth < 1350;
+		window.matchMedia('(min-width: 768px)').addEventListener('change',markIsMedium);
+		window.matchMedia('(max-width: 1350px)').addEventListener('change', markIsMedium);
+		return () => {
+			isMediumScreen = undefined;
+		}
+	});
 
 	export let email: string;
 	export let location: string;
@@ -12,12 +33,12 @@
 <div
 	class="flex flex-col justify-start items-start pb-6 border-b border-b-zinc-800 dark:border-b-zinc-400 text-sm mt-6"
 >
-	<ul class="space-y-2.5">
+	<ul class="space-y-2.5 w-full">
         <li class="flex flex-row justify-start items-center">
             <Home class="mr-2" />{location}
         </li>
 		<li class="flex flex-row justify-start items-center">
-			<EnvelopeClosed class="mr-2" /> <a href="mailto:{email}">{email}</a>
+			<EnvelopeClosed class="mr-2" /> <a href="mailto:{email}">{isMediumScreen ? email.substring(0, email.indexOf('@')) : email}</a>
 		</li>
 		<li class="flex flex-row justify-start items-center">
 			<GithubLogo class="mr-2" /><a href={githubLink} target="_blank">{githubUsername}</a>

src/routes/+page.svelte

@@ -11,12 +11,12 @@
 </svelte:head>
 
 <main
-	class="min-h-screen h-fit flex flex-col bg-zinc-100 bg-opacity-70 dark:bg-gradient-to-t dark:from-dark-blue-gradient dark:to-dark-gray-gradient p-2 sm:p-8 md:p-16 lg:p-24 print:p-0 print:m-0 print:pt-12"
+	class="min-h-screen h-fit flex flex-col bg-100% m-0 bg-fixed bg-no-repeat bg-zinc-100 bg-opacity-70 dark:bg-gradient-to-t dark:from-dark-blue-gradient dark:to-dark-gray-gradient sm:p-6 md:p-12 lg:p-24 print:p-0 print:m-0 print:pt-12"
 >
 	<div
-		class="rounded p-5 text-zinc-950 dark:text-zinc-300 grid grid-cols-4 print:grid-cols-6 print:border-0"
+		class="md:p-5 text-zinc-950 dark:text-zinc-300 flex flex-col justify-center items-start md:grid md:grid-cols-4 print:grid-cols-6 print:border-0"
 	>
-		<div class="border-r border-zinc-800 dark:border-zinc-400 p-6 pr-12 print:col-span-2">
+		<div class="min-h-screen h-fit md:h-fit md:border-r border-zinc-800 dark:border-zinc-400 p-6 md:pr-12 print:col-span-2">
 			<Bio
 				{profile}
 				picDescription="Grzegorz profile - square composition portrait of a brunette man wearing a choker"
@@ -55,7 +55,7 @@
 				]}
 			/>
 		</div>
-		<div class="col-span-3 print:col-span-4 ml-6 p-6">
+		<div class="md:col-span-3 print:col-span-4 md:ml-6 p-6">
 			<Section
 				title="Profile"
 				type="description"

tailwind.config.js

@@ -10,6 +10,9 @@ export default {
       },
       backgroundImage: {
         'noise': "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\")"
+      },
+      backgroundSize: {
+        '100%': '100% 100%'
       }
     },
   },