DEV Community: Anargyros Stylidis

Simple and nice Accordion with framer-motion

Anargyros Stylidis — Thu, 19 Aug 2021 13:51:50 +0000

React Accordion

I have found different accordion examples to be pretty boring and with little code you can bring more life to accordions!

We are using framer motion library and also use Tailwind for styling.

npm install tailwind framer-motion

Below is the whole code for the accordion. Just copy and paste it and you have a lively accordion to use on your website!

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

const Accordion = ({ question, answer }) => {

  const [isOpen, setIsOpen] = useState(false);

  return (
    <motion.div>
      <AnimatePresence>
        <motion.div
          key="question"
          className="rounded-tr-md relative z-20  rounded-br-md shadow-sm px-1 py-2 bg-blue-200 cursor-pointer font-open border-l-2 border-yellow-500"
          onClick={() => setIsOpen(!isOpen)}
        >
          <motion.div className="text-gray-800 font-bold ml-1">
            Do you like animations?
          </motion.div>
        </motion.div>

        {isOpen && (
          <motion.div
            key="answer"
            initial={{ opacity: 0 }}
            animate={{
              opacity: 1,
              transition: {
                duration: 0.5,
              },
            }}
            exit={{ opacity: 0 }}
            className="p-2 text-lg text-gray-700 border-l border-b border-gray-300"
          >
            Yes, I love them!
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  );
};

export default Accordion;

That's it! Simple yet really nice.

Stay around for more free code, drop a follow on twitter where you can ask me any questions and get free resources!
AStylidis

My personal website:
Anargyros Stylidis - Web Developer

Free web dev resources/links

Anargyros Stylidis — Tue, 10 Aug 2021 13:13:10 +0000

Free resources and links for web developers.

Hey, I thought I would share some of my bookmarked sites with free content for all of web developers around here. I use many of them and they saved me a lot of time.

1. React Slideshow

https://www.npmjs.com/package/react-slideshow-image

Simple slideshow for React with straightforward implementation. I've used it before on some of my projects. Looks good and can be customised.

2. Ionicons. Free open-source icons

https://ionic.io/ionicons

Beautiful icons to use on your projects. Many different icons for a lot of uses and even some logos too. One of the best icons websites in a sea of many.

3. Haikei. Patterns generator

https://app.haikei.app/

Useful pattern generator for backgrounds and shapes. Customise to your own needs and then download in PNG or SVG.

4. CSS Gradients

https://cssgradient.io/

A great website to generate your CSS gradients. Pick colors, degrees and more then the code gets generated just below for you to use!

5. Free for devs

https://free-for.dev

Last but not least, a websites with TONS of free resources. From BaaS to hosting and more. This website is a goldmine.

That's it for now, I hope there's people who find this useful.

My personal website:

https://stylidis.io

Drop a follow on Twitter and connect with me!

https://twitter.com/AStylidis

Simple React Dropdown

Anargyros Stylidis — Sat, 07 Aug 2021 09:49:28 +0000

Just a simple dropdown menu that I am using in my project. I wanted to share it with you all because a lot of dropdown examples I searched for had some small issues.

I am using framer-motion library for the animations and it is a NextJS project. I am also using Tailwind for the styles. You can of course remove these, but since it's a famous stack to work with I decided to share the whole code as it is.

Feel free to copy and paste into your own projects!

Let's start with the imports:

import { useState } from "react";
import { motion } from "framer-motion";
import Link from "next/link";

Just copy and paste the following code and everything works fine!

const Dropdown = () => {
  const [shown, setShown] = useState(false);

  const showMenu = {
    enter: {
      opacity: 1,
      y: 0,
      display: "block",
    },
    exit: {
      y: -5,
      opacity: 0,
      transition: {
        duration: 0.3,
      },
      transitionEnd: {
        display: "none",
      },
    },
  };
  return (
    <motion.div
      onHoverStart={() => setShown(true)}
      onHoverEnd={() => setShown(false)}
    >
      <span className="cursor-pointer">Sections</span>
      <motion.ul
        variants={showMenu}
        initial="exit"
        animate={shown ? "enter" : "exit"}
        className="absolute bg-white mt-1 border border-blue-strong border-opacity-50 rounded-sm p-2"
      >
        <Link href="/introduction">
          <motion.li
            whileHover={{
              color: "#FFB703",
              x: 2,
            }}
            className="cursor-pointer p-1 text-blue-primary"
          >
            Introduction
          </motion.li>
        </Link>

        <Link href="/html">
          <motion.li
            whileHover={{
              color: "#FFB703",
              x: 2,
            }}
            className="cursor-pointer p-1 text-blue-primary"
          >
            HTML
          </motion.li>
        </Link>

        <motion.li
          whileHover={{
            color: "#FFB703",
            x: 2,
          }}
          className="cursor-pointer p-1 text-blue-primary"
        >
          CSS
        </motion.li>
        <motion.li
          whileHover={{
            color: "#FFB703",
            x: 2,
          }}
          className="cursor-pointer p-1 text-blue-primary"
        >
          JAVASCRIPT
        </motion.li>
      </motion.ul>
    </motion.div>
  );
};

If you'd like take a look at my website:

https://stylidis.io

Or hit the follow on twitter:

https://twitter.com/AStylidis

My personal website

Anargyros Stylidis — Wed, 04 Aug 2021 10:35:01 +0000

Web developer from Greece

Hey y'all, wanted to share my personal website here with all of you.

Stylidis.io

I've been building it for nearly 2 months. The main reason it took so long is because I changed my mind over how things should look and flow.

I used NextJS paired with Tailwind. They really make for a great combo. Animations are all framer-motion. I searched the web for resources like some artworks and ideas.

Web developer roadmap

I am a self taught developer, I started learning HTML a year ago, June 2020. When I made my first portfolio I used to search blogs and posts like this one to get inspiration. That's the reason I made this post, maybe someone like me sees this and gets inspired to continue.

I have also started working on a new project which is going to be an "opinionated frontend roadmap". It's gonna follow the steps I did to be able to build websites. It's gonna be 100% beginner friendly and a long read. My way of giving bad to the community and only the first of a lot of helper projects I am thinking of doing.

More to come..

Thanks a lot if you read through this, if you wanna connect follow me on Twitter:

@AStylidis

I'll make sure to follow back! I can also answer questions for HTML, CSS, Javascript, React, Next.