Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikee210521
mikee210521 committed Jan 19, 2024
0 parents commit e907f14
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 0 deletions.
Binary file added assets/brand.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/dgz.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 40 additions & 0 deletions assets/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
const API = 'https://dragonball-api.com/api/characters';

const content = document.getElementById("content");

const options ={
method: 'GET',
headers: {
'content-type': 'application/json'
}
};

async function fetchData(urlApi){
const response = await fetch(urlApi,options);
return await response.json();
}

(async ()=>{
try {
const characters = await fetchData(API);
let view = `
${characters.items.map(characters => `
<div class="group relative">
<div
class="w-17 overflow-hidden group-hover:opacity-75 lg:aspect-none cursor-pointer">
<img src="${characters.image}" alt="${characters.description}" class="w-full">
</div>
<div class="mt-4 flex justify-between">
<h3 class="text-4xl font-extrabold inset-0 text-orange-600">
${characters.name}
</h3>
</div>
</div>
`).slice(0, 10).join('')}
`;
content.innerHTML = view;
}catch (e){
console.log(e);

}
})();
Binary file added assets/photo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
101 changes: 101 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="./assets/main.js"></script>
<title>LandingPage</title>
</head>

<body>
<div class="relative bg-white overflow-hidden">
<div class="max-w-7xl mx-auto">
<div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
<svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2"
fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
<polygon points="50,0 100,0 50,100 0,100" />
</svg>
<div>
<div class="relative pt-6 px-4 sm:px-6 lg:px-8">
<nav class="relative flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global">
<div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
<div class="flex items-center justify-between w-full md:w-auto">
<a target="_blank" rel="noopener noreferrer" href="https://web.dragonball-api.com/">
<img class="h-8 w-auto sm:h-10" src="./assets/brand.png">
</a>
</div>
</div>
<div class="hidden md:block md:ml-10 md:pr-4 md:space-x-8">
<a target="_blank" rel="noopener noreferrer" href="https://mi-portafolio-gilt.vercel.app/" class="font-medium text-gray-500 hover:text-gray-900">Briefcase</a>

</div>
</nav>
</div>
</div>

<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
<div class="sm:text-center lg:text-left">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span class="block xl:inline ">Angel Nuñez</span>
<span class="block text-orange-600 xl:inline"><a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/miguel-angel-nu%C3%B1ez-dominguez/">@AngelN</a></span>
</h1>
<p
class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
I enjoy the web development field with frameworks like React.js and Vue.js. I appreciate the process of creating functional and user-friendly projects, using Figma to assist in interface design.🎨</p>
</div>
</main>
</div>
</div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-200">
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full"
src="./assets/dgz.png" alt="photo">
</div>
</div>
<div class="bg-white">
<div class="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
<h2 class="text-2xl font-extrabold tracking-tight text-gray-900">Dragon Ball Z Characters</h2>

<div class="mt-6 grid grid-cols-1 gap-y-20 gap-x-20 sm:grid-cols-2 lg:grid-cols-5 xl:gap-x-10"
id="content"
>
<!-- content -->
</div>

</div>
</div>
<div class="bg-gray-50">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
<span class="block">Contact</span>
<span class="block text-orange-600" >keep in touch.</span>
</h2>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<!-- Icono de GitHub -->
<a href="https://github.com/mikee210521" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-1 0 26 22" stroke="currentColor"
class="h-10 w-10 text-gray-500 hover:text-gray-700">
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.207 11.387.6.11.793-.258.793-.577 0-.284-.01-1.22-.015-2.214-3.22.702-3.893-1.54-3.893-1.54-.527-1.337-1.287-1.696-1.287-1.696-1.054-.719.08-.704.08-.704 1.17.083 1.787 1.203 1.787 1.203 1.04 1.787 2.73 1.203 3.394.92.105-.754.405-1.203.736-1.477-2.57-.293-5.268-1.286-5.268-5.718
0-1.264.45-2.295 1.203-3.103-.12-.29-.522-1.47.114-3.062 0 0 1.003-.31 3.284 1.187a11.12 11.12 0 0 1 2.95-.4c1.002.008 2.005.134 2.95.4 2.28-1.497 3.282-1.187 3.282-1.187.638 1.592.234 2.772.114 3.062.753.808 1.203 1.84 1.203 3.103 0 4.444-2.7 5.425-5.276 5.715.413.358.78 1.066.78 2.147 0 1.55-.014 2.799-.014 3.182 0 .319.192.692.8.576C20.565
21.797 24 17.297 24 12c0-6.63-5.37-12-12-12z" style="stroke-width: 2;"/>

</svg>
</a>

<!-- Icono de Correo Electrónico -->
<a href="mailto:[email protected]" class="ml-4">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 -24 24 24" stroke="currentColor"
class="h-11 w-11 text-gray-500 hover:text-gray-700">
<path stroke-width="2"
d="M20 6L10 12 20 19zM4 4v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2z"
style="transform: rotate(-90deg);"/>
</svg>
</a>
</div>

</div>
</div>
</body>

</html>

0 comments on commit e907f14

Please sign in to comment.