Skip to content

Commit

Permalink
Fix mobile display
Browse files Browse the repository at this point in the history
  • Loading branch information
Xi Zhang committed Sep 18, 2023
1 parent 69111c3 commit 53e6c85
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 44 deletions.
Binary file modified public/images/profile.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 37 additions & 39 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="Xi Zhang" content="">
<meta name="viewport" content="width=device-width"/>
<title>Xi</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
Expand Down Expand Up @@ -30,46 +30,44 @@ <h1>Culture Bobbin</h1>
</nav>
<main>
<article>
<h2>About</h2>
<img src="./images/profile.jpeg" alt="profile picture" width="500px">
<p>
My name is
<span class="bold">Xi</span>.
I currently work as an engineer in Web3! Once upon a time, I studied cultural anthropology. I really like people.
</p>
<p>
Made in China, reared in Texas. East Coast schooled, West Coast worked.
</p>
<h3>This page</h3>
<p>
was made lovingly by hand without any JavaScript.

HTML ought to be written the way Bordier makes Yuzu butter.
</p>
<h3>Social Media</h3>
<div class="social-media">
<a href="https://www.linkedin.com/in/xi-zhang-9358bb1a/">
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<a href="https://twitter.com/aefhm">
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>Twitter</title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/></svg>
</a>
<div>
<a href="https://github.com/aefhm">
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
</a>
</div>
<div>
<a href="https://www.instagram.com/aefhm">
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
</a>
</div>
<div>
<a href="https://www.goodreads.com/aefhm">
<svg fill="#000000" width="20px" height="20px" viewBox="0 0 14 14" role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="m 10.762344,8.988167 0,-7.743177 -1.0294585,0 0,1.452939 -0.032,0 C 9.5953915,2.470439 9.4603975,2.252448 9.2799045,2.044456 9.0999125,1.838465 8.8964205,1.655973 8.6639305,1.497479 8.4309402,1.340486 8.1829505,1.216991 7.9044621,1.129495 7.6279737,1.044998 7.3344859,1 7.018999,1 6.4140242,1 5.8690469,1.112495 5.3960666,1.334986 4.9225864,1.558477 4.524603,1.863464 4.2036163,2.249948 3.8826297,2.636432 3.6371399,3.087913 3.468647,3.605391 3.300654,4.12387 3.2156575,4.669847 3.2156575,5.246823 c 0,0.599475 0.070497,1.162952 0.2124911,1.69093 0.1429941,0.528478 0.3684847,0.987958 0.6839715,1.380942 0.3154869,0.389984 0.7059706,0.698471 1.1874506,0.916462 0.48048,0.217991 1.0594558,0.330486 1.7354277,0.330486 0.623974,0 1.1649514,-0.157493 1.630932,-0.47298 0.4659801,-0.315487 0.8189661,-0.73647 1.0594561,-1.262448 l 0.0305,0 0,1.141953 c 0,1.021957 -0.210491,1.803425 -0.631973,2.352402 -0.4199827,0.540477 -1.1119538,0.818966 -2.0729138,0.818966 -0.2859881,0 -0.5639765,-0.0305 -0.8344652,-0.0905 C 5.9455458,11.993036 5.698556,11.895543 5.4730654,11.768048 5.2545725,11.632557 5.0595807,11.467564 4.9015873,11.249073 4.7435938,11.031582 4.6385982,10.768593 4.5856004,10.452606 l -1.0534561,0 c 0.033499,0.443482 0.1574935,0.826966 0.3684847,1.149952 0.2119911,0.322987 0.4804799,0.585976 0.8009666,0.796467 0.3204866,0.202992 0.6834715,0.352985 1.0859547,0.450981 C 6.1930334,12.947006 6.6070162,13 7.0344984,13 c 0.6914712,0 1.270447,-0.0975 1.7429274,-0.277488 0.4734807,-0.187993 0.8569647,-0.450982 1.1504517,-0.803967 0.3004875,-0.353985 0.5104785,-0.774468 0.6464735,-1.277947 0.134995,-0.503479 0.209991,-1.066955 0.209991,-1.68343 l -0.022,0.031 z M 7.020499,8.709679 c -0.4774801,0 -0.8919629,-0.0945 -1.2394484,-0.285488 C 5.4325651,8.234199 5.1425772,7.983209 4.9150867,7.672722 4.6815964,7.362235 4.5166033,7.00675 4.404108,6.603267 4.2916127,6.199783 4.2381149,5.786801 4.2381149,5.361318 c 0,-0.435482 0.052498,-0.862464 0.1504937,-1.281446 C 4.4936043,3.659889 4.6585974,3.286405 4.884588,2.959918 5.1100786,2.633932 5.4030664,2.368943 5.748552,2.167951 6.0940376,1.96696 6.51502,1.865464 7.0034997,1.865464 c 0.4884796,0 0.9014624,0.104496 1.247448,0.310487 0.3379859,0.207491 0.6234738,0.47948 0.8414648,0.816966 0.217991,0.338486 0.375484,0.71447 0.47348,1.127453 0.0975,0.412983 0.142494,0.827965 0.142494,1.240948 0,0.425983 -0.06,0.838965 -0.172492,1.241949 C 9.4228985,7.00675 9.2499065,7.362235 9.0169155,7.672722 8.7844255,7.983209 8.5064371,8.234199 8.1679512,8.424191 7.8299652,8.615183 7.4389815,8.709679 6.9885003,8.709679 l 0.031999,0 z"></path></g></svg>
</a>
<h2>About</h2>
<p>
My name is
<span class="bold">Xi</span>.
I currently work as an engineer in Web3! Once upon a time, I studied cultural anthropology. I really like people.
</p>
<p>
Made in China, reared in Texas. East Coast schooled, West Coast worked.
</p>
<h3>This page</h3>
<p>
was made lovingly by hand without any JavaScript.

HTML ought to be written the way Bordier makes Yuzu butter.
</p>
<h3>Social Media</h3>
<div class="social-media">
<a href="https://www.linkedin.com/in/xi-zhang-9358bb1a/">
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<a href="https://twitter.com/aefhm">
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>Twitter</title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/></svg>
</a>
<a href="https://github.com/aefhm">
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
</a>
<a href="https://www.instagram.com/aefhm">
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>Instagram</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
</a>
<a href="https://www.goodreads.com/aefhm">
<svg fill="#000000" width="20px" height="20px" viewBox="0 0 14 14" role="img" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="m 10.762344,8.988167 0,-7.743177 -1.0294585,0 0,1.452939 -0.032,0 C 9.5953915,2.470439 9.4603975,2.252448 9.2799045,2.044456 9.0999125,1.838465 8.8964205,1.655973 8.6639305,1.497479 8.4309402,1.340486 8.1829505,1.216991 7.9044621,1.129495 7.6279737,1.044998 7.3344859,1 7.018999,1 6.4140242,1 5.8690469,1.112495 5.3960666,1.334986 4.9225864,1.558477 4.524603,1.863464 4.2036163,2.249948 3.8826297,2.636432 3.6371399,3.087913 3.468647,3.605391 3.300654,4.12387 3.2156575,4.669847 3.2156575,5.246823 c 0,0.599475 0.070497,1.162952 0.2124911,1.69093 0.1429941,0.528478 0.3684847,0.987958 0.6839715,1.380942 0.3154869,0.389984 0.7059706,0.698471 1.1874506,0.916462 0.48048,0.217991 1.0594558,0.330486 1.7354277,0.330486 0.623974,0 1.1649514,-0.157493 1.630932,-0.47298 0.4659801,-0.315487 0.8189661,-0.73647 1.0594561,-1.262448 l 0.0305,0 0,1.141953 c 0,1.021957 -0.210491,1.803425 -0.631973,2.352402 -0.4199827,0.540477 -1.1119538,0.818966 -2.0729138,0.818966 -0.2859881,0 -0.5639765,-0.0305 -0.8344652,-0.0905 C 5.9455458,11.993036 5.698556,11.895543 5.4730654,11.768048 5.2545725,11.632557 5.0595807,11.467564 4.9015873,11.249073 4.7435938,11.031582 4.6385982,10.768593 4.5856004,10.452606 l -1.0534561,0 c 0.033499,0.443482 0.1574935,0.826966 0.3684847,1.149952 0.2119911,0.322987 0.4804799,0.585976 0.8009666,0.796467 0.3204866,0.202992 0.6834715,0.352985 1.0859547,0.450981 C 6.1930334,12.947006 6.6070162,13 7.0344984,13 c 0.6914712,0 1.270447,-0.0975 1.7429274,-0.277488 0.4734807,-0.187993 0.8569647,-0.450982 1.1504517,-0.803967 0.3004875,-0.353985 0.5104785,-0.774468 0.6464735,-1.277947 0.134995,-0.503479 0.209991,-1.066955 0.209991,-1.68343 l -0.022,0.031 z M 7.020499,8.709679 c -0.4774801,0 -0.8919629,-0.0945 -1.2394484,-0.285488 C 5.4325651,8.234199 5.1425772,7.983209 4.9150867,7.672722 4.6815964,7.362235 4.5166033,7.00675 4.404108,6.603267 4.2916127,6.199783 4.2381149,5.786801 4.2381149,5.361318 c 0,-0.435482 0.052498,-0.862464 0.1504937,-1.281446 C 4.4936043,3.659889 4.6585974,3.286405 4.884588,2.959918 5.1100786,2.633932 5.4030664,2.368943 5.748552,2.167951 6.0940376,1.96696 6.51502,1.865464 7.0034997,1.865464 c 0.4884796,0 0.9014624,0.104496 1.247448,0.310487 0.3379859,0.207491 0.6234738,0.47948 0.8414648,0.816966 0.217991,0.338486 0.375484,0.71447 0.47348,1.127453 0.0975,0.412983 0.142494,0.827965 0.142494,1.240948 0,0.425983 -0.06,0.838965 -0.172492,1.241949 C 9.4228985,7.00675 9.2499065,7.362235 9.0169155,7.672722 8.7844255,7.983209 8.5064371,8.234199 8.1679512,8.424191 7.8299652,8.615183 7.4389815,8.709679 6.9885003,8.709679 l 0.031999,0 z"></path></g></svg>
</a>
</div>
</div>
</div>
<aside>
<img src="./images/profile.jpeg" alt="profile picture" width="360px">
</aside>
</article>
</main>
</body>
Expand Down
40 changes: 35 additions & 5 deletions public/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,41 @@ header {
text-align: center;
}

@media screen and (min-width: 16em) and (max-width: 25em) {
article {
display: flex;
flex-direction: column-reverse;
text-align: center;
}

.social-media {
display: flex;
justify-content: center;
}
}

@media screen and (min-width: 25em) {
article {
display: grid;
grid-template-columns: 3fr 1fr;
column-gap: 20px;
text-align: start;
}

nav ul {
display: flex;
}

nav ul a {
display: unset;
}

.social-media {
display: flex;
justify-content: start;
}
}

.bold {
font-weight: 600;
}
Expand All @@ -22,7 +57,6 @@ nav li {

nav ul {
border: 1px solid black;
display: flex;
list-style: none;
padding: unset;
}
Expand All @@ -48,7 +82,3 @@ nav ul a:hover {
list-style: none;
padding-inline-start: 0px;
}

.social-media {
display: flex;
}

0 comments on commit 53e6c85

Please sign in to comment.