templates/website/pages/home.html.twig line 1

Open in your IDE?
  1. {% extends 'website/base.html.twig' %}
  3. {% block title %}Home{% endblock %}
  5. {% block css %}
  6.     <style>
  7.         @property --p {
  8.             syntax: '<number>';
  9.             inherits: true;
  10.             initial-value: 1;
  11.         }
  13.         .pie {
  14.             --p: 20; /* the percentage */
  15.             --b: 22px; /* the thickness */
  16.             --c: conic-gradient(#933eff, #3e74ff); /* the color */
  17.             --w: 150px; /* the size*/
  19.             width: var(--w);
  20.             aspect-ratio: 1;
  21.             position: relative;
  22.             display: inline-grid;
  23.             margin: 5px;
  24.             place-content: center;
  25.             font-size: 25px;
  26.             font-weight: bold;
  27.             font-family: sans-serif;
  28.         }
  30.         .pie:before {
  31.             content: "";
  32.             position: absolute;
  33.             inset: 0;
  34.             background: red;
  35.             padding: var(--b);
  36.             box-sizing: border-box;
  37.             background: var(--c);
  38.             mask: linear-gradient(#0000 0 0) content-box intersect,
  39.             conic-gradient(#000 calc(var(--p) * 1%), #0000 0);
  40.         }
  42.         .pie:before,
  43.         .pie:after {
  44.             content: "";
  45.             position: absolute;
  46.             border-radius: 50% !important;
  47.         }
  49.         .animate1 {
  50.             animation: p 1.5s .3s both;
  51.             animation-iteration-count: 1;
  52.         }
  54.         .animate2 {
  55.             animation: p 1.5s .6s both;
  56.             animation-iteration-count: 1;
  57.         }
  59.         .animate3 {
  60.             animation: p 1.5s .9s both;
  61.             animation-iteration-count: 1;
  62.         }
  64.         .animate4 {
  65.             animation: p 1.5s 1.2s both;
  66.             animation-iteration-count: 1;
  67.         }
  69.         .animate5 {
  70.             animation: p 1.5s 1.5s both;
  71.             animation-iteration-count: 1;
  72.         }
  74.         .animate6 {
  75.             animation: p 1.5s 1.8s both;
  76.             animation-iteration-count: 1;
  77.         }
  79.         .no-round:before {
  80.             background-size: 0 0, auto;
  81.         }
  83.         .no-round:after {
  84.             content: none;
  85.         }
  87.         @keyframes p {
  88.             from {
  89.                 --p: 0;
  90.             }
  91.         }
  93.     </style>
  94. {% endblock %}
  96. {% block body %}
  98.     <!--==========
  99.         Start of banner section ==========-->
  101.     <section class="position-relative banner-creative bg-fit" data-jarallax='{"speed": 10}'
  102.              style="background-color: #121214;">
  103.         <div class="position-absolute" style="right: 0;
  104.                                               z-index: 0;
  105.                                               bottom: 0;
  106.                                               min-width: 100%;
  107.                                               min-height: 100%;">
  108.             <video autoplay muted loop playsinline>
  109.                 <source src="{{ asset('assets/images/background/hero-section.webm') }}" type="video/webm">
  110.                 Your browser does not support the video tag.
  111.             </video>
  112.         </div>
  113.         <div class="container overflow-hidden ">
  114.             <div class="swiper-container-animation swiper-button-pink-gradient">
  115.                 <div class="swiper-wrapper">
  116.                     <div class="swiper-slide" data-hash="slide1">
  118.                         <!--===== Start of row =====-->
  119.                         <div class="row">
  120.                             <div class="col-lg-12 text-center">
  121.                                 {# <span class="lead d-block fw-bold text-pink-gradient" #}
  122.                                 {# data-swiper-animation="fadeInUp" data-delay="1s" #}
  123.                                 {# data-duration="1s">Get To Know Me</span> #}
  124.                                 <h2 class="text-white display-2 mt-4"
  125.                                     data-swiper-animation="fadeInUp" data-delay="1s" data-duration="1s">Lets Bring Ideas
  126.                                     Into
  127.                                     Life.</h2>
  128.                                 <div class="text-center"
  129.                                      data-swiper-animation="fadeInUp" data-delay="1s" data-duration="1s">
  130.                                     <a class="btn btn-light mt-5 me-4 btn-rounded" href="#portfo_showreel"> Discover
  131.                                         more </a>
  132.                                 </div>
  133.                             </div>
  134.                         </div>
  135.                     </div>
  136.                 </div>
  137.             </div>
  138.         </div>
  139.     </section>
  141.     <section class="slice-ptb bg-black" id="portfo_showreel">
  142.         <div class="container">
  144.             <!--===== Start of row =====-->
  145.             <div class="row">
  146.                 <div class="col-lg-12">
  147.                     <h3 class="text-pink-gradient">Portfolio Showreel</h3>
  148.                 </div>
  149.             </div>
  150.             <!--===== End of row =====-->
  152.             <div class="row">
  153.                 <div class="col-lg-6 col-12 mb-lg-0 mb-4">
  154.                     <p class="text-white mt-3" style="text-align: justify">My portfolio showreel is a curated collection
  155.                         of my most engaging motion graphics, animations, and design projects. Each piece highlights my
  156.                         passion for storytelling through dynamic visuals, blending creativity and technical skill to
  157.                         bring ideas to life. This showcase reflects my dedication to crafting impactful and visually
  158.                         compelling work.</p>
  159.                 </div>
  160.                 <div class="col-lg-6 col-12 mb-lg-0 mb-4">
  161.                     <video class="rounded" controls width="100%" height="100%"
  162.                            poster="{{ asset('assets/images/background/showreel-cover.webp') }}">
  163.                         <source src="{{ asset('assets/images/background/showreel.webm') }}" type="video/webm">
  164.                     </video>
  165.                 </div>
  166.             </div>
  167.         </div>
  168.     </section>
  170.     <section class="slice-pt overflow-hidden">
  171.         <div class="container">
  172.             <div class="row justify-content-center">
  173.                 <div class="col-lg-6">
  174.                     <div class="text-center mb-5">
  175.                         <span class="text-pink-gradient">Featured Works</span>
  176.                         <h2>Have a project in mind? Let’s build it.</h2>
  177.                     </div>
  178.                 </div>
  179.             </div>
  180.             <div class="row">
  181.                 <div class="col-12">
  182.                     <div class="outside-box-right">
  183.                         <div class="swiper-container swiper-container-auto" data-slidesPerView="3"
  184.                              data-laptop-slidesPerView="2" data-tablet-slidesPerView="2" data-mobile-slidesPerView="1"
  185.                              data-spaceBetween="20" data-loop="true" data-autoplay="true" data-auto-speed="2500"
  186.                              data-disable-on-touch="false" data-dots="true" data-auto-height="false"
  187.                              data-pagination="true" data-navigation="true">
  188.                             <div class="swiper-wrapper">
  189.                                 {% set i = 1 %}
  190.                                 {% for portfolio in portfolios %}
  192.                                     <div class="swiper-slide">
  194.                                         <!--===== Start of portfolio =====-->
  195.                                         <div class="portfolio-item-stack portfolio-item-stack-light">
  196.                                             <div class="portfolio-image">
  197.                                                 <img class="img-fluid rounded"
  198.                                                      src="{{ asset(portfolio.image) }}" alt="{{ portfolio.image_alt }}">
  199.                                             </div>
  200.                                             <div class="portfolio-caption portfolio-caption-bottom">
  201.                                                 <h3>
  202.                                                     <a class="portfolio-title"
  203.                                                        href="{{ path('website.portfolio_detail',{'slug':portfolio.slug}) }}">
  204.                                                         {{ portfolio.name }}
  205.                                                     </a>
  206.                                                 </h3>
  207.                                                 <ul class="portfolio-category list-unstyled">
  208.                                                     <li>
  209.                                                         <a href="{{ path('website.portfolio') }}">{{ portfolio.category }}</a>
  210.                                                     </li>
  211.                                                 </ul>
  212.                                             </div>
  213.                                         </div>
  214.                                         <!--===== End of portfolio =====-->
  216.                                     </div>
  217.                                     {% set i = i + 1 %}
  218.                                 {% endfor %}
  219.                             </div>
  220.                         </div>
  221.                     </div>
  222.                 </div>
  223.             </div>
  224.         </div>
  225.     </section>
  227.     <section class="slice-ptb">
  228.         <div class="container">
  229.             <div class="row justify-content-center">
  230.                 <div class="col-md-6 col-12 mt-3">
  231.                     <div class="flip-box" data-min-height="400" data-flip-direction="horizontal-to-left"
  232.                          data-v_text_align="center">
  233.                         <div class="flip-box-front overlay-black-50">
  234.                             <div class="inner px-5">
  235.                                 <i class="feather icon-monitor fa-4x text-pink-gradient"></i>
  236.                                 <h4 class="text-white">Motion Design</h4>
  237.                             </div>
  238.                         </div>
  239.                         <div class="flip-box-back text-center bg-pink-gradient">
  240.                             <div class="inner p-5">
  241.                                 <p class="text-white">A collection of animations that combine creativity and
  242.                                     storytelling to bring ideas to life. From seamless transitions to eye-catching
  243.                                     visuals, these works showcase the power of motion in delivering impactful
  244.                                     narratives.</p>
  245.                                 <a href="{{ path('website.portfolio') }}" class="btn btn-light mt-5 me-4 btn-rounded">
  246.                                     View Portfolio
  247.                                 </a>
  248.                             </div>
  249.                         </div>
  250.                     </div>
  251.                 </div>
  252.                 <div class="col-md-6 col-12 mt-3">
  253.                     <div class="flip-box" data-min-height="400" data-flip-direction="horizontal-to-left"
  254.                          data-v_text_align="center">
  255.                         <div class="flip-box-front overlay-black-50">
  256.                             <div class="inner px-5">
  257.                                 <i class="feather icon-video fa-4x text-pink-gradient"></i>
  258.                                 <h4 class="text-white">Video Editing</h4>
  259.                             </div>
  260.                         </div>
  261.                         <div class="flip-box-back text-center bg-pink-gradient">
  262.                             <div class="inner p-5">
  263.                                 <p class="text-white">Showcasing the art of assembling visuals into cohesive stories.
  264.                                     This work demonstrates a focus on timing, aesthetics, and storytelling to create
  265.                                     memorable and engaging video content.</p>
  266.                                 <a href="{{ path('website.portfolio') }}" class="btn btn-light mt-5 me-4 btn-rounded">
  267.                                     View Portfolio
  268.                                 </a>
  269.                             </div>
  270.                         </div>
  271.                     </div>
  272.                 </div>
  273.                 <div class="col-md-6 col-12 mt-3">
  274.                     <div class="flip-box" data-min-height="400" data-flip-direction="horizontal-to-left"
  275.                          data-v_text_align="center">
  276.                         <div class="flip-box-front overlay-black-50">
  277.                             <div class="inner px-5">
  278.                                 <i class="feather icon-target fa-4x text-pink-gradient"></i>
  279.                                 <h4 class="text-white">Promotional Videos</h4>
  280.                             </div>
  281.                         </div>
  282.                         <div class="flip-box-back text-center bg-pink-gradient">
  283.                             <div class="inner p-5">
  284.                                 <p class="text-white">Promotional content crafted to highlight products and brands with
  285.                                     creativity and precision. These videos are designed to captivate audiences, blending
  286.                                     visuals and messaging for maximum impact.</p>
  287.                                 <a href="{{ path('website.portfolio') }}" class="btn btn-light mt-5 me-4 btn-rounded">
  288.                                     View Portfolio
  289.                                 </a>
  290.                             </div>
  291.                         </div>
  292.                     </div>
  293.                 </div>
  294.                 <div class="col-md-6 col-12 mt-3">
  295.                     <div class="flip-box" data-min-height="400" data-flip-direction="horizontal-to-left"
  296.                          data-v_text_align="center">
  297.                         <div class="flip-box-front overlay-black-50">
  298.                             <div class="inner px-5">
  299.                                 <i class="feather icon-smartphone fa-4x text-pink-gradient"></i>
  300.                                 <h4 class="text-white">UI Design</h4>
  301.                             </div>
  302.                         </div>
  303.                         <div class="flip-box-back text-center bg-pink-gradient">
  304.                             <div class="inner p-5">
  305.                                 <p class="text-white">User interfaces designed to balance aesthetics and functionality.
  306.                                     These projects emphasize intuitive navigation and visually compelling elements to
  307.                                     create engaging digital experiences.</p>
  308.                                 <a href="{{ path('website.portfolio') }}" class="btn btn-light mt-5 me-4 btn-rounded">
  309.                                     View Portfolio
  310.                                 </a>
  311.                             </div>
  312.                         </div>
  313.                     </div>
  314.                 </div>
  315.             </div>
  316.         </div>
  317.     </section>
  319.     <section id="about" class="slice-ptb overflow-hidden">
  320.         <div class="container">
  321.             <!--===== Start of row =====-->
  322.             <div class="row">
  323.                 <div class="col-lg-6 mb-lg-0 mb-5">
  324.                     <h2 class=" mt-3 mb-3">About Me</h2>
  325.                     <p style="text-align: justify">
  326.                         I’m a designer with a passion for motion graphics and digital storytelling. My journey started
  327.                         with a bachelor’s in Industrial Design, where I focused on graphic design, interior design and
  328.                         retail design, and it led me to a master’s in Digital Design, specializing in motion graphics
  329.                         and animation. I love bringing ideas to life through dynamic visuals and animation. Whether it’s
  330.                         creating engaging video content or crafting eye-catching graphics, I’m all about making designs
  331.                         that tell a story.
  332.                     </p>
  333.                 </div>
  334.                 <div class="col-lg-6 text-right">
  335.                     <div class="team-item text-center">
  336.                         <div class="team-image">
  337.                             <img width="300px" height="auto" class="rounded"
  338.                                  src="{{ asset('assets/images/background/shima-amini.jpg') }}" alt="">
  339.                             <ul class="list-unstyled team-social d-flex justify-content-center">
  340.                                 <li><a href="mail:shima.aminii1998@gmail.com"> <i class="fa fa-mail-bulk"></i> </a></li>
  341.                                 <li><a target="_blank" href="http://www.linkedin.com/in/shima-amini-harandi-36a77b216">
  342.                                         <i
  343.                                                 class="fab fa-linkedin-in"></i> </a></li>
  344.                             </ul>
  345.                         </div>
  346.                         <div class="team-caption mt-3">
  347.                             <h5 class="mb-1">Shima Amini</h5>
  348.                             <span>Motion Designer</span>
  349.                         </div>
  350.                     </div>
  351.                 </div>
  352.             </div>
  353.             <div class="row text-center mt-5">
  354.                 <h2 class="mt-3 mb-3" style="text-align: left">Skills</h2>
  355.                 <div class="col-lg-2 col-6 mt-4">
  356.                     <div class="pie animate1" style="--p:80;">Ae</div>
  357.                 </div>
  358.                 <div class="col-lg-2 col-6 mt-4">
  359.                     <div class="pie animate2" style="--p:60;">Pr</div>
  360.                 </div>
  361.                 <div class="col-lg-2 col-6 mt-4">
  362.                     <div class="pie animate3" style="--p:75;">Ps</div>
  363.                 </div>
  364.                 <div class="col-lg-2 col-6 mt-4">
  365.                     <div class="pie animate4" style="--p:75;">Ai</div>
  366.                 </div>
  367.                 <div class="col-lg-2 col-6 mt-4">
  368.                     <div class="pie animate5" style="--p:80;">Xd</div>
  369.                 </div>
  370.                 <div class="col-lg-2 col-6 mt-4">
  371.                     <div class="pie animate6" style="--p:75;">Id</div>
  372.                 </div>
  373.             </div>
  374.         </div>
  375.     </section>
  377.     <section class="slice-pt bg-black">
  378.         <div class="container">
  380.             <!--===== Start of row =====-->
  381.             <div class="row">
  382.                 <div class="col-lg-12">
  383.                     <span class="text-pink-gradient">My Workflow</span>
  384.                     <h2 class="text-white mt-3" style="text-align: justify">Every project starts with a clear and
  385.                         structured process to ensure quality and creativity. From understanding the concept to
  386.                         delivering the final piece, my workflow is designed to bring ideas to life with precision and
  387.                         originality. Each step is carefully considered to produce a polished result that aligns with the
  388.                         project goals.</h2>
  389.                 </div>
  390.             </div>
  391.             <!--===== End of row =====-->
  393.             <div class="row py-5 py-lg-8">
  394.                 <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4">
  395.                     <span class="display-3">01</span>
  396.                     <h4 class="text-white mt-4">Research </h4>
  397.                     <p class="text-white my-3" style="text-align: justify-all">
  398.                         The research phase involves gathering insights, understanding the project’s goals, and exploring
  399.                         relevant trends and references to inform the design direction.
  400.                     </p>
  401.                 </div>
  402.                 <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4">
  403.                     <span class="display-3">02</span>
  404.                     <h4 class="text-white mt-4">Develop</h4>
  405.                     <p class="text-white my-3" style="text-align: justify-all">During development, ideas are transformed
  406.                         into concepts, refining visuals
  407.                         and exploring various design possibilities to create a functional and creative solution.</p>
  408.                 </div>
  409.                 <div class="col-lg-3 col-sm-6 mb-sm-0 mb-4">
  410.                     <span class="display-3">03</span>
  411.                     <h4 class="text-white mt-4">Correction </h4>
  412.                     <p class="text-white my-3" style="text-align: justify-all">In the correction phase, feedback is applied
  413.                         to refine the design, making
  414.                         necessary adjustments to ensure it meets the project’s objectives and quality standards.</p>
  415.                 </div>
  416.                 <div class="col-lg-3 col-sm-6">
  417.                     <span class="display-3">04</span>
  418.                     <h4 class="text-white mt-4" style="text-align: justify">Finalize</h4>
  419.                     <p class="text-white my-3" style="text-align: justify-all">The final stage focuses on bringing everything together, preparing the
  420.                         design for presentation or delivery, ensuring a professional and cohesive result.</p>
  421.                 </div>
  422.             </div>
  423.         </div>
  424.     </section>
  426. {% endblock %}
  428. {% block js %}
  429.     <script>
  430.         $(document).ready(function() {
  431.             observerAnimation('animate1')
  432.             observerAnimation('animate2')
  433.             observerAnimation('animate3')
  434.             observerAnimation('animate4')
  435.             observerAnimation('animate5')
  436.             observerAnimation('animate6')
  438.         });
  440.         function observerAnimation(name)
  441.         {
  442.             const element = document.querySelector('.'+name);
  443.             const observer = new IntersectionObserver(entries => {
  444.                 element.classList.toggle(name, entries[0].isIntersecting);
  445.             });
  447.             observer.observe(element);
  448.         }
  449.     </script>
  450. {% endblock %}