From cdaa0cda9beacafb70a27501e57c75e50e6da647 Mon Sep 17 00:00:00 2001 From: Eliahu Horwitz Date: Thu, 4 Sep 2025 20:45:42 +0300 Subject: [PATCH] Modernize template: improved design, SEO, mobile support, and UX features --- README.md | 65 +++-- index.html | 332 +++++++++++++++++---- static/css/index.css | 675 ++++++++++++++++++++++++++++++++++++++++--- static/js/index.js | 135 ++++++++- 4 files changed, 1086 insertions(+), 121 deletions(-) diff --git a/README.md b/README.md index 364109f..3cbf3a0 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,8 @@ # Academic Project Page Template -This is an academic paper project page template. + +> **Update (September 2025)**: This template has been modernized with better design, SEO, and mobile support. For the original version, see the [original-version branch](https://github.com/eliahuhorwitz/Academic-project-page-template/tree/original-version). + +A clean, responsive template for academic project pages. Example project pages built using this template are: @@ -26,25 +29,49 @@ To edit the websites contents edit the `index.html` file. It contains different **IMPORTANT!** Make sure to replace the `favicon.ico` under `static/images/` with one of your own, otherwise your favicon is going to be a dreambooth image of me. -## Components -- Teaser video -- Images Carousel -- Youtube embedding -- Video Carousel -- PDF Poster -- Bibtex citation +## What's New -## Tips: -- The `index.html` file contains comments instructing you what to replace, you should follow these comments. -- The `meta` tags in the `index.html` file are used to provide metadata about your paper -(e.g. helping search engine index the website, showing a preview image when sharing the website, etc.) -- The resolution of images and videos can usually be around 1920-2048, there rarely a need for better resolution that take longer to load. -- All the images and videos you use should be compressed to allow for fast loading of the website (and thus better indexing by search engines). For images, you can use [TinyPNG](https://tinypng.com), for videos you can need to find the tradeoff between size and quality. -- When using large video files (larger than 10MB), it's better to use youtube for hosting the video as serving the video from the website can take time. -- Using a tracker can help you analyze the traffic and see where users came from. [statcounter](https://statcounter.com) is a free, easy to use tracker that takes under 5 minutes to set up. -- This project page can also be made into a github pages website. -- Replace the favicon to one of your choosing (the default one is of the Hebrew University). -- Suggestions, improvements and comments are welcome, simply open an issue or contact me. You can find my contact information at [https://horwitz.ai](https://horwitz.ai) +- Modern, clean design with better mobile support +- Improved SEO with proper meta tags and structured data +- Performance improvements (lazy loading, optimized assets) +- More Works dropdown +- Copy button for BibTeX citations +- Better accessibility + +## Components + +- Teaser video +- Image carousel +- YouTube video embedding +- Video carousel +- PDF poster viewer +- BibTeX citation + +## Customization + +The HTML file has TODO comments showing what to replace: + +- Paper title, authors, institution, conference +- Links (arXiv, GitHub, etc.) +- Abstract and descriptions +- Videos, images, and PDFs +- Related works in the dropdown +- Meta tags for SEO and social sharing + +### Meta Tags +The template includes meta tags for better search engine visibility and social media sharing. These appear in the `` section and help with: +- Google Scholar indexing +- Social media previews (Twitter, Facebook, LinkedIn) +- Search engine optimization + +Create a 1200x630px social preview image at `static/images/social_preview.png`. + +## Tips + +- Compress images with [TinyPNG](https://tinypng.com) +- Use YouTube for large videos (>10MB) +- Replace the favicon in `static/images/` +- Works with GitHub Pages ## Acknowledgments Parts of this project page were adopted from the [Nerfies](https://nerfies.github.io/) page. diff --git a/index.html b/index.html index 53331a3..b511878 100644 --- a/index.html +++ b/index.html @@ -1,60 +1,249 @@ - + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - Academic Project Page + + PAPER_TITLE - AUTHOR_NAMES | Academic Research + + - - + + + - - - - - - - + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + +
+ + +
+ +
+

Academic Project Page

- + First Author*, @@ -65,13 +254,15 @@
- Institution Name
Conferance name and year + + Institution Name
Conference name and year +
*Indicates Equal Contribution
- + @@ -82,7 +273,7 @@ - + @@ -93,7 +284,7 @@ - + @@ -104,7 +295,7 @@ - + @@ -127,11 +318,12 @@
-