Загрузка codefolio - Загрузка исходного кода codefolio

codefolio

Другие категории

1.0.0

Скачать

Кодфолио

Живая демо | Развертывание | О нас | Особенности | Вклад

Готовое к развертыванию веб-приложение для демонстрации вашего портфолио программистов.

О

Codefolio — это портфолио веб-приложения Jamstack для программистов. Он построен с использованием Nuxt.js и использует модуль @nuxt/content для использования пользовательских данных, размещенных в каталоге /content , и создания готовых статических ресурсов.

Функции

Весь код написан с учетом модулей и возможности повторного использования.

Основная особенность этого приложения — поддержка статического развертывания. Портфолио кодирования не требует большого количества изменений, поэтому статический сайт — лучший выбор, чем обычный SPA или приложение Full-Stack.

Пользовательский интерфейс

Пользовательский интерфейс Codefolio разработан с учетом удобства пользователя. Он полностью адаптивный и использует подход, ориентированный на мобильные устройства.

Дизайн основан на шаблоне Sass 7-1 и использует частично загруженный Bootstrap 5 для макетирования и утилит.

Каталог assets/aprite/svg содержит отдельные файлы значков SVG. Вы можете использовать эти значки (или разместить свои собственные значки SVG в этом каталоге) для ссылки на имя значка в компоненте <icon> vue.

Содержание

Codefolio поддерживает пользовательские данные. Помимо личных данных, пользователи также могут настраивать другие интересные возможности, такие как внешние ссылки и URL-адрес кнопки возобновления на верхней панели навигации.

Руководство по содержанию

Генераторы статических сайтов берут необработанные пользовательские данные (обычно в формате уценки или JSON) для создания готового к работе HTML, поэтому это руководство понадобится вам в качестве справочного материала при добавлении контента в Codefolio.

Вот как выглядит структура папки с содержимым.

 content
|	navbar.json
|	about.md
|	social-icons.json
|	user.json
|
└───projects
		project1.json
		project2.json
		project3.json
		/* so on... */

Давайте посмотрим, для чего нужен каждый файл или папка.

navbar.json

Этот файл используется для дополнительных данных, связанных с верхней панелью навигации.

Свойство	Тип	Описание
URL-адрес резюме	`string`	URL-адрес файла возобновления для кнопки возобновления панели навигации.
внешние ссылки	`array`	Массив, содержащий объекты для создания внешних ссылок на верхней панели навигации. Для правильной работы каждый объект внешней ссылки должен иметь свойства `text` и строки `url` .

about.md

Этот файл уценки используется для страницы «О программе».

социальные-icons.json

Этот файл используется для создания социальных значков на странице «О нас».

Свойство	Тип	Описание
значки	`array`	Массив, содержащий объекты для создания значков социальных сетей на странице контактов. Каждый объект должен иметь свойства `name` и `url` (строки). Свойство `name` должно иметь соответствующий файл svg в каталоге /assets/sprite/svg/ . Большинство значков социальных сетей уже доступны, но вы можете добавлять свои собственные значки SVG. В режиме разработки вы можете посетить маршрут `/_icons` , чтобы просмотреть все доступные значки.

user.json

Этот файл используется для хранения данных пользователя, необходимых для домашней страницы.

Свойство	Тип	Описание
полное имя	`string`	Имя пользователя.
о	`string`	Немного о пользователе.
изображение	`string`	Действительный URL-адрес изображения, начинающийся с http , или имя (включая расширение) изображения, которое находится в каталоге `assets/images` . Пожалуйста, обрежьте изображение до `500x500` для лучшего результата.
заголовок	`string`	Позиция или роль пользователя.

контакт.json

Этот файл используется для создания страницы контактов.

Свойство	Тип	Описание
формаДействие	`string`	Пользовательское действие формы для контактной формы. Проверьте formpree.io.
расположение	`string`	Строка местоположения пользователя.
электронная почта	`string`	Адрес электронной почты пользователя.
телефон	`string`	Номер телефона пользователя.

проекты

В этой папке содержатся все проекты в виде отдельных файлов в формате json . Каждый файл в этой папке будет представлять отдельный проект.

В следующей таблице указан формат каждого файла в папке проектов.

Свойство	Тип	Описание
идентификатор	`integer`	Уникальный идентификатор заказа.
заголовок	`string`	Название проекта.
описание	`string`	Подробности о проекте.
изображение	`string`	Действительный URL-адрес изображения, начинающийся с http , или имя (включая расширение) изображения, которое находится в каталоге `assets/images` .
ссылки	`object`	Объект, содержащий внешние ссылки проекта. Он может иметь дополнительные свойства `liveDemo` , `videoDemo` и `sourceCode` для URL-адресов.
технологии	`array`	Массив, содержащий все технологии (строки), используемые в проекте.

Примечание. Создайте новые файлы, чтобы добавить больше проектов, и назовите их как имя проекта.

Для справки см. существующие фиктивные файлы в папке содержимого.

SEO

Мета-теги

Nuxt.js предоставляет эффективные способы оптимизации вашего сайта для поисковых систем. Более подробную информацию можно найти в руководстве по SEO Nuxt.js.

Карты сайта

В этом проекте используется @nuxtjs/sitemap для автоматического создания файла sitemap.xml. Если вам нужна дополнительная информация, обратитесь к их руководству по настройке.

Развертывание

После настройки контента в соответствии с вашими потребностями вам необходимо развернуть приложение в рабочей среде.

Развертывание вручную

Давайте посмотрим, как генерировать файлы сборки.

Начните с клонирования репозитория на локальном компьютере с помощью git (или загрузите его вручную).

 git clone https://github.com/0xaliraza/codefolio

Затем перейдите в корневой каталог репозитория и установите зависимости.

 npm install

Генерировать файлы сборки

 npm run generate

На этом этапе у вас будет папка ./build , содержащая все готовые файлы для развертывания. Вы можете развернуть эти файлы на каком-либо хост-сервере или CDN.

Если вы хотите, чтобы приложение запускалось локально

 npm run dev

CI/CD

Для развертывания этого с помощью действий GitHub или какой-либо другой платформы CI/CD вам потребуется опыт работы с github/кодированием.

Это репозиторий шаблонов, поэтому вы можете просто нажать кнопку «Использовать этот шаблон» в правом верхнем углу, чтобы клонировать этот репозиторий. Настройте файлы содержимого в соответствии со своими потребностями и перейдите на вкладку «Действия», чтобы добавить необходимые рабочие процессы. Вы можете повторно использовать существующие файлы ci.yml и cd.yml.

Чтобы узнать больше, ознакомьтесь с действиями github.

Вклад

Не стесняйтесь создавать запрос на включение или проблему, если вам нужно что-то изменить или исправить. Или вы можете просто связаться со мной напрямую, используя ссылки ниже.