A personal developer portfolio website showcasing professional experience, technical skills, and projects. Built with Bootstrap 5, Sass, and vanilla JavaScript, featuring interactive flip cards, a project carousel, and downloadable resources.
- 🃏 Interactive Flip Cards — CSS 3D flip animations showcasing skills (Django REST, Django, Bootstrap, JavaScript)
- 🎠 Project Carousel — Bootstrap carousel with project descriptions and images
- 👤 About Me Section — Professional profile card with photo and bio
- 💼 Experience Showcase — Detailed descriptions of backend development expertise
- 📎 Downloadable Resources — Resume (PDF), certificates, and Excel reports
- 📱 Fully Responsive — Mobile-first design with Bootstrap grid system
- 🔗 External Links — Direct links to GitHub repos, YouTube demos, and LinkedIn
- 🎥 YouTube Embeds — Project demo videos embedded directly in the portfolio
profile/
├── index.html # Main portfolio page
├── sass/
│ └── sass.scss # Custom Sass source
├── style/
│ ├── style.css # Main stylesheet
│ ├── sass.css # Compiled Sass output
│ ├── sass.css.map # Source map
│ └── colors&background_colors.css # Custom color utilities
├── script/
│ └── script.js # Theme toggle & interactions
├── img/ # Project screenshots & skill logos
└── media/ # Resume PDF, certificates, reports
# Clone the repository
git clone https://github.com/JohnCard/profile.git
# Navigate to the project
cd profile
# Open in browser
open index.html
# Or use a local server:
npx serve .No build step required — this is a static site.
| Technology | Proficiency | Context |
|---|---|---|
| Django REST Framework | ⭐⭐⭐⭐⭐ | 1 year professional experience |
| Django | ⭐⭐⭐⭐⭐ | Templates, CBVs, business logic |
| Bootstrap | ⭐⭐⭐⭐ | Responsive layouts, components |
| JavaScript | ⭐⭐⭐ | API consumption, DOM manipulation |
| Sass | ⭐⭐⭐ | Variables, mixins, control directives |
| React | 🔜 | Learning in progress |