feat(index): add logo for each social link

This commit is contained in:
Anthony Berg 2024-10-05 16:20:37 +02:00
parent 8e58d28dd7
commit 694f9f868b
7 changed files with 137 additions and 4 deletions

View File

@ -0,0 +1,16 @@
.imgLight {
display: inline;
}
.imgDark {
display: none;
}
@media (prefers-color-scheme: dark) {
.imgLight {
display: none;
}
.imgDark {
display: inline;
}
}

View File

@ -0,0 +1,18 @@
import styles from './theme-image.module.css'
import Image, { ImageProps } from 'next/image'
export type Props = Omit<ImageProps, 'src' | 'priority' | 'loading'> & {
srcLight: string
srcDark: string
}
export const ThemeImage = (props: Props) => {
const { srcLight, srcDark, ...rest } = props
return (
<>
<Image {...rest} src={srcLight} className={styles.imgLight} />
<Image {...rest} src={srcDark} className={styles.imgDark} />
</>
)
}

View File

@ -4,6 +4,8 @@ title: Anthony Berg
date: 2024-10-05
---
import {ThemeImage} from './components/theme-image'
# Anthony Berg
Hey, welcome to my website! :D
@ -18,10 +20,23 @@ I have also completed BSc Computer Science at Newcastle University.
I have a few open source projects that I have worked on that you can find in my [portfolio](/projects).
---
----
<div>
GitHub [@smyalygames](https://github.com/smyalygames)
<div style={{display: 'flex', justifyContent: 'space-between'}}>
[<ThemeImage
alt="GitHub Logo"
srcDark="/images/logo/github-mark-white.svg"
srcLight="/images/logo/github-mark.svg"
width={50}
height={50}
style={{paddingRight: '8pt'}} />@smyalygames](https://github.com/smyalygames)
<br />
LinkedIn [Profile](https://www.linkedin.com/in/anthonyberg14/)
[<ThemeImage
alt="LinkedIn Logo"
srcDark="/images/logo/linkedin-white.svg"
srcLight="/images/logo/linkedin.svg"
width={50}
height={50}
style={{paddingRight: '8pt'}}
/>Profile](https://www.linkedin.com/in/anthonyberg14/)
</div>

View File

@ -0,0 +1 @@
<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 960 B

View File

@ -0,0 +1 @@
<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>

After

Width:  |  Height:  |  Size: 963 B

View File

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
id="Group_1282"
data-name="Group 1282"
width="64.791"
height="64.788788"
viewBox="0 0 64.791 64.788791"
version="1.1"
sodipodi:docname="linkedin-white.svg"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="7.7791939"
inkscape:cx="42.2923"
inkscape:cy="48.398331"
inkscape:window-width="1803"
inkscape:window-height="1133"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="Group_1282" />
<path
id="Path_2520"
data-name="Path 2520"
d="m 55.205,55.204412 h -9.6 v -15.034 c 0,-3.585 -0.064,-8.2 -4.993,-8.2 -5,0 -5.765,3.906 -5.765,7.939 v 15.294 h -9.6 v -30.916 h 9.216 v 4.225 h 0.129 a 10.1,10.1 0 0 1 9.093,-4.994 c 9.73,0 11.524,6.4 11.524,14.726 z m -40.79,-35.143 a 5.571,5.571 0 1 1 5.57,-5.572 5.571,5.571 0 0 1 -5.57,5.572 m 4.8,35.143 h -9.61 v -30.917 h 9.61 z M 59.991,0.00441201 H 4.781 A 4.728,4.728 0 0 0 0,4.674412 v 55.439 a 4.731,4.731 0 0 0 4.781,4.675 h 55.21 a 4.741,4.741 0 0 0 4.8,-4.675 v -55.443 a 4.738,4.738 0 0 0 -4.8,-4.66999999257"
fill="#0a66c2"
style="fill:#ffffff" />
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
id="Group_1282"
data-name="Group 1282"
width="64.791"
height="64.788788"
viewBox="0 0 64.791 64.788791"
version="1.1"
sodipodi:docname="linkedin.svg"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="7.7791939"
inkscape:cx="42.2923"
inkscape:cy="48.398331"
inkscape:window-width="1803"
inkscape:window-height="1133"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="Group_1282" />
<path
id="Path_2520"
data-name="Path 2520"
d="m 55.205,55.204412 h -9.6 v -15.034 c 0,-3.585 -0.064,-8.2 -4.993,-8.2 -5,0 -5.765,3.906 -5.765,7.939 v 15.294 h -9.6 v -30.916 h 9.216 v 4.225 h 0.129 a 10.1,10.1 0 0 1 9.093,-4.994 c 9.73,0 11.524,6.4 11.524,14.726 z m -40.79,-35.143 a 5.571,5.571 0 1 1 5.57,-5.572 5.571,5.571 0 0 1 -5.57,5.572 m 4.8,35.143 h -9.61 v -30.917 h 9.61 z M 59.991,0.00441201 H 4.781 A 4.728,4.728 0 0 0 0,4.674412 v 55.439 a 4.731,4.731 0 0 0 4.781,4.675 h 55.21 a 4.741,4.741 0 0 0 4.8,-4.675 v -55.443 a 4.738,4.738 0 0 0 -4.8,-4.66999999257"
fill="#0a66c2"
style="fill:#000000" />
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB