MichaelBradley/website
MichaelBradley/website
1
0
Fork 0
Code Issues Pull requests Activity Actions

Start work towards using tabs

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

5
README.md
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?

47
index.html
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="info-section"> <div class="tab-container">
<h1>Projects</h1> <a id="projects"></a>
<a href="#projects">Projects</a>
<div class="info-section">
<div class="info-group"> <div class="info-group">
<h2>dotfiles</h2> <h2>dotfiles</h2>
<p> <p>
@ -201,16 +205,10 @@
<div id="droste" aria-label="An image of the 'fetch' section above"></div> <div id="droste" aria-label="An image of the 'fetch' section above"></div>
</a> </a>
</div> </div>
</div> </div>
<div class="info-section"> <a id="work"></a>
<h1>Accomplishments</h1> <a href="#work">Work Experience</a>
<ul> <div class="info-section">
<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>
@ -262,9 +260,18 @@
</p> </p>
<p>May-Aug 2021</p> <p>May-Aug 2021</p>
</div> </div>
</div> </div>
<div class="info-section"> <a id="accomplishments"></a>
<h1>Notable Courses</h1> <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-group"> <div class="info-group">
<h2>Introduction to Machine Learning</h2> <h2>Introduction to Machine Learning</h2>
<p> <p>
@ -315,6 +322,8 @@
<li>Computer Graphics</li> <li>Computer Graphics</li>
</ul> </ul>
</div> </div>
</div>
</div> </div>
</body> </body>
</html> </html>

6
style.css
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;