wpacademy

Create a modern, responsive portfolio website with dark and light mode. Use indigo, light gray, and white color scheme. Secondary buttons can be black (or different shade of black)

Tech Stack: Use tailwind and NextJS
Typography: Professional Fonts and use some creative ones for headings 
Sections:
Hero (Full width with centered text and CTA buttons, use a glowing gradient blob or shape in the background)
About 2 Column Layout (Image on Right and Text on Left)
Skills (Use animated bars)
Services (6 Cards, 3 per row with icon, title and description)
Projects (A full width carousel, 3 items per slide)

wpacademy

/**
 * Custom Elementor Accordion with 2 Columns and Box Shadow 
 **/
.wpac-accordion .e-n-accordion {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	align-items: start;
}
.wpac-accordion .e-n-accordion-item {

wpacademy

<div class="animatede-circle">
    <div class="outer-ring">
        <img src="outer-circle.svg" alt="Outer Ring">
    </div>
    <div class="icons">
        <img src="icons.png" alt="Icons">
    </div>
    <div class="inner-ring">
        <img src="inner-circle.svg" alt="Inner Ring">
    </div>

wpacademy

/**
* CSS Code for Animated Banner
* Chatbot Landing Page Design Tutorial
* Author: Mian Shahzad Raza
**/
.animated-banner-container {
    height: 600px;
    overflow: hidden;
}
.animated-circle {

wpacademy

/**
* CSS Code for Animated Reviews Slider
* Chatbot Landing Page Design Tutorial
* Author: Mian Shahzad Raza
**/
.animated-reviews {
  text-align: center;
  position: relative;
  z-index: 1;
  background-color: #fff;

wpacademy

.gradient-border .elementor-button:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  /* Increase negative value for border width */
  margin: -1px -2px;

wpacademy

<?php
// Add this to your theme's functions.php file or a custom plugin
function directorist_count_posts_in_taxonomy_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'taxonomy' => 'at_biz_dir-category', // Taxonomy name (e.g., 'category', 'post_tag')
            'term'     => '', // Term slug
        ),
        $atts
    );

wpacademy

.home-search .directorist-search-contents, .home-search .directorist-container-fluid {
    padding: 0;
}
.home-search .directorist-search-form__box {
    flex-direction: column;
    gap: 20px;
}
.home-search .directorist-search-form-top, .home-search .directorist-search-form-action {
    width: 100%;
	padding: 0;

wpacademy

selector {
  aspect-ratio: 1200 / 600; 
  background-color: tomato; 
  mask-image: url("/* SVG URL */");
  -webkit-mask-image: url("/* SVG URL also here */");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100% auto;
  -webkit-mask-size: 100% auto;
  /* mask-size: contain; */

wpacademy

/**
* This is a jQuery code snippet
*/
jQuery(document).ready(function($) {
  $("a.glink span").first().html("");
});