Delilah-Lopez-Portfolio/index.html at main · DLopez43/Delilah-Lopez-Portfolio · 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
    <script src="./index.js"></script>
     <title>Delilah Lopez Portfolio</title>

    <style>
        #typewriter1 {
    font-size: 22px;
    font-family: cursive;
    padding: 10px;
    }
    #typewriter2 {
    font-size: 18px;
    font-family: cursive;
    padding: 10px;
    }
    </style>
</head>
<body>
    <nav id="nav-bar">
        <ul id="nav-links">
            <a href="#hero-section">Home</a>
            <a href="#about">About</a>
            <a href="#projects">Projects</a>
            <a href="#contact">Contacts</a>
        </ul>
    </nav>

    <main>
    <section id="hero-section">
        <div id="typewriter1"></div>
        <div id="typewriter2"></div>
        <div id="img-container">
            <div id="clip-path"></div>
            <img src="./assets/Delilah.jpg" alt="A picture of Delilah Lopez." id="profile-picture">
            <div><a href="https://drive.google.com/file/d/1x9SmxOpAaS6yatf6m6P-CbIHkhUHdFn5/view?usp=sharing"><button id="resume">Resume</button></a></div>
        </div>
    </section>

    <h2>About Me</h2>
    <section id="about">
            <details id="about-card1" class="cards">
                <summary>Where I'm From</summary>
                <p>As a young adult I used to answer this question with 'I'm from NYC.' to avoid judgment but now I welcome that judgment. The correct answer to the question now is, I'm a Bronx Native that grew up in a two bedroom apartment with my Mom, Step-dad, and Sister. My childhood apartment is in the Hunts Point area and I'd claim this fact any day.</p>
            </details>
            <details id="about-card2" class="cards">
                <summary>Where My Career Started</summary>
                <p>My career started far away from Software Engineering at the Lehman College Campus where I received my Bachelor's Degree in Psychology and Creative Writing, followed by a Master's Degree in Education. It was with my Master's Degree that I was blessed with the opportunity to teach Middle School Students for 6 years before my personal goals shifted. I had the absolute pleasure of teaching 6th, 7th, and 8th graders English Language Arts all in the same school year.  </p>
            </details>
            <details id="about-card3" class="cards">
                <summary>The Why Behind My Career Change</summary>
            <p>While my love for my students still remains my personal goals shifted. After teaching during the pandemic remotely and coming face to face with the stark reality of how impactful technology is on society I found myself wanting to cast my net of support and caring beyond my classroom walls. In all honesty my influence as a classroom teacher began to feel like it just wasn't enough. I needed to do more for other teachers and students on a larger scale.</p>
            </details>
            <details id="about-card4" class="cards">
                <summary>Where I'm Going</summary>
            <p>With my new goal in mind, I am searching for a role in an Ed Tech Company that understands the weight it's platform has on learning. In this role I intend on providing insight that I have acquired in my years of teaching to support classrooms holistically. In my vision this looks like creating platforms that are easy to navigate and provide both teachers and students accessible content. These platforms I would work on would allow teachers to focus on what they do best,teach, and give students appropriate entry points so they can be confident people. </p>
            </details>
    </section>

    <h2>Projects</h2>
    <section id="projects">
        <details id="projects-card1" class="cards">
            <summary>Score Keeper</summary>
            <p>As a trivia night lover, I decided to dabble in creating my own score keeper. This is my first project that used JavaScript, Bulma and HTML.</p>
            <a href="https://github.com/DLopez43/score-keeper">
            <img src="./assets/Score-keeper.png" alt="Image of a score tracker for trivia.">
            </a>
        </details>
        <details id="projects-card2" class="cards">
        <summary>Text Adventure Game - <br> 'The Accidental Detective'</summary>
                p>This projects was a fun and imaginitive game I co-created in a two person team. Here we showcased our handle on control-flow tied into creatrive story telling.</p>
                <img src="./assets/Text-adventure.png" alt="Image of first screen in a text adventure game.">
        </details>
        <details id="projects-card3" class="cards">
            <summary>Turn Based Fighting Game - <br> 'The World of MonPal'</summary>
            <p>A turn based fighting game that used whimsy and Vanilla JavaScript to bring it to life.</p>
            <a href="https://github.com/DLopez43/MonPal-Game">
            <img src="./assets/blueprint.png" alt="under construction image">
            </a>
        </details>
        <details id="projects-card4" class="cards">
            <summary>Under Construction</summary>
            <p>While nothing is here yet something is always in the works. New completed work is always on the way. Stay Tuned for updates.</p>
            <img src="./assets/blueprint.png" alt="under construction image">
        </details>
    </section>

    <h2>Contacts</h2>
    <h5>Contact me at:</h5>
    <section id="contact">
        <section id="contact-links">
            <a href="https://github.com/DLopez43">
                <img  class="icon-img"  src="./assets/gitlab.png" alt="link to github">
            </a>
            <a href="https://www.linkedin.com/in/delilah-lopez/">
                <img  class="icon-img"  src="./assets/linkedin.png" alt="link to linkedin">
            </a>
            <a href="mailto: delilah.marinal@gmail.com">
                <img  class="icon-img"  src="./assets/message.png" alt="link to email">
            </a>
        </section>
    </section>
    </main>

    <footer>
         <h6 id="icon-title">All icons found on flaticon.com :</h6>
        <section id="icon-creators">
        <p><a href="https://www.flaticon.com/free-icon/gitlab_17826505?term=github&page=1&position=68&origin=tag&related_id=17826505" title="github icons">Github Icon : Icon Desai</a>
        </p>
        <p><a href="https://www.flaticon.com/free-icon/linkedin_1384072?term=linkedin&page=1&position=44&origin=tag&related_id=1384072" title="linkedin icons">Linkedin icons : Freepik</a>
        </p>
        <p><a href="https://www.flaticon.com/free-icon/message_3062634?term=email&page=1&position=85&origin=search&related_id=3062634" title="email icons">Email icons : Freepik</a>
        </p>
        <p><a href="https://www.flaticon.com/free-icon/blueprint_1433135?term=construction&page=1&position=10&origin=search&related_id=1433135" title="architecture icons">Architecture icons : xnimrodx </a></p>
        </section>
    </footer>

    <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
    <script>
     const typewriter1 = new Typewriter('#typewriter1', {
     strings: ['Hey There, I\'m Delilah!'],
     autoStart: true,
     loop: true
    });
    </script>
    <script>
     const typewriter2 = new Typewriter('#typewriter2', {
     strings: ['A former NYC Middle School Teacher turned Fullstack Engineer.'],
     autoStart: true,
     loop: true
    });
    </script>
</body>
</html>