create basic page with empty sections

2024-03-23 16:35:41 +02:00 · 2024-03-23 16:35:41 +02:00 · aeb311b351
commit aeb311b351
parent a7cc35e470
16 changed files with 1387 additions and 11 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -11,16 +11,23 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@types/eslint": "^8.56.0",
+		"autoprefixer": "^10.4.19",
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.35.1",
+		"postcss": "^8.4.38",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"svelte": "^4.2.7",
+		"tailwindcss": "^3.4.1",
 		"vite": "^5.0.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@fortawesome/fontawesome-free": "^6.5.1"
+	}
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/src/app.css
+++ b/src/app.css
@ -0,0 +1,52 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    @font-face {
+        font-family: 'Fira Code';
+        src: url('/fonts/FiraCode-Light.woff2') format('woff2');
+        font-weight: 300;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: 'Fira Code';
+        src: url('/fonts/FiraCode-Regular.woff2') format('woff2');
+        font-weight: 400;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: 'Fira Code';
+        src: url('/fonts/FiraCode-Medium.woff2') format('woff2');
+        font-weight: 500;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: 'Fira Code';
+        src: url('/fonts/FiraCode-SemiBold.woff2') format('woff2');
+        font-weight: 600;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: 'Fira Code';
+        src: url('/fonts/FiraCode-Bold.woff2') format('woff2');
+        font-weight: 700;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: 'Fira Code VF';
+        src: url('/fonts/FiraCode-VF.woff2') format('woff2-variations');
+        /* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
+        font-weight: 300 700;
+        font-style: normal;
+    }
+}
+
+body {
+    font-family: Fira Code;
+}
--- a/src/app.html
+++ b/src/app.html
@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover">
+	<body data-sveltekit-preload-data="hover" class="text-srcery-white bg-srcery-black">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
--- a/src/routes/+layout.js
+++ b/src/routes/+layout.js
@ -0,0 +1 @@
+export const prerender = true;
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -0,0 +1,63 @@
+<script>
+  import "@fortawesome/fontawesome-free/css/all.min.css"
+  import "../app.css";
+
+  const navLinks = [
+    {
+      label: "Projektai",
+      href: "/#projects"
+    },
+    {
+      label: "Apie mane",
+      href: "/#about"
+    },
+    {
+      label: "Kontaktai",
+      href: "/#contact"
+    }
+  ]
+</script>
+
+<div class="w-full h-dvh flex flex-col">
+  <header class="px-6 py-3 bg-srcery-gray-6">
+    <div class="mx-auto max-w-screen-lg flex flex-row justify-between">
+      <span>Rokas Puzonas</span>
+      <span class="flex flex-row gap-6">
+        {#each navLinks as navLink}
+          <a
+            href={navLink.href}
+            class="hover:underline duration-200 hover:text-srcery-blue"
+          >
+            {navLink.label}
+          </a>
+        {/each}
+      </span>
+    </div>
+  </header>
+
+  <div class="w-full flex-grow">
+    <main class="mx-auto max-w-screen-lg">
+      <slot />
+    </main>
+  </div>
+
+  <footer class="bg-srcery-gray-5 px-6 py-3 w-full">
+    <div class="flex flex-col md:flex-row md:gap-8 justify-center">
+      <span>
+        <i class="fa-regular fa-envelope"></i> rokas.puz@gmail.com
+      </span>
+      <span>
+        <a href="https://github.com/RokasPuzonas/">
+          <i class="fa-brands fa-github" />
+          <span class="underline underline-offset-2 text-srcery-blue">@RokasPuzonas</span>
+        </a>
+      </span>
+      <span>
+        <a href="https://www.linkedin.com/in/rokas-puzonas-a60842243/">
+          <i class="fa-brands fa-linkedin" />
+          <span class="underline underline-offset-2 text-srcery-blue">Rokas Puzonas</span>
+        </a>
+      </span>
+    </div>
+  </footer>
+</div>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,2 +1,24 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<section class="mb-10 mt-10">
+    <div class="text-2xl text-center">
+        <p>Sveikas atvykęs!</p>
+        <p>Į mano <span class="text-srcery-yellow">projektų</span> kampelį</p>
+    </div>
+</section>
+
+<hr class="border-srcery-gray-1 border-dashed">
+
+<section id="projects" class="my-10">
+  <h1 class="text-center text-3xl">Projektai</h1>
+</section>
+
+<hr class="border-srcery-gray-1 border-dashed">
+
+<section id="about" class="my-10">
+  <h1 class="text-center text-3xl">Apie mane</h1>
+</section>
+
+<hr class="border-srcery-gray-1 border-dashed">
+
+<section id="contact" class="my-10">
+  <h1 class="text-center text-3xl">Kontaktai</h1>
+</section>
--- a/static/fonts/FiraCode-Bold.woff2
+++ b/static/fonts/FiraCode-Bold.woff2
--- a/static/fonts/FiraCode-Light.woff2
+++ b/static/fonts/FiraCode-Light.woff2
--- a/static/fonts/FiraCode-Medium.woff2
+++ b/static/fonts/FiraCode-Medium.woff2
--- a/static/fonts/FiraCode-Regular.woff2
+++ b/static/fonts/FiraCode-Regular.woff2
--- a/static/fonts/FiraCode-SemiBold.woff2
+++ b/static/fonts/FiraCode-SemiBold.woff2
--- a/static/fonts/FiraCode-VF.woff2
+++ b/static/fonts/FiraCode-VF.woff2
--- a/svelte.config.js
+++ b/svelte.config.js
@ -1,13 +1,19 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
-	}
+    kit: {
+        adapter: adapter({
+            pages: 'build',
+            assets: 'build',
+            fallback: undefined,
+            precompress: false,
+            strict: true,
+            trailingSlash: 'always'
+        })
+    },
+    preprocess: vitePreprocess()
 };

 export default config;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,59 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {
+      colors: {
+        srcery: {
+          black: {
+            bright: 'rgb(145, 129, 117)',
+            DEFAULT: 'rgb(28, 27, 25)',
+            hard: 'rgb(18, 18, 18)',
+          },
+          white: {
+            bright: 'rgb(252, 232, 195)',
+            DEFAULT: 'rgb(208, 191, 161)',
+          },
+          gray: {
+            1: 'rgb(88, 88, 88)',
+            2: 'rgb(78, 78, 78)',
+            3: 'rgb(68, 68, 68)',
+            4: 'rgb(58, 58, 58)',
+            5: 'rgb(48, 48, 48)',
+            6: 'rgb(38, 38, 38)',
+          },
+          red: {
+            bright: 'rgb(247, 83, 65)',
+            DEFAULT: 'rgb(239, 47, 39)',
+          },
+          orange: {
+            bright: 'rgb(255, 135, 0)',
+            DEFAULT: 'rgb(215, 95, 0)',
+          },
+          yellow: {
+            bright: 'rgb(254, 208, 110)',
+            DEFAULT: 'rgb(251, 184, 41)',
+          },
+          green: {
+            bright: 'rgb(152, 188, 55)',
+            DEFAULT: 'rgb(81, 159, 80)',
+          },
+          blue: {
+            bright: 'rgb(104, 168, 228)',
+            DEFAULT: 'rgb(44, 120, 191)',
+          },
+          cyan: {
+            bright: 'rgb(83, 253, 233)',
+            DEFAULT: 'rgb(10, 174, 179)',
+          },
+          magenta: {
+            bright: 'rgb(255, 92, 143)',
+            DEFAULT: 'rgb(224, 44, 109)',
+          },
+        },
+      },
+    },
+  },
+  plugins: [],
+}
+