Vibe-Coded Personal Link Hub

🌐 Live Demo

A vibe-coded, visually striking, and responsive personal link hub built with Eleventy and Tailwind CSS. Centralize your digital presence with a site that’s as unique as your vibe—easy to customize, data-driven, and ready to deploy.

---

What is Vibe-Coding?

This project is built on the vibe-coding philosophy—where design and code choices are guided by intuition, aesthetics, and personal style. Every section, animation, and gradient is intentional, creating a digital home that feels authentically you.

Development Approach

This project was crafted using a vibe-first, AI-powered workflow:

• Primary Development: GPT-4.1
• Quality Assurance & Debugging: Claude 3.5 Sonnet
• Development Environment: Cursor IDE for seamless AI/code synergy

---

Tech Stack

• Static Site Generator: Eleventy (for ultimate flexibility and vibes)
• Templating: Nunjucks
• Styling: Tailwind CSS (utility-first, highly customizable)
• Content: Markdown & JSON data files
• Icons: FontAwesome

---

Key Features

• Vibe-Driven Hero Section: Big profile image, gradient background, and your signature intro
• Biography & Fun Facts: Show off who you are and what makes you unique
• Centralized Hub Links: Portfolio, blog, projects, social media, and more
• Trivia Points: Add personality and conversation starters
• Responsive & Animated: Looks great everywhere, with smooth transitions
• Easy Customization: All content managed through simple JSON files—no need to touch HTML or CSS
• SEO & Accessibility: Meta tags and ARIA-friendly markup for discoverability and inclusivity

---

Project Structure

src/
├── _data/        # JSON data files for content (personal, funfacts, socials, trivia, websites)
├── _includes/    # Nunjucks templates and components
├── assets/       # Static assets (images, CSS, JS)
└── index.md      # Main entry point

---

Prerequisites

• Node.js (v14+ recommended)
• npm (v7+)

---

Getting Started

1. Clone the repository:

   git clone https://github.com/yourusername/personal-link-website.git
   cd personal-link-website

2. Install dependencies:

   npm install

3. Run the development server:

   npm start

   Open your browser to http://localhost:8080/

---

Customization

All your content lives in JSON files under src/_data/:

• Personal Info: personal.json (name, title, bio, profile image, email)
• Fun Facts: funfacts.json
• Trivia: trivia.json
• Social Media: socials.json
• Links: websites.json

Just edit these files—no coding required. Want to change visuals? Tweak Tailwind classes in the templates under src/_includes/.

---

Why This Project?

This template exists to make it easy (and fun) to curate your online presence. It’s fast, modern, and designed for maximum personal expression with minimal hassle.

---

Deployment

Deploy anywhere static sites are welcome:

Netlify

1. Connect your repo to Netlify
2. Set build command to npm run build
3. Set publish directory to _site

Vercel

1. Import your repo to Vercel
2. Build command: npm run build
3. Output directory: _site

GitHub Pages

1. Enable Pages in repo settings
2. Set build directory to _site

---

Contributions

This is a personal, vibe-coded project—fork it, remix it, and make it your own!

License

ISC. See LICENSE for details. }

### 2. Fun Facts

Edit `src/_data/funfacts.json` to showcase interesting facts about yourself:

```json
{
  "facts": [
    {
      "icon": "fas fa-icon-name",
      "title": "Fact Title",
      "description": "Description of your fun fact"
    },
    // Add more facts...
  ]
}

3. Websites/Hub Links

Edit src/_data/websites.json to add links to your various online platforms:

{
  "hubLinks": [
    {
      "title": "Link Title",
      "url": "https://your-url.com",
      "icon": "fas fa-icon-name",
      "description": "Description of the link",
      "color": "tailwind-color",
      "hoverColor": "tailwind-hover-color"
    },
    // Add more links...
  ]
}

4. Trivia

Edit src/_data/trivia.json to add interesting trivia about yourself:

{
  "trivia": [
    {
      "icon": "fas fa-icon-name",
      "title": "Trivia Title",
      "description": "Description of your trivia item"
    },
    // Add more trivia items...
  ]
}

5. Social Media

Edit src/_data/socials.json to update your social media links:

{
  "socialLinks": [
    {
      "platform": "Platform Name",
      "url": "https://platform-url.com/yourusername",
      "icon": "fab fa-platform-icon",
      "color": "tailwind-color",
      "hoverColor": "tailwind-hover-color"
    },
    // Add more social media links...
  ]
}

6. Profile Image

Replace the file at src/assets/images/profile.jpg with your own image (recommended dimensions: 591x1280px).

7. Favicon

Replace the file src/assets/images/favicon.ico with your own site icon. You can use online tools to generate a .ico file from your logo or image.

Advanced Customization

Colors and Styling

The primary styling is managed through Tailwind CSS. You can customize colors and other styling by:

1. Editing the Tailwind configuration file (tailwind.config.js)
2. Adding custom CSS in src/assets/css/link-page.css

Layout and Components

If you need to modify the layout or components:

1. The main layout is defined in src/_includes/layouts/link-page.njk
2. Individual sections are in src/_includes/partials/ (hero.njk, bio.njk, etc.)

Deployment

This template can be deployed to any static site hosting service:

1. Build the production version:

   npm run build

2. Deploy the contents of the _site folder to your hosting provider.

Popular options include:

• Netlify

• Vercel

• GitHub Pages

• Cloudflare Pages

• Intersection Observer API for scroll animations