Add light and dark github logo

This commit is contained in:
Jake Runyan 2024-12-27 12:54:10 -10:00
parent 8843034a15
commit 60c7ccb7cc
3 changed files with 8 additions and 6 deletions

View File

@ -2,8 +2,13 @@ import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import './Navbar.css'; import './Navbar.css';
import logo from './static/navbar-logo.png'; import logo from './static/navbar-logo.png';
import github_dark from './static/github-dark.png';
import github_light from './static/github-light.png';
const Navbar = () => { const Navbar = () => {
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
const githubIcon = isDarkMode ? github_light : github_dark; //Icons are on dark background.
return ( return (
<nav className="navbar"> <nav className="navbar">
<div className="navbar-logo"> <div className="navbar-logo">
@ -12,14 +17,11 @@ const Navbar = () => {
</Link> </Link>
</div> </div>
<div className="navbar-title"> <div className="navbar-title">
<h1>Photography Portfolio</h1> <h1>Jake Runyan Photography</h1>
</div> </div>
<div className="navbar-icons"> <div className="navbar-icons">
<a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer"> <a href="https://github.com/runyanjake/jakesphotos" target="_blank" rel="noopener noreferrer">
<img src="path/to/github-icon.png" alt="GitHub" className="icon" /> <img src={githubIcon} alt="GitHub" className="icon" />
</a>
<a href="https://www.instagram.com/yourusername" target="_blank" rel="noopener noreferrer">
<img src="path/to/instagram-icon.png" alt="Instagram" className="icon" />
</a> </a>
</div> </div>
</nav> </nav>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB