mirror of
https://github.com/smyalygames/anthonyberg-website.git
synced 2025-07-07 14:41:00 +02:00
feat(index): add logo for each social link
This commit is contained in:
parent
8e58d28dd7
commit
694f9f868b
16
pages/components/theme-image.module.css
Normal file
16
pages/components/theme-image.module.css
Normal file
@ -0,0 +1,16 @@
|
||||
.imgLight {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.imgDark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.imgLight {
|
||||
display: none;
|
||||
}
|
||||
.imgDark {
|
||||
display: inline;
|
||||
}
|
||||
}
|
18
pages/components/theme-image.tsx
Normal file
18
pages/components/theme-image.tsx
Normal 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} />
|
||||
</>
|
||||
)
|
||||
}
|
@ -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>
|
||||
|
1
public/images/logo/github-mark-white.svg
Normal file
1
public/images/logo/github-mark-white.svg
Normal 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 |
1
public/images/logo/github-mark.svg
Normal file
1
public/images/logo/github-mark.svg
Normal 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 |
41
public/images/logo/linkedin-white.svg
Normal file
41
public/images/logo/linkedin-white.svg
Normal 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 |
41
public/images/logo/linkedin.svg
Normal file
41
public/images/logo/linkedin.svg
Normal 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 |
Loading…
x
Reference in New Issue
Block a user