.

saadeghi · Sep 23, 2024 · d4502e0 · d4502e0
1 parent 13ee6fb
commit d4502e0
Show file tree

Hide file tree

Showing 15 changed files with 218 additions and 142 deletions.
diff --git a/postcss.config.cjs b/postcss.config.cjs
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,23 @@
+import tailwindcssPostcss from "@tailwindcss/postcss";
+import postcssDropunusedvars from "postcss-dropunusedvars";
+import postcssHumanPurgecss from "@fullhuman/postcss-purgecss";
+
+export default {
+  plugins: [
+    tailwindcssPostcss,
+    ...process.env.NODE_ENV === 'production'
+      ? [
+        postcssDropunusedvars({ fix: true }),
+        postcssHumanPurgecss({
+          content: ["./src/**/*.{svelte,html}"],
+          extractors: [
+            {
+              extractor: (value) => value.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [],
+              extensions: ["svelte", "html"],
+            },
+          ],
+        })
+      ]
+      : [],
+  ],
+}
diff --git a/src/app.css b/src/app.css
@@ -1,26 +1,17 @@
 @import "tailwindcss";
+
 @theme {
-  --font-family-sans: "Mona Sans", ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-family-sans: "JetBrains Mono", monospace;
 }
 
 @font-face {
-  font-family: "Mona Sans";
-  font-weight: 200;
-  src: url(/fonts/Mona-Sans-UltraLightWide.woff2) format("woff2");
-}
-@font-face {
-  font-family: "Mona Sans";
+  font-family: "JetBrains Mono";
   font-weight: 400;
-  src: url(/fonts/Mona-Sans-Regular.woff2) format("woff2");
+  src: url(/fonts/JetBrainsMono-Regular.woff2) format("woff2");
 }
+
 @font-face {
-  font-family: "Mona Sans";
+  font-family: "JetBrains Mono";
   font-weight: 700;
-  src: url(/fonts/Mona-Sans-Bold.woff2) format("woff2");
-}
-@font-face {
-  font-family: "Mona Sans";
-  font-weight: 900;
-  src: url(/fonts/Mona-Sans-BlackWide.woff2) format("woff2");
+  src: url(/fonts/JetBrainsMono-Bold.woff2) format("woff2");
 }
diff --git a/src/app.html b/src/app.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="print:text-[11px]">
+<html lang="en" class="print:text-[11px] text-[14px]">
 
 <head>
   <meta charset="utf-8" />
@@ -8,7 +8,7 @@
 </head>
 
 <body>
-  <div>%sveltekit.body%</div>
+  %sveltekit.body%
 </body>
 
 </html>
diff --git a/src/data/about.md b/src/data/about.md
@@ -1,4 +1,6 @@
-Hello! My name is <span title="/puːˈjɑː/">**Pouya**</span>, a freelance web developer, living in Istanbul.
+Hello!
+
+My name is <span title="/puːˈjɑː/">**Pouya**</span>, I'm a web developer, living in İstanbul.
 
 I'm working on the popular, open-source UI library [daisyUI](https://daisyui.com/).
 

diff --git a/src/data/projects.yml b/src/data/projects.yml
@@ -3,7 +3,7 @@
   thumb: /projects/POlAEgi9zXAog2oU7bya3TufMq1D081J.png
   date: '2020-12-01'
   url: https://github.com/saadeghi/daisyui
-  content: The most popular, free and open-source Tailwind CSS component library, currently being used in more than 250,000 open-source projects
+  content: The most popular, free and open-source Tailwind CSS component library, currently being used in more than 280,000 open-source projects
   photos:
     - /projects/h1h3xN9FXL97OVPafQGAXbBtSmwSu2oI.png
   tags:
@@ -26,7 +26,6 @@
 - title: Atbox.io
   thumb: /projects/HPUlWrwNhUZaEDQH0UZTIXWDizmTO8k5.jpg
   date: '2014-04-01'
-  url: https://atbox.io
   content: Atbox was a resume builder and portfolio hosting startup, successfully provided services to more than 120K users in a 8-year period and finally retired in 2022 June.
   photos:
     - /projects/u8KCaZLWD0i9sG8JIlc7QhynoTBBDCiE.jpg
@@ -55,7 +54,6 @@
 - title: CryptoMeme.wtf
   thumb: /projects/9WbTYihknrR0SiIm3au1bsdxF1cnbEMB.jpg
   date: '2021-11-14'
-  url: https://cryptomeme.wtf
   content: Open-source meme generator based on current crypto price
   photos:
     - /projects/BReDoXT8fFUvxYroL1XdcTvR09x0TKdZ.jpg
@@ -73,7 +71,7 @@
   date: '2020-11-01'
   url: http://github.com/saadeghi/theme-change
   content: |-
-    A JavaScript package to handle CSS theming.  
+    A JavaScript package to handle CSS theming.
     Open source Node.js package with more than 80,000 NPM downloads
   photos:
     - /projects/8u0D13zR8xojpd2R3z1GwETxbc857Bob.jpg
@@ -199,7 +197,6 @@
 - title: Gametime
   thumb: /projects/eHhV64xyJhe3RbzefKbZOWIeQdMDNEXj.jpg
   date: '2016-12-01'
-  url: http://gametime.ir
   content: |-
     The Gametime.ir was an Android game review media that was launched in Iran Market with bellow features:
 
@@ -359,7 +356,7 @@
   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.  
+    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
@@ -506,9 +503,8 @@
 - title: Upal for Android
   thumb: /projects/Qp5whQZjX1A5WiHpYxI6PnWFfKyikwWF.jpg
   date: '2014-01-01'
-  url: http://upal.ir
   content: |-
-    [Upal](http://upal.ir) payment gateway, brings several money transfer features on your phone.
+    Upal payment gateway, brings several money transfer features on your phone.
     I designed the app UI, using Google Material Design guidelines
   photos:
     - /projects/dmiJnpFG2vJskJZJOLb33eyZ3LPE6G4i.png

diff --git a/src/data/resume.yml b/src/data/resume.yml
@@ -18,7 +18,7 @@ experiences:
       - "[svelte-countup](https://github.com/saadeghi/svelte-countup): component for Svelte.js"
   - date: Dec 2015 – Jun 2022
     role: Product designer, web developer
-    place: "[ManaSky](https://manasky.com/)"
+    place: "ManaSky"
     location: Istanbul, Turkey
     type: Part-time
     bullets:
@@ -28,7 +28,7 @@ experiences:
       - "Designed and developed a website for Ministry of Science, Research and Technology of Iran to register, evaluate and publish tech inventions: [irantechhub.ir](https://irantechhub.ir/)"
   - date: Apr 2014 – Jun 2022
     role: Co-founder, product designer, front-end developer
-    place: "[Atbox.io](https://atbox.io/)"
+    place: "Atbox.io"
     location: Rasht, Iran
     type: Self-employed
     bullets:
@@ -101,6 +101,6 @@ contacts:
   - "Email: [[email protected]](mailto:[email protected])"
   - "Linkedin: [linkedin.com/in/saadeghi](https://linkedin.com/in/saadeghi/)"
   - "Github: [github.com/saadeghi](https://github.com/saadeghi)"
-  - "Twitter: [@saadeghi](https://twitter.com/saadeghi)"
+  - "X: [@saadeghi](https://x.com/saadeghi)"
   - "Telegram: [@saadeghi](https://t.me/saadeghi)"
   - "Location: Istanbul, Turkey (open to relocation)"
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -1,24 +1,37 @@
 <script>
-import { page } from "$app/stores"
-export let resume
+  import { page } from "$app/stores";
+  export let resume;
 </script>
 
-<div class="flex gap-10 print:hidden">
-  <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 lg:flex-row print-flex-row justify-between lg:items-center print:mt-10 print:gap-2"
+>
+  <div>
+    <h1 class="text-4xl">
+      <span title={resume?.firstnameHint}>
+        {resume?.firstname}
+      </span>
+      <span title={resume?.lastnameHint}>
+        {resume?.lastname}
+      </span>
+    </h1>
+    <h2>
+      {resume?.tagline}
+    </h2>
+  </div>
 
-<div class="flex flex-col gap-6 print:mt-10 print:gap-2">
-  <h1 class="text-3xl md:text-6xl" style="font-variation-settings: 'wdth' 125;">
-    <span class="font-black" title={resume?.firstnameHint}>
-      {resume?.firstname}
-    </span>
-    <span class="font-extralight" title={resume?.lastnameHint}>
-      {resume?.lastname}
-    </span>
-  </h1>
-  <h2 class="md:text-xl">
-    {resume?.tagline}
-  </h2>
+  <nav class="flex gap-2 print:hidden">
+    <a
+      class={`px-2 rounded ${$page.url.pathname == "/" ? "bg-black text-white" : "bg-black/5 hover:bg-black/10"}`}
+      href="/">About</a
+    >
+    <a
+      class={`px-2 rounded ${$page.url.pathname == "/resume/" ? "bg-black text-white" : "bg-black/5 hover:bg-black/10"}`}
+      href="/resume/">Resume</a
+    >
+    <a
+      class={`px-2 rounded ${$page.url.pathname == "/projects/" ? "bg-black text-white" : "bg-black/5 hover:bg-black/10"}`}
+      href="/projects/">Projects</a
+    >
+  </nav>
 </div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,16 +1,22 @@
 <script>
-import "../app.css"
+  import "../app.css";
 </script>
 
 <svelte:head>
   <!-- <link rel="preconnect" href="https://fonts.googleapis.com" /> -->
   <!-- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> -->
   <!-- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Montserrat+Alternates:wght@100;700&display=swap" rel="stylesheet" /> -->
-  <link rel="shortcut icon" type="image/x-icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text x='0' y='14'>👨‍💻</text></svg>" />
+  <link
+    rel="shortcut icon"
+    type="image/x-icon"
+    href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text x='0' y='14'>👨‍💻</text></svg>"
+  />
 </svelte:head>
 
-<div class="mb-24 mt-6 flex flex-col items-center justify-center px-6">
-  <div class="flex w-full max-w-4xl flex-col gap-36 print:gap-10">
+<div class="mx-6 my-24 print:my-0 flex flex-col items-center justify-center">
+  <div
+    class="flex w-full max-w-[100ch] print:max-w-none flex-col gap-32 leading-6 text-sm print:gap-10"
+  >
     <slot />
   </div>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,14 +1,18 @@
 <script>
-import { page } from "$app/stores"
-import { Head } from "svead"
-import Header from "$lib/components/Header.svelte"
-export let data
+  import { page } from "$app/stores";
+  import { Head } from "svead";
+  import Header from "$lib/components/Header.svelte";
+  export let data;
 </script>
 
-<Head title={data.resume.title} description={data.resume.description} url={$page.url.toString()} />
+<Head
+  title={data.resume.title}
+  description={data.resume.description}
+  url={$page.url.toString()}
+/>
 
 <Header resume={data.resume} />
 
-<div class="leading-loose [&_a]:font-bold [&_a]:underline">
+<div class="[&_a]:underline">
   {@html data.about}
 </div>
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
@@ -1,25 +1,40 @@
 <script>
-import { page } from "$app/stores"
-import { Head } from "svead"
-import { convertToSlug, formatDate } from "$lib/functions"
-import Header from "$lib/components/Header.svelte"
+  import { page } from "$app/stores";
+  import { Head } from "svead";
+  import { convertToSlug, formatDate } from "$lib/functions";
+  import Header from "$lib/components/Header.svelte";
 
-export let data
+  export let data;
 </script>
 
-<Head title={`${data.resume.title} – Projects`} description={`${data.resume.description} – Projects`} url={$page.url.toString()} />
+<Head
+  title={`${data.resume.title} – Projects`}
+  description={`${data.resume.description} – Projects`}
+  url={$page.url.toString()}
+/>
 
 <Header resume={data.resume} />
 
 {#if data.projects && data.projects.length}
-  <div class="my-4 grid gap-6 sm:gap-20">
+  <div class="my-4 grid gap-6">
     {#each data.projects as project}
-      <a href={`/projects/${convertToSlug(project.title)}/`} class="grid items-center grid-cols-[80px_1fr] sm:grid-cols-[100px_5ch_1fr] gap-x-4 sm:gap-x-10 rounded-4xl transition-colors hover:bg-slate-50 p-4 text-[clamp(.8rem,4vw,2.5rem)]">
-        <img src={project.thumb} alt={project.title} width="100" height="100" class="rounded-2xl w-[80px] sm:w-[100px] max-sm:row-span-2"/>
-        <span class="text-black/50 tabular-nums max-sm:col-start-2 sm:font-extralight max-sm:self-end">
-          {formatDate(project.date, { year : "numeric"})}
+      <a
+        href={`/projects/${convertToSlug(project.title)}/`}
+        class="grid items-center grid-cols-[80px_1fr] sm:grid-cols-[100px_5ch_1fr] gap-x-4 sm:gap-x-10 rounded-4xl transition-colors hover:bg-black/5 p-4"
+      >
+        <img
+          src={project.thumb}
+          alt={project.title}
+          width="100"
+          height="100"
+          class="rounded-2xl w-[80px] sm:w-[100px] max-sm:row-span-2"
+        />
+        <span class="text-black/50 max-sm:col-start-2 max-sm:self-end">
+          {formatDate(project.date, { year: "numeric" })}
         </span>
-        <span class="sm:font-black [text-wrap:balance] max-sm:col-start-2 [word-break:break-word] max-sm:self-start text-[1.2em]">
+        <span
+          class="[text-wrap:balance] max-sm:col-start-2 [word-break:break-word] max-sm:self-start"
+        >
           {project.title}
         </span>
       </a>