portfolio/index.html at main · codinBabe/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
139
140
141
142
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Oluwatoyin</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;900&family=Poppins:wght@400;600;900&display=swap"
    rel="stylesheet">
  <script src="https://kit.fontawesome.com/3e41517785.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="./style.css">
</head>

<body>

  <header class="">
    <div class="container row">
      <button class="nav-toggle" aria-label="open navigation">
        <span class="hamburger"></span>
      </button>
      <a href="#" class=""><img src="./images/Logo.png" alt="logo" class="logo" /></a>
      <nav class="nav">
        <ul class="nav__list">
          <li class="list__item"><a href="#home" class="nav__link">Home</a></li>
          <li class="list__item"><a href="#About" class="nav__link">About</a></li>
          <li class="list__item"><a href="#service" class="nav__link">Services</a></li>
          <li class="list__item"><a href="#contact" class="nav__link">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <section id="home" class="hero">
    <div class="container row">
      <div class="hero__text">
        <h4 class="sub__title">HELLO, MY NAME IS</h4>
        <h1>Oluwatoyin Oredein</h1>
        <p>
          a passionate and dynamic software engineer, who loves to bake. I am based in Lagos, Nigeria.
        </p>
        <button class="work"><a href="https://github.com/codinBabe" class="cv">My work</a></button>
      </div>

      <div class="hero__img">
        <img class="myimg" src="./images/Oluwatoyin.png" alt="oluwatoyin picture" />
      </div>
    </div>
  </section>
  <main id="About" class=" main container row">
    <div class="main__text">
      <h2>About me</h2>
      <h4>Howdy!</h4>
      <p>
        I am a fast-growing software engineer, fueled by a passion for cutting-edge technologies and a relentless drive
        to
        create impactful solutions. With a keen eye for detail and a knack for pushing boundaries, I thrive on turning
        complex
        challenges into elegant, user-centric experiences.
      </p>
      <button class="work"><a class="cv"
          href="https://drive.google.com/file/d/1OvbHVUEi43OJCieXEibk69uJSRKoOHre/view?usp=sharing">Download
          CV</a></button>
    </div>
    <div class="skills">
      <div class="bar front expert" data-skill="HTML5"></div>
      <div class="bar front advanced" data-skill="CSS3"></div>
      <div class="bar front advanced" data-skill="C"></div>
      <div class="bar front advanced" data-skill="JAVASCRIPT"></div>
    </div>
  </main>
  <section id="service" class="ido">
    <div class="container">
      <h2 class="service__title">Services</h2>
      <div class="row col">
        <div class="service__content research ">
          <h3>UX Research</h3>
          <p>to create products and experiences that are intuitive, user-friendly, and align with the users'
            expectations.</p>
        </div>
        <div class="service__content web-dev">
          <h3>Web Development</h3>
          <p>creating websites that adapt and display well on various devices and screen sizes, such as desktops,
            tablets, and
            smartphones.</p>
        </div>
      </div>
      <div class="row col">
        <div class="service__content app-design">
          <h3>App Design</h3>
          <p> creating awesome user experience (UX) and user interface (UI) design to craft engaging and intuitive app
            experiences.</p>
        </div>
        <div class="service__content web-design">
          <h3>Web Design</h3>
          <p> combining aesthetics and functionality to deliver a seamless user experience.</p>
        </div>
      </div>
    </div>

  </section>
  <section id="contact" class="container">
    <div class="row">
      <div class="contact__content">
        <h2>Let's get in touch</h2>
        <P>Do you want to hire me or collaborate with me on a project?</P>
        <ul class=" contact__list">
          <li class="contact__items"><i class="fas fa-phone"></i>
            <h4 class="contact__text">Phone<br> <span>+2348089612363</span></h4>
          </li>
          <li class="contact__items"><i class="fas fa-envelope"></i>
            <h4 class="contact__text">Email <br> <span>teboola@yahoo.com</span></h4>
          </li>
          <li class="contact__items"><i class="fas fa-university"></i>
            <h4 class="contact__text">Location<br> <span>Lagos, Nigeria.</span></h4>
          </li>
        </ul>
      </div>
      <div class="input">
        <input type="text" class="name" placeholder="Your Name" id="required">
        <input type="email" class="email" placeholder="Your Email" id="required">
        <textarea name="Message" class="message" placeholder="Your Message" id="required" cols="40"
          rows="10"></textarea>
        <input type="button" class="submit" value="send message">
      </div>
    </div>
  </section>
  <footer class="copyright">
    <div class="container">
      <a class="social__link" href="https://www.linkedin.com/in/oluwatoyin-oredein-15812418a/">LinkedIn</a>
      <a class="social__link" href="https://twitter.com/tozim_bakes">Twitter</a>
      <a class="social__link" href="https://github.com/teboola">Github</a>
      <p class="right">Copyright &#169 <span id="year">2022</span> Oluwatoyin </p>
    </div>
  </footer>
</body>
<script src="./main.js"></script>

</html>