-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a8fe03e
commit 2198bf4
Showing
4 changed files
with
243 additions
and
165 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| # claire-fh | ||
|
|
||
| Website |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,68 +1,87 @@ | ||
| <!DOCTYPE html> | ||
| <!doctype html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | ||
| <title>Claire FH</title> | ||
| </head> | ||
| </head> | ||
|
|
||
| <body> | ||
| <body> | ||
| <header> | ||
| <h1>Claire Fletcher</h1> | ||
| <!--TODO: Navigation bar which will eventually need CSS--> | ||
| <nav> | ||
| <div class="topnav"> | ||
| <a href="index.html">Home</a> | ||
| <a href="./pages/sustainability.html">Environmental Sustainability</a> | ||
| <a href="./pages/edi.html">Accessibility</a> | ||
| </div> | ||
| </nav> | ||
| <h1>Claire Fletcher</h1> | ||
| <!--TODO: Navigation bar which will eventually need CSS--> | ||
| <nav> | ||
| <div class="topnav"> | ||
| <a href="index.html">Home</a> | ||
| <a href="./pages/sustainability.html">Environmental Sustainability</a> | ||
| <a href="./pages/edi.html">Accessibility</a> | ||
| </div> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <main> | ||
| <div> | ||
| <h2>About Me</h2> | ||
| <p>Hi, I'm Claire 👋</p> | ||
| <p>I'm a Software Engineer working in the Site Reliability Engineering team at Pexip. | ||
| I'm passionate about building reliable and well-instrumented systems which follow best practices. | ||
| Well-documented code and systems is a must for me!</p> | ||
| <p>My background started with environmental sustainability so I am currently combining my expertise and | ||
| passion | ||
| by contributing to the | ||
| "CNCF Technical Advisory Group for Environmental Sustainability" as a lead!</p> | ||
| <img src="assets/whale.webp" alt="CNCF TAG logo. A light green whale sitting on top of a light green image of the earth." width="100" height="100" | ||
| title="CNCF TAG Environmental Sustainability logo" style="display: block; margin: 0 auto;"> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h2>Isn't this a bit basic?</h2> | ||
| <p><strong>Yes, it is!</strong> I am a firm believer in continuous learning and front-end web development is | ||
| one | ||
| area of software that I don't have much experience with. | ||
| I am currently completing the codefirstgirls <a | ||
| href="https://codefirstgirls.com/courses/coding-kickstarter">Introduction | ||
| to Web Development</a> course learning the basics of HTML, CSS, and combining this with JavaScript. | ||
| </p> | ||
| <p> | ||
| One benefit of this simplicity is the reduced carbon impact! | ||
| </p> | ||
| <div id="wcb" class="carbonbadge"></div> | ||
| <script src="https://unpkg.com/[email protected]/b.min.js" defer></script> | ||
| </div> | ||
| <div> | ||
| <h2>About Me</h2> | ||
| <p>Hi, I'm Claire 👋</p> | ||
| <p> | ||
| I'm a Software Engineer working in the Site Reliability Engineering | ||
| team at Pexip. I'm passionate about building reliable and | ||
| well-instrumented systems which follow best practices. Well-documented | ||
| code and systems is a must for me! | ||
| </p> | ||
| <p> | ||
| My background started with environmental sustainability so I am | ||
| currently combining my expertise and passion by contributing to the | ||
| "CNCF Technical Advisory Group for Environmental Sustainability" as a | ||
| lead! | ||
| </p> | ||
| <img | ||
| src="assets/whale.webp" | ||
| alt="CNCF TAG logo. A light green whale sitting on top of a light green image of the earth." | ||
| width="100" | ||
| height="100" | ||
| title="CNCF TAG Environmental Sustainability logo" | ||
| style="display: block; margin: 0 auto" | ||
| /> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h2>Isn't this a bit basic?</h2> | ||
| <p> | ||
| <strong>Yes, it is!</strong> I am a firm believer in continuous | ||
| learning and front-end web development is one area of software that I | ||
| don't have much experience with. I am currently completing the | ||
| codefirstgirls | ||
| <a href="https://codefirstgirls.com/courses/coding-kickstarter" | ||
| >Introduction to Web Development</a | ||
| > | ||
| course learning the basics of HTML, CSS, and combining this with | ||
| JavaScript. | ||
| </p> | ||
| <p>One benefit of this simplicity is the reduced carbon impact!</p> | ||
| <div id="wcb" class="carbonbadge"></div> | ||
| <script | ||
| src="https://unpkg.com/[email protected]/b.min.js" | ||
| defer | ||
| ></script> | ||
| </div> | ||
| </main> | ||
|
|
||
|
|
||
| <footer style="position: fixed; bottom: 0; width: 100%; background-color: #f8f9fa; padding: 10px; text-align: center;"> | ||
| <p><a href="https://www.linkedin.com/in/clair3-f/">LinkedIn</a></p> | ||
| <hr> | ||
| <p><a href="https://github.com/claire-fletcher/claire-fh">GitHub</a></p> | ||
| <footer | ||
| style=" | ||
| position: fixed; | ||
| bottom: 0; | ||
| width: 100%; | ||
| background-color: #f8f9fa; | ||
| padding: 10px; | ||
| text-align: center; | ||
| " | ||
| > | ||
| <p><a href="https://www.linkedin.com/in/clair3-f/">LinkedIn</a></p> | ||
| <hr /> | ||
| <p><a href="https://github.com/claire-fletcher/claire-fh">GitHub</a></p> | ||
| <p>© 2024 Claire Fletcher</p> | ||
|
|
||
| </footer> | ||
|
|
||
| </body> | ||
|
|
||
| </html> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,68 +1,102 @@ | ||
| <!DOCTYPE html> | ||
| <!doctype html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | ||
| <title>Claire FH</title> | ||
| </head> | ||
| </head> | ||
|
|
||
| <body> | ||
| <body> | ||
| <header> | ||
| <h1>Claire Fletcher</h1> | ||
| <!--TODO: Navigation bar which will eventually need CSS--> | ||
| <nav> | ||
| <div class="topnav"> | ||
| <a href="../index.html">Home</a> | ||
| <a href="sustainability.html">Environmental Sustainability</a> | ||
| <a href="edi.html">Accessibility</a> | ||
| </div> | ||
| </nav> | ||
| <h1>Claire Fletcher</h1> | ||
| <!--TODO: Navigation bar which will eventually need CSS--> | ||
| <nav> | ||
| <div class="topnav"> | ||
| <a href="../index.html">Home</a> | ||
| <a href="sustainability.html">Environmental Sustainability</a> | ||
| <a href="edi.html">Accessibility</a> | ||
| </div> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <main> | ||
| <div> | ||
| <h1>Accessibility</h1> | ||
| <p>One thing that drives me is equity, diversity, and inclusion. As part of that there are many | ||
| accessibility changes that can be consider during web design and implementation!</p> | ||
| <p>I will be incorporating these as I go and keeping track of useful resources here for others to use too. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h2>Key Accessibility Tips</h2> | ||
| <ul> | ||
| <li>Use alternative text tags effectively with good descriptions, not just "image of x"</li> | ||
| <li>Check the colour contrast of websites is still readable for those with visual imparements. How it looks to you may be different for others!</li> | ||
| <li>Use appropriate and well structured headers, footers, main content. This makes it easier to navigate with accessibility tools</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h2>Tools and Documentation</h2> | ||
| <ul> | ||
| <li><a href="https://wave.webaim.org/">WAVE web accessibility evaluation tools</a></li> | ||
| <ul> | ||
| <li>You can see the accessibility report for this website <a href="https://wave.webaim.org/report#/clairefh.com">here</a> on the report website.</li> | ||
| </ul> | ||
| <li><a href="https://www.w3.org/WAI/fundamentals/accessibility-principles/">Web accessibility principles from W3C</a></li> | ||
| <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM colour contrast checker</a></li> | ||
| </ul> | ||
| </div> | ||
| <div> | ||
| <h1>Accessibility</h1> | ||
| <p> | ||
| One thing that drives me is equity, diversity, and inclusion. As part | ||
| of that there are many accessibility changes that can be consider | ||
| during web design and implementation! | ||
| </p> | ||
| <p> | ||
| I will be incorporating these as I go and keeping track of useful | ||
| resources here for others to use too. | ||
| </p> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h2>Key Accessibility Tips</h2> | ||
| <ul> | ||
| <li> | ||
| Use alternative text tags effectively with good descriptions, not | ||
| just "image of x" | ||
| </li> | ||
| <li> | ||
| Check the colour contrast of websites is still readable for those | ||
| with visual imparements. How it looks to you may be different for | ||
| others! | ||
| </li> | ||
| <li> | ||
| Use appropriate and well structured headers, footers, main content. | ||
| This makes it easier to navigate with accessibility tools | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h2>Tools and Documentation</h2> | ||
| <ul> | ||
| <li> | ||
| <a href="https://wave.webaim.org/" | ||
| >WAVE web accessibility evaluation tools</a | ||
| > | ||
| </li> | ||
| <ul> | ||
| <li> | ||
| You can see the accessibility report for this website | ||
| <a href="https://wave.webaim.org/report#/clairefh.com">here</a> on | ||
| the report website. | ||
| </li> | ||
| </ul> | ||
| <li> | ||
| <a | ||
| href="https://www.w3.org/WAI/fundamentals/accessibility-principles/" | ||
| >Web accessibility principles from W3C</a | ||
| > | ||
| </li> | ||
| <li> | ||
| <a href="https://webaim.org/resources/contrastchecker/" | ||
| >WebAIM colour contrast checker</a | ||
| > | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </main> | ||
|
|
||
|
|
||
| <footer style="position: fixed; bottom: 0; width: 100%; background-color: #f8f9fa; padding: 10px; text-align: center;"> | ||
| <p><a href="https://www.linkedin.com/in/clair3-f/">LinkedIn</a></p> | ||
| <hr> | ||
| <p><a href="https://github.com/claire-fletcher/claire-fh">GitHub</a></p> | ||
| <p>© 2024 Claire Fletcher</p> | ||
|
|
||
| <footer | ||
| style=" | ||
| position: fixed; | ||
| bottom: 0; | ||
| width: 100%; | ||
| background-color: #f8f9fa; | ||
| padding: 10px; | ||
| text-align: center; | ||
| " | ||
| > | ||
| <p><a href="https://www.linkedin.com/in/clair3-f/">LinkedIn</a></p> | ||
| <hr /> | ||
| <p><a href="https://github.com/claire-fletcher/claire-fh">GitHub</a></p> | ||
| <p>© 2024 Claire Fletcher</p> | ||
| </footer> | ||
|
|
||
| </body> | ||
|
|
||
| </html> | ||
| </body> | ||
| </html> |
Oops, something went wrong.