Skip to content

Commit

Permalink
Fix font loading
Browse files Browse the repository at this point in the history
  • Loading branch information
shiro committed Apr 2, 2024
1 parent 26b6506 commit 26a368a
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 79 deletions.
104 changes: 52 additions & 52 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,54 +1,54 @@
{
"name": "example-basic",
"license": "MIT",
"type": "module",
"scripts": {
"dev": "vinxi dev",
"build": "vinxi build",
"start": "vinxi start",
"version": "vinxi version"
},
"dependencies": {
"@babel/plugin-transform-export-namespace-from": "7.24.1",
"@babel/preset-typescript": "7.24.1",
"@kobalte/core": "0.12.6",
"@linaria/core": "6.1.0",
"@mdx-js/mdx": "3.0.1",
"@solidjs/meta": "^0.29.2",
"@solidjs/router": "^0.13.1",
"@solidjs/start": "^1.0.0-rc.0",
"@vinxi/plugin-mdx": "3.7.1",
"@wyw-in-js/vite": "0.5.0",
"babel-plugin-transform-remove-imports": "1.7.1",
"classnames": "2.5.1",
"cssnano": "6.1.2",
"postcss-preset-env": "9.5.3",
"postcss-pxtorem": "6.1.0",
"rehype-raw": "7.0.0",
"remark-shiki-twoslash": "^3.1.3",
"sass": "1.72.0",
"solid-js": "^1.8.16",
"solid-labels": "0.16.0",
"solid-mdx": "0.0.7",
"tailwindcss": "3.4.3",
"typescript": "5.4.3",
"vinxi": "^0.3.11",
"vite-plugin-compile-time": "0.2.1"
},
"engines": {
"node": ">=18"
},
"devDependencies": {
"@types/imagemagick": "0.0.35",
"gray-matter": "4.0.3",
"imagemagick": "0.1.3",
"prettier": "3.2.5",
"prettier-plugin-organize-imports": "3.2.4",
"prettier-plugin-tailwindcss": "0.5.13",
"remark-frontmatter": "5.0.0",
"remark-gfm": "4.0.0",
"solid-devtools": "0.30.0",
"ts-node": "10.9.2",
"vite-plugin-solid-svg": "0.8.1"
}
"name": "example-basic",
"license": "MIT",
"type": "module",
"scripts": {
"dev": "vinxi dev",
"build": "vinxi build",
"start": "vinxi start",
"version": "vinxi version"
},
"dependencies": {
"@babel/plugin-transform-export-namespace-from": "7.24.1",
"@babel/preset-typescript": "7.24.1",
"@kobalte/core": "0.12.6",
"@linaria/core": "6.1.0",
"@mdx-js/mdx": "3.0.1",
"@solidjs/meta": "^0.29.2",
"@solidjs/router": "^0.13.1",
"@solidjs/start": "^1.0.0-rc.0",
"@vinxi/plugin-mdx": "3.7.1",
"@wyw-in-js/vite": "0.5.0",
"babel-plugin-transform-remove-imports": "1.7.1",
"classnames": "2.5.1",
"cssnano": "6.1.2",
"postcss-preset-env": "9.5.3",
"postcss-pxtorem": "6.1.0",
"rehype-raw": "7.0.0",
"remark-shiki-twoslash": "^3.1.3",
"sass": "1.72.0",
"solid-js": "^1.8.16",
"solid-labels": "0.16.0",
"solid-mdx": "0.0.7",
"tailwindcss": "3.4.3",
"typescript": "5.4.3",
"vinxi": "^0.3.11",
"vite-plugin-compile-time": "0.2.1"
},
"engines": {
"node": ">=18"
},
"devDependencies": {
"@types/imagemagick": "0.0.35",
"gray-matter": "4.0.3",
"imagemagick": "0.1.3",
"prettier": "3.2.5",
"prettier-plugin-organize-imports": "3.2.4",
"prettier-plugin-tailwindcss": "0.5.13",
"remark-frontmatter": "5.0.0",
"remark-gfm": "4.0.0",
"solid-devtools": "0.30.0",
"ts-node": "10.9.2",
"vite-plugin-solid-svg": "0.8.1"
}
}
Binary file added public/profile-picture.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 21 additions & 20 deletions src/about/AboutSite.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import SkillsSection from "~/about/SkillsSection";
import SnakeGame from "~/about/SnakeGame";
import StatsBar from "~/about/StatsBar";
import StatusButton from "~/about/StatusButton";
import Icon from "~/components/Icon";
import IconText from "~/components/IconText";
import { breakpointUntil } from "~/style/commonStyle";

Expand All @@ -17,28 +16,30 @@ interface Props {

const AboutSite: Component<Props> = (props) => {
return (
<div class={cn(_AboutSite, "grid gap-4")}>
<div class={cn(_AboutSite, "mb-8 grid gap-4")}>
<div class="flex flex-col gap-2 " style={{ "grid-area": "picture" }}>
<div class="flex h-[192px] w-[192px] items-center justify-center rounded border-4 border-link-primary-900">
<Icon icon="github" class="h-[88px] w-[139px]" />
<div class="flex h-[192px] w-[192px] items-center justify-center rounded border-4 border-colors-primary-500">
{/* <Icon icon="github" class="h-[88px] w-[139px]" /> */}
<img
src="/profile-picture.jpg"
alt="Profile picture"
class="h-full w-full"
/>
</div>
</div>

<div class="flex flex-col gap-2 " style={{ "grid-area": "stats" }}>
<StatsBar
class="mt-1"
icon="heart"
progress={28}
type="secondary"
label="HP">
<StatsBar icon="heart" progress={28} type="secondary" label="HP">
12/85
</StatsBar>
<StatsBar class="" icon="star" progress={55} label="EXP">
58/70
</StatsBar>
<StatusButton icon="email">Send message</StatusButton>
</div>
<div class="flex flex-col gap-2" style={{ "grid-area": "name" }}>
<div
class="flex flex-col gap-2 text-center"
style={{ "grid-area": "name" }}>
<div class="bg-colors-primary-500 pl-8 pr-8 text-h1 text-colors-text-900a">
Matic Utsumi Gačar
</div>
Expand All @@ -49,7 +50,7 @@ const AboutSite: Component<Props> = (props) => {
style={{ "grid-area": "title" }}>
<div class="text-nowrap text-h3">Level 21</div>
<div class="text-nowrap text-h3 xs:text-h3">
Legendary Software Engineer
Enthusiastic Software Engineer
</div>
</div>
<LabeledBox label="general" style={{ "grid-area": "general" }}>
Expand Down Expand Up @@ -81,7 +82,7 @@ const AboutSite: Component<Props> = (props) => {
My passion is building full-stack applications that have a lasting
impact on the world and{" "}
<span class="rounded bg-colors-primary-400 pl-2 pr-2">
leveling up
gaining experience
</span>{" "}
along the way.
</p>
Expand All @@ -91,7 +92,7 @@ const AboutSite: Component<Props> = (props) => {
class="justify-self-stretch"
/>
<div
class="mb-8 flex w-full flex-col items-stretch gap-4"
class="flex w-full flex-col items-stretch gap-4"
style={{ "grid-area": "rest" }}>
<ProjectsSection />
<SkillsSection />
Expand All @@ -104,11 +105,11 @@ const _AboutSite = css`
justify-items: start;
grid-template:
"picture name name emtpy" auto
"picture title title emtpy" auto
"picture general about about" auto
"stats general about about" auto
"snake snake snake snake" auto
"rest rest rest rest" auto
"picture title title emtpy " auto
"picture general about about " auto
"stats general about about " auto
"rest rest rest rest " auto
"snake snake snake snake " auto
/ auto auto auto auto;
${breakpointUntil("m")} {
grid-template:
Expand All @@ -128,8 +129,8 @@ const _AboutSite = css`
"picture general" auto
"stats general" auto
"about about " auto
"snake snake " auto
"rest rest " auto
"snake snake " auto
/ auto 1fr;
}
`;
Expand Down
8 changes: 5 additions & 3 deletions src/about/StatusButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { JSX, Component } from "solid-js";
import { css } from "@linaria/core";
import cn from "classnames";
import IconText from "~/components/IconText";
import { Link } from "@kobalte/core";

interface Props {
children: string;
Expand All @@ -12,14 +13,15 @@ const StatusButton: Component<Props> = (props) => {
const { children, icon } = $destructure(props);

return (
<div
<Link.Root
href="mailto:[email protected]"
class={cn(
_StatusButton,
"relative flex w-[192px] gap-2 rounded-md border-2 border-colors-primary-300 pl-2 pr-2 hover:cursor-pointer hover:bg-colors-primary-300"
"relative flex w-[192px] gap-2 rounded-md border-2 border-colors-primary-300 pl-2 pr-2 no-underline hover:cursor-pointer hover:bg-colors-primary-300"
)}>
<IconText icon={icon} />
{children}
</div>
</Link.Root>
);
};

Expand Down
8 changes: 4 additions & 4 deletions src/style/fontFaces.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const japaneseCodeRange = (show: boolean) =>
show ? `unicode-range: U+3000-30FF , U+FF00-FFEF , U+4E00-9FAF ;` : "";
const nameSuffix = (isFull: boolean) => (isFull ? "" : " JP Only");

const interPath = `fonts/inter-3.19-roman/Inter`;
const interPath = `/fonts/inter-3.19-roman/Inter`;

// language=SCSS
const notoFragments = (isFull: boolean, fontLoader?: FontLoader) => `
Expand All @@ -26,7 +26,7 @@ const notoFragments = (isFull: boolean, fontLoader?: FontLoader) => `
fontLoader != null
? `src: ${fontLoader(
`${interPath}/noto-sans-jp-v40-japanese-regular.woff2`,
"woff2",
"woff2"
)};`
: ``
}
Expand All @@ -50,7 +50,7 @@ const notoFragments = (isFull: boolean, fontLoader?: FontLoader) => `
fontLoader != null
? `src: ${fontLoader(
`${interPath}/noto-sans-jp-v40-japanese-700.woff2`,
"woff2",
"woff2"
)};`
: ``
}
Expand Down Expand Up @@ -127,7 +127,7 @@ export const fontFaceFragment = (fontLoader?: FontLoader) => `
fontLoader != null
? `src: ${fontLoader(
`${interPath}-SemiBoldItalic-Roman.woff2`,
"woff2",
"woff2"
)};`
: ``
}
Expand Down

0 comments on commit 26a368a

Please sign in to comment.