GithubHelp home page GithubHelp logo

lopes-gustavo / personal-resume Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 4.66 MB

A react-based resume

Home Page: https://www.gustavo-lopes.me

License: MIT License

JavaScript 5.67% TypeScript 92.69% SCSS 1.64%

personal-resume's People

Contributors

lopes-gustavo avatar

Stargazers

avatar

Watchers

avatar

personal-resume's Issues

Add tooltip to social media

Probably with something like

Idea 1 
<div class="flex min-h-screen items-center justify-center">
  <div x-data="{ tooltip: false }" class="relative z-30 inline-flex">
    <div x-on:mouseover="tooltip = true" x-on:mouseleave="tooltip = false" class="rounded-md px-3 py-2 bg-indigo-500 text-white cursor-pointer shadow">
      Hover over me
    </div>
    <div class="relative" x-cloak x-show.transition.origin.top="tooltip">
      <div class="absolute top-0 z-10 w-32 p-2 -mt-1 text-sm leading-tight text-white transform -translate-x-1/2 -translate-y-full bg-orange-500 rounded-lg shadow-lg">
        Hi, I am Tooltip
      </div>
      <svg class="absolute z-10 w-6 h-6 text-orange-500 transform -translate-x-12 -translate-y-3 fill-current stroke-current" width="8" height="8">
        <rect x="12" y="-10" width="8" height="8" transform="rotate(45)" />
      </svg>
    </div>
  </div>

  <div class="flex items-end justify-end absolute bottom-0 right-0 mb-4 mr-4">
    <div>
      <a title="Buy me a coffee" href="https://www.buymeacoffee.com/rHcLDkY" target="_blank" class="block w-16 h-16">
        <img alt="Buy me a coffee" class="object-cover object-center w-full h-full rounded-full shadow-md hover:shadow-lg" src="https://cdn.dribbble.com/users/3349322/screenshots/14039201/media/616e4ae6995fb288e434c3f0927541ce.png" />
      </a>
    </div>
  </div>
</div>
Idea 2 
<div class="flex items-center justify-center min-h-screen bg-white min-w-screen">
    <div class="relative flex items-center text-gray-500 cursor-pointer hover:text-gray-600" x-data="{ hover: false }"
        @mouseenter="hover = true" @mouseleave="hover = false">
        <p>Hover Me</p>
        <div class="relative">
            <div class="absolute bottom-0 inline-block w-64 px-4 py-3 mb-10 -ml-32 text-white bg-purple-600 rounded-lg"
                x-show="hover" x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="opacity-0 transform scale-90"
                x-transition:enter-end="opacity-100 transform scale-100"
                x-transition:leave="transition ease-in duration-300"
                x-transition:leave-start="opacity-100 transform scale-100"
                x-transition:leave-end="opacity-0 transform scale-90" x-cloak>
                <span class="inline-block text-sm leading-tight">Hello, I'm a quick tooltip that you can drop into any
                    project.</span>
                <span class="absolute bottom-0 right-0 w-5 h-5 -mb-1 transform rotate-45 bg-purple-600"
                    style="left:50%;"></span>
            </div>
            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
        </div>
    </div>
</div>
Idea 3 
<body class="flex items-center justify-center w-screen h-screen">

	<!-- Component Start -->
	<div class="relative flex flex-col items-center group">
		<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
			<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
		</svg>
		<div class="absolute top-0 flex flex-col items-center hidden mt-6 group-hover:flex">
			<div class="w-3 h-3 -mb-2 rotate-45 bg-black"></div>
			<span class="relative z-10 p-2 text-xs leading-none text-white whitespace-no-wrap bg-black shadow-lg">A bottom aligned tooltip.</span>
		</div>
	</div>
	<!-- Component End  -->

</body>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.