bantam.hostbantam.host
Dark and Minimalist screenshot 1

Tech Stack

HTML5CSS3Font Awesome 5Vanilla JavaScript

Key Features

  • Two-Column Split Layout
  • Dark Mode Design
  • Project Showcase
  • SEO Friendly Structure
Categoryportfolio

Dark and Minimalist

Professional portfolio template with elegant dark theme and two-column split layout

A clean portfolio template with a dark theme and two-column layout. Built with just HTML and CSS - no frameworks or dependencies needed.

What's Included

  • Two-column split layout (profile sidebar + main content)
  • Dark background that's easy on the eyes
  • Hover animations for links and buttons
  • Mobile responsive design
  • Project showcase pages
  • Font Awesome icons

Good For

  • Developer portfolios
  • Designer portfolios
  • Personal websites
  • Student projects

Technical Details

The template uses semantic HTML for good SEO and includes comments throughout the code to help with customization. The project structure includes separate folders for each project page, making it easy to add new work.

Everything is built with standard HTML/CSS, so you can edit it with any text editor and host it anywhere that serves static files.

Documentation

Portfolio Template - Dark & Minimal

A clean, professional portfolio template perfect for developers, designers, and creatives. Features a dark theme with a two-column layout and smooth animations.

šŸš€ Quick Start

  1. Download the template files
  2. Edit index.html to add your information
  3. Customize colors in style.css
  4. Add your projects in the projects folder
  5. ZIP & upload to bantam.host

šŸ“ File Structure

dark-and-minimalist/
ā”œā”€ā”€ index.html              # Main portfolio page
ā”œā”€ā”€ style.css              # All styling and animations
ā”œā”€ā”€ projects/              # Your project pages
│   └── your-custom-project-1/
│       └── index.html     # Example project page
└── README.md              # This file

āœļø Customization Guide

Personal Information

Open index.html and update:

  • Your name (line 31)
  • Your location (line 34)
  • Your email (line 78)
  • Social media links (lines 37-39)

Profile Icon

Change the main icon by replacing fa-code (line 28) with:

  • fa-paint-brush for designers
  • fa-camera for photographers
  • fa-music for musicians
  • fa-pen for writers

Color Scheme

Edit style.css to change:

  • Background: #101214 (line 24)
  • Text color: #7A7C80 (line 25)
  • Heading color: #fff (line 30)

Adding Projects

  1. Duplicate the your-custom-project-1 folder
  2. Rename it to your project name
  3. Edit the project's index.html
  4. Update the link in main index.html

šŸŽØ Features

  • Responsive Design - Works on all devices
  • Dark Theme - Easy on the eyes
  • Smooth Animations - Hover effects on links and icons
  • Font Awesome Icons - 1000+ icons available
  • Clean Code - Well-commented and organized

šŸ’” Tips

  • Keep project names short for better mobile display
  • Use high-contrast colors for accessibility
  • Test on mobile devices before publishing
  • Compress images for faster loading

šŸ›  Technologies Used

  • HTML5
  • CSS3 (Grid, Flexbox, Animations)
  • Font Awesome 5.4.1
  • Google Fonts (Roboto)

šŸ“± Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)
  • Mobile browsers

šŸ“„ License

Free to use for personal and commercial projects. No attribution required. Credit to giotsere for the template.

šŸ¤ Need Help?

The template includes detailed comments in both HTML and CSS files to guide you through customization.


Made with ā¤ļø for the web development community