|
| 1 | +--- |
| 2 | +layout: page |
| 3 | +title: Anurag Maurya |
| 4 | +description: LLM for Low Level Robot Action Representation |
| 5 | +img: assets/img/people/ra/anurag_m.jpg |
| 6 | +importance: 3 |
| 7 | +category: Research Assistants |
| 8 | +giscus_comments: true |
| 9 | +github: https://github.com |
| 10 | +linkedin: https://www.linkedin.com |
| 11 | +--- |
| 12 | + |
| 13 | +Every project has a beautiful feature showcase page. |
| 14 | +It's easy to include images in a flexible 3-column grid format. |
| 15 | +Make your photos 1/3, 2/3, or full width. |
| 16 | + |
| 17 | +To give your project a background in the portfolio page, just add the img tag to the front matter like so: |
| 18 | + |
| 19 | + --- |
| 20 | + layout: page |
| 21 | + title: project |
| 22 | + description: a project with a background image |
| 23 | + img: /assets/img/12.jpg |
| 24 | + --- |
| 25 | + |
| 26 | +<div class="row"> |
| 27 | + <div class="col-sm mt-3 mt-md-0"> |
| 28 | + {% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %} |
| 29 | + </div> |
| 30 | + <div class="col-sm mt-3 mt-md-0"> |
| 31 | + {% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %} |
| 32 | + </div> |
| 33 | + <div class="col-sm mt-3 mt-md-0"> |
| 34 | + {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %} |
| 35 | + </div> |
| 36 | +</div> |
| 37 | +<div class="caption"> |
| 38 | + Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles. |
| 39 | +</div> |
| 40 | +<div class="row"> |
| 41 | + <div class="col-sm mt-3 mt-md-0"> |
| 42 | + {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %} |
| 43 | + </div> |
| 44 | +</div> |
| 45 | +<div class="caption"> |
| 46 | + This image can also have a caption. It's like magic. |
| 47 | +</div> |
| 48 | + |
| 49 | +You can also put regular text between your rows of images. |
| 50 | +Say you wanted to write a little bit about your project before you posted the rest of the images. |
| 51 | +You describe how you toiled, sweated, _bled_ for your project, and then... you reveal its glory in the next row of images. |
| 52 | + |
| 53 | +<div class="row justify-content-sm-center"> |
| 54 | + <div class="col-sm-8 mt-3 mt-md-0"> |
| 55 | + {% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %} |
| 56 | + </div> |
| 57 | + <div class="col-sm-4 mt-3 mt-md-0"> |
| 58 | + {% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %} |
| 59 | + </div> |
| 60 | +</div> |
| 61 | +<div class="caption"> |
| 62 | + You can also have artistically styled 2/3 + 1/3 images, like these. |
| 63 | +</div> |
| 64 | + |
| 65 | +The code is simple. |
| 66 | +Just wrap your images with `<div class="col-sm">` and place them inside `<div class="row">` (read more about the <a href="https://getbootstrap.com/docs/4.4/layout/grid/">Bootstrap Grid</a> system). |
| 67 | +To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes. |
| 68 | +Here's the code for the last row of images above: |
| 69 | + |
| 70 | +{% raw %} |
| 71 | + |
| 72 | +```html |
| 73 | +<div class="row justify-content-sm-center"> |
| 74 | + <div class="col-sm-8 mt-3 mt-md-0"> |
| 75 | + {% include figure.liquid path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %} |
| 76 | + </div> |
| 77 | + <div class="col-sm-4 mt-3 mt-md-0"> |
| 78 | + {% include figure.liquid path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %} |
| 79 | + </div> |
| 80 | +</div> |
| 81 | +``` |
| 82 | + |
| 83 | +{% endraw %} |
0 commit comments