Personal Landing Page

A minimalist, performance-focused personal landing page. Designed with a deep blue & purple aesthetic, featuring a responsive layout and data-driven content.

Live Demo / Example: howar31.com

🚀 Tech Stack

• Framework: Next.js 14 (App Router)
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React
• Deployment: GitHub Pages (Static Export) via GitHub Actions
• Domain: Custom domain howar31.com

✨ Features

• Minimalist Hero Section: 100vh immersive intro with gradient text and subtle animations.
• Sticky Header: Smart header that appears on scroll, responsive for mobile (icon-only) and desktop.
• Project Grid: Filterable grid for Side Projects with smooth layout transitions.
• Tech Stack: Categorized skills display (Backend, Frontend, Cloud, Database, AI Workflows).
• Data-Driven: Content managed via structured data files in src/data/.
• Responsive Design: Fully optimized for mobile, tablet, and desktop.
• Cross-Browser: Polished support for Safari (iPhone) and Chrome.

🛠️ Getting Started

Prerequisites

• Node.js 18+
• npm

Installation

1. Clone the repository:

   git clone https://github.com/howar31/landing-page.git
   cd landing-page

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 with your browser to see the result.

📝 Managing Content

All content is separated from the UI components for easy maintenance.

1. Hero Section

Edit src/data/hero.ts to update:

• Title & Subtitle
• Description (supports unlimited lines)
• Action Buttons (Blog, GitHub, etc.)

2. Projects

Edit src/data/projects.ts to manage your portfolio:

// Project Items
export const projects = [
  {
    title: "New Project",
    description: "Description...",
    url: "https://example.com",
    tags: ["Tag1", "Tag2"],
  },
  // ...
];

// More projects button
export const moreProjects = {
  text: "More on WEBSITE",
  url: "https://example.com",
  icon: Github, // remember to import
};

// Social Links (Footer)
export const socialLinks = [
  {
    title: "SOCIAL PLATFORM",
    url: "https://example.com",
    icon: Github, // remember to import
  },
];

3. Skills / Tech Stack

Edit src/data/skills.ts to update skill categories and items.

4. Site Metadata (SEO)

Edit src/data/config.ts to update:

• Title & Description
• Keywords
• OpenGraph settings
• Favicon path

📦 Deployment

This project is configured with GitHub Actions for automated deployment to GitHub Pages.

1. Push changes to the main branch.
2. The workflow .github/workflows/deploy.yml will trigger.
3. It builds the site (npm run build) and deploys the out directory to GitHub Pages.
4. The CNAME file ensures the custom domain howar31.com is preserved.

📄 License

MIT