Skip to content

Commit 1e08764

Browse files
fezcodefezcode
committed
responsiveness
1 parent 009ef6b commit 1e08764

File tree

5 files changed

+30
-6
lines changed

5 files changed

+30
-6
lines changed

‎src/components/Navbar.js‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React, { useState, useEffect } from 'react';
22
import { Link } from 'react-router-dom';
33
import Fez from './Fez';
4+
import { FaBars, FaTimes } from 'react-icons/fa';
45

56
const Navbar = () => {
67
const [isScrolled, setIsScrolled] = useState(false);
8+
const [isMenuOpen, setIsMenuOpen] = useState(false);
79

810
useEffect(() => {
911
const handleScroll = () => {
@@ -15,14 +17,18 @@ const Navbar = () => {
1517
};
1618
}, []);
1719

20+
const toggleMenu = () => {
21+
setIsMenuOpen(!isMenuOpen);
22+
};
23+
1824
return (
1925
<header className={`backdrop-blur-sm sticky top-0 z-40 transition-colors border-b ${isScrolled ? 'border-gray-700/50' : 'border-transparent'}`}>
2026
<div className="container mx-auto flex justify-between items-center p-4 text-white">
2127
<Link to="/" className="flex items-center space-x-2">
2228
<Fez />
2329
<span className="text-2xl font-semibold tracking-tight">fez<span className="text-primary-400">codex</span></span>
2430
</Link>
25-
<div className="flex items-center space-x-6">
31+
<div className="hidden md:flex items-center space-x-6">
2632
<Link to="/" className="text-sm font-medium hover:text-gray-300 transition-colors">Home</Link>
2733
<Link to="/about" className="text-sm font-medium hover:text-gray-300 transition-colors">About</Link>
2834
<Link to="/blog" className="text-sm font-medium hover:text-gray-300 transition-colors">Blog</Link>
@@ -31,9 +37,27 @@ const Navbar = () => {
3137
Play Wordle
3238
</a>
3339
</div>
40+
<div className="md:hidden">
41+
<button onClick={toggleMenu} className="text-white focus:outline-none">
42+
{isMenuOpen ? <FaTimes size={24} /> : <FaBars size={24} />}
43+
</button>
44+
</div>
3445
</div>
46+
{isMenuOpen && (
47+
<div className="md:hidden bg-gray-900/90 backdrop-blur-sm">
48+
<div className="container mx-auto flex flex-col items-center space-y-4 p-4">
49+
<Link to="/" className="text-white text-sm font-medium hover:text-gray-300 transition-colors" onClick={toggleMenu}>Home</Link>
50+
<Link to="/about" className="text-white text-sm font-medium hover:text-gray-300 transition-colors" onClick={toggleMenu}>About</Link>
51+
<Link to="/blog" className="text-white text-sm font-medium hover:text-gray-300 transition-colors" onClick={toggleMenu}>Blog</Link>
52+
<Link to="/projects" className="text-white text-sm font-medium hover:text-gray-300 transition-colors" onClick={toggleMenu}>Projects</Link>
53+
<a href="https://www.nytimes.com/games/wordle/index.html" target="_blank" rel="noopener noreferrer" className="bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded-full transition-colors" onClick={toggleMenu}>
54+
Play Wordle
55+
</a>
56+
</div>
57+
</div>
58+
)}
3559
</header>
3660
);
3761
};
3862

39-
export default Navbar;
63+
export default Navbar;

‎src/components/PostItem.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const PostItem = ({ slug, title, date, updatedDate }) => {
2828
</h2>
2929
</div>
3030
{formattedUpdatedDate && updatedDate !== date && (
31-
<span className="ml-4 px-2 py-1 text-xs font-medium text-blue-400 bg-blue-400/10 rounded-full">Updated: {formattedUpdatedDate}</span>
31+
<span className="hidden sm:inline-block ml-4 px-2 py-1 text-xs font-medium text-blue-400 bg-blue-400/10 rounded-full">Updated: {formattedUpdatedDate}</span>
3232
)}
3333
<span className="ml-4 flex-shrink-0 text-sm font-medium text-primary-400 hover:text-primary-500 transition-colors">
3434
Read post &rarr;

‎src/components/ProjectCard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { Link } from 'react-router-dom';
33

44
const ProjectCard = ({ project, size = 1 }) => {
5-
const colSpanClass = size === 2 ? 'col-span-2' : 'col-span-1';
5+
const colSpanClass = size === 2 ? 'md:col-span-2' : 'col-span-1';
66

77
return (
88
<Link to={`/projects/${project.slug}`} className={`block bg-gray-800/50 p-6 rounded-lg shadow-lg hover:bg-gray-800/80 transition-colors border border-gray-700/50 cursor-pointer flex flex-col ${colSpanClass}`}>

‎src/pages/AboutPage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const AboutPage = () => {
5353

5454
return (
5555
<div className="py-16 sm:py-24">
56-
<div className="mx-auto max-w-5xl px-6 lg:px-8 text-gray-300">
56+
<div className="mx-auto max-w-7xl px-6 lg:px-8 text-gray-300">
5757
<Link to="/" className="text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4">
5858
<FaArrowLeft className="text-xl" /> Back to Home
5959
</Link>

‎src/pages/ProjectsPage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const ProjectsPage = () => {
1717

1818
return (
1919
<div className="py-16 sm:py-24">
20-
<div className="mx-auto max-w-7xl px-8 lg:px-12">
20+
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
2121
<div className="mx-auto max-w-2xl text-center">
2222
<Link to="/" className="text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4">
2323
<FaArrowLeft className="text-xl" /> Back to Home

0 commit comments

Comments
 (0)