A clean, professional academic website built with Bootstrap 5.
/
├── index.html # Landing page with bio and recent papers
├── cv.html # Curriculum Vitae
├── research.html # Research projects
├── software.html # Software and tools
├── papers/ # Individual paper detail pages
│ └── paper1.html # Template for paper pages
├── css/
│ └── custom.css # Custom styles
├── images/
│ ├── headshot.jpg # Your profile photo (recommended: 400x400px)
│ ├── papers/ # Representative images for papers
│ └── research/ # Images for research projects
└── README.md
Place your images in the appropriate folders:
- Profile photo:
images/headshot.jpg(recommended size: 400x400px, square aspect ratio) - Paper images:
images/papers/paper1.jpg,paper2.jpg, etc. (recommended: 800x400px, 2:1 aspect ratio) - Research project images:
images/research/project1.jpg, etc. (recommended: 800x500px)
- Update the bio section with your background and research interests
- Modify the contact information and social media links
- Edit the recent papers section with your actual publications
- Replace placeholder research projects with your actual projects
- Update project descriptions, badges, and publication counts
- Add your software packages and tools
- Update GitHub links, documentation links, and descriptions
- Fill in your education, professional experience, publications
- Update honors, awards, and professional service
- Customize the skills section
- Use the template to create individual pages for each paper
- Update title, authors, affiliations, abstract, and key contributions
- Add links to PDF, DOI, code repositories, and data
Search and replace the following placeholders across all files:
Arindam Fadikar→ Your namefadikar@anl.gov→ Your emailhttps://github.com/yourusername→ Your GitHub profilehttps://linkedin.com/in/yourprofile→ Your LinkedInhttps://scholar.google.com/citations?user=yourID→ Your Google Scholarhttps://orcid.org/your-orcid→ Your ORCID- Building/office information
- University names and institutions
The site uses Argonne National Laboratory colors by default. To change the color scheme, edit css/custom.css:
:root {
--argonne-blue: #003D79; /* Primary color */
--argonne-dark-blue: #002855; /* Dark variant */
--argonne-teal: #00A19C; /* Accent color */
--argonne-green: #009A44; /* Secondary accent */
}To preview the site locally:
- Simply open
index.htmlin your web browser, or - Use a local server (recommended):
# Python 3 python -m http.server 8000 # Then visit http://localhost:8000
The site is already configured for GitHub Pages:
- Push your changes to the
mainbranch - Go to repository Settings → Pages
- Set source to "Deploy from a branch"
- Select
mainbranch and/(root) folder - Your site will be available at
https://fadikar.github.io
- Fonts: The site uses system fonts by default. To use custom fonts, add Google Fonts or other font services to the
<head>section - Navbar: Modify the navigation links in the navbar section of each HTML file
- Footer: Update copyright year and text in the footer section
- Metadata: Add appropriate meta tags for SEO in each page's
<head>section
- Fully responsive design (mobile, tablet, desktop)
- No JavaScript frameworks required
- Minimal JavaScript (only Bootstrap's built-in functionality)
- Clean, academic aesthetic
- Argonne National Laboratory color scheme
- Print-friendly styles for CV page
- Fast loading and accessible
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
This template is free to use and modify for personal academic websites.