etsoftwaretailwindpro/aboutme.html at main · ISHUBTEAM/etsoftwaretailwindpro · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me - Blen Gebre</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
     <link href="./src/output.css" rel="stylesheet">
</head>
<body class="bg-gray-950">
    <header class="bg-black h-20 w-full shadow-sm shadow-cyan-50 static">

        <ul class="flex justify-end items-center text-white space-x-20 p-2 text-xl mx-5">
             <li> <h4 class="text-orange-400 textbo items-center justify-start  p-5 text-xl mr-250 ">Blen</h4></li>
            <li class=" hover:text-cyan-300 underline decoration-blue-200 shadow-lg shadow-cyan-500/50  transition delay-150 duration-300 ease-in-out hover:-translate-y-1  hover:border-1 rounded-0  border-black"><a href="index.html">Home</a></li>
            <li class=" hover:text-cyan-400 underline decoration-blue-200 shadow-lg shadow-cyan-500/50 transition "><a href="./aboutme.html">about Me</a></li>
            <li class=" hover:text-cyan-400 underline decoration-blue-200 shadow-lg shadow-cyan-500/50"><a href="/skill.html">Skills</a></li>
            <li class=" hover:text-cyan-400 underline decoration-blue-200 shadow-lg shadow-cyan-500/50 border-black "><a href="./contact.html">Contact</a></li>
    </header>

    <section class="scroll-auto ">
        <div class="about-content">
            <h1 class="text-orange-400 text-[60px] flex justify-center items-center py-[20px]">About <span class="text-white">Me</span></h1>

         <div class="grid grid-cols-2   gap-x-4 gap-y-10  mx-auto text-white  ml-[400px] " >


                <div class="border-2 border-black  rounded-2xl bg-gray-900 w-[400px] h-[300px] p-[20px] shadow-lg shadow-blue-300  transition delay-150 duration-300 ease-in-out hover:-translate-y-2 hover:cursor-pointer">
                    <i class="fas fa-user-graduate fa-3x"></i>
                    <h3 class="">My Journey</h3>
                    <p>I'm a passionate software developer who discovered my love for creating digital experiences through code. My journey began with curiosity about how websites work and evolved into a deep passion for building user-friendly applications that solve real-world problems.</p>
                </div>

                <div class="border-2 border-black  rounded-2xl bg-gray-900 w-[400px] h-[300px] p-[20px] shadow-lg shadow-blue-300  transition delay-150 duration-300 ease-in-out hover:-translate-y-2 hover:cursor-pointer">
                    <i class="fas fa-code fa-3x"></i>
                    <h3>What I Do</h3>
                    <p>As a frontend developer, I specialize in creating responsive, accessible, and beautiful web interfaces. I love turning complex problems into simple, elegant solutions that users love to interact with.</p>
                </div>

                <div class="border-2 border-black  rounded-2xl bg-gray-900 w-[400px] h-[300px] p-[20px] shadow-lg shadow-blue-300  transition delay-150 duration-300 ease-in-out hover:-translate-y-2 hover:cursor-pointer">
                    <i class="fas fa-lightbulb fa-3x"></i>
                    <h3>My Approach</h3>
                    <p>I believe in writing clean, maintainable code and always putting the user experience first. Every project I work on is an opportunity to learn something new and push the boundaries of what's possible on the web.</p>
                </div>

                <div class="border-2 border-black  rounded-2xl bg-gray-900 w-[400px] h-[300px] p-[20px] shadow-lg shadow-blue-300 transition delay-150 duration-300 ease-in-out hover:-translate-y-2 hover:cursor-pointer">
                    <i class="fas fa-code fa-3x"></i>
                    <h3>Future Goals</h3>
                    <p>I'm constantly learning and expanding my skills. My goal is to become a full-stack developer and eventually lead teams in creating innovative digital solutions that make a positive impact on people's lives.</p>
                </div>
            </div>

        <div class="border-1 border-amber-600 w[800px] h-[300px] m-[100px] rounded-3xl text-white  t">
                <h2 class="text-4xl flex justify-center  p-[20px]">When I'm Not Coding...</h2>
                <p class="flex justify-center w-[1000px] pl-[400px] text-[20px] mb-[20px]">I enjoy exploring new technologies, contributing to open-source projects, and staying up-to-date with the latest web development trends. I also love connecting with other developers and sharing knowledge within the community.</p>


               <div class="flex flex-wrap justify-center gap-3">
          <span class="px-4 py-2 rounded-2xl bg-amber-700">Web Development</span>
          <span class="px-4 py-2 rounded-2xl bg-amber-700">UI/UX Design</span>
          <span class="px-4 py-2 rounded-2xl bg-amber-700">Mobile Apps</span>
          <span class="px-4 py-2 rounded-2xl bg-amber-700">Open Source</span>
          <span class="px-4 py-2 rounded-2xl bg-amber-700">Learning</span>
        </div>
            </div>


        </div>
    </section>
</body>
</html>