<html lang="en">

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Portfolio</title>

<link rel="stylesheet" href="style.css">

<script src="script.js"></script>

<body id="body"><body>

<nav>

<a href="https://trumpyb.github.io/index.html">Home</a>

<a href="https://trumpyb.github.io/about.html">About</a>

<a href="https://trumpyb.github.io/projects.html">Portfolio</a>

</nav>

<div class="color">

<label for="mode">Color mode</label>

<input type="button" name="mode" id="l" onclick="light()" value="Light">

<input type="button" name="mode" id="d" onclick="dark()" value="Dark">

</div>

<br><br><br>

<table class="color">

<thead>

<tr>

<th>Images</th>

<th>Videos</th>

<th>Audio</th>

</tr>

</thead>

<tbody>

<tr>

<td><img src="https://picsum.photos/id/237/100" alt="Doggo"> </td>

<td><iframe src="https://www.youtube.com/embed/GeBI9Bvo9oM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></iframe></td>

<td><iframe src="https://open.spotify.com/embed/track/6zC0mpGYwbNTpk9SKwh08f?utm_source=generator&theme=0" frameBorder="0" ></iframe></td>

</tr>

<tr>

<td><img src="https://picsum.photos/id/2/100" alt="Desk with Computer and coffee"></td>

<td><iframe src="https://www.youtube.com/embed/I6Unxb-PFhs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></td>

<td><iframe src="https://open.spotify.com/embed/track/5URfZHMlUWTWxPvvSBWcPk?utm_source=generator&theme=0" frameBorder="0" ></iframe></td>

</tr>

<tr>

<td><img src="https://picsum.photos/id/69/100" alt="Railroad"></td>

<td><iframe src="https://www.youtube.com/embed/M19guawGrlI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></iframe></td>

<td><iframe src="https://open.spotify.com/embed/track/3D9iV6cYkYJRAPFO6DRKIE?utm_source=generator" frameBorder="0" ></iframe></td>

</tr>

<tr>

<td><img src="https://picsum.photos/id/420/100" alt="City Skline"></td>

<td><iframe src="https://www.youtube.com/embed/OpaKpzMFOpg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></td>

<td><iframe src="https://open.spotify.com/embed/track/7uzvtONx6lMeYZbhp49Dit?utm_source=generator" frameBorder="0"></iframe></td>

</tr>

<tr>

<td><img src="https://picsum.photos/id/666/100" alt="Forrest"></td>

<td><iframe src="https://www.youtube.com/embed/k_QWF0bRqYQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></td>

<td><iframe src="https://open.spotify.com/embed/track/7xdLNxZCtY68x5MAOBEmBq?utm_source=generator" frameBorder="0" ></iframe></td>

</tr>

</tbody>

</table>

<ul>

<li><p>Images: <a href="https://picsum.photos/">https://picsum.photos/</a></p></li>

<li><p>Video: <a href="https://www.youtube.com/">https://www.youtube.com/</a></p></li>

<li><p>Audio: <a href="https://open.spotify.com/">https://open.spotify.com/</a></p></li>

</ul>

<h3>Link To Figma Projects</h3>

<a href="https://www.figma.com/file/RZMX5eZy69wzfGRvCslEss/Web-Design?type=design&node-id=0%3A1&t=cqueMQSMbwSZkszj-1">Figma</a>

<h3>Websites</h3>

<ul>

<li><a href="https://www.wikihow.com/Main-Page">Wiki How</a></li>

<li><a href="https://www.infinitecampus.com/">Infinite Campus</a></li>

<li><a href="https://edu.google.com/workspace-for-education/classroom/">Google Classroom</a></li>

</ul>

<h3>Interactivity</h3>

<p>My website only contains 2 interactive features. 1 of them, the contact form, does not use much javascript to function and has the main purpose of looking pretty. The other interactive component uses javascript to change the CSS of the website and interchange the brighness of the text and background.</p>

<h3>Color</h3>

<p>My website is monochromatic, with the main color mostly in the green area. The contrast is fairly high with 14.2:1 for light mode and 14.81:1 for dark mode.</p>

<h3>Thoughts</h3>

<p>The thing about this websit that I am most proud if is the color mode. It seems to work fairly well.</p>

<br>

<br>

<p>Some things that i have learned from this project are: </p>

<ol>

<li>I am very disorigonized when working on a single project for an extended amount of time</li>

<li>I am bad at designing websites</li>

</ol>

<script>

dark()

</script>