updated the home page

Author: Colorfulbloom

src/stories/assets/css/button.scss

@@ -31,11 +31,11 @@
 
 @keyframes btn-bounce {
   0%   { transform: translateY(0); }
-  20%  { transform: translateY(-6px); }
-  40%  { transform: translateY(0); }
-  55%  { transform: translateY(-3px); }
-  70%  { transform: translateY(0); }
-  85%  { transform: translateY(-1px); }
+  40%  { transform: translateY(-6px); }
+  55%  { transform: translateY(0); }
+  70%  { transform: translateY(-3px); }
+  82%  { transform: translateY(0); }
+  91%  { transform: translateY(-1px); }
   100% { transform: translateY(0); }
 }
 

src/stories/assets/css/pages.scss

@@ -2,6 +2,9 @@
 
 // Home Page
 .page-home {
+  background-color: $obsidian;
+  min-height: 100vh;
+
   .hero {
     min-height: calc(100vh - 70px);
     display: flex;

src/stories/layout/Header.tsx

@@ -11,7 +11,7 @@ export interface HeaderProps {
 }
 
 export const Header = ({
-  menuItems = ['Home', 'About', 'Services', 'Portfolio', 'Contact'],
+  menuItems = ['Home', 'Blog', 'Portfolio', 'Contact'],
   activeItem = 'Home',
   forceMobile = false,
 }: HeaderProps) => {

src/stories/pages/Home.tsx

@@ -1,77 +1,18 @@
 import React from 'react';
 import { Header } from '../layout/Header';
 import { Jumbotron } from '../components/Jumbotron';
-import { BlogPostGrid } from '../components/BlogPostGrid';
-import type { BlogPost } from '../components/BlogPostGrid';
 
 import imgStyling from '../assets/styling.png';
-import imgTheming from '../assets/theming.png';
-import imgDocs from '../assets/docs.png';
-import imgTesting from '../assets/testing.png';
-import imgAssets from '../assets/assets.png';
 
 export interface HomeProps {
   /** Active menu item */
   activeMenuItem?: string;
 }
 
-const defaultPosts: BlogPost[] = [
-  {
-    id: '1',
-    title: 'Building Scalable APIs with Node.js',
-    excerpt: 'A deep dive into structuring RESTful APIs for performance and maintainability at scale.',
-    date: 'Jan 28, 2026',
-    href: '#',
-    imageSrc: imgStyling,
-    imageAlt: 'Styling illustration',
-    labels: [{ text: 'Node.js' }, { text: 'JavaScript' }, { text: 'AI' }],
-  },
-  {
-    id: '2',
-    title: 'React 19: What\'s New',
-    excerpt: 'Exploring the latest features in React 19 and how they change the way we build UIs.',
-    date: 'Jan 22, 2026',
-    href: '#',
-    imageSrc: imgTheming,
-    imageAlt: 'Theming illustration',
-    labels: [{ text: 'React' }, { text: 'TypeScript' }, { text: 'CSS' }],
-  },
-  {
-    id: '3',
-    title: 'Mastering Drupal Contrib Modules',
-    excerpt: 'How to plan, build, and maintain a contrib module that the community actually uses.',
-    date: 'Jan 15, 2026',
-    href: '#',
-    imageSrc: imgDocs,
-    imageAlt: 'Docs illustration',
-    labels: [{ text: 'Drupal' }, { text: 'PHP' }, { text: 'HTML' }],
-  },
-  {
-    id: '4',
-    title: 'Unity3D Terrain Optimization',
-    excerpt: 'Techniques for rendering large open-world terrains without tanking your frame rate.',
-    date: 'Jan 8, 2026',
-    href: '#',
-    imageSrc: imgTesting,
-    imageAlt: 'Testing illustration',
-    labels: [{ text: 'Unity3D' }, { text: 'Python' }, { text: 'Git' }],
-  },
-  {
-    id: '5',
-    title: 'Docker for Front-End Developers',
-    excerpt: 'A practical guide to containerizing your dev environment and CI/CD pipeline.',
-    date: 'Dec 30, 2025',
-    href: '#',
-    imageSrc: imgAssets,
-    imageAlt: 'Assets illustration',
-    labels: [{ text: 'Docker' }, { text: 'Bootstrap' }, { text: 'Sass' }],
-  },
-];
-
 export const Home = ({ activeMenuItem = 'Home' }: HomeProps) => {
   return (
     <div className="page-home">
-      <Header activeItem={activeMenuItem} />
+      <Header menuItems={['Home', 'Blog', 'Portfolio', 'Contact']} activeItem={activeMenuItem} />
 
       <Jumbotron
         heading={<><span className="jumbotron__heading-line--deep-azure">Senior Full</span><br /><span className="jumbotron__heading-line--frost">Stack Developer</span></>}
@@ -88,7 +29,6 @@ export const Home = ({ activeMenuItem = 'Home' }: HomeProps) => {
         }}
       />
 
-      <BlogPostGrid heading="Blog" posts={defaultPosts} />
     </div>
   );
 };