tabby/vue-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed responsive display on mobile devices and updated about me section

Browse source
This commit is contained in:
Clevetop 2024-07-26 20:39:58 +10:00
parent eb616ab42f
commit db78dd8066
1 changed files with 22 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

27
pages/index.vue
View file

@ -15,16 +15,18 @@ useSeoMeta({
<div class="container"> <div class="container">
<div class="left-col"> <div class="left-col">
<img src="https://avatars.githubusercontent.com/u/41929769" class="pfp" /> <img src="https://avatars.githubusercontent.com/u/41929769" class="pfp" />
<div class="aboutme">
<h1>About Me</h1> <h1>About Me</h1>
<ul> <ul>
<li>20 years old, born in 2003</li> <li>20 years old, born in 2003</li>
<li>i go by she/they pronouns</li> <li>i use she/they pronouns</li>
<li>studying games development @ UTS</li> <li>studying games development @ UTS</li>
<li>linux initiate, currently using popOS with plasma DE</li> <li>linux initiate, currently using Kunbuntu</li>
<li>is a silly little catgirl :3</li> <li>Favourite game engine: <Purple>Godot!</Purple></li>
<li>meow meow~ nya!!!</li> <li>meow meow~ nya!!! :3</li>
</ul> </ul>
</div> </div>
</div>
<div class="right-col"> <div class="right-col">
<h1>Heyo! I'm <Purple>Tom</Purple> 👋</h1> <h1>Heyo! I'm <Purple>Tom</Purple> 👋</h1>
<p>I'm a Games Developer from Sydney, Australia.</p> <p>I'm a Games Developer from Sydney, Australia.</p>
@ -85,7 +87,8 @@ useSeoMeta({
<hr/> <hr/>
<!-- latest blog posts, link to all? --> <!-- latest blog posts, link to all? -->
<h1>Latest Blog Posts</h1> <h1>Latest Blog Posts</h1>
<div class="container"> <p>Coming Soon!</p>
<!-- <div class="container">
<TextCard <TextCard
href="https://cookiespl.itch.io/arcane-raiders" href="https://cookiespl.itch.io/arcane-raiders"
heading="Arcane Raiders" heading="Arcane Raiders"
@ -104,7 +107,7 @@ useSeoMeta({
description="meow meow" description="meow meow"
/> />
</div> </div> -->
</main> </main>
</template> </template>
@ -117,15 +120,17 @@ useSeoMeta({
.left-col { .left-col {
flex:1; flex:1;
width: 66%; width: 50%;
padding: 20px; padding: 20px;
align-self: center;
/* background-color: purple; */ /* background-color: purple; */
} }
.right-col { .right-col {
padding: 20px; padding: 20px;
width: 500px; width: 50%;
flex: 2; flex: 2;
align-self: center;
/* background-color: blueviolet; */ /* background-color: blueviolet; */
} }
@ -135,10 +140,14 @@ useSeoMeta({
background-color: pink; background-color: pink;
} }
@media (max-width: 800px){ @media (max-width: 1000px){
.container{ .container{
flex-direction: column; flex-direction: column;
} }
.aboutme{
visibility: collapse;
}
} }
.pfp { .pfp {