mirror of
https://github.com/xHyroM/website.git
synced 2024-11-14 03:28:07 +01:00
feat: add icons into skills page
This commit is contained in:
parent
018ad211c3
commit
e93ead1436
20 changed files with 4334 additions and 1638 deletions
|
@ -1 +1,2 @@
|
||||||
dist/*
|
dist/*
|
||||||
|
node_modules/*
|
|
@ -9,7 +9,10 @@ export default (): AstroIntegration => {
|
||||||
hooks: {
|
hooks: {
|
||||||
"astro:build:done": async (opts) => {
|
"astro:build:done": async (opts) => {
|
||||||
for (const route of opts.routes) {
|
for (const route of opts.routes) {
|
||||||
const content = await readFile(fileURLToPath(route.distURL!), "utf-8");
|
const content = await readFile(
|
||||||
|
fileURLToPath(route.distURL!),
|
||||||
|
"utf-8"
|
||||||
|
);
|
||||||
const minified = await minify(content, {
|
const minified = await minify(content, {
|
||||||
removeAttributeQuotes: true,
|
removeAttributeQuotes: true,
|
||||||
collapseWhitespace: true,
|
collapseWhitespace: true,
|
||||||
|
@ -21,9 +24,9 @@ export default (): AstroIntegration => {
|
||||||
});
|
});
|
||||||
|
|
||||||
await writeFile(fileURLToPath(route.distURL!), minified, "utf-8");
|
await writeFile(fileURLToPath(route.distURL!), minified, "utf-8");
|
||||||
console.log(`Minified ${route.distURL!.pathname}`)
|
console.log(`Minified ${route.distURL!.pathname}`);
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
|
@ -18,7 +18,9 @@
|
||||||
"@tailwindcss/typography": "^0.5.9",
|
"@tailwindcss/typography": "^0.5.9",
|
||||||
"astro": "^2.4.5",
|
"astro": "^2.4.5",
|
||||||
"astro-compress": "^1.1.42",
|
"astro-compress": "^1.1.42",
|
||||||
|
"astro-icon": "^0.8.0",
|
||||||
"astro-robots-txt": "^0.5.0",
|
"astro-robots-txt": "^0.5.0",
|
||||||
|
"astro-tooltips": "^0.6.2",
|
||||||
"fireworks-js": "^2.10.4",
|
"fireworks-js": "^2.10.4",
|
||||||
"html-minifier": "^4.0.0",
|
"html-minifier": "^4.0.0",
|
||||||
"tailwind": "^4.0.0",
|
"tailwind": "^4.0.0",
|
||||||
|
@ -29,5 +31,10 @@
|
||||||
"prettier": "2.8.8",
|
"prettier": "2.8.8",
|
||||||
"prettier-plugin-astro": "^0.8.1",
|
"prettier-plugin-astro": "^0.8.1",
|
||||||
"prettier-plugin-tailwindcss": "^0.2.8"
|
"prettier-plugin-tailwindcss": "^0.2.8"
|
||||||
|
},
|
||||||
|
"pnpm": {
|
||||||
|
"patchedDependencies": {
|
||||||
|
"astro-icon@0.8.0": "patches/astro-icon@0.8.0.patch"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
17
patches/astro-icon@0.8.0.patch
Normal file
17
patches/astro-icon@0.8.0.patch
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
diff --git a/lib/resolver.ts b/lib/resolver.ts
|
||||||
|
index 3845a6542c924397a7c2e2daf0a78cdb243ec603..0a02155ecf9b7f208432eb7e7c0a1108de502786 100644
|
||||||
|
--- a/lib/resolver.ts
|
||||||
|
+++ b/lib/resolver.ts
|
||||||
|
@@ -1,10 +1,10 @@
|
||||||
|
-const baseURL = "https://api.astroicon.dev/v1/";
|
||||||
|
+const baseURL = "https://api.iconify.design/";
|
||||||
|
const requests = new Map();
|
||||||
|
const fetchCache = new Map();
|
||||||
|
|
||||||
|
// Default resolver fetches icons from `api.astroicon.dev`
|
||||||
|
export default async function get(pack: string, name: string) {
|
||||||
|
- const url = new URL(`./${pack}/${name}`, baseURL).toString();
|
||||||
|
+ const url = new URL(`./${pack}/${name}.svg`, baseURL).toString();
|
||||||
|
// Handle in-flight requests
|
||||||
|
if (requests.has(url)) {
|
||||||
|
return await requests.get(url);
|
5467
pnpm-lock.yaml
5467
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
18
src/components/widgets/TechIcon.astro
Normal file
18
src/components/widgets/TechIcon.astro
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
---
|
||||||
|
import { Tooltips } from "astro-tooltips";
|
||||||
|
import { Icon } from "astro-icon";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
name: string;
|
||||||
|
icon: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const { name, icon } = Astro.props as Props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<li class="p-2">
|
||||||
|
<Tooltips interactive={false} delay={[15, 150]} placement="top" />
|
||||||
|
<span title={name}>
|
||||||
|
<Icon name={icon} class="h-10 w-10" />
|
||||||
|
</span>
|
||||||
|
</li>
|
|
@ -1,25 +1,86 @@
|
||||||
---
|
---
|
||||||
import Container from "../components/atoms/Container.astro";
|
import Container from "../components/atoms/Container.astro";
|
||||||
import Navbar from "../components/widgets/Navbar.astro";
|
import Navbar from "../components/widgets/Navbar.astro";
|
||||||
|
import TechIcon from "../components/widgets/TechIcon.astro";
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
|
|
||||||
const skills = [
|
const skills = [
|
||||||
[
|
{
|
||||||
"TypeScript, JavaScript",
|
name: "TypeScript",
|
||||||
"Bun, Node.js, little Deno",
|
icon: "logos:typescript-icon",
|
||||||
"React, Astro, Next.js",
|
},
|
||||||
],
|
{
|
||||||
["HTML", "TailwindCSS", "CSS"],
|
name: "JavaScript",
|
||||||
["Java", "Kotlin", "Rust (learning now)"],
|
icon: "logos:javascript",
|
||||||
["SQLite", "MySQL", "MongoDB", "Redis"],
|
},
|
||||||
[
|
{
|
||||||
"Git",
|
name: "Bun",
|
||||||
"GitHub Actions",
|
icon: "logos:bun",
|
||||||
"GitHub Pages",
|
},
|
||||||
"Cloudflare Workers",
|
{
|
||||||
"Cloudflare Pages",
|
name: "NodeJS",
|
||||||
"Netlify",
|
icon: "logos:nodejs-icon-alt",
|
||||||
],
|
},
|
||||||
|
{
|
||||||
|
name: "Deno",
|
||||||
|
icon: "logos:deno",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "React",
|
||||||
|
icon: "logos:react",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "NextJS",
|
||||||
|
icon: "file-icons:nextjs",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Astro",
|
||||||
|
icon: "vscode-icons:file-type-astro",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "TailwindCSS",
|
||||||
|
icon: "logos:tailwindcss-icon",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Java",
|
||||||
|
icon: "logos:java",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Kotlin",
|
||||||
|
icon: "logos:kotlin-icon",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Rust",
|
||||||
|
icon: "vscode-icons:file-type-rust",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Go",
|
||||||
|
icon: "vscode-icons:file-type-go-aqua",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "MySQL",
|
||||||
|
icon: "logos:mysql-icon",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "MongoDB",
|
||||||
|
icon: "devicon:mongodb",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Redis",
|
||||||
|
icon: "devicon:redis",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Git",
|
||||||
|
icon: "mdi:git",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "GitHub",
|
||||||
|
icon: "mdi:github",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "CloudFlare",
|
||||||
|
icon: "logos:cloudflare",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
---
|
---
|
||||||
|
|
||||||
|
@ -89,15 +150,12 @@ const skills = [
|
||||||
My skill set spans various programming languages, databases, and
|
My skill set spans various programming languages, databases, and
|
||||||
frameworks.
|
frameworks.
|
||||||
|
|
||||||
<ul class="list-inside list-disc">
|
<ul
|
||||||
|
class="mx-auto mb-4 flex w-fit flex-wrap items-center justify-center rounded-md border border-neutral-800"
|
||||||
|
>
|
||||||
{
|
{
|
||||||
skills.map((skill) => (
|
skills.map((skill) => (
|
||||||
<>
|
<TechIcon icon={skill.icon} name={skill.name} />
|
||||||
{skill.map((item) => (
|
|
||||||
<li>{item}</li>
|
|
||||||
))}
|
|
||||||
<hr class="my-4" />
|
|
||||||
</>
|
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
{
|
{
|
||||||
"extends": "astro/tsconfigs/strict"
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"exclude": ["node_modules", ".astro"]
|
||||||
}
|
}
|
Loading…
Reference in a new issue