jayele1.github.io/index.html at master · Jayele1/jayele1.github.io · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Joseph Ayele - Portfolio</title>
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Joseph Ayele's personal portfolio showcasing creative projects, visualizations, paintings, and dreams">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive-nav.css">
</head>
<body>
    <header class="simple-header">
        <div class="header-container">
            <h1 class="name"><a href="pages/aboutMe.html">Joseph Ayele</a></h1>
            <p class="title">Senior Software Engineer</p>
            <p class="location">Brooklyn, NY</p>
        </div>
    </header>

    <main class="portfolio-grid">
        <section class="project-card" data-category="testing">
            <a href="pages/testing.html" class="project-link">
                <div class="project-image">
                    <img src="img/oHappy.gif" alt="Testing project showcase" loading="lazy">
                </div>
                <div class="project-info">
                    <h3 class="project-title">Testing</h3>
                    <p class="project-description">Experimental interactions and explorations</p>
                </div>
            </a>
        </section>

        <section class="project-card" data-category="visualization">
            <a href="http://josephayele.com/PhoneUse/" class="project-link">
                <div class="project-image">
                    <img src="img/phone.png" alt="Phone usage visualization" loading="lazy">
                </div>
                <div class="project-info">
                    <h3 class="project-title">Visualizing</h3>
                    <p class="project-description">Data stories through interactive design</p>
                </div>
            </a>
        </section>

        <section class="project-card" data-category="art">
            <a href="https://www.instagram.com/jayele___/" class="project-link">
                <div class="project-image">
                    <img src="img/open.jpg" alt="Painting and artwork" loading="lazy">
                </div>
                <div class="project-info">
                    <h3 class="project-title">Painting</h3>
                    <p class="project-description">Visual expressions and artistic endeavors</p>
                </div>
            </a>
        </section>

        <section class="project-card" data-category="dreams">
            <a href="pages/dreaming.html" class="project-link">
                <div class="project-image">
                    <img src="img/OldHome.jpg" alt="Dreams and aspirations" loading="lazy">
                </div>
                <div class="project-info">
                    <h3 class="project-title">Dreaming</h3>
                    <p class="project-description">Reflections and future visions</p>
                </div>
            </a>
        </section>
    </main>

    <nav class="social-nav">
        <a href="https://www.linkedin.com/in/joseph-ayele-7393a537/" target="_blank" rel="noopener noreferrer" class="social-link">
            <span class="social-text">LinkedIn</span>
        </a>
        <a href="mailto:josephayele@gmail.com" class="social-link">
            <span class="social-text">Email</span>
        </a>
        <a href="pages/aboutMe.html" class="social-link">
            <span class="social-text">About</span>
        </a>
    </nav>

    <footer class="site-footer">
        <div class="footer-content">
            <p>&copy; 2025 Joseph Ayele • Crafted with curiosity</p>
        </div>
    </footer>

    <script src="js/index.js"></script>
    <script src="js/responsive-nav.min.js"></script>
</body>
</html>