Start work towards using tabs

This commit is contained in:
Michael Bradley 2024-07-07 20:39:38 -04:00
parent 63d114ca5e
commit d987b7c514
3 changed files with 191 additions and 173 deletions

View file

@ -2,3 +2,8 @@
A basic static personal website hosted on GitHub Pages. A basic static personal website hosted on GitHub Pages.
Contains some basic information about me along with some of my interests. Contains some basic information about me along with some of my interests.
## TODO
* TODOs in files
* Automate minifying and push to site?

View file

@ -3,7 +3,8 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<link href="https://fonts.cdnfonts.com/css/jetbrains-mono" rel="stylesheet" /> <!--TODO: Optimize loading?-->
<!--<link href="https://fonts.cdnfonts.com/css/jetbrains-mono" rel="stylesheet" />-->
<title>Michael Bradley</title> <title>Michael Bradley</title>
<meta lang="EN" /> <meta lang="EN" />
@ -16,7 +17,7 @@
<meta name="description" content="Michael Bradley's personal website" /> <meta name="description" content="Michael Bradley's personal website" />
<meta name="subject" content="Self-advertisement" /> <meta name="subject" content="Self-advertisement" />
<meta name="robots" content="index,follow" /> <meta name="robots" content="index,follow" />
<meta name="summary" content="Michael Bradley is a skilled developer looking for a co-op job this summer" /> <meta name="summary" content="Michael Bradley is a CS student looking for a full-time job starting in February" />
<meta name="url" content="https://MichaelMBradley.github.io" /> <meta name="url" content="https://MichaelMBradley.github.io" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
@ -27,11 +28,11 @@
<meta property="og:url" content="https://MichaelMBradley.github.io" /> <meta property="og:url" content="https://MichaelMBradley.github.io" />
<meta property="og:site" content="Michael Bradley" /> <meta property="og:site" content="Michael Bradley" />
<meta property="og:title" content="Michael's Personal website" /> <meta property="og:title" content="Michael's personal website" />
<meta property="og:description" content="A summary of my education, skills, and some projects I've worked on." /> <meta property="og:description" content="A summary of my education, skills, and some projects I've worked on." />
<meta property="og:image" content="https://MichaelMBradley.github.io/assets/thumb.png" /> <meta property="og:image" content="https://MichaelMBradley.github.io/assets/thumb.png" />
<meta property="og:image:secure_url" content="https://MichaelMBradley.github.io/assets/thumb.png" /> <meta property="og:image:secure_url" content="https://MichaelMBradley.github.io/assets/thumb.png" />
<meta property="og:image:alt" content="Michael Bradley is a skilled developer looking for a co-op job this summer." /> <meta property="og:image:alt" content="Michael Bradley is a CS student looking for a full-time job starting in February" />
<meta property="og:image:type" content="image/png" /> <meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="4203" /> <meta property="og:image:width" content="4203" />
<meta property="og:image:height" content="2253" /> <meta property="og:image:height" content="2253" />
@ -103,6 +104,7 @@
</svg> </svg>
</label> </label>
<div id="fetch"> <div id="fetch">
<!--TODO: Automate screenshot of this div as preview photo?-->
<div id="michael-photo-container"> <div id="michael-photo-container">
<img src="assets/MichaelBradley.jpg" alt="A picture of me in a suit smiling" id="michael-photo"> <img src="assets/MichaelBradley.jpg" alt="A picture of me in a suit smiling" id="michael-photo">
</div> </div>
@ -147,8 +149,10 @@
</svg> </svg>
</a> </a>
</div> </div>
<div class="tab-container">
<a id="projects"></a>
<a href="#projects">Projects</a>
<div class="info-section"> <div class="info-section">
<h1>Projects</h1>
<div class="info-group"> <div class="info-group">
<h2>dotfiles</h2> <h2>dotfiles</h2>
<p> <p>
@ -202,15 +206,9 @@
</a> </a>
</div> </div>
</div> </div>
<a id="work"></a>
<a href="#work">Work Experience</a>
<div class="info-section"> <div class="info-section">
<h1>Accomplishments</h1>
<ul>
<li>2023 - Nominated for Carleton University's Co-op of the Year award</li>
<li>2021 - Awarded the Dean's Summer Research Internship</li>
</ul>
</div>
<div class="info-section">
<h1>Work Experience</h1>
<div class="info-group"> <div class="info-group">
<h2>Emids</h2> <h2>Emids</h2>
<p> <p>
@ -263,8 +261,17 @@
<p>May-Aug 2021</p> <p>May-Aug 2021</p>
</div> </div>
</div> </div>
<a id="accomplishments"></a>
<a href="#accomplishments">Accomplishments</a>
<div class="info-section">
<ul>
<li>2023 - Nominated for Carleton University's Co-op of the Year award</li>
<li>2021 - Awarded the Dean's Summer Research Internship</li>
</ul>
</div>
<a id="courses"></a>
<a href="#courses">Courses</a>
<div class="info-section"> <div class="info-section">
<h1>Notable Courses</h1>
<div class="info-group"> <div class="info-group">
<h2>Introduction to Machine Learning</h2> <h2>Introduction to Machine Learning</h2>
<p> <p>
@ -316,5 +323,7 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>

View file

@ -321,12 +321,16 @@ h1, h2 {
margin-left: 5rem; margin-left: 5rem;
margin-right: 5rem; margin-right: 5rem;
display: flex; display: none;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
row-gap: 2rem; row-gap: 2rem;
} }
a:target + a + .info-section {
display: flex;
}
.info-group { .info-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;