Dev-Cat Portfolio Viewer

Красивый и удобный просмотрщик портфолио разработчиков из GitHub репозитория.

Что это такое?

На GitHub есть репозиторий, куда разработчики добавляют ссылки на свои портфолио. Я создал приложение, которое берет эти ссылки и отображает их в красивом и удобном интерфейсе браузера. Теперь можно легко просматривать портфолио в одном месте!

Основные возможности

• Динамические ссылки - все ссылки загружаются из GitHub README
• Случайная навигация - кнопки для перехода между портфолио
• Копирование ссылок - клик по адресной строке копирует ссылку
• Переключение разрешений - FHD (1920x1080) и 2K (2560x1440)
• Горячие клавиши - стрелки ← → для навигации
• Обновление страницы - кнопка для перезагрузки iframe

Технологии

• HTML5
• SCSS/CSS3
• JavaScript ES6+
• GitHub API
• Font Awesome

Структура проекта

dev-cat/
├── index.html              # Основная HTML страница
├── index.js               # Главный JavaScript файл
├── styles/
│   └── index.css          # Стили приложения
├── scripts/
│   └── links.js           # Модуль для работы со ссылками
└── assets/
    └── fonts/             # Шрифты

Как запустить?

Простой способ

1. Скачайте проект
2. Откройте файл index.html в браузере
3. Готово! Приложение автоматически загрузит портфолио

Для разработки

1. Откройте index.html в браузере
2. Редактируйте стили в styles/index.scss
3. Ваш SCSS компилятор автоматически сгенерирует CSS

🎮 Как пользоваться?

• ← → - стрелки на клавиатуре для навигации
• FHD/2K - переключатель разрешения экрана
• 🔄 - кнопка обновления страницы
• Клик по ссылке - открывает сайт в новой вкладке

Технические детали

Откуда берутся ссылки?

Приложение загружает ссылки из GitHub репозитория developer-portfolios через API:

GET https://api.github.com/repos/emmabostian/developer-portfolios/contents/README.md

Кэширование

• Ссылки сохраняются на 5 минут
• При повторном заходе используются сохраненные данные
• Это ускоряет загрузку и снижает нагрузку на API

Парсинг ссылок

• Автоматически извлекает ссылки из markdown формата [название](url)
• Фильтрует только валидные HTTP/HTTPS ссылки
• Исключает внутренние ссылки и якоря

Структура файлов

dev-cat/
├── index.html              # Главная страница
├── index.js               # Основная логика
├── styles/
│   ├── index.scss         # Стили (SCSS)
│   └── index.css          # Скомпилированные стили
├── scripts/
│   └── links.js           # Загрузка ссылок из GitHub
└── assets/
    └── fonts/             # Шрифты

Зачем это нужно?

Вместо того чтобы искать портфолио разработчиков по всему интернету, теперь все собрано в одном месте:

• Удобный просмотр - все портфолио в одном интерфейсе
• Красивый дизайн - приятно смотреть и пользоваться
• Быстрая навигация - стрелки на клавиатуре для переключения
• Актуальные ссылки - всегда свежий список портфолио
• Разные разрешения - можно смотреть в FHD или 2K

---

Благодарности

Спасибо создателям репозитория developer-portfolios за сбор и поддержку актуального списка портфолио разработчиков. Без этого репозитория это приложение было бы невозможно!

Источник данных: emmabostian/developer-portfolios