Logo

dev-resources.site

for different kinds of informations.

Building a Mini CMS for vCard – Personal Portfolio with GitHub Copilot

Published at
1/12/2025
Categories
devchallenge
githubchallenge
webdev
ai
Author
fedro_ita
Author
9 person written this
fedro_ita
open
Building a Mini CMS for vCard – Personal Portfolio with GitHub Copilot

This is a submission for the GitHub Copilot Challenge: New Beginnings

What I Built

I created a very basic Content Management System (almost-a-cms) for generating websites on GitHub using the vCard - Personal Portfolio template developed by codewithsadee. The main idea was to simplify the editing of static fields within the template.

To achieve this, I separated the site content into a series of JSON files—one for each section of the site—and paired them with a single HTML template. A Python script reads these JSON files and generates a new index.html file with a single click. This updated file can then be pushed to GitHub, allowing the site to be published seamlessly.

Two Ways to Modify the Content

  1. Directly edit the JSON files: open each JSON file, modify them, and then run the Python script to generate or update index.html.
  2. Use a small Flask backend: run a local server and edit the JSON content through a basic graphical interface. Once you save your changes, the new index.html file is automatically generated.

Demo

Directly edit the JSON files: Here I show how to modify the name directly from the json file, save the file, run index_html_generator.py, and show the update.

Demo json

Use a small Flask backend: Here I show how to modify the job title directly from the very minimal backend, save the form, update the webpage, and show the update.

Demo backend

Repo

My GitHub Repo: Almost A CMS_

Copilot Experience

This was my first experience with GitHub Copilot, and it was quite positive. I’m used to having ChatGPT open in a separate tab for work, so I’m accustomed to LLM support. However, having AI integrated directly into VS Code saved me several steps and made my coding flow more streamlined—avoiding constant copy-pasting between a browser and the IDE.

I also appreciated the ability to switch between two different LLMs (OpenAI and Anthropic). However, I regret that only older model GPT-4o and GPT-3.5 Sonnet were available, as it would be nice to have more up-to-date or varied models. Still, for this time-constrained competition, I made maximum use of the in-editor Chat mode, code selection interactions, and the dedicated sidebar to speed up development.

The autocomplete suggestions were particularly precise—much better than the older suggestion systems—and felt more natural to use. Overall, I think GitHub Copilot is a solid product. Even as a free user, the experience was good. If in the future more model choices become available and OpenAI’s offerings align with the latest releases (mini or full versions), I would definitely consider subscribing to GitHub Copilot.

GitHub Models

I didn’t have the chance to fully explore GitHub Models as much as I wanted. I did a quick test and found some older OpenAI models. Seeing older versions dissuaded me from using GitHub Models in this competition context. However, I noticed that many other models (such as Microsoft’s Phi, as well as Llama and Mistral) were available. I plan to return later to test them out and see which ones are most useful. I hope these models will also be updated regularly with newer versions. It feels somewhat surprising that Phi-4 isn’t available yet, given GitHub is owned by Microsoft.

Conclusion

All in all, I’m pleased to have participated in this competition, if only to try out Copilot on a project I actually needed—updating my personal website. Who knows, I might further develop this repo even after the competition ends.

githubchallenge Article's
30 articles in total
Favicon
📝✨ClearText
Favicon
Impostor syndrome website: Copilot 1-Day Build Challenge
Favicon
Habit Tracker: A Web Application to Track Your Daily Habits
Favicon
Evolution By Sound
Favicon
Weekly Planner - API
Favicon
GitHub Copilot One Day Build Challenge: New Beginnings: An Integrated Productivity System
Favicon
Finding the Perfect Destination in 24 Hours: My GitHub Copilot 1-Day Build Challenge Experience
Favicon
Code Feeds for GitHub - AI Generated Instagram-style feeds
Favicon
Metamorphosis Tracker
Favicon
Labels for any occasion
Favicon
Goal Setter App
Favicon
✨ Introducing Tooltip: A Revolutionary Suite of Developer Tools** ✨
Favicon
ZenFlow: Unlock Productivity with Work, Yoga, and Meditation
Favicon
SkillBytes - Gamified learning process using AI
Favicon
GitHub Copilot Challenge: Transitions and Transformations
Favicon
Daily Reset - LordGeeOne
Favicon
Daily Reset - LordGeeOne
Favicon
Github Challenge: AI-Powered Property Price Chatbot in Under 4Hrs
Favicon
Personal Development Dashboard - A New Beginnings
Favicon
Building a Mini CMS for vCard – Personal Portfolio with GitHub Copilot
Favicon
ArtMorph - LordGeeOne
Favicon
Terraform-CodeGen0: A Terraform Code Generator
Favicon
SkyGreen: Your Flight's Carbon Footprint Calculator
Favicon
Text-to-Context.ai : AI tools to transform ideas to content
Favicon
Fresh Start :Notes Collection
Favicon
"How AI is Revolutionizing Crocheting: My Journey with Copilot and ChatGPT4"
Favicon
EcoStarter: Empowering Fresh Starts for a Sustainable Future
Favicon
Let's go, GitHub Hackathon.
Favicon
خا
Favicon
"Revolutionizing Web Design: My AI-Powered Journey with GitHub Copilot"

Featured ones: