Cribfolio - Your Digital Home for Developer Excellence

A modern, responsive developer portfolio template with smooth animations and dark/light mode toggle. Built with pure HTML, CSS, and JavaScript.

What is Cribfolio?

Cribfolio (a blend of Crib" + "Portfolio) serves as your digital home on the web - a carefully crafted space where your coding journey, skills, and personality can shine. It's more than just a portfolio; it's your professional identity packaged in a beautiful, interactive experience.

✨ Features

1. Dual Theme Support - Toggle between light and dark modes with smooth transitions

2. Fully Responsive - Mobile-first design that works on all devices

3. Pure Vanilla Stack - No frameworks, just HTML, CSS, and JavaScript

4. Smooth Animations - Elegant entrance animations and hover effects

5. Easy Customization - Simple to personalize with your own content

6. Persistent Settings - Theme preference saved in localStorage

Quick Start

1. Clone the repository

bash
git clone https://github.com/fahatadam/cribfolio.git
cd cribfolio 

2. Open in browser

bash
# Simply open index.html in your browser
open index.html

Project Structure

cribfolio/
├── index.html          # Main HTML file
├── styles.css          # All styling with CSS variables          
└── script.js           # Interactive functionality

Colors & Themes

The portfolio uses CSS custom properties for easy theming:

• Primary Colors: Purple to blue gradient

• Light Mode: Clean white background with dark text

• Dark Mode: Deep navy background with light text

Built With

• HTML5 - Semantic markup

• CSS3 - Custom properties, Grid, Flexbox, Animations

• Vanilla JavaScript - ES6+ features

• Font Awesome - Icons

• Google Fonts - Typography

Responsive Breakpoints

• Mobile: < 768px

• Tablet: 768px - 1024px

• Desktop: > 1024px

Sections Included

1. Header - Navigation with theme toggle

2. Hero - Introduction with call-to-action buttons

3. Values - Three-column feature showcase

4. Journey - Personal development story

5. Footer - Social links and credits

Browser Support

• Chrome (latest)

• Firefox (latest)

• Safari (latest)

• Edge (latest)

Acknowledgments

• Icons by Font Awesome

• Inspiration from modern portfolio designs

• The developer community for continuous feedback

Special Thanks

<div align="center">
  A Heartfelt Thank You to DevCrib
</div>

This project wouldn't be possible without the incredible support and inspiration from the DevCrib community. Special recognition for:

• Guidance & Mentorship - For providing direction and best practices
• Community Feedback - For valuable insights that improved the project
• Collaborative Spirit - For fostering an environment of growth and support
• Continuous Learning - For encouraging skill development and innovation

DevCrib has been more than just a community - it's been a catalyst for growth and a source of inspiration throughout this development journey.

<div align="center">
  Thank you, DevCrib
</div>

Support

If you have any questions or run into issues, please open an issue on GitHub.

Made with ❤️ by Fahat Adam (devKing)

<div align="center">
    Don't forget to star this repo if you found it helpful!
</div>