Skip to content

Commit

Permalink
feat: fix mobile layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@pminev
pminev committed Nov 24, 2024
1 parent 8b5c678 commit a8fea3c
Show file tree
Hide file tree
Showing 4 changed files with 244 additions and 63 deletions.
107 changes: 103 additions & 4 deletions astro/src/components/Header.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { LINKS } from '../consts';
---

<header>
<nav class="w-full fixed top-0 left-0 z-50">
<div class="flex items-center pl-16">
<nav class="nav-full w-full fixed top-0 left-0 z-50">
<div class="flex items-center sm:pl-16">
<img class="w-16 h-16 rounded-full object-cover" src="https://avatars.githubusercontent.com/u/7622795?v=4" alt="PacoMinev's Logo" width="32" height="32" />
<div class="flex-1 rounded-lg text-center">
<div class="sm:flex-1 rounded-lg text-center">
<h2><a href="/">PacoMinev's Blog</a></h2>
</div>
</div>
Expand Down Expand Up @@ -37,8 +37,39 @@ import { LINKS } from '../consts';
</a>
</div>
</nav>

<!-- Mobile Navigation -->
<nav class="nav-mini sm:hidden fixed top-0 left-0 w-full bg-white shadow z-50">
<div class="flex items-center justify-between p-4">
<img class="w-16 h-16 rounded-full object-cover" src="https://avatars.githubusercontent.com/u/7622795?v=4" alt="PacoMinev's Logo" width="32" height="32" />
<h2><a href="/">PacoMinev's Blog</a></h2>
<button id="menu-toggle" class="p-2 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<div id="mobile-menu" class="hidden flex-col flex flex-1 pace-y-4 p-4">
<HeaderLink href="/">Home</HeaderLink>
<HeaderLink href="/blog">Blog</HeaderLink>
<HeaderLink href="/work">Work</HeaderLink>
</div>
</nav>
</header>

<script>
if (typeof window !== 'undefined') {
document.addEventListener('DOMContentLoaded', () => {
const menuToggle = document.getElementById('menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');

menuToggle.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
});
}
</script>

<style>
header {
margin: 0;
Expand All @@ -49,6 +80,10 @@ import { LINKS } from '../consts';
nav {
color: white;
background-color: rgb(19, 20, 28);

}
.nav-full {
display: flex;
}
h2 {
color: white;
Expand All @@ -65,6 +100,17 @@ import { LINKS } from '../consts';
align-items: center;
justify-content: space-between;
}

.nav-full {
display: flex;
align-items: center;
justify-content: space-between;
}

.nav-mini {
display: none;
}

nav a {
padding: 1em 0.5em;
color: var(--black);
Expand All @@ -79,9 +125,62 @@ import { LINKS } from '../consts';
.social-links a {
display: flex;
}
@media (max-width: 720px) {
/* Responsive Styles */
@media (max-width: 900px) {
nav {
flex-direction: column; /* Stack items vertically on smaller screens */
align-items: stretch;
}

.nav-full {
display: none;
}

.nav-mini {
display: flex;
justify-content: space-between;
}

.internal-links {
justify-content: center; /* Center-align links */
}

.social-links {
margin-top: 0.5em;
justify-content: center;
}
}

@media (max-width: 390px) {
header {
padding: 0.5em; /* Reduce padding for small screens */
}

h2 {
font-size: 1em; /* Smaller font size for the header title */
}

img {
width: 40px; /* Reduce logo size */
height: 40px;
}

nav a {
font-size: 0.8em; /* Reduce font size for links */
}

.internal-links {
display: none;
gap: 0.5em; /* Reduce spacing between links */
}

.social-links {
display: none;
}

.social-links svg {
width: 20px; /* Further reduce icon size */
height: 20px;
}
}
</style>
87 changes: 47 additions & 40 deletions astro/src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,52 @@
import Layout from '../layouts/GenLayout.astro';
import { getCollection } from 'astro:content';
import '../styles/index.css';
const posts = (await getCollection('blog')).sort(
(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);
import '../styles/index.css';
---

<Layout>
<main>
<div class="hero h-screen w-full bg-gray-800 relative">
<div class="hero w-full bg-gray-800 relative">
<!-- Gradient and noise overlay -->
<div class="absolute inset-0 bg-gradient-to-br from-gray-600 to-gray-800 opacity-90"></div>
<div class="absolute inset-0 bg-noise"></div>
<div class="relative flex items-center justify-center h-full text-white">
<div class="hero-section">
<div class="container">
<div class="hero-inside">
<div class="hero-left">

<!-- Main content -->
<div class="relative flex items-center justify-center text-white">
<div class="hero-section w-full">
<div class="container px-3 py-">
<!-- Hero Content: Centered for both mobile and desktop -->
<div class="flex flex-col md:flex-row items-center justify-center">
<!-- Left Section: Text -->
<div class="hero-left mb-8 md:mb-0 md:w-1/2 text-center md:text-left">
<div class="hero-text">
<div class="welcome-text"> <strong>Hello,</strong> I'm</div>
<div class="hero-bottom-text">
<div class="hero-title">
<h1 class="hero-name">Paco</h1>
</div>
<p class="hero-tagline">Mostly a C++ developer</p>
<div class="welcome-text text-3xl md:text-4xl font-light leading-snug">
<strong>Hello,</strong> I'm
</div>
<div class="hero-bottom-text mt-4">
<h1 class="hero-name text-3xl md:text-6xl font-semibold leading-tight">Paco</h1>
<p class="hero-tagline mt-2 text-lg md:text-xl">Mostly a C++ developer</p>
</div>
</div>
</div>
<div class="hero-right">
<!-- <div class="hero-emoji-wrap">
<div class="emoji-text">Text above image</div>
</div> -->
<div class="hero-emoji-wrap">
<img src="https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/3d0f6/MainAfter.avif"/>
</div>

<!-- Right Section: Image -->
<div class="hero-right md:w-1/2 flex justify-center md:justify-end">
<img src="https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/3d0f6/MainAfter.avif"
class="w-3/4 max-w-xs md:max-w-sm mx-auto rounded-lg shadow-xl" alt="Hero Image" />
</div>
</div>
</div>
</div>
</div>
</div>

<!-- About me section -->
<div class="container about-wrapper">
<div class="about-left">
<h2 class="about-title">👨‍💻 About Me</h2>
Expand All @@ -52,29 +57,31 @@ import '../styles/index.css';
<p>I enjoy diving into new tech, exploring the latest innovations in the automotive world 🚗, and seeking out thrilling adventures 🌍. Through this space, I’ll share not only my ideas but also the challenges I face along the way, hoping to inspire and connect with like-minded enthusiasts.</p>
<p>Beyond coding, I’m driven by a love for innovation and problem-solving, and I’m excited to document this journey here.</p>
</div>
</div>
</div>

<div class="container w-container">
<!-- Discover my work -->
<div class="w-container p-4">
<h2 class="section-title">Discover My Work</h2>
<div class="discover-work-wrap w-dyn-list">
<div role="list" class="discover-work-list w-dyn-items">
{
posts.slice(0, 3).map((post) => (
<div role="listitem" class="discover-work-item w-dyn-item">
<a href={`/blog/${post.slug}/`} class="work-link w-inline-block">
<div style={`background-image:url(${post.data.heroImage})`} class="discover-thumb"></div>
<div class="work-info">
{/* <div class="project-category">{post.data.}</div> */}
<h3 class="project-list-title">{post.data.title}</h3>
</div>
</a>
</div>
))
}
</div>
<div class="view-all-button">
<a href="/blog" class="primary-button view-button">View All Work</a>
<div
class="discover-grid grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3 gap-4"
>
{posts.slice(0, 3).map((post) => (
<div class="discover-item flex-shrink-0">
<a href={`/blog/${post.slug}/`} class="work-link w-inline-block">
<div
style={`background-image:url(${post.data.heroImage})`}
class="discover-thumb"
></div>
<div class="work-info">
<div class="project-list-title text-xl text-stone-950">{post.data.title}</div>
</div>
</a>
</div>
))}
</div>

<div class="text-right mt-4">
<a href="/blog" class="primary-button view-button">View All Work</a>
</div>
</div>
</main>
Expand Down
8 changes: 0 additions & 8 deletions astro/src/styles/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,14 +125,6 @@ hr {
border: none;
border-top: 1px solid rgb(var(--gray-light));
}
@media (max-width: 720px) {
body {
font-size: 18px;
}
main {
padding: 1em;
}
}

.sr-only {
border: 0;
Expand Down
Loading

0 comments on commit a8fea3c

Please sign in to comment.