Skip to content

Commit b809ac3

Browse files
zhangchen-xuzhangchen-xu
authored
Initial commit
0 parents  commit b809ac3

25 files changed

+3372
-0
lines changed

‎.nojekyll‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎README.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Academic Project Page Template
2+
This is an academic paper project page template.
3+
4+
5+
Example project pages built using this template are:
6+
- https://horwitz.ai/probex
7+
- https://vision.huji.ac.il/probegen
8+
- https://horwitz.ai/mother
9+
- https://horwitz.ai/spectral_detuning
10+
- https://vision.huji.ac.il/ladeda
11+
- https://vision.huji.ac.il/dsire
12+
- https://horwitz.ai/podd
13+
- https://dreamix-video-editing.github.io
14+
- https://horwitz.ai/conffusion
15+
- https://horwitz.ai/3d_ads/
16+
- https://vision.huji.ac.il/ssrl_ad
17+
- https://vision.huji.ac.il/deepsim
18+
19+
20+
21+
## Start using the template
22+
To start using the template click on `Use this Template`.
23+
24+
The template uses html for controlling the content and css for controlling the style.
25+
To edit the websites contents edit the `index.html` file. It contains different HTML "building blocks", use whichever ones you need and comment out the rest.
26+
27+
**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.
28+
29+
## Components
30+
- Teaser video
31+
- Images Carousel
32+
- Youtube embedding
33+
- Video Carousel
34+
- PDF Poster
35+
- Bibtex citation
36+
37+
## Tips:
38+
- The `index.html` file contains comments instructing you what to replace, you should follow these comments.
39+
- The `meta` tags in the `index.html` file are used to provide metadata about your paper
40+
(e.g. helping search engine index the website, showing a preview image when sharing the website, etc.)
41+
- The resolution of images and videos can usually be around 1920-2048, there rarely a need for better resolution that take longer to load.
42+
- 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.
43+
- 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.
44+
- 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.
45+
- This project page can also be made into a github pages website.
46+
- Replace the favicon to one of your choosing (the default one is of the Hebrew University).
47+
- 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)
48+
49+
## Acknowledgments
50+
Parts of this project page were adopted from the [Nerfies](https://nerfies.github.io/) page.
51+
52+
## Website License
53+
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.

‎index.html‎

Lines changed: 312 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,312 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<!-- Meta tags for social media banners, these should be filled in appropriatly as they are your "business card" -->
6+
<!-- Replace the content tag with appropriate information -->
7+
<meta name="description" content="DESCRIPTION META TAG">
8+
<meta property="og:title" content="SOCIAL MEDIA TITLE TAG"/>
9+
<meta property="og:description" content="SOCIAL MEDIA DESCRIPTION TAG TAG"/>
10+
<meta property="og:url" content="URL OF THE WEBSITE"/>
11+
<!-- Path to banner image, should be in the path listed below. Optimal dimenssions are 1200X630-->
12+
<meta property="og:image" content="static/image/your_banner_image.png" />
13+
<meta property="og:image:width" content="1200"/>
14+
<meta property="og:image:height" content="630"/>
15+
16+
17+
<meta name="twitter:title" content="TWITTER BANNER TITLE META TAG">
18+
<meta name="twitter:description" content="TWITTER BANNER DESCRIPTION META TAG">
19+
<!-- Path to banner image, should be in the path listed below. Optimal dimenssions are 1200X600-->
20+
<meta name="twitter:image" content="static/images/your_twitter_banner_image.png">
21+
<meta name="twitter:card" content="summary_large_image">
22+
<!-- Keywords for your paper to be indexed by-->
23+
<meta name="keywords" content="KEYWORDS SHOULD BE PLACED HERE">
24+
<meta name="viewport" content="width=device-width, initial-scale=1">
25+
26+
27+
<title>Academic Project Page</title>
28+
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
29+
<link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro"
30+
rel="stylesheet">
31+
32+
<link rel="stylesheet" href="static/css/bulma.min.css">
33+
<link rel="stylesheet" href="static/css/bulma-carousel.min.css">
34+
<link rel="stylesheet" href="static/css/bulma-slider.min.css">
35+
<link rel="stylesheet" href="static/css/fontawesome.all.min.css">
36+
<link rel="stylesheet"
37+
href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
38+
<link rel="stylesheet" href="static/css/index.css">
39+
40+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
41+
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
42+
<script defer src="static/js/fontawesome.all.min.js"></script>
43+
<script src="static/js/bulma-carousel.min.js"></script>
44+
<script src="static/js/bulma-slider.min.js"></script>
45+
<script src="static/js/index.js"></script>
46+
</head>
47+
<body>
48+
49+
50+
<section class="hero">
51+
<div class="hero-body">
52+
<div class="container is-max-desktop">
53+
<div class="columns is-centered">
54+
<div class="column has-text-centered">
55+
<h1 class="title is-1 publication-title">Academic Project Page</h1>
56+
<div class="is-size-5 publication-authors">
57+
<!-- Paper authors -->
58+
<span class="author-block">
59+
<a href="FIRST AUTHOR PERSONAL LINK" target="_blank">First Author</a><sup>*</sup>,</span>
60+
<span class="author-block">
61+
<a href="SECOND AUTHOR PERSONAL LINK" target="_blank">Second Author</a><sup>*</sup>,</span>
62+
<span class="author-block">
63+
<a href="THIRD AUTHOR PERSONAL LINK" target="_blank">Third Author</a>
64+
</span>
65+
</div>
66+
67+
<div class="is-size-5 publication-authors">
68+
<span class="author-block">Institution Name<br>Conferance name and year</span>
69+
<span class="eql-cntrb"><small><br><sup>*</sup>Indicates Equal Contribution</small></span>
70+
</div>
71+
72+
<div class="column has-text-centered">
73+
<div class="publication-links">
74+
<!-- Arxiv PDF link -->
75+
<span class="link-block">
76+
<a href="https://arxiv.org/pdf/<ARXIV PAPER ID>.pdf" target="_blank"
77+
class="external-link button is-normal is-rounded is-dark">
78+
<span class="icon">
79+
<i class="fas fa-file-pdf"></i>
80+
</span>
81+
<span>Paper</span>
82+
</a>
83+
</span>
84+
85+
<!-- Supplementary PDF link -->
86+
<span class="link-block">
87+
<a href="static/pdfs/supplementary_material.pdf" target="_blank"
88+
class="external-link button is-normal is-rounded is-dark">
89+
<span class="icon">
90+
<i class="fas fa-file-pdf"></i>
91+
</span>
92+
<span>Supplementary</span>
93+
</a>
94+
</span>
95+
96+
<!-- Github link -->
97+
<span class="link-block">
98+
<a href="https://github.com/YOUR REPO HERE" target="_blank"
99+
class="external-link button is-normal is-rounded is-dark">
100+
<span class="icon">
101+
<i class="fab fa-github"></i>
102+
</span>
103+
<span>Code</span>
104+
</a>
105+
</span>
106+
107+
<!-- ArXiv abstract Link -->
108+
<span class="link-block">
109+
<a href="https://arxiv.org/abs/<ARXIV PAPER ID>" target="_blank"
110+
class="external-link button is-normal is-rounded is-dark">
111+
<span class="icon">
112+
<i class="ai ai-arxiv"></i>
113+
</span>
114+
<span>arXiv</span>
115+
</a>
116+
</span>
117+
</div>
118+
</div>
119+
</div>
120+
</div>
121+
</div>
122+
</div>
123+
</section>
124+
125+
126+
<!-- Teaser video-->
127+
<section class="hero teaser">
128+
<div class="container is-max-desktop">
129+
<div class="hero-body">
130+
<video poster="" id="tree" autoplay controls muted loop height="100%">
131+
<!-- Your video here -->
132+
<source src="static/videos/banner_video.mp4"
133+
type="video/mp4">
134+
</video>
135+
<h2 class="subtitle has-text-centered">
136+
Aliquam vitae elit ullamcorper tellus egestas pellentesque. Ut lacus tellus, maximus vel lectus at, placerat pretium mi. Maecenas dignissim tincidunt vestibulum. Sed consequat hendrerit nisl ut maximus.
137+
</h2>
138+
</div>
139+
</div>
140+
</section>
141+
<!-- End teaser video -->
142+
143+
<!-- Paper abstract -->
144+
<section class="section hero is-light">
145+
<div class="container is-max-desktop">
146+
<div class="columns is-centered has-text-centered">
147+
<div class="column is-four-fifths">
148+
<h2 class="title is-3">Abstract</h2>
149+
<div class="content has-text-justified">
150+
<p>
151+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ullamcorper tellus sed ante aliquam tempus. Etiam porttitor urna feugiat nibh elementum, et tempor dolor mattis. Donec accumsan enim augue, a vulputate nisi sodales sit amet. Proin bibendum ex eget mauris cursus euismod nec et nibh. Maecenas ac gravida ante, nec cursus dui. Vivamus purus nibh, placerat ac purus eget, sagittis vestibulum metus. Sed vestibulum bibendum lectus gravida commodo. Pellentesque auctor leo vitae sagittis suscipit.
152+
</p>
153+
</div>
154+
</div>
155+
</div>
156+
</div>
157+
</section>
158+
<!-- End paper abstract -->
159+
160+
161+
<!-- Image carousel -->
162+
<section class="hero is-small">
163+
<div class="hero-body">
164+
<div class="container">
165+
<div id="results-carousel" class="carousel results-carousel">
166+
<div class="item">
167+
<!-- Your image here -->
168+
<img src="static/images/carousel1.jpg" alt="MY ALT TEXT"/>
169+
<h2 class="subtitle has-text-centered">
170+
First image description.
171+
</h2>
172+
</div>
173+
<div class="item">
174+
<!-- Your image here -->
175+
<img src="static/images/carousel2.jpg" alt="MY ALT TEXT"/>
176+
<h2 class="subtitle has-text-centered">
177+
Second image description.
178+
</h2>
179+
</div>
180+
<div class="item">
181+
<!-- Your image here -->
182+
<img src="static/images/carousel3.jpg" alt="MY ALT TEXT"/>
183+
<h2 class="subtitle has-text-centered">
184+
Third image description.
185+
</h2>
186+
</div>
187+
<div class="item">
188+
<!-- Your image here -->
189+
<img src="static/images/carousel4.jpg" alt="MY ALT TEXT"/>
190+
<h2 class="subtitle has-text-centered">
191+
Fourth image description.
192+
</h2>
193+
</div>
194+
</div>
195+
</div>
196+
</div>
197+
</section>
198+
<!-- End image carousel -->
199+
200+
201+
202+
203+
<!-- Youtube video -->
204+
<section class="hero is-small is-light">
205+
<div class="hero-body">
206+
<div class="container">
207+
<!-- Paper video. -->
208+
<h2 class="title is-3">Video Presentation</h2>
209+
<div class="columns is-centered has-text-centered">
210+
<div class="column is-four-fifths">
211+
212+
<div class="publication-video">
213+
<!-- Youtube embed code here -->
214+
<iframe src="https://www.youtube.com/embed/JkaxUblCGz0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
215+
</div>
216+
</div>
217+
</div>
218+
</div>
219+
</div>
220+
</section>
221+
<!-- End youtube video -->
222+
223+
224+
<!-- Video carousel -->
225+
<section class="hero is-small">
226+
<div class="hero-body">
227+
<div class="container">
228+
<h2 class="title is-3">Another Carousel</h2>
229+
<div id="results-carousel" class="carousel results-carousel">
230+
<div class="item item-video1">
231+
<video poster="" id="video1" autoplay controls muted loop height="100%">
232+
<!-- Your video file here -->
233+
<source src="static/videos/carousel1.mp4"
234+
type="video/mp4">
235+
</video>
236+
</div>
237+
<div class="item item-video2">
238+
<video poster="" id="video2" autoplay controls muted loop height="100%">
239+
<!-- Your video file here -->
240+
<source src="static/videos/carousel2.mp4"
241+
type="video/mp4">
242+
</video>
243+
</div>
244+
<div class="item item-video3">
245+
<video poster="" id="video3" autoplay controls muted loop height="100%">\
246+
<!-- Your video file here -->
247+
<source src="static/videos/carousel3.mp4"
248+
type="video/mp4">
249+
</video>
250+
</div>
251+
</div>
252+
</div>
253+
</div>
254+
</section>
255+
<!-- End video carousel -->
256+
257+
258+
259+
260+
261+
262+
<!-- Paper poster -->
263+
<section class="hero is-small is-light">
264+
<div class="hero-body">
265+
<div class="container">
266+
<h2 class="title">Poster</h2>
267+
268+
<iframe src="static/pdfs/sample.pdf" width="100%" height="550">
269+
</iframe>
270+
271+
</div>
272+
</div>
273+
</section>
274+
<!--End paper poster -->
275+
276+
277+
<!--BibTex citation -->
278+
<section class="section" id="BibTeX">
279+
<div class="container is-max-desktop content">
280+
<h2 class="title">BibTeX</h2>
281+
<pre><code>BibTex Code Here</code></pre>
282+
</div>
283+
</section>
284+
<!--End BibTex citation -->
285+
286+
287+
<footer class="footer">
288+
<div class="container">
289+
<div class="columns is-centered">
290+
<div class="column is-8">
291+
<div class="content">
292+
293+
<p>
294+
This page was built using the <a href="https://github.com/eliahuhorwitz/Academic-project-page-template" target="_blank">Academic Project Page Template</a> which was adopted from the <a href="https://nerfies.github.io" target="_blank">Nerfies</a> project page.
295+
You are free to borrow the source code of this website, we just ask that you link back to this page in the footer. <br> This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">Creative
296+
Commons Attribution-ShareAlike 4.0 International License</a>.
297+
</p>
298+
299+
</div>
300+
</div>
301+
</div>
302+
</div>
303+
</footer>
304+
305+
<!-- Statcounter tracking code -->
306+
307+
<!-- You can add a tracker to track page visits by creating an account at statcounter.com -->
308+
309+
<!-- End of Statcounter Code -->
310+
311+
</body>
312+
</html>

‎static/css/bulma-carousel.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)