microformats bio card
theme colors
now page updates
This commit is contained in:
Shannon Kay 2023-03-27 23:31:13 -07:00
parent 1dd7a835fe
commit 86200e05ad
14 changed files with 89 additions and 17 deletions

View file

@ -4,7 +4,7 @@
<title>Shannon Kay (About)</title> <title>Shannon Kay (About)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f9dee1">
<link rel="stylesheet" href="home.css"> <link rel="stylesheet" href="home.css">
</head> </head>

View file

@ -56,7 +56,7 @@
</div> </div>
<script src="https://www.goodreads.com/review/grid_widget/198969.Shannon's%20currently-reading%20book%20montage?cover_size=medium&hide_link=true&hide_title=true&num_books=4&order=d&shelf=currently-reading&sort=date_added&widget_id=1674899180" type="text/javascript" charset="utf-8"></script> <script src="https://www.goodreads.com/review/grid_widget/198969.Shannon's%20currently-reading%20book%20montage?cover_size=medium&hide_link=true&hide_title=true&num_books=4&order=d&shelf=currently-reading&sort=date_added&widget_id=1674899180" type="text/javascript" charset="utf-8"></script>
<p>If there's nothing here, it means I'm between books.</p>
</section> </section>
</section> </section>

View file

@ -4,7 +4,7 @@
<title>Coffee (Shannon Kay)</title> <title>Coffee (Shannon Kay)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f9dee1">
<link rel="stylesheet" href="../home.css"> <link rel="stylesheet" href="../home.css">
</head> </head>

View file

@ -51,7 +51,7 @@
<p><a class="link" rel="me" href="https://bookrastinating.com/user/shannonkay"><img class="icon" src="/icons/bookrastinating.png"> BookWyrm @shannonkay@bookrastinating.com</a></p> <p><a class="link" rel="me" href="https://bookrastinating.com/user/shannonkay"><img class="icon" src="/icons/bookrastinating.png"> BookWyrm @shannonkay@bookrastinating.com</a></p>
<p><a href="https://blog.shannonkay.me/books/">Book Blogging on Shannon's Blog</a> <a href="https://blog.shannonkay.me/bookfeed.xml"><i class="fa-solid fa-square-rss"></i></a></p> <p><a href="https://blog.shannonkay.me/books/">Book Blogging on Shannon's Blog</a> <a href="https://blog.shannonkay.me/bookfeed.xml"><i class="fa-solid fa-square-rss"></i></a></p>
<p><img class="photo" src="ShannonKay2017.jpg" alt="Shannon Kay profile picture. Woman with light brown hair, blue eyes, fair skin." style="max-width:90%; max-height: 400px; border: white solid 5pt;"></p> <p><img class="photo" class="u-photo" src="ShannonKay2017.jpg" alt="Shannon Kay profile picture. Woman with light brown hair, blue eyes, fair skin." style="max-width:90%; max-height: 400px; border: white solid 5pt;"></p>
</section> </section>

View file

@ -51,6 +51,16 @@ color: transparent;
} }
h1 .project-header a, h1 .project-header a:hover, h1 .project-header a:active, h1 .project-header a:visited {
background: linear-gradient(183deg, #f9c2cc 10%, #FC8EAC 70%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: 1rem;
margin-bottom: 5pt;
}
@media screen and (max-width: 428px) @media screen and (max-width: 428px)
{ {
h1 { font-size: 8vw !important; } h1 { font-size: 8vw !important; }
@ -238,6 +248,24 @@ article img {
text-align: center; text-align: center;
} }
.bio {
background-color: #ffffff;
border: 1pt solid #484848;
border-radius: 10pt;
width: 400px;
margin-right: auto;
margin-left: auto;
text-align: left;
}
.bio img {
float: left;
margin: 5pt;
border-radius: 5pt;
max-width: auto;
max-height: 200px;
}
.updated { .updated {
font-size: 1rem; font-size: 1rem;
color: #484848; color: #484848;

View file

@ -4,12 +4,13 @@
<title>Classic Homepage Project</title> <title>Classic Homepage Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../home.css"> <link rel="stylesheet" href="../home.css">
<meta name="theme-color" content="#f9dee1">
</head> </head>
<body> <body>
<header> <header>
<h1><a href="../index.html">Shannon Kay</a></h1> <h1 class="project-header"><a href="../index.html">Shannon Kay</a></h1>
<h2>Classic Homepage Project</h2> <h2>Classic Homepage Project</h2>
</header> </header>
@ -29,6 +30,8 @@
<h3 id="my-website-story">My Website Story</h3> <h3 id="my-website-story">My Website Story</h3>
<p>I&#39;m an &#34;early Millennial&#34;. My first websites were homepages with rainbow dividers. In 1995, when I was 12, my dad bought me a book called <a href="https://openlibrary.org/books/OL822310M/Internet_and_World_Wide_Web_simplified">Internet and World Wide Web, Simplified</a>. That&#39;s how I learned how the internet worked, and that I should pronounce GIF &#34;like the peanut butter&#34;.</p> <p>I&#39;m an &#34;early Millennial&#34;. My first websites were homepages with rainbow dividers. In 1995, when I was 12, my dad bought me a book called <a href="https://openlibrary.org/books/OL822310M/Internet_and_World_Wide_Web_simplified">Internet and World Wide Web, Simplified</a>. That&#39;s how I learned how the internet worked, and that I should pronounce GIF &#34;like the peanut butter&#34;.</p>
<p>My first websites were free homepages. The first was on a website called <a href="http://web.archive.org/web/19970628183245/http://www.tool-box.com/">tool-box </a>which didn't last long and I've never heard anyone else mention. I think it only existed in 1996/97. I moved on to other free hosts like Angelfire, and moved from using the basic form page editors to learning basic html. But the real magic happened after I saw the movie Titanic in January of 1998. I loved it so much, I made a Titanic website called Titanic Crazy. My first fansite! </p> <p>My first websites were free homepages. The first was on a website called <a href="http://web.archive.org/web/19970628183245/http://www.tool-box.com/">tool-box </a>which didn't last long and I've never heard anyone else mention. I think it only existed in 1996/97. I moved on to other free hosts like Angelfire, and moved from using the basic form page editors to learning basic html. But the real magic happened after I saw the movie Titanic in January of 1998. I loved it so much, I made a Titanic website called Titanic Crazy. My first fansite! </p>
<p>Working on my Titanic website is what really led to my learning more about making websites and how the internet worked. Soon I was making websites for all of my friends. I even got to redesign the website for my high school theatre department. </p>
<p>For my sixteenth birthday, I asked for a domain name. I got my first domain name, <strong>shannonkay.com</strong>, in 1999 as a present for my 16th birthday. </p>
<h3>Links</h3> <h3>Links</h3>
<ul> <ul>
@ -37,15 +40,28 @@
<li><a href="https://matthiasott.com/notes/the-year-of-the-personal-website">The Year of the Personal Website</a></li> <li><a href="https://matthiasott.com/notes/the-year-of-the-personal-website">The Year of the Personal Website</a></li>
<li><a href="https://localghost.dev/blog/building-a-website-like-it-s-1999-in-2022">Building a website like it's 1999... in 2022</a></li> <li><a href="https://localghost.dev/blog/building-a-website-like-it-s-1999-in-2022">Building a website like it's 1999... in 2022</a></li>
</ul> </ul>
<section id="homepage-resources">
<h3 id="how-can-i-make-a-homepage-in-2023">How can I make a homepage in 2023?</h3>
<ul>
<li><a href="https://neocities.org">Neocities</a> - "Neocities is a social network of&nbsp;websites that are bringing back the lost individual creativity of the web. We offer free static web hosting and tools that allow you to create your own web site."</li>
<li><a href="https://mmm.page">Mmm.page</a> - Unique freeform webpage creator. </li>
<li><a href="https://wordpress.com">Wordpress.com</a>- Technically a blog, but you can make any site with it.</li>
</ul>
<h4>Advanced free hosting</h4>
<ul>
<li><a href="https://pages.github.com">GitHub Pages</a> - Websites for you and your projects</li>
<li><a href="https://www.netlify.com">Netlify</a> - Has a starter free tier</li>
</ul>
</section>
</article> </article>
</main> </main>
<footer> <footer>
<p>Created: August 21, 2021. Updated: January 12, 2023</p> <p class="updated">Created: August 21, 2021. Updated: March 26, 2023</p>
<a href="index.html">Shannon's Homepage</a> <a href="../index.html">Shannon's Homepage</a>
</footer> </footer>
</body> </body>

View file

@ -48,6 +48,17 @@
</picture> </picture>
</p> </p>
<section id="webrings">
<p>
<a href="https://hotlinewebring.club/shannonkay/previous"><i class="fa-solid fa-arrow-left"></i></a> <a href="https://hotlinewebring.club">Hotline Webring</a> <a href="https://hotlinewebring.club/shannonkay/next"><i class="fa-solid fa-arrow-right"></i></a>
</p>
<p>
<a href="https://xn--sr8hvo.ws/%F0%9F%93%95%F0%9F%94%9F%F0%9F%99%85/previous"></a>
An <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍
<a href="https://xn--sr8hvo.ws/%F0%9F%93%95%F0%9F%94%9F%F0%9F%99%85/next"></a>
</p>
</section>
<section class="social-icons" id="follow-icons"> <section class="social-icons" id="follow-icons">
<a rel="me" href="https://bookstodon.com/@shannonkay"><i class="fa-brands fa-mastodon"></i></a> <a rel="me" href="https://bookstodon.com/@shannonkay"><i class="fa-brands fa-mastodon"></i></a>
<a href="https://instagram.com/shannonkay"><i class="fa-brands fa-instagram"></i></a> <a href="https://instagram.com/shannonkay"><i class="fa-brands fa-instagram"></i></a>
@ -57,9 +68,7 @@
<a href="mailto:stylers.whimper-0n@icloud.com"><i class="fa-solid fa-envelope"></i></a> <a href="mailto:stylers.whimper-0n@icloud.com"><i class="fa-solid fa-envelope"></i></a>
</section> </section>
</section>
<hr> <hr>
<p><img src="emoji/minniebow.png" alt="Minnie Bow"> <img src="emoji/dolewhip.png" alt="Dole Whip Emoji"> <img src="emoji/princesshatemoji.png" alt="Princess Hat"> <img src="emoji/spacemountain.png" alt="space mountain"></p> <p><img src="emoji/minniebow.png" alt="Minnie Bow"> <img src="emoji/dolewhip.png" alt="Dole Whip Emoji"> <img src="emoji/princesshatemoji.png" alt="Princess Hat"> <img src="emoji/spacemountain.png" alt="space mountain"></p>
@ -72,8 +81,23 @@
alt="Beauty and the Beast reading scene" /> alt="Beauty and the Beast reading scene" />
</picture> </picture>
</p> </p>
<section class="bio">
<span class="h-card">
<img class="u-photo" src="ShannonKay2017.jpg" >
<p><a href="https://www.shannonkay.com" class="u-url u-uid p-name">Shannon Kay</a></p>
<p class="p-note">
I'm a Californian early millennial, mom of 3.
I love books, coffee, tech, and making things pink.
</p>
<p><abbr class="p-region" title="California">CA</abbr> <a rel="me" href="https://bookstodon.com/@shannonkay" class="u-url"><i class="fa-brands fa-mastodon"></i></a></p>
</span>
</section>
</section>
<p></p>
</main> </main>
<footer> <footer>
<hr> <hr>
@ -81,6 +105,7 @@
<p class="updated">Updated March 26, 2023</p> <p class="updated">Updated March 26, 2023</p>
<p>Created August 15, 2021</p> <p>Created August 15, 2021</p>
</footer> </footer>
</body> </body>
</html> </html>

View file

@ -4,7 +4,7 @@
<title>Links</title> <title>Links</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f9dee1">
<link rel="stylesheet" href="../home.css"> <link rel="stylesheet" href="../home.css">
</head> </head>

View file

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="home.css"> <link rel="stylesheet" href="home.css">
<meta name="theme-color" content="#f9dee1">
</head> </head>
<body> <body>

View file

@ -4,7 +4,7 @@
<title>Index Page</title> <title>Index Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f9dee1">
<link rel="stylesheet" href="../home.css"> <link rel="stylesheet" href="../home.css">
</head> </head>

View file

@ -4,7 +4,7 @@
<title>Shannon Kay (Now)</title> <title>Shannon Kay (Now)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f9dee1">
<link rel="stylesheet" href="../home.css"> <link rel="stylesheet" href="../home.css">
</head> </head>
@ -58,7 +58,7 @@
</div> </div>
<script src="https://www.goodreads.com/review/grid_widget/198969.Shannon's%20currently-reading%20book%20montage?cover_size=medium&hide_link=true&hide_title=true&num_books=4&order=d&shelf=currently-reading&sort=date_added&widget_id=1674899180" type="text/javascript" charset="utf-8"></script> <script src="https://www.goodreads.com/review/grid_widget/198969.Shannon's%20currently-reading%20book%20montage?cover_size=medium&hide_link=true&hide_title=true&num_books=4&order=d&shelf=currently-reading&sort=date_added&widget_id=1674899180" type="text/javascript" charset="utf-8"></script>
<p>If there's nothing here, it means I'm between books.</p>
</section> </section>

View file

@ -3,6 +3,7 @@
<head> <head>
<title>Apple II Plus</title> <title>Apple II Plus</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f9dee1">
<link rel="stylesheet" href="../home.css"> <link rel="stylesheet" href="../home.css">
</head> </head>
<body> <body>

View file

@ -3,6 +3,7 @@
<head> <head>
<title>Shannon Kay /Projects</title> <title>Shannon Kay /Projects</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f9dee1">
<link rel="stylesheet" href="../home.css"> <link rel="stylesheet" href="../home.css">
</head> </head>

View file

@ -4,7 +4,7 @@
<title>Shannon Kay Uses</title> <title>Shannon Kay Uses</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f9dee1">
<link rel="stylesheet" href="home.css"> <link rel="stylesheet" href="home.css">
</head> </head>