Skip to content

README.md

Latest commit

 

History

History
240 lines (176 loc) · 6.76 KB

README.md

File metadata and controls

240 lines (176 loc) · 6.76 KB

Ionut Ciobotaru - Personal Link Page

A static, Bento-style personal link page built as a self-hosted alternative to Bento.me (which is shutting down Feb 13, 2025).

🚀 Live Site

URL: https://ionut85.github.io

📁 Project Structure

/
├── index.html              # Main page (single-file, inline CSS)
├── links.json              # Source data for all links and sections
├── assets/
│   └── images/             # All downloaded images (139 total, 12MB)
│       ├── Properly named icons, previews, and screenshots
│       └── profile.jpg     # Profile photo (used as favicon)
├── bento_source.html       # Original Bento page HTML (for reference)
├── urls.txt                # Organized list of all URLs by section
├── CLAUDE.md               # Claude Code guidance document
├── DEVELOPMENT_LOG.md      # Complete development history
└── README.md               # This file

✅ What's Complete

  • ✅ 139 images properly named and organized (12MB total)
  • ✅ Fixed-dimension Bento-style cards that reflow beautifully
  • ✅ Profile photo added as favicon and avatar
  • ✅ Complete image remapping from generic names to descriptive filenames
  • ✅ 6 sections: Entrepreneuring, Blogging, Media, Events, Investments, Past Projects
  • ✅ 49 link cards with proper icons and preview images
  • ✅ Centered responsive layout across all screen sizes
  • ✅ Fast loading with lazy image loading
  • ✅ Accessible with semantic HTML and proper alt tags
  • ✅ Complete documentation (CLAUDE.md and DEVELOPMENT_LOG.md)

🔧 How to Update Links

Method 1: Edit links.json (Recommended)

  1. Open links.json
  2. Add/edit/remove entries in the sections array
  3. Each card needs: 
    {
  "title": "Card Title",
  "url": "https://example.com",
  "domain": "example.com",
  "size": "small",  // small, medium, large, or hero
  "icon": "assets/images/icon.png"  // optional
}
  4. Save the file
  5. Currently: links are hardcoded in index.html
  6. Future: You can add JavaScript to dynamically load from links.json

Method 2: Edit index.html Directly

  1. Open index.html
  2. Find the section you want to modify (search for <section class="section">)
  3. Add/edit card HTML: 
    <a href="URL" class="card card--small" target="_blank" rel="noopener noreferrer">
    <img src="assets/images/icon.png" alt="" class="card__icon">
    <div class="card__content">
        <h3 class="card__title">Title</h3>
        <span class="card__domain">domain.com</span>
    </div>
</a>
  4. Card size classes: card--small, card--medium, card--large, card--hero

🎨 Customization

Colors

Edit CSS variables in <style> section of index.html:

:root {
    --bg-color: #f5f5f5;           /* Page background */
    --card-bg: #ffffff;            /* Card background */
    --text-primary: #1a1a1a;       /* Main text */
    --text-secondary: #666666;      /* Secondary text */
    --border-radius: 16px;         /* Card roundness */
}

Layout

  • Desktop: 4-column grid for cards
  • Tablet: 2-column grid
  • Mobile: 1-column stack
  • Breakpoints: 640px (tablet), 1024px (desktop)

Profile Section

Edit the profile sidebar in index.html around line 354:

<h1 class="profile__name">Your Name</h1>
<p class="profile__bio">Your bio...</p>

🌐 Deploying to GitHub Pages

Your site is already set up for GitHub Pages!

Initial Setup (if not done):

# 1. Ensure you're in the repository
cd /Users/ionutciobotaru/Documents/GitHub/ionut85.github.io

# 2. Add all files
git add .

# 3. Commit
git commit -m "Update personal link page"

# 4. Push to GitHub
git push origin master

Enable GitHub Pages (if not enabled):

  1. Go to https://github.com/ionut85/ionut85.github.io/settings/pages
  2. Under "Source", select master branch
  3. Click "Save"
  4. Your site will be live at https://ionut85.github.io within a few minutes

Update the Live Site:

# After making changes:
git add .
git commit -m "Describe your changes"
git push origin master

# GitHub Pages will automatically rebuild (usually takes 1-2 minutes)

📸 Adding New Images

For Card Icons/Logos:

# 1. Download the image
curl -o assets/images/mycompany-icon.png https://example.com/logo.png

# 2. Reference in links.json:
"icon": "assets/images/mycompany-icon.png"

# 3. Or in HTML:
<img src="assets/images/mycompany-icon.png" alt="" class="card__icon">

For Card Previews/Thumbnails:

# 1. Add image to assets/images/
cp ~/Downloads/preview.jpg assets/images/my-preview.jpg

# 2. Reference in links.json:
"preview": "assets/images/my-preview.jpg"

# 3. Or in HTML:
<img src="assets/images/my-preview.jpg" alt="" class="card__preview" loading="lazy">

🔍 Image Organization

The 86 downloaded images from Bento are numbered image_001.png through image_086.png. These include:

  • Company/service favicons and icons
  • Preview images from social media posts
  • OG images from linked articles
  • Thumbnails for media appearances

Recommended: Rename images to be more descriptive:

# Example:
mv assets/images/image_042.jpeg assets/images/incrmntal-preview.jpg
mv assets/images/image_015.png assets/images/hypd-icon.png

Then update references in index.html accordingly.

📊 Site Performance

  • Size: ~40KB HTML + 7.2MB images
  • Loading: Images lazy-load as you scroll
  • Caching: Browsers cache images automatically
  • Mobile-friendly: Responsive design, tested on iOS/Android

🛠 Technical Details

  • Zero JavaScript: Pure HTML + CSS
  • Single file deployment: All CSS inline in index.html
  • Responsive Grid: CSS Grid with mobile-first breakpoints
  • Image fallbacks: onerror handlers hide broken images
  • Accessibility: Semantic HTML, proper heading structure, adequate contrast

🆘 Troubleshooting

Images Not Loading

  1. Check file paths are correct (case-sensitive!)
  2. Verify images exist in assets/images/
  3. Check browser console for 404 errors

Layout Broken on Mobile

  1. Test in Chrome DevTools mobile view
  2. Check viewport meta tag is present: 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

Profile Photo Not Showing

  1. Ensure file is named exactly profile.jpg
  2. Check it's in assets/images/ directory
  3. Verify file isn't corrupted (open it locally)

📞 Questions?

This README was generated during the Bento → Static Site migration on Dec 26, 2025.

For technical issues, refer to:

  • HTML structure in index.html
  • Original data in links.json and urls.txt
  • Original Bento page in bento_source.html

Built as a static alternative to Bento.me | Deployed on GitHub Pages