add project card

.gitignore

@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+result

README.md

@@ -1,18 +1,4 @@
-# create-svelte
+# My personal portfolio website
-
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
 
 ## Developing
 
@@ -32,7 +18,3 @@ To create a production version of your app:
 ```bash
 npm run build
 ```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

package.json

@@ -1,33 +1,33 @@
 {
-	"name": "portfolio-website",
+    "name": "portfolio-website",
-	"version": "0.0.1",
+    "version": "0.0.1",
-	"private": true,
+    "private": true,
-	"scripts": {
+    "scripts": {
-		"dev": "vite dev",
+        "dev": "vite dev",
-		"build": "vite build",
+        "build": "vite build",
-		"preview": "vite preview",
+        "preview": "vite preview",
-		"lint": "prettier --check . && eslint .",
+        "lint": "prettier --check . && eslint .",
-		"format": "prettier --write ."
+        "prepare": "tw-patch install"
-	},
+    },
-	"devDependencies": {
+    "devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
+        "@fortawesome/fontawesome-free": "^6.5.1",
-		"@sveltejs/adapter-static": "^3.0.1",
+        "@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
+        "@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+        "@sveltejs/kit": "^2.0.0",
-		"@types/eslint": "^8.56.0",
+        "@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"autoprefixer": "^10.4.19",
+        "@types/eslint": "^8.56.0",
-		"eslint": "^8.56.0",
+        "autoprefixer": "^10.4.19",
-		"eslint-config-prettier": "^9.1.0",
+        "eslint": "^8.56.0",
-		"eslint-plugin-svelte": "^2.35.1",
+        "eslint-config-prettier": "^9.1.0",
-		"postcss": "^8.4.38",
+        "eslint-plugin-svelte": "^2.35.1",
-		"prettier": "^3.1.1",
+        "postcss": "^8.4.38",
-		"prettier-plugin-svelte": "^3.1.2",
+        "prettier": "^3.1.1",
-		"svelte": "^4.2.7",
+        "prettier-plugin-svelte": "^3.1.2",
-		"tailwindcss": "^3.4.1",
+        "svelte": "^4.2.7",
-		"vite": "^5.0.3"
+        "tailwindcss": "^3.4.1",
-	},
+        "tailwindcss-patch": "^2.2.3",
-	"type": "module",
+        "unplugin-tailwindcss-mangle": "^2.2.2",
-	"dependencies": {
+        "vite": "^5.0.3"
-		"@fortawesome/fontawesome-free": "^6.5.1"
+    },
-	}
+    "type": "module"
 }

src/lib/components/ProjectCard.svelte

@@ -0,0 +1,27 @@
+<script>
+  export var info
+</script>
+
+<div class="bg-srcery-black-hard flex flex-row gap-2 border-srcery-black-hard border-2 border-solid">
+  <div class="bg-srcery-black p-4 text-2xl flex flex-col justify-center">
+    {info.title}
+  </div>
+  <div class="flex-grow p-4 flex flex-col gap-2">
+    <div>
+      {info.shortDescription}
+    </div>
+
+    <div class="text-srcery-black-bright">
+      {info.createdAt}
+      <a href="{info.sourceCodeURL}" class="hover:text-srcery-blue duration-200">
+        <i class="fa-brands fa-github" />
+      </a>
+    </div>
+  </div>
+
+  <a href="/projects/{info.id}" class="my-auto bg-srcery-yellow hover:bg-srcery-yellow-bright text-srcery-black duration-200 p-1.5 m-4">
+    <div class="text-center">
+      Daugiau
+    </div>
+  </a>
+</div>

src/lib/index.js

@@ -1 +1,17 @@
-// place files you want to import through the `$lib` alias in this folder.
+
+export var gameOfLifeInfo = {
+  id: "game-of-life",
+  title: "\"Game Of Life\"",
+  sourceCodeURL: "https://github.com/RokasPuzonas/rust-game-of-life",
+  createdAt: "2022/06/03",
+  shortDescription: "John Conway's game of life parašytas rust programavimo kalboje"
+}
+
+export var projects = [
+  gameOfLifeInfo,
+]
+
+export var highlightProjects = [
+  gameOfLifeInfo,
+]
+

src/routes/+layout.svelte

@@ -1,11 +1,15 @@
+<svelte:head>
+    <title>Rokas Puzonas</title>
+</svelte:head>
+
 <script>
-  import "@fortawesome/fontawesome-free/css/all.min.css"
   import "../app.css";
+  import "@fortawesome/fontawesome-free/css/all.min.css"
 
   const navLinks = [
     {
       label: "Projektai",
-      href: "/#projects"
+      href: "/projects"
     },
     {
       label: "Apie mane",
@@ -19,9 +23,17 @@
 </script>
 
 <div class="w-full h-dvh flex flex-col">
-  <header class="px-6 py-3 bg-srcery-gray-6">
+  <header class="px-6 py-3 bg-srcery-gray-6 text-lg">
     <div class="mx-auto max-w-screen-lg flex flex-row justify-between">
-      <span>Rokas Puzonas</span>
+      <span>
+        <a
+          href="/"
+          class="hover:underline duration-200 hover:text-srcery-blue"
+        >
+          Rokas Puzonas
+        </a>
+      </span>
+
       <span class="flex flex-row gap-6">
         {#each navLinks as navLink}
           <a
@@ -35,7 +47,7 @@
     </div>
   </header>
 
-  <div class="w-full flex-grow">
+  <div class="px-6 w-full flex-grow">
     <main class="mx-auto max-w-screen-lg">
       <slot />
     </main>

src/routes/+page.svelte

@@ -1,3 +1,8 @@
+<script>
+  import ProjectCard from "$lib/components/ProjectCard.svelte";
+  import { highlightProjects } from '$lib'
+</script>
+
 <section class="mb-10 mt-10">
     <div class="text-2xl text-center">
         <p>Sveikas atvykęs!</p>
@@ -7,18 +12,30 @@
 
 <hr class="border-srcery-gray-1 border-dashed">
 
-<section id="projects" class="my-10">
+<section id="about" class="my-10">
-  <h1 class="text-center text-3xl">Projektai</h1>
+  <h1 class="text-center text-3xl">Apie mane</h1>
+  // TODO:
 </section>
 
 <hr class="border-srcery-gray-1 border-dashed">
 
-<section id="about" class="my-10">
+<section id="projects" class="my-10 flex flex-col gap-6">
-  <h1 class="text-center text-3xl">Apie mane</h1>
+  <h1 class="text-center text-3xl">Projektai</h1>
+
+  <div class="flex flex-col gap-4">
+    {#each highlightProjects as project }
+      <ProjectCard info={project} />
+    {/each}
+  </div>
+
+  <a href="/projects" class="mx-auto text-lg bg-srcery-yellow hover:bg-srcery-yellow-bright text-srcery-black duration-200 p-2">
+    Daugiau projektų...
+  </a>
 </section>
 
 <hr class="border-srcery-gray-1 border-dashed">
 
 <section id="contact" class="my-10">
   <h1 class="text-center text-3xl">Kontaktai</h1>
+  // TODO:
 </section>

src/routes/projects/(project)/game-of-life/+page.svelte

@@ -0,0 +1,2 @@
+
+// TODO:

src/routes/projects/+page.svelte

@@ -0,0 +1,10 @@
+<script>
+  import ProjectCard from "$lib/components/ProjectCard.svelte";
+  import { projects } from '$lib'
+</script>
+
+<div class="flex flex-col mt-8 gap-4">
+  {#each projects as project }
+    <ProjectCard info={project} />
+  {/each}
+</div>

svelte.config.js

@@ -13,7 +13,14 @@ const config = {
             trailingSlash: 'always'
         })
     },
-    preprocess: vitePreprocess()
+    preprocess: vitePreprocess({
+        postcss: {
+            plugins: {
+                tailwindcss: {},
+                autoprefixer: {}
+            }
+        }
+    })
 };
 
 export default config;

tailwind.config.js

@@ -1,6 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
+  content: [
+    "./src/**/*.{html,js,css,svelte,ts}"
+  ],
   theme: {
     extend: {
       colors: {