update

saadeghi · Aug 30, 2023 · 922f2b3 · 922f2b3
1 parent 5369fcc
commit 922f2b3
Show file tree

Hide file tree

Showing 16 changed files with 1,291 additions and 906 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,31 +1,31 @@
 {
  "scripts": {
- "dev": "vite dev",
+ "dev": "vite dev --port 3000",
  "build": "vite build",
  "preview": "vite preview",
  "prettier": "prettier --write '**/*.{js,svelte,md,json,html,css}'"
  },
  "devDependencies": {
  "@fullhuman/postcss-purgecss": "^5.0.0",
- "@sveltejs/adapter-static": "^1.0.5",
- "@sveltejs/kit": "^1.3.3",
- "autoprefixer": "^10.4.13",
- "daisyui": "^2.49.0",
+ "@sveltejs/adapter-static": "^2.0.3",
+ "@sveltejs/kit": "^1.24.0",
+ "autoprefixer": "^10.4.15",
+ "daisyui": "^3.6.4",
  "js-yaml": "^4.1.0",
- "postcss": "^8.4.21",
- "postcss-dropunusedvars": "^1.2.1",
+ "postcss": "^8.4.29",
+ "postcss-dropunusedvars": "^2.2.1",
  "postcss-uncss": "^0.17.0",
- "prettier": "^2.8.3",
- "prettier-plugin-svelte": "^2.9.0",
- "prettier-plugin-tailwindcss": "^0.2.2",
+ "prettier": "^3.0.3",
+ "prettier-plugin-svelte": "^3.0.3",
+ "prettier-plugin-tailwindcss": "^0.5.3",
  "svead": "^0.0.4",
- "svelte": "^3.55.1",
- "svelte-markdown": "^0.2.3",
- "tailwindcss": "^3.2.4",
- "vite": "^4.0.4"
+ "svelte": "^4.2.0",
+ "svelte-markdown": "^0.4.0",
+ "tailwindcss": "^3.3.3",
+ "vite": "^4.4.9"
  },
  "browserslist": [
  "> 7%"
  ],
  "type": "module"
-}
+}
diff --git a/src/app.html b/src/app.html
@@ -4,6 +4,7 @@
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="view-transition" content="same-origin" />
  %sveltekit.head%
 </head>
 

diff --git a/src/data/projects.yml b/src/data/projects.yml
@@ -359,8 +359,8 @@
  date: '2014-12-22'
  url: http://play.google.com/store/apps/details?id=player.wikitroop.wikiseda
  content: |-
- **Wikiseda is the most popular Iranian music website 
- ** I designed the app UI, based on the original website color scheme. Wikisada app provides the largest and best collection of Persian Music. You can listen and watch anything you like. This application is designed to be all android device friendly, you can play, download or make your own playlist.
+ Wikiseda is the most popular Iranian music website. 
+ I designed the app UI, based on the original website color scheme. Wikisada app provides the largest and best collection of Persian Music. You can listen and watch anything you like. This application is designed to be all android device friendly, you can play, download or make your own playlist.
  photos:
  - /projects/89jo0ysUIOVfn7suXqXqGFaqPZl9meOB.jpg
  - /projects/pyX44vr1vt753OR6lU0zUxK2o03UYdta.jpg

diff --git a/src/data/resume.yml b/src/data/resume.yml
@@ -11,7 +11,7 @@ experiences:
  desc: "Created and actively maintaining open-source projects such as:"
  bullets:
  - "[daisyui.com](https://daisyui.com/): the most popular, free and open-source Tailwind CSS component library, currently being used in 100,000+ open-source projects"
- - "[lorem.space](https://lorem.space/): placeholder image generator API"
+ - "[lorem.space](https://github.com/manasky/lorem.space): placeholder image generator API"
  - "[svelte-countup](https://github.com/saadeghi/svelte-countup): component for Svelte.js"
  - "[theme-change](https://github.com/saadeghi/theme-change): JavaScript theme management package"
  - date: Dec 2015 – Jun 2022

diff --git a/src/components/Header.svelte → src/lib/components/Header.svelte b/src/components/Header.svelte → src/lib/components/Header.svelte
@@ -4,9 +4,9 @@
 </script>
 
 <div class="flex gap-10 print:hidden">
- <a class={`text-sm py-1 border-b-transparent border-b-2 hover:border-blue-600 ${$page.url.pathname == "/" ? "border-b-blue-600" : ""}`} href="/">About</a>
- <a class={`text-sm py-1 border-b-transparent border-b-2 hover:border-blue-600 ${$page.url.pathname == "/resume/" ? "border-b-blue-600" : ""}`} href="/resume/">Resume</a>
- <a class={`text-sm py-1 border-b-transparent border-b-2 hover:border-blue-600 ${$page.url.pathname == "/projects/" ? "border-b-blue-600" : ""}`} href="/projects/">Projects</a>
+ <a class={`text-sm py-1 border-b-2 hover:border-blue-600 ${$page.url.pathname == "/" ? "border-b-blue-600" : "border-b-transparent"}`} href="/">About</a>
+ <a class={`text-sm py-1 border-b-2 hover:border-blue-600 ${$page.url.pathname == "/resume/" ? "border-b-blue-600" : "border-b-transparent"}`} href="/resume/">Resume</a>
+ <a class={`text-sm py-1 border-b-2 hover:border-blue-600 ${$page.url.pathname == "/projects/" ? "border-b-blue-600" : "border-b-transparent"}`} href="/projects/">Projects</a>
 </div>
 
 <div class="flex flex-col gap-6 print:mt-10 print:gap-2">

diff --git a/src/components/markdown/ExternalLink.svelte → ...b/components/markdown/ExternalLink.svelte b/src/components/markdown/ExternalLink.svelte → ...b/components/markdown/ExternalLink.svelte
diff --git a/src/lib/functions.js b/src/lib/functions.js
@@ -1,3 +1,5 @@
+import { onNavigate } from '$app/navigation';
+
 export const convertToSlug = (input) => {
  return input.toLowerCase()
  .replace(/ /g, '-')
@@ -14,4 +16,19 @@ export const formatDate = (input) => {
  year: 'numeric',
  month: 'long',
  })
-}
+}
+
+export const preparePageTransition = () => {
+ onNavigate(async (navigation) => {
+ if (!document.startViewTransition) {
+ return;
+ }
+
+ return new Promise((oldStateCaptureResolve) => {
+ document.startViewTransition(async () => {
+ oldStateCaptureResolve();
+ await navigation.complete;
+ });
+ });
+ });
+};
diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
@@ -0,0 +1,13 @@
+import yaml from "js-yaml"
+import fs from "fs"
+const resume = yaml.load(fs.readFileSync("./src/data/resume.yml", "utf8"))
+const about = yaml.load(fs.readFileSync("./src/data/about.yml", "utf8"))
+const projects = yaml.load(fs.readFileSync("./src/data/projects.yml", "utf8"))
+
+export function load({ params }) {
+ return {
+ resume,
+ about,
+ projects,
+ }
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,5 +1,7 @@
 <script>
  import "../app.css"
+ import { preparePageTransition } from "$lib/functions"
+ preparePageTransition()
 </script>
 
 <svelte:head>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -3,19 +3,15 @@
  import { Head } from "svead"
  import SvelteMarkdown from "svelte-markdown"
 
- import Header from "@src/components/Header.svelte"
- import ExternalLink from "@src/components/markdown/ExternalLink.svelte"
-
- import yaml from "js-yaml"
- import fs from "fs"
- const resume = yaml.load(fs.readFileSync("./src/data/resume.yml", "utf8"))
- const about = yaml.load(fs.readFileSync("./src/data/about.yml", "utf8"))
+ import Header from "$lib/components/Header.svelte"
+ import ExternalLink from "$lib/components/markdown/ExternalLink.svelte"
+ export let data
 </script>
 
-<Head title={resume.title} description={resume.description} url={$page.url.toString()} />
+<Head title={data.resume.title} description={data.resume.description} url={$page.url.toString()} />
 
-<Header {resume} />
+<Header resume={data.resume} />
 
 <div class="leading-loose [&_a]:font-bold [&_a]:underline">
- <SvelteMarkdown source={about} renderers={{ link: ExternalLink }} />
+ <SvelteMarkdown source={data.about} renderers={{ link: ExternalLink }} />
 </div>
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
@@ -1,26 +1,23 @@
 <script>
  import { page } from "$app/stores"
  import { Head } from "svead"
- import { convertToSlug } from "@src/lib/functions"
- import Header from "@src/components/Header.svelte"
+ import { convertToSlug } from "$lib/functions"
+ import Header from "$lib/components/Header.svelte"
 
- import yaml from "js-yaml"
- import fs from "fs"
- const resume = yaml.load(fs.readFileSync("./src/data/resume.yml", "utf8"))
- const projects = yaml.load(fs.readFileSync("./src/data/projects.yml", "utf8"))
+ export let data
 </script>
 
-<Head title={`${resume.title} – Projects`} description={`${resume.description} – Projects`} url={$page.url.toString()} />
+<Head title={`${data.resume.title} – Projects`} description={`${data.resume.description} – Projects`} url={$page.url.toString()} />
 
-<Header {resume} />
+<Header resume={data.resume} />
 
-{#if projects && projects.length}
+{#if data.projects && data.projects.length}
  <div class="flex flex-col gap-16 lg:gap-6">
- <div class="my-4 grid gap-2 md:grid-cols-2 lg:grid-cols-3">
- {#each projects as project}
- <a href={`/projects/${convertToSlug(project.title)}/`} class="flex flex-col items-center gap-4 rounded bg-slate-50 py-20 text-slate-700 transition-all duration-700 hover:bg-slate-800 hover:text-slate-200">
- <img src={project.thumb} alt={project.title} width="200" height="200" class="rounded transition-all duration-300" />
- <div class="text-center text-sm">
+ <div class="my-4 grid gap-2 md:grid-cols-2 lg:gap-10">
+ {#each data.projects as project}
+ <a href={`/projects/${convertToSlug(project.title)}/`} class="flex flex-col bg-slate-50 items-center gap-4 rounded-2xl py-20 text-slate-700 transition-all duration-700 hover:bg-slate-200">
+ <img src={project.thumb} alt={project.title} width="200" height="200" class="rounded-lg transition-all duration-300" style={`view-transition-name: img-${convertToSlug(project.title)}`} />
+ <div class="text-center text-sm" style={`view-transition-name: title-${convertToSlug(project.title)}`}>
  {project.title}
  </div>
  </a>

diff --git a/src/routes/projects/[slug]/+page.server.js b/src/routes/projects/[slug]/+page.server.js
@@ -1,14 +1,14 @@
-import { error } from '@sveltejs/kit';
-import { convertToSlug } from "@src/lib/functions"
+import { error } from "@sveltejs/kit"
+import { convertToSlug } from "$lib/functions"
 
 import yaml from "js-yaml"
 import fs from "fs"
-const data = yaml.load(fs.readFileSync("./src/data/projects.yml", "utf8"))
+const projects = yaml.load(fs.readFileSync("./src/data/projects.yml", "utf8"))
 
 export function load({ params }) {
- if (data.some(item => convertToSlug(item.title) === params.slug)) {
- let currentItemIndex = data.findIndex(obj => convertToSlug(obj.title) == params.slug)
- return data[currentItemIndex]
+ if (projects.some((item) => convertToSlug(item.title) === params.slug)) {
+ let currentItemIndex = projects.findIndex((obj) => convertToSlug(obj.title) == params.slug)
+ return projects[currentItemIndex]
  }
- throw error(404, 'Not found');
-}
+ throw error(404, "Not found")
+}
diff --git a/src/routes/projects/[slug]/+page.svelte b/src/routes/projects/[slug]/+page.svelte
@@ -1,29 +1,26 @@
 <script>
  import { page } from "$app/stores"
  import { Head } from "svead"
- import { prettyUrl, formatDate } from "@src/lib/functions"
+ import { prettyUrl, formatDate } from "$lib/functions"
+ import { convertToSlug } from "$lib/functions"
 
  import SvelteMarkdown from "svelte-markdown"
- import ExternalLink from "@src/components/markdown/ExternalLink.svelte"
-
- import yaml from "js-yaml"
- import fs from "fs"
- const resume = yaml.load(fs.readFileSync("./src/data/resume.yml", "utf8"))
+ import ExternalLink from "$lib/components/markdown/ExternalLink.svelte"
 
  export let data
 </script>
 
-<Head title={`${data.title} – ${resume.title}`} description={resume.description} url={$page.url.toString()} />
+<Head title={`${data.title} – ${data.resume.title}`} description={data.resume.description} url={$page.url.toString()} />
 
 <div class="flex flex-col gap-12 lg:gap-20">
  <div>
  <a href="/projects/">← Back</a>
  </div>
 
  <div class="flex flex-col items-center gap-10 lg:flex-row">
- <img src={data.thumb} alt={`${data.title} by ${resume.title}`} width="150" height="150" class="rounded-xl" />
+ <img src={data.thumb} alt={`${data.title} by ${data.resume.title}`} width="150" height="150" class="rounded-xl" style={`view-transition-name: img-${convertToSlug(data.title)}`} />
  <div class="flex flex-col gap-4 text-center lg:text-left">
- <h1 class="text-2xl font-bold md:text-4xl lg:text-6xl">
+ <h1 class="text-2xl font-bold md:text-4xl lg:text-6xl" style={`view-transition-name: title-${convertToSlug(data.title)}`}>
  {data.title}
  </h1>
  <div class="flex flex-col items-center gap-4 lg:flex-row">
@@ -50,7 +47,7 @@
  <div class="grid grid-cols-1 gap-20">
  {#each data.photos as photo}
  <div class="flex max-h-screen items-center justify-center rounded sm:bg-slate-900 sm:p-20">
- <img src={photo} alt={`${data.title} by ${resume.title} - ${photo}`} class="max-h-[90vh] w-auto" />
+ <img src={photo} alt={`${data.title} by ${data.resume.title} - ${photo}`} class="max-h-[90vh] w-auto" />
  </div>
  {/each}
  </div>

diff --git a/src/routes/resume/+page.svelte b/src/routes/resume/+page.svelte
@@ -3,27 +3,24 @@
  import { Head } from "svead"
  import SvelteMarkdown from "svelte-markdown"
 
- import Header from "@src/components/Header.svelte"
- import ExternalLink from "@src/components/markdown/ExternalLink.svelte"
-
- import yaml from "js-yaml"
- import fs from "fs"
- const resume = yaml.load(fs.readFileSync("./src/data/resume.yml", "utf8"))
+ import Header from "$lib/components/Header.svelte"
+ import ExternalLink from "$lib/components/markdown/ExternalLink.svelte"
+ export let data
 </script>
 
-<Head title={`${resume.title} – Resume`} description={`${resume.description} – Resume`} url={$page.url.toString()} />
+<Head title={`${data.resume.title} – Resume`} description={`${data.resume.description} – Resume`} url={$page.url.toString()} />
 
-<Header {resume} />
+<Header resume={data.resume} />
 
-{#if resume.experiences && resume.experiences.length}
+{#if data.resume.experiences && data.resume.experiences.length}
  <div class="flex flex-col gap-16 print:gap-6 lg:gap-6">
  <div class="grid items-baseline gap-x-10 print:grid-cols-4 lg:grid-cols-4">
  <div class="print:col-start-2 lg:col-span-3 lg:col-start-2">
  <h2 class="text-2xl font-bold text-blue-600">Experience</h2>
  </div>
  </div>
 
- {#each resume.experiences as experience}
+ {#each data.resume.experiences as experience}
  <div class="grid items-baseline gap-x-10 print:grid-cols-4 lg:grid-cols-4">
  <div class="print:text-right lg:text-right">
  <span class="text-black/60">
@@ -68,15 +65,15 @@
  </div>
 {/if}
 
-{#if resume.educations && resume.educations.length}
+{#if data.resume.educations && data.resume.educations.length}
  <div class="flex flex-col gap-16 print:gap-6 lg:gap-6">
  <div class="grid items-baseline gap-x-10 print:grid-cols-4 lg:grid-cols-4">
  <div class="print:col-start-2 lg:col-span-3 lg:col-start-2">
  <h2 class="text-2xl font-bold text-blue-600">Education</h2>
  </div>
  </div>
 
- {#each resume.educations as education}
+ {#each data.resume.educations as education}
  <div class="grid items-baseline gap-x-10 print:grid-cols-4 lg:grid-cols-4">
  <div class="print:text-right lg:text-right">
  <span class="text-black/60">
@@ -105,7 +102,7 @@
  </div>
 {/if}
 
-{#if resume.skills && resume.skills.length}
+{#if data.resume.skills && data.resume.skills.length}
  <div class="flex flex-col gap-16 print:gap-6 lg:gap-6">
  <div class="grid items-baseline gap-x-10 print:grid-cols-4 lg:grid-cols-4">
  <div class="print:col-span-3 print:col-start-2 lg:col-span-3 lg:col-start-2">
@@ -116,7 +113,7 @@
  <div class="grid items-baseline gap-x-10 print:grid-cols-4 lg:grid-cols-4">
  <div class="print:col-span-3 print:col-start-2 lg:col-span-3 lg:col-start-2">
  <ul class="mx-5 my-2 flex list-disc flex-col gap-1 text-sm">
- {#each resume.skills as skill}
+ {#each data.resume.skills as skill}
  <li>
  {skill}
  </li>
@@ -127,7 +124,7 @@
  </div>
 {/if}
 
-{#if resume.contacts && resume.contacts.length}
+{#if data.resume.contacts && data.resume.contacts.length}
  <div class="flex flex-col gap-16 print:gap-6 lg:gap-6">
  <div class="grid items-baseline gap-x-10 print:grid-cols-4 lg:grid-cols-4">
  <div class="print:col-span-3 print:col-start-2 lg:col-span-3 lg:col-start-2">
@@ -138,7 +135,7 @@
  <div class="grid items-baseline gap-x-10 print:grid-cols-4 lg:grid-cols-4">
  <div class="print:col-span-3 print:col-start-2 lg:col-span-3 lg:col-start-2">
  <ul class="mx-5 my-2 flex list-disc flex-col gap-1 text-sm">
- {#each resume.contacts as contact}
+ {#each data.resume.contacts as contact}
  <li class="[&_a]:underline">
  <SvelteMarkdown isInline source={contact} renderers={{ link: ExternalLink }} />
  </li>

diff --git a/svelte.config.js b/svelte.config.js
@@ -6,8 +6,5 @@ export default {
  adapter: adapter({
  precompress: true,
  }),
- alias: {
- "@src": "src",
- },
  },
 }