~repos /website

#astro#js#html#css

git clone https://pyrossh.dev/repos/website.git

木 Personal website of pyrossh. Built with astrojs, shiki, vite.


c5c4cba0 pyrossh

2 years ago
improve design
components/Slide.tsx CHANGED
@@ -1,77 +1,28 @@
1
- import { JsxAttribute } from "https://deno.land/x/ts_morph@20.0.0/ts_morph.js";
2
1
  import { JSX } from "preact/jsx-runtime";
3
-
4
- // const { title, image, link } = Astro.props;
5
- // ---
6
-
7
- // <style>
8
- // .container {
9
- // margin-top: 2rem;
10
- // overflow: hidden;
11
- // border-radius: 0.25rem;
12
- // background-color: var(--slider-bg);
13
- // }
14
-
15
- // .box {
16
- // display: flex;
17
- // flex-direction: column;
18
- // width: 100%;
19
- // padding: 1rem;
20
- // }
21
-
22
- // .text {
23
- // width: 100%;
24
- // flex: 1;
25
- // margin-right: 2rem;
26
-
27
- // & > a {
28
- // color: black;
29
- // text-decoration: underline;
30
- // }
31
- // }
32
-
33
- // .repo-link {
34
- // display: flex;
35
- // align-items: center;
36
- // margin-bottom: 1rem;
37
- // font-size: 1.5rem;
38
- // line-height: 2rem;
39
- // font-weight: 600;
40
- // /* text-decoration: none !important; */
2
+ import GithubIcon from "./icons/GithubIcon.tsx";
41
-
42
- // [astro-icon] {
43
- // width: 32px;
44
- // margin-right: 0.6rem;
45
- // }
46
- // }
47
- // </style>
48
3
 
49
4
  export interface Props {
50
5
  title: string;
51
6
  link: string;
52
- imgSrc: string;
53
7
  children: JSX.Element | JSX.Element[];
54
8
  }
55
9
 
56
- export default function Slide({ title, imgSrc, link, children }: Props) {
10
+ export default function Slide({ title, link, children }: Props) {
57
11
  return (
58
12
  <article class="overflow-hidden rounded bg-slider-bg">
59
13
  <div class="flex flex-col w-full p-4">
60
14
  <div class="w-full flex-1 mr-8">
61
15
  <a
62
16
  href={link}
63
- class="flex items-center text-2xl leading-8 font-semibold mb-4 text-black underline"
17
+ class="flex items-center text-lg font-semibold mb-2 text-black underline child-svg:mr-2"
64
18
  target="_blank"
65
19
  rel="noopener noreferrer"
66
20
  >
67
- {/* <Icon name="mdi:github" /> */}
21
+ <GithubIcon />
68
22
  <p>{title}</p>
69
23
  </a>
70
24
  {children}
71
25
  </div>
72
- <div class="hidden flex-col flex-1 w-4/12 bg-white border items-center justify-center rounded-sm border-solid border-black">
73
- <img src={imgSrc} alt={title} />
74
- </div>
75
26
  </div>
76
27
  </article>
77
28
  );
components/icons/AppStoreIcon.tsx ADDED
@@ -0,0 +1,44 @@
1
+ export default function AppStoreIcon() {
2
+ return (
3
+ <svg
4
+ xmlns="http://www.w3.org/2000/svg"
5
+ viewBox="0 0 197 56"
6
+ width="197"
7
+ height="56"
8
+ >
9
+ <path
10
+ fill="#FFF"
11
+ d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"
12
+ />
13
+ <path
14
+ fill="#A6A6A6"
15
+ d="M130.198 39.989H4.729A4.73 4.73 0 0 1 0 35.268V4.726A4.733 4.733 0 0 1 4.729 0h125.468a4.735 4.735 0 0 1 4.729 4.726v30.542c.002 2.604-2.123 4.721-4.728 4.721z"
16
+ />
17
+ <path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z" />
18
+ <path
19
+ fill="#FFF"
20
+ d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.554 2.355 3.287 4.016 3.226 1.625-.066 2.232-1.035 4.193-1.035 1.943 0 2.513 1.035 4.207.996 1.744-.027 2.842-1.56 3.89-3.127 1.255-1.779 1.759-3.533 1.779-3.623-.04-.014-3.386-1.292-3.42-5.154zm-3.2-9.478c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793z"
21
+ />
22
+ <linearGradient
23
+ id="a"
24
+ x1={-23.235}
25
+ x2={-23.235}
26
+ y1={97.431}
27
+ y2={61.386}
28
+ gradientTransform="matrix(4.0022 0 0 4.0011 191.95 -349.736)"
29
+ gradientUnits="userSpaceOnUse"
30
+ >
31
+ <stop offset={0} stopColor="#1a1a1a" stopOpacity={0.1} />
32
+ <stop offset={0.123} stopColor="#212121" stopOpacity={0.151} />
33
+ <stop offset={0.308} stopColor="#353535" stopOpacity={0.227} />
34
+ <stop offset={0.532} stopColor="#575757" stopOpacity={0.318} />
35
+ <stop offset={0.783} stopColor="#858585" stopOpacity={0.421} />
36
+ <stop offset={1} stopColor="#b3b3b3" stopOpacity={0.51} />
37
+ </linearGradient>
38
+ <path
39
+ fill="#FFF"
40
+ d="M53.665 31.504h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.43l4.285-13.308h2.646l4.304 13.308zm-3.89-5.549L48.65 22.48c-.119-.355-.343-1.191-.671-2.507h-.04c-.132.566-.343 1.402-.632 2.507l-1.106 3.475h3.574zm14.888.633c0 1.632-.443 2.922-1.33 3.869-.794.843-1.781 1.264-2.958 1.264-1.271 0-2.185-.453-2.74-1.361v5.035h-2.132V25.062c0-1.025-.027-2.076-.079-3.154h1.875l.119 1.521h.04c.711-1.146 1.79-1.719 3.238-1.719 1.132 0 2.077.447 2.833 1.342.755.897 1.134 2.075 1.134 3.536zm-2.172.078c0-.934-.21-1.704-.632-2.311-.461-.631-1.08-.947-1.856-.947-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373a2.784 2.784 0 0 0-.099.649v1.601c0 .697.214 1.286.642 1.768.428.48.984.721 1.668.721.803 0 1.428-.311 1.875-.928.448-.619.672-1.435.672-2.449zm13.209-.078c0 1.632-.443 2.922-1.33 3.869-.795.843-1.781 1.264-2.959 1.264-1.271 0-2.185-.453-2.74-1.361v5.035h-2.132V25.062c0-1.025-.027-2.076-.079-3.154h1.875l.119 1.521h.04c.71-1.146 1.789-1.719 3.238-1.719 1.131 0 2.076.447 2.834 1.342.754.897 1.134 2.075 1.134 3.536zm-2.173.078c0-.934-.211-1.704-.633-2.311-.461-.631-1.078-.947-1.854-.947-.526 0-1.004.176-1.433.523-.428.35-.707.807-.838 1.373-.065.264-.1.479-.1.649v1.601c0 .697.215 1.286.641 1.768.428.479.984.721 1.67.721.804 0 1.429-.311 1.875-.928.448-.619.672-1.435.672-2.449zm14.513 1.105c0 1.133-.396 2.054-1.183 2.765-.866.776-2.075 1.165-3.625 1.165-1.432 0-2.58-.276-3.446-.829l.493-1.777c.935.554 1.962.83 3.08.83.804 0 1.429-.182 1.875-.543.447-.362.673-.846.673-1.45 0-.541-.187-.994-.554-1.363-.369-.368-.979-.711-1.836-1.026-2.33-.869-3.496-2.14-3.496-3.812 0-1.092.412-1.986 1.234-2.685.822-.698 1.912-1.047 3.268-1.047 1.211 0 2.22.211 3.021.632l-.535 1.738c-.754-.408-1.605-.612-2.557-.612-.752 0-1.342.185-1.764.553-.355.329-.535.73-.535 1.206 0 .525.205.961.613 1.303.354.315 1 .658 1.934 1.026 1.146.462 1.988 1 2.527 1.618.543.618.813 1.389.813 2.308zm7.067-4.263h-2.35v4.659c0 1.185.414 1.776 1.244 1.776.381 0 .697-.032.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.771-.473-.514-.711-1.375-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.604zm10.582 3.119c0 1.475-.422 2.686-1.264 3.633-.881.975-2.053 1.461-3.514 1.461-1.41 0-2.531-.467-3.367-1.4-.836-.935-1.254-2.113-1.254-3.534 0-1.487.432-2.705 1.293-3.652.863-.948 2.025-1.422 3.486-1.422 1.408 0 2.539.468 3.395 1.402.818.906 1.225 2.076 1.225 3.512zm-2.21.049c0-.879-.19-1.633-.571-2.264-.447-.762-1.087-1.143-1.916-1.143-.854 0-1.509.381-1.955 1.143-.382.631-.572 1.398-.572 2.304 0 .88.19 1.636.572 2.265.461.762 1.104 1.143 1.937 1.143.815 0 1.454-.389 1.916-1.162.392-.646.589-1.405.589-2.286zm9.143-2.893a3.71 3.71 0 0 0-.672-.059c-.75 0-1.33.282-1.738.85-.354.5-.532 1.132-.532 1.895v5.035h-2.132V24.93a67.43 67.43 0 0 0-.062-3.021h1.857l.078 1.836h.059c.226-.631.58-1.14 1.066-1.521a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039l.002 2.034zm9.535 2.469a5 5 0 0 1-.078.967h-6.396c.024.948.334 1.674.928 2.174.539.446 1.236.67 2.092.67.947 0 1.811-.15 2.588-.453l.334 1.479c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.312-.848-.875-1.273-2.051-1.273-3.524 0-1.446.395-2.651 1.186-3.612.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.813.846 1.821.846 3.018zm-2.033-.553c.015-.633-.125-1.178-.414-1.639-.369-.594-.937-.89-1.698-.89-.697 0-1.265.289-1.697.869-.355.461-.566 1.015-.631 1.658l4.44.002zM45.211 13.491c-.593 0-1.106-.029-1.533-.078V6.979a11.606 11.606 0 0 1 1.805-.136c2.445 0 3.571 1.203 3.571 3.164 0 2.262-1.33 3.484-3.843 3.484zm.358-5.823c-.33 0-.611.02-.844.068v4.891c.126.02.368.029.708.029 1.602 0 2.514-.912 2.514-2.62 0-1.523-.825-2.368-2.378-2.368zm6.994 5.872c-1.378 0-2.271-1.029-2.271-2.426 0-1.456.912-2.494 2.349-2.494 1.358 0 2.271.98 2.271 2.417 0 1.474-.941 2.503-2.349 2.503zm.04-4.154c-.757 0-1.242.708-1.242 1.698 0 .971.495 1.679 1.232 1.679s1.232-.757 1.232-1.699c0-.96-.485-1.678-1.222-1.678zm10.167-.669-1.475 4.716h-.961l-.611-2.048a15.53 15.53 0 0 1-.379-1.523h-.02c-.077.514-.223 1.029-.378 1.523l-.65 2.048h-.971l-1.388-4.716h1.077l.534 2.242c.126.534.232 1.038.32 1.514h.02c.077-.397.203-.893.388-1.504l.67-2.251h.854l.641 2.203c.155.534.281 1.058.379 1.553h.028c.068-.485.175-1 .32-1.553l.573-2.203 1.029-.001zm5.43 4.716h-1.048v-2.708c0-.834-.32-1.252-.951-1.252-.621 0-1.048.534-1.048 1.155v2.805h-1.048v-3.368c0-.417-.01-.864-.039-1.349h.922l.049.728h.029c.282-.504.854-.824 1.495-.824.99 0 1.64.757 1.64 1.989l-.001 2.824zm2.89 0h-1.049v-6.88h1.049v6.88zm3.821.107c-1.377 0-2.271-1.029-2.271-2.426 0-1.456.912-2.494 2.348-2.494 1.359 0 2.271.98 2.271 2.417.001 1.474-.941 2.503-2.348 2.503zm.039-4.154c-.757 0-1.242.708-1.242 1.698 0 .971.496 1.679 1.231 1.679.738 0 1.232-.757 1.232-1.699.001-.96-.483-1.678-1.221-1.678zm6.441 4.047-.076-.543h-.028c-.32.437-.787.65-1.379.65-.845 0-1.445-.592-1.445-1.388 0-1.164 1.009-1.766 2.756-1.766v-.087c0-.621-.329-.932-.979-.932-.465 0-.873.117-1.232.35l-.213-.689c.436-.272.98-.408 1.619-.408 1.232 0 1.854.65 1.854 1.951v1.737c0 .476.021.845.068 1.126l-.945-.001zm-.144-2.349c-1.164 0-1.748.282-1.748.951 0 .495.301.737.719.737.533 0 1.029-.407 1.029-.96v-.728zm6.11 2.349-.049-.757h-.029c-.301.572-.807.864-1.514.864-1.137 0-1.979-1-1.979-2.407 0-1.475.873-2.514 2.065-2.514.631 0 1.078.213 1.33.641h.021V6.553h1.049v5.609c0 .456.011.883.039 1.271h-.933zm-.155-2.775c0-.66-.437-1.223-1.104-1.223-.777 0-1.252.689-1.252 1.659 0 .951.493 1.602 1.231 1.602.659 0 1.125-.573 1.125-1.252v-.786zm7.7 2.882c-1.377 0-2.27-1.029-2.27-2.426 0-1.456.912-2.494 2.348-2.494 1.359 0 2.271.98 2.271 2.417.001 1.474-.94 2.503-2.349 2.503zm.039-4.154c-.756 0-1.241.708-1.241 1.698 0 .971.495 1.679 1.231 1.679.738 0 1.232-.757 1.232-1.699.002-.96-.483-1.678-1.222-1.678zm7.946 4.047h-1.049v-2.708c0-.834-.32-1.252-.951-1.252-.621 0-1.047.534-1.047 1.155v2.805h-1.049v-3.368c0-.417-.01-.864-.039-1.349h.922l.049.728h.029c.281-.504.854-.825 1.494-.825.99 0 1.641.757 1.641 1.989v2.825zm7.051-3.93h-1.153v2.29c0 .583.202.874.61.874.185 0 .34-.02.465-.049l.029.796c-.203.078-.475.117-.813.117-.826 0-1.32-.456-1.32-1.65V9.503h-.688v-.786h.688v-.864l1.029-.311v1.174h1.153v.787zm5.548 3.93h-1.047v-2.688c0-.844-.319-1.271-.951-1.271-.543 0-1.049.369-1.049 1.116v2.843h-1.047v-6.88h1.047v2.833h.021c.33-.514.808-.767 1.418-.767.998 0 1.608.776 1.608 2.009v2.805zm5.684-2.106h-3.145c.02.893.611 1.397 1.486 1.397.465 0 .893-.078 1.271-.223l.163.728c-.446.194-.971.291-1.582.291-1.475 0-2.348-.932-2.348-2.377 0-1.446.894-2.533 2.23-2.533 1.205 0 1.961.893 1.961 2.242a2.02 2.02 0 0 1-.036.475zm-.961-.747c0-.728-.367-1.242-1.037-1.242-.602 0-1.078.524-1.146 1.242h2.183z"
41
+ />
42
+ </svg>
43
+ );
44
+ }
components/icons/GooglePlayIcon.tsx ADDED
@@ -0,0 +1,136 @@
1
+ export default function GooglePlayIcon() {
2
+ return (
3
+ <svg
4
+ xmlns="http://www.w3.org/2000/svg"
5
+ viewBox="0 0 135 40"
6
+ width="135"
7
+ height="40"
8
+ >
9
+ <path d="M130 40H5c-2.8 0-5-2.2-5-5V5c0-2.8 2.2-5 5-5h125c2.8 0 5 2.2 5 5v30c0 2.8-2.2 5-5 5z" />
10
+ <path
11
+ d="M130 .8c2.3 0 4.2 1.9 4.2 4.2v30c0 2.3-1.9 4.2-4.2 4.2H5C2.7 39.2.8 37.3.8 35V5C.8 2.7 2.7.8 5 .8h125m0-.8H5C2.2 0 0 2.3 0 5v30c0 2.8 2.2 5 5 5h125c2.8 0 5-2.2 5-5V5c0-2.7-2.2-5-5-5z"
12
+ style={{
13
+ fill: "#a6a6a6",
14
+ }}
15
+ />
16
+ <path
17
+ d="M47.4 10.2c0 .8-.2 1.5-.7 2-.6.6-1.3.9-2.2.9-.9 0-1.6-.3-2.2-.9-.6-.6-.9-1.3-.9-2.2 0-.9.3-1.6.9-2.2.6-.6 1.3-.9 2.2-.9.4 0 .8.1 1.2.3.4.2.7.4.9.7l-.5.5c-.4-.5-.9-.7-1.6-.7-.6 0-1.2.2-1.6.7-.5.4-.7 1-.7 1.7s.2 1.3.7 1.7c.5.4 1 .7 1.6.7.7 0 1.2-.2 1.7-.7.3-.3.5-.7.5-1.2h-2.2v-.8h2.9v.4zM52 7.7h-2.7v1.9h2.5v.7h-2.5v1.9H52v.8h-3.5V7H52v.7zm3.3 5.3h-.8V7.7h-1.7V7H57v.7h-1.7V13zm4.6 0V7h.8v6h-.8zm4.2 0h-.8V7.7h-1.7V7h4.1v.7H64V13zm9.5-.8c-.6.6-1.3.9-2.2.9-.9 0-1.6-.3-2.2-.9-.6-.6-.9-1.3-.9-2.2s.3-1.6.9-2.2c.6-.6 1.3-.9 2.2-.9.9 0 1.6.3 2.2.9.6.6.9 1.3.9 2.2 0 .9-.3 1.6-.9 2.2zm-3.8-.5c.4.4 1 .7 1.6.7.6 0 1.2-.2 1.6-.7.4-.4.7-1 .7-1.7s-.2-1.3-.7-1.7c-.4-.4-1-.7-1.6-.7-.6 0-1.2.2-1.6.7-.4.4-.7 1-.7 1.7s.2 1.3.7 1.7zm5.8 1.3V7h.9l2.9 4.7V7h.8v6h-.8l-3.1-4.9V13h-.7z"
18
+ style={{
19
+ fill: "#fff",
20
+ stroke: "#fff",
21
+ strokeWidth: 0.2,
22
+ strokeMiterlimit: 10,
23
+ }}
24
+ />
25
+ <path
26
+ d="M68.1 21.8c-2.4 0-4.3 1.8-4.3 4.3 0 2.4 1.9 4.3 4.3 4.3s4.3-1.8 4.3-4.3c0-2.6-1.9-4.3-4.3-4.3zm0 6.8c-1.3 0-2.4-1.1-2.4-2.6s1.1-2.6 2.4-2.6c1.3 0 2.4 1 2.4 2.6 0 1.5-1.1 2.6-2.4 2.6zm-9.3-6.8c-2.4 0-4.3 1.8-4.3 4.3 0 2.4 1.9 4.3 4.3 4.3s4.3-1.8 4.3-4.3c0-2.6-1.9-4.3-4.3-4.3zm0 6.8c-1.3 0-2.4-1.1-2.4-2.6s1.1-2.6 2.4-2.6c1.3 0 2.4 1 2.4 2.6 0 1.5-1.1 2.6-2.4 2.6zm-11.1-5.5v1.8H52c-.1 1-.5 1.8-1 2.3-.6.6-1.6 1.3-3.3 1.3-2.7 0-4.7-2.1-4.7-4.8s2.1-4.8 4.7-4.8c1.4 0 2.5.6 3.3 1.3l1.3-1.3c-1.1-1-2.5-1.8-4.5-1.8-3.6 0-6.7 3-6.7 6.6 0 3.6 3.1 6.6 6.7 6.6 2 0 3.4-.6 4.6-1.9 1.2-1.2 1.6-2.9 1.6-4.2 0-.4 0-.8-.1-1.1h-6.2zm45.4 1.4c-.4-1-1.4-2.7-3.6-2.7s-4 1.7-4 4.3c0 2.4 1.8 4.3 4.2 4.3 1.9 0 3.1-1.2 3.5-1.9l-1.4-1c-.5.7-1.1 1.2-2.1 1.2s-1.6-.4-2.1-1.3l5.7-2.4-.2-.5zm-5.8 1.4c0-1.6 1.3-2.5 2.2-2.5.7 0 1.4.4 1.6.9l-3.8 1.6zM82.6 30h1.9V17.5h-1.9V30zm-3-7.3c-.5-.5-1.3-1-2.3-1-2.1 0-4.1 1.9-4.1 4.3s1.9 4.2 4.1 4.2c1 0 1.8-.5 2.2-1h.1v.6c0 1.6-.9 2.5-2.3 2.5-1.1 0-1.9-.8-2.1-1.5l-1.6.7c.5 1.1 1.7 2.5 3.8 2.5 2.2 0 4-1.3 4-4.4V22h-1.8v.7zm-2.2 5.9c-1.3 0-2.4-1.1-2.4-2.6s1.1-2.6 2.4-2.6c1.3 0 2.3 1.1 2.3 2.6s-1 2.6-2.3 2.6zm24.4-11.1h-4.5V30h1.9v-4.7h2.6c2.1 0 4.1-1.5 4.1-3.9s-2-3.9-4.1-3.9zm.1 6h-2.7v-4.3h2.7c1.4 0 2.2 1.2 2.2 2.1-.1 1.1-.9 2.2-2.2 2.2zm11.5-1.8c-1.4 0-2.8.6-3.3 1.9l1.7.7c.4-.7 1-.9 1.7-.9 1 0 1.9.6 2 1.6v.1c-.3-.2-1.1-.5-1.9-.5-1.8 0-3.6 1-3.6 2.8 0 1.7 1.5 2.8 3.1 2.8 1.3 0 1.9-.6 2.4-1.2h.1v1h1.8v-4.8c-.2-2.2-1.9-3.5-4-3.5zm-.2 6.9c-.6 0-1.5-.3-1.5-1.1 0-1 1.1-1.3 2-1.3.8 0 1.2.2 1.7.4-.2 1.2-1.2 2-2.2 2zm10.5-6.6-2.1 5.4h-.1l-2.2-5.4h-2l3.3 7.6-1.9 4.2h1.9l5.1-11.8h-2zm-16.8 8h1.9V17.5h-1.9V30z"
27
+ style={{
28
+ fill: "#fff",
29
+ }}
30
+ />
31
+ <linearGradient
32
+ id="a"
33
+ x1={21.8}
34
+ x2={5.017}
35
+ y1={33.29}
36
+ y2={16.508}
37
+ gradientTransform="matrix(1 0 0 -1 0 42)"
38
+ gradientUnits="userSpaceOnUse"
39
+ >
40
+ <stop offset={0} stopColor="#00a0ff" />
41
+ <stop offset={0.007} stopColor="#00a1ff" />
42
+ <stop offset={0.26} stopColor="#00beff" />
43
+ <stop offset={0.512} stopColor="#00d2ff" />
44
+ <stop offset={0.76} stopColor="#00dfff" />
45
+ <stop offset={1} stopColor="#00e3ff" />
46
+ </linearGradient>
47
+ <path
48
+ d="M10.4 7.5c-.3.3-.4.8-.4 1.4V31c0 .6.2 1.1.5 1.4l.1.1L23 20.1v-.2L10.4 7.5z"
49
+ style={{
50
+ fill: "url(#a)",
51
+ }}
52
+ />
53
+ <linearGradient
54
+ id="b"
55
+ x1={33.834}
56
+ x2={9.637}
57
+ y1={21.999}
58
+ y2={21.999}
59
+ gradientTransform="matrix(1 0 0 -1 0 42)"
60
+ gradientUnits="userSpaceOnUse"
61
+ >
62
+ <stop offset={0} stopColor="#ffe000" />
63
+ <stop offset={0.409} stopColor="#ffbd00" />
64
+ <stop offset={0.775} stopColor="orange" />
65
+ <stop offset={1} stopColor="#ff9c00" />
66
+ </linearGradient>
67
+ <path
68
+ d="m27 24.3-4.1-4.1v-.3l4.1-4.1.1.1 4.9 2.8c1.4.8 1.4 2.1 0 2.9l-5 2.7z"
69
+ style={{
70
+ fill: "url(#b)",
71
+ }}
72
+ />
73
+ <linearGradient
74
+ id="c"
75
+ x1={24.827}
76
+ x2={2.069}
77
+ y1={19.704}
78
+ y2={-3.054}
79
+ gradientTransform="matrix(1 0 0 -1 0 42)"
80
+ gradientUnits="userSpaceOnUse"
81
+ >
82
+ <stop offset={0} stopColor="#ff3a44" />
83
+ <stop offset={1} stopColor="#c31162" />
84
+ </linearGradient>
85
+ <path
86
+ d="M27.1 24.2 22.9 20 10.4 32.5c.5.5 1.2.5 2.1.1l14.6-8.4"
87
+ style={{
88
+ fill: "url(#c)",
89
+ }}
90
+ />
91
+ <linearGradient
92
+ id="d"
93
+ x1={7.297}
94
+ x2={17.46}
95
+ y1={41.824}
96
+ y2={31.661}
97
+ gradientTransform="matrix(1 0 0 -1 0 42)"
98
+ gradientUnits="userSpaceOnUse"
99
+ >
100
+ <stop offset={0} stopColor="#32a071" />
101
+ <stop offset={0.069} stopColor="#2da771" />
102
+ <stop offset={0.476} stopColor="#15cf74" />
103
+ <stop offset={0.801} stopColor="#06e775" />
104
+ <stop offset={1} stopColor="#00f076" />
105
+ </linearGradient>
106
+ <path
107
+ d="M27.1 15.8 12.5 7.5c-.9-.5-1.6-.4-2.1.1L22.9 20l4.2-4.2z"
108
+ style={{
109
+ fill: "url(#d)",
110
+ }}
111
+ />
112
+ <path
113
+ d="m27 24.1-14.5 8.2c-.8.5-1.5.4-2 0l-.1.1.1.1c.5.4 1.2.5 2 0L27 24.1z"
114
+ style={{
115
+ opacity: 0.2,
116
+ enableBackground: "new",
117
+ }}
118
+ />
119
+ <path
120
+ d="M10.4 32.3c-.3-.3-.4-.8-.4-1.4v.1c0 .6.2 1.1.5 1.4v-.1h-.1zm21.6-11-5 2.8.1.1 4.9-2.8c.7-.4 1-.9 1-1.4 0 .5-.4.9-1 1.3z"
121
+ style={{
122
+ opacity: 0.12,
123
+ enableBackground: "new",
124
+ }}
125
+ />
126
+ <path
127
+ d="M12.5 7.6 32 18.7c.6.4 1 .8 1 1.3 0-.5-.3-1-1-1.4L12.5 7.5c-1.4-.8-2.5-.2-2.5 1.4V9c0-1.5 1.1-2.2 2.5-1.4z"
128
+ style={{
129
+ opacity: 0.25,
130
+ fill: "#fff",
131
+ enableBackground: "new",
132
+ }}
133
+ />
134
+ </svg>
135
+ );
136
+ }
routes/cv.tsx CHANGED
@@ -159,10 +159,7 @@ export default function CV() {
159
159
  <h5>
160
160
  Numberz integrates banking with your day-2-day business work-flows
161
161
  freeing up a lot of effort, time and heart-burn, to help your
162
- business grow! You’ll never have to spend time syncing information
162
+ business grow.
163
- between different systems. Save and record receipts &amp; spends
164
- with a single tap, automatically categorise transactions for
165
- book-keeping and easily share information with your accountant.
166
163
  </h5>
167
164
  <ul>
168
165
  <li>
@@ -210,11 +207,7 @@ export default function CV() {
210
207
  <h4>Full Stack Developer, Apr 2014 - Sept 2016</h4>
211
208
  <h5>
212
209
  Playlyfe is an online Gamification Platform which empowers anyone to
213
- design and implement a gamified system.This platform allows a normal
210
+ design and implement a gamified system.
214
- user to convert a gamified system's design into a fully functional
215
- web-application complete with teams, real-time notifications,
216
- leaderboards and many more features. Made Critical decisions on what
217
- tech stack to switch to for our gamification product Catalyst.
218
211
  </h5>
219
212
  <ul>
220
213
  <li>
routes/index.tsx CHANGED
@@ -4,7 +4,9 @@ import TreeIcon from "../components/icons/TreeIcon.tsx";
4
4
  import ContactIcon from "../components/icons/ContactIcon.tsx";
5
5
  import HardwareIcon from "../components/icons/HardwareIcon.tsx";
6
6
  import SoftwareIcon from "../components/icons/SoftwareIcon.tsx";
7
+ import GooglePlayIcon from "../components/icons/GooglePlayIcon.tsx";
8
+ import AppStoreIcon from "../components/icons/AppStoreIcon.tsx";
7
- import { asset, Head } from "$fresh/runtime.ts";
9
+ import { Head } from "$fresh/runtime.ts";
8
10
 
9
11
  export default function Home() {
10
12
  return (
@@ -16,111 +18,97 @@ export default function Home() {
16
18
  content="A fullstack developer from Bangalore who likes to create frameworks and programming languages."
17
19
  />
18
20
  </Head>
19
- <div>
21
+ <div class="heir-h2:text-xl heir-h2:font-bold heir-h2:middle">
20
- <div>
21
- <h1 class="text-3xl font-bold mb-4">Hello!</h1>
22
+ <h1 class="text-3xl font-bold mb-4">Hello!</h1>
22
- <p>
23
+ <p>
23
- I'm{" "}
24
+ I'm{" "}
25
+ <a class="underline" href="https://www.linkedin.com/in/peter-john-in">
24
- <strong>Peter John</strong>, a fullstack developer from Bengaluru,
26
+ <strong>Peter John</strong>
27
+ </a>
28
+ , a fullstack developer from Bengaluru, India. I love writing code and
25
- India. I love writing code and I am lucky enough to do this as my
29
+ I am lucky enough to do this as my job.
26
- job.
27
- </p>
30
+ </p>
28
- <p>
31
+ <p>
29
- I currently work for Equal Experts. I have a strong passion for
32
+ I currently work for Equal Experts. I have a strong passion for golang
30
- golang but I also work with react and nodejs. I've mostly worked
33
+ but I also work with react and nodejs. I've mostly worked with
31
- with startups and product based companies. I have gained a lot of
34
+ startups and product based companies. I have gained a lot of domain
32
- domain specific knowledge in healthcare and finance during these
35
+ specific knowledge in healthcare and finance during these startup
33
- startup years.
36
+ years.
34
- </p>
37
+ </p>
35
- <p>
38
+ <p>
36
- I like to work on open source and hobby projects. Over the course of
39
+ I like to work on open source and hobby projects. Over the course of
37
- {" "}
40
+ {" "}
38
- {new Date().getFullYear() - 2014}{" "}
41
+ {new Date().getFullYear() - 2014}{" "}
39
- years I've accumulated a lot of useful projects used by many people
42
+ years I've accumulated a lot of useful projects used by many people
40
- around the world.
43
+ around the world.
41
- </p>
44
+ </p>
42
- </div>
43
45
  <div>
44
46
  <div class="flex items-center mt-8 mb-4 child-svg:mr-2 child-svg:text-pink-800">
45
47
  <ProjectsIcon size="36" />
46
- <h2 class="my-0 text-3xl font-bold">Projects</h2>
48
+ <h2>Projects</h2>
47
49
  </div>
48
- <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8">
50
+ <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-8 child-section:flex child-section:flex-col child-section:mt-4 child-section:mx-1">
49
51
  <Slide
50
52
  title="Rust-embed"
51
53
  link="https://github.com/pyrossh/rust-embed"
52
- imgSrc={asset("/images/rust-embed.png")}
53
54
  >
54
55
  <p>
55
- A rust macro which loads files into the rust binary at compile
56
+ A rust proc-macro which loads files into the rust binary at
56
- time during release and loads the file from the fs during dev
57
+ compile time during release and loads the file from the fs
57
- </p>
58
- <p>
58
+ during dev
59
- You can use this to embed your css, js and images into a single
60
- executable which can be deployed to your servers. Also it makes
61
- it easy to build a very small docker image for you to deploy
62
59
  </p>
63
60
  </Slide>
64
- <Slide
65
- title="Gromer"
66
- link="https://github.com/pyrossh/gromer"
61
+ <Slide title="Gromer" link="https://github.com/pyrossh/gromer">
67
- imgSrc={asset("/images/gromer.png")}
68
- >
69
62
  <p>
70
63
  Gromer is a framework and cli to build web apps in golang. It
71
64
  uses a declarative syntax using inline jsx like templates for
72
65
  components and pages.
73
66
  </p>
74
- <p>
75
- It also generates http handlers for your routes which follow a
76
- particular folder structure. Similar to other frameworks like
77
- nextjs, sveltekit. These handlers are also normal functions and
78
- can be imported in other packages to call them directly
79
- </p>
80
67
  </Slide>
81
- <Slide
82
- title="Palm"
83
- link="https://github.com/pyrossh/palm"
68
+ <Slide title="Palm" link="https://github.com/pyrossh/palm">
84
- imgSrc={asset("/images/pine.png")}
85
- >
86
69
  <p>
87
- A programming language with a syntax largely inspired by pyret
70
+ A programming language with a syntax largely inspired by gleam
88
- and hush but with the simplicity of go.
71
+ and pyret but with the simplicity of go.
89
- </p>
90
- <p>
91
- It has support for first class functions and has a clean syntax
92
- and can call C library functions directly. Pine programs will
93
- eventually be compiled to AMD64 and ARM64 and using QBE a small
94
- and fast compiler backend
95
72
  </p>
73
+ <p>WIP to support compilation to WASM with C-FFI support.</p>
96
74
  </Slide>
97
75
  <Slide
98
- title="Gdx Studio"
76
+ title="Only Bible App"
99
- link="https://github.com/pyrossh/gdx-studio"
77
+ link="https://github.com/pyrossh/only-bible-app"
100
- imgSrc={asset("/images/gdx-studio.png")}
101
78
  >
102
- <p>GdxStudio is used for creating awesome games using libGDX.</p>
103
79
  <p>
104
- It has all the features of libGDX built-in so you can
80
+ The only bible app you will ever need. No ads, No in-app
105
- easily,start creating games with it. Automatic Asset Loading
106
- including Atlas, TextureRegions, BitmapFonts, Music, Sound.
81
+ purchases, No distractions.
107
- Tools like Font Editor, Particle Editor, Texture Packer,
108
- SceneEditor, MapEditor, ActorEditor, ImagingTools are already
109
- built into it
110
82
  </p>
83
+ <div class="flex mt-4">
84
+ <a
85
+ class="mr-4"
86
+ href="https://play.google.com/store/apps/details?id=sh.pyros.only_bible_app"
87
+ rel="noopener noreferrer"
88
+ target="blank"
89
+ >
90
+ <GooglePlayIcon />
91
+ </a>
92
+ <a
93
+ href="https://apps.apple.com/us/app/only-bible-app/id6467606465"
94
+ rel="noopener noreferrer"
95
+ target="blank"
96
+ >
97
+ <AppStoreIcon />
98
+ </a>
99
+ </div>
111
100
  </Slide>
112
- <section class="flex flex-col flex-1">
101
+ <section>
113
- <div class="flex text-3xl font-bold child-svg:mr-2 child-svg:text-green-800">
102
+ <div class="flex items-center child-svg:mr-2 child-svg:text-green-800">
114
- <HardwareIcon size="36" />
103
+ <HardwareIcon size="32" />
115
- Hardware Setup
104
+ <h2>Hardware</h2>
116
105
  </div>
117
- <div class="ml-1 mt-6 mb-2">My current hardware setup is</div>
106
+ <ul class="grid gap-2 grid-cols-2 text-center mt-4 ml-2 heir-a:text-blue-900 child:bg-gray-200 child:p-1">
118
- <ul class="ml-1.5">
119
107
  <li>
120
108
  <strong>Laptop:</strong> M2 Macbook Air
121
109
  </li>
122
110
  <li>
123
- <strong>CPU:</strong> Apple M2 (8 cores, 8 threads)
111
+ <strong>CPU:</strong> Apple Silicon M2
124
112
  </li>
125
113
  <li>
126
114
  <strong>RAM:</strong> 16GB
@@ -128,24 +116,24 @@ export default function Home() {
128
116
  <li>
129
117
  <strong>SSD:</strong> 512GB
130
118
  </li>
119
+ <li>Raspberry Pi 4B</li>
120
+ <li>Raspberry Pi Zero 2W</li>
121
+ <li>M5Stack</li>
131
122
  </ul>
132
123
  </section>
133
- <section class="flex flex-col flex-1">
124
+ <section>
134
- <div class="flex text-3xl font-bold child-svg:mr-2 child-svg:text-red-800">
125
+ <div class="flex items-center child-svg:mr-2 child-svg:text-red-800">
135
- <SoftwareIcon size="36" />
126
+ <SoftwareIcon size="32" />
136
- Software Setup
137
- </div>
127
+ <h2>Software</h2>
138
- <div class="ml-1 mt-6 mb-2">
139
- My current list of daily applications
140
128
  </div>
141
- <ul class="grid gap-2 grid-cols-3 ml-4 child:list-disc child:px-0 child:py-1 heir-a:text-blue-800">
129
+ <ul class="grid gap-2 grid-cols-3 text-center mt-4 ml-2 heir-a:text-blue-900 child:bg-gray-200 child:p-1">
142
130
  <li>
143
131
  <a
144
132
  href="https://github.com/exelban/stats"
145
133
  target="_blank"
146
134
  rel="noopener noreferrer"
147
135
  >
148
- Menubar Stats
136
+ Stats
149
137
  </a>
150
138
  </li>
151
139
  <li>
@@ -163,7 +151,7 @@ export default function Home() {
163
151
  target="_blank"
164
152
  rel="noopener noreferrer"
165
153
  >
166
- VS Code IDE
154
+ VS Code
167
155
  </a>
168
156
  </li>
169
157
  <li>
@@ -213,50 +201,46 @@ export default function Home() {
213
201
  </li>
214
202
  </ul>
215
203
  </section>
216
- <section class="flex flex-col flex-1">
204
+ <section>
217
- <div class="flex text-3xl font-bold child-svg:mr-2 child-svg:text-amber-900">
205
+ <div class="flex items-center child-svg:mr-2 child-svg:text-amber-900">
218
206
  <TreeIcon size="36" />
219
- Interests
207
+ <h2>Interests</h2>
220
208
  </div>
221
- <div class="ml-1 mt-6 mb-2">
222
- These are some of the stuff I work on
223
- </div>
224
- <ul class="grid gap-2 grid-cols-3 ml-4 [&>li]:list-disc [&>li]:px-0 [&>li]:py-1 [&>li:marker]:text-black">
209
+ <ul class="grid gap-2 grid-cols-3 text-center mt-4 ml-2 child:bg-gray-200 child:p-1">
225
210
  <li>HTML</li>
226
- <li>Javascript</li>
227
211
  <li>CSS</li>
212
+ <li>Tailwind</li>
213
+ <li>Javascript</li>
228
- <li>SVG</li>
214
+ <li>React</li>
215
+ <li>Flutter</li>
229
216
  <li>Go</li>
230
217
  <li>Rust</li>
231
- <li>Node</li>
218
+ <li>Kotlin</li>
232
- <li>Java</li>
219
+ <li>Firestore</li>
220
+ <li>Kubernetes</li>
233
- <li>React</li>
221
+ <li>Istio</li>
234
- <li>Postgres</li>
235
- <li>k8s</li>
236
- <li>Serverless</li>
237
222
  </ul>
238
223
  </section>
239
- <section class="flex flex-col flex-1">
224
+ <section>
240
- <div class="flex text-3xl font-bold child-svg:mr-2 child-svg:text-cyan-950">
225
+ <div class="flex items-center child-svg:mr-2 child-svg:text-cyan-950">
241
226
  <ContactIcon size="36" />
242
- Contact
227
+ <h2>Contact</h2>
243
228
  </div>
244
- <div class="ml-1 mt-6 mb-2">
245
- You can contact me through any of these methods
246
- </div>
247
- <div class="child:flex child:mb-3 child:ml-2 heir-a:ml-4 heir-a:text-blue-800">
229
+ <div class="mt-4 ml-1 child:flex child:mb-3 heir-a:ml-1 heir-a:text-blue-800">
248
230
  <div>
249
231
  Email:
250
232
  <a href="mailto:pyros2097@gmail.com">pyros2097@gmail.com</a>
251
233
  </div>
252
234
  <div>
253
235
  Github:
254
- <a href="https://github.com/pyrossh">pyrossh</a>
236
+ <a href="https://github.com/pyrossh">
237
+ https://github.com/pyrossh
238
+ </a>
255
239
  </div>
256
240
  <div>
257
241
  LinkedIn:
258
242
  <a href="https://www.linkedin.com/in/peter-john-in">
259
- pyrossh
243
+ https://www.linkedin.com/in/pyrossh
260
244
  </a>
261
245
  </div>
262
246
  </div>
scripts/makePdf.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { launch } from "https://deno.land/x/astral/mod.ts";
2
+
3
+ const browser = await launch({ headless: true });
4
+ const page = await browser.newPage("http://localhost:8000/cv");
5
+ const screenshot = await page.pdf();
6
+ Deno.writeFileSync("cv.pdf", screenshot);
7
+ await browser.close();
static/styles.css CHANGED
@@ -1,3 +1,8 @@
1
1
  @tailwind base;
2
2
  @tailwind components;
3
- @tailwind utilities;
3
+ @tailwind utilities;
4
+
5
+ @page {
6
+ size: A4;
7
+ margin: 0;
8
+ }