CustomIcon

This commit is contained in:
Nexus 2024-09-03 18:16:54 +01:00
parent 5aa5ff2906
commit f37b744df3
2 changed files with 53 additions and 45 deletions

View file

@ -43,6 +43,10 @@ const _88x31s = {
"tom1212": tom1212
};
function CustomIcon({src, name}) {
return <Image src={src} alt={name} title={name} width={32} height={32} className="icon"/>
}
export default function Index() {
const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
@ -58,69 +62,69 @@ export default function Index() {
<div className={styles.array}>
<div>
<h3>Languages</h3>
<div>
<Image src={pythonColor} alt="Python" title="Python" width={32} height={32} className="icon"/>
<Image src={javascriptColor} alt="JavaScript" title="JavaScript" width={32} height={32} className="icon"/>
<Image src={gnubashColor} alt="Bash" title="Bash" width={32} height={32} className="icon"/>
<div className={styles.imageSpaced}>
<CustomIcon src={pythonColor} alt="Python" title="Python" width={32} height={32} className="icon"/>
<CustomIcon src={javascriptColor} alt="JavaScript" title="JavaScript" width={32} height={32} className="icon"/>
<CustomIcon src={gnubashColor} alt="Bash" title="Bash" width={32} height={32} className="icon"/>
</div>
</div>
<div>
<h3>Operating Systems</h3>
<div>
<Image src={fedoraColor} alt="Fedora" title="Fedora" width={32} height={32} className="icon"/>
<Image src={ubuntuColor} alt="Ubuntu" title="Ubuntu (Server)" width={32} height={32} className="icon"/>
<Image src={windowsColor} alt="Windows" title="Windows" width={32} height={32} className="icon"/>
<Image src={appleColor} alt="iOS" title="iOS" width={32} height={32} className="icon"/>
<div className={styles.imageSpaced}>
<CustomIcon src={fedoraColor} alt="Fedora" title="Fedora" width={32} height={32} className="icon"/>
<CustomIcon src={ubuntuColor} alt="Ubuntu" title="Ubuntu (Server)" width={32} height={32} className="icon"/>
<CustomIcon src={windowsColor} alt="Windows" title="Windows" width={32} height={32} className="icon"/>
<CustomIcon src={appleColor} alt="iOS" title="iOS" width={32} height={32} className="icon"/>
</div>
</div>
<div>
<h3>
Communication Platforms
</h3>
<div>
<div className={styles.imageSpaced}>
<a href="https://matrix.to/#/@nex:nexy7574.co.uk" rel="noopener noreferrer" target="_blank" className="icon">
<Image src={matrixColor} alt="Matrix" title="Matrix" width={32} height={32} className="icon"/>
<CustomIcon src={matrixColor} alt="Matrix" title="Matrix" width={32} height={32} className="icon"/>
</a>
<a href="https://signal.me/#eu/j24vT8zDzquI0us48k7eiNJcpJjEw4TYUz1gtvo_0HtEfq4C2MZG1YFs5POF98Sb" rel="noopener" target="_blank" className="icon">
<Image src={signalColor} alt="Signal" title="Signal" width={32} height={32} className="icon"/>
<CustomIcon src={signalColor} alt="Signal" title="Signal" width={32} height={32} className="icon"/>
</a>
<a style={{cursor: "default"}} href="#" className="icon">
<Image src={imessageColor} alt="iMessage" title="iMessage" width={32} height={32} className="icon"/>
<CustomIcon src={imessageColor} alt="iMessage" title="iMessage" width={32} height={32} className="icon"/>
</a>
<a href="https://discord.gg/TveBeG7" rel="noopener" target="_blank" className="icon">
<Image src={discordColor} alt="Discord" title="Discord" width={32} height={32} className="icon"/>
<CustomIcon src={discordColor} alt="Discord" title="Discord" width={32} height={32} className="icon"/>
</a>
<a rel="noopener" target="_blank" className="icon" href="img/email.png">
<Image src={gmailColor} alt="Email" title="Email (very slow)" width={32} height={32} className="icon"/>
<CustomIcon src={gmailColor} alt="Email" title="Email (very slow)" width={32} height={32} className="icon"/>
</a>
</div>
</div>
<div>
<h3>Learning</h3>
<div>
<Image src={csharpColor} alt="C#" title="C#" width={32} height={32} className="icon"/>
<Image src={goColor} alt="Go" title="Go" width={32} height={32} className="icon"/>
<div className={styles.imageSpaced}>
<CustomIcon src={csharpColor} alt="C#" title="C#" width={32} height={32} className="icon"/>
<CustomIcon src={goColor} alt="Go" title="Go" width={32} height={32} className="icon"/>
</div>
</div>
<div>
<h3>Tools</h3>
<div>
<Image src={dockerColor} alt="Docker" title="Docker" width={32} height={32} className="icon"/>
<Image src={gitColor} alt="Git" title="Git" width={32} height={32} className="icon"/>
<Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
<Image src={linode} alt="Linode" title="Linode (cloud hosting)" width={32} height={32} className="icon"/>
<Image src={postgresqlColor} alt="Postgres" title="Postgres" width={32} height={32} className="icon"/>
<Image src={ollama} alt="Ollama" title="Ollama (web hosting)" width={32} height={32} className="icon"/>
<Image src={openaiColor} alt="OpenAI/ChatGPT" title="OpenAI/ChatGPT" width={32} height={32} className="icon"/>
<div className={styles.imageSpaced}>
<CustomIcon src={dockerColor} alt="Docker" title="Docker" width={32} height={32} className="icon"/>
<CustomIcon src={gitColor} alt="Git" title="Git" width={32} height={32} className="icon"/>
<CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
<CustomIcon src={linode} alt="Linode" title="Linode (cloud hosting)" width={32} height={32} className="icon"/>
<CustomIcon src={postgresqlColor} alt="Postgres" title="Postgres" width={32} height={32} className="icon"/>
<CustomIcon src={ollama} alt="Ollama" title="Ollama (web hosting)" width={32} height={32} className="icon"/>
<CustomIcon src={openaiColor} alt="OpenAI/ChatGPT" title="OpenAI/ChatGPT" width={32} height={32} className="icon"/>
</div>
</div>
<div>
<h3>Frameworks & Libraries</h3>
<div>
<Image src={nextdotjs} alt="Next.js" title="Next.js" width={32} height={32} className="icon"/>
<Image src={fastapiColor} alt="FastAPI" title="FastAPI" width={32} height={32} className="icon"/>
<Image src={discordpy} alt="Discord.py" title="Discord.py" width={32} height={32} className="icon"/>
<Image src={pycord} alt="py-cord" title="py-cord" width={32} height={32} className="icon"/>
<div className={styles.imageSpaced}>
<CustomIcon src={nextdotjs} alt="Next.js" title="Next.js" width={32} height={32} className="icon"/>
<CustomIcon src={fastapiColor} alt="FastAPI" title="FastAPI" width={32} height={32} className="icon"/>
<CustomIcon src={discordpy} alt="Discord.py" title="Discord.py" width={32} height={32} className="icon"/>
<CustomIcon src={pycord} alt="py-cord" title="py-cord" width={32} height={32} className="icon"/>
</div>
</div>
</div>
@ -141,12 +145,12 @@ export default function Index() {
<td>A bot framework for the matrix ecosystem</td>
<td>
<a href="https://github.com/nexy7574/nio-bot" rel="noopener" target="_blank" className="icon">
<Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
<CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
</a>
</td>
<td>
<a href="https://matrix.to/#/#bots:nexy7574.co.uk" rel="opopener" target="_blank" className="icon">
<Image src={matrixColor} alt="Matrix" title="Matrix" width={32} height={32} className="icon"/>
<CustomIcon src={matrixColor} alt="Matrix" title="Matrix" width={32} height={32} className="icon"/>
</a>
</td>
</tr>
@ -155,7 +159,7 @@ export default function Index() {
<td>A command line interface for interacting with the Dendrite homeserver.</td>
<td>
<a href="https://github.com/nexy7574/dendritecli" rel="noopener" target="_blank" className="icon">
<Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
<CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
</a>
</td>
<td></td>
@ -165,7 +169,7 @@ export default function Index() {
<td>A CLI mod manager for minecraft servers.</td>
<td>
<a href="https://github.com/nexy7574/modman" rel="noopener" target="_blank" className="icon">
<Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
<CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
</a>
</td>
<td></td>
@ -175,10 +179,10 @@ export default function Index() {
<td>Specialised chat bot in discord for my college server.</td>
<td>
<a href="https://git.i-am.nexus/nex/college-bot-v2" rel="noopener" target="_blank" className="icon">
<Image src={forgejoColor} alt="Forgejo" title="Forgejo" width={32} height={32} className="icon"/>
<CustomIcon src={forgejoColor} alt="Forgejo" title="Forgejo" width={32} height={32} className="icon"/>
</a>
[<a href="https://github.com/nexy7574/college-bot-v2" rel="noopener" target="_blank" className="icon">
<Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
<CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
</a>]
</td>
<td></td>
@ -188,12 +192,12 @@ export default function Index() {
<td>A drop-in proxy URL preview server for Matrix</td>
<td>
<a href="https://git.i-am.nexus/nex/drop-in-url-previews" rel="noopener" target="_blank" className="icon">
<Image src={forgejoColor} alt="Forgejo" title="Forgejo" width={32} height={32} className="icon"/>
<CustomIcon src={forgejoColor} alt="Forgejo" title="Forgejo" width={32} height={32} className="icon"/>
</a>
</td>
<td>
<a href="https://matrix.nexy7574.co.uk/_matrix/media/r0/preview_url?url=nexy7574.co.uk" rel="noopener" target="_blank" className="icon">
<Image src={matrixColor} alt="Matrix" title="Matrix" width={32} height={32} className="icon"/>
<CustomIcon src={matrixColor} alt="Matrix" title="Matrix" width={32} height={32} className="icon"/>
</a>
</td>
</tr>
@ -213,7 +217,7 @@ export default function Index() {
</td>
<td>
<a href="https://discord.com/api/oauth2/authorize?client_id=722000000000000000&permissions=8&scope=bot" rel="noopener" target="_blank" className="icon">
<Image src={discordColor} alt="Discord" title="Discord" width={32} height={32} className="icon"/>
<CustomIcon src={discordColor} alt="Discord" title="Discord" width={32} height={32} className="icon"/>
</a>
</td>
</tr>
@ -223,7 +227,7 @@ export default function Index() {
<td><i>proprietary</i></td>
<td>
<a href="https://top.gg/bot/619328560141697036" rel="noopener noreferrer" target="_blank" className="icon">
<Image src={topdotgg} alt="top.gg" title="top.gg" width={32} height={32} className="icon"/>
<CustomIcon src={topdotgg} alt="top.gg" title="top.gg" width={32} height={32} className="icon"/>
</a>
</td>
</tr>
@ -236,7 +240,7 @@ export default function Index() {
</td>
<td>
<a href="https://github.com/nexy7574/top.py" rel="noopener" target="_blank" className="icon">
<Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
<CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
</a>
</td>
<td></td>
@ -262,7 +266,7 @@ export default function Index() {
<td>&quot;Pycord, a maintained fork of discord.py, is a python wrapper for the Discord API&quot;</td>
<td>
<a href="https://github.com/Pycord-Development/pycord" rel="noopener" target="_blank" className="icon">
<Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
<CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
</a>
</td>
</tr>
@ -271,7 +275,7 @@ export default function Index() {
<td>&quot;A Python Matrix client library, designed according to sans I/O principles&quot;</td>
<td>
<a href="https://github.com/matrix-nio/matrix-nio" rel="noopener" target="_blank" className="icon">
<Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
<CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
</a>
</td>
</tr>
@ -280,7 +284,7 @@ export default function Index() {
<td>&quot;An API wrapper for Discord written in Python&quot;</td>
<td>
<a href="https://github.com/Rapptz/discord.py" rel="noopener" target="_blank" className="icon">
<Image src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
<CustomIcon src={github} alt="GitHub" title="GitHub" width={32} height={32} className="icon"/>
</a>
</td>
</tr>

View file

@ -12,3 +12,7 @@
color: var(--text-normal);
font-weight: bold;
}
.imageSpaced * {
padding: 4px;
}