SimplePortfolio.github.io/index.html at main · aeff60/SimplePortfolio.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
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
<!DOCTYPE html>
<html>
  <head>
    <title>My Portfolio</title>
    <link rel="stylesheet" href="assets/css/style.css" />
    <link rel="icon" href="profile.jpg" type="image/icon type" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
  </head>
  <body>
    <nav class="navbar">
      <h1>Portfolio</h1>
      <ul class="navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <div class="profile">
      <img src="assets\profile.jpg" alt="" class="circle-img" />
      <h1 id="name"></h1>
      <div style="text-align: center; max-width: 600px">
        <p style="font-size: 1.2em; line-height: 1.5">
          Hello there! My name is [Your Name], and I'm a [Your Profession/Title]
          based in [Your Location]. I'm passionate about [Your Field/Industry]
          and excited to share my knowledge and experience with you here. I
          graduated from [Your University or School] with a degree in [Your
          Major or Field of Study].
        </p>
        <br>
        <br>
      <h1 id="name">Project</h1>
      <br>
      <div class="card-container">
        <div class="card">
          <img
            src="https://plus.unsplash.com/premium_photo-1664475330520-91af55a87047?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
            alt="Project 1"
          />
          <h2>Water Tracker</h2>
          <h3>A web app that helps you track your daily water intake.</h3>
        </div>

        <div class="card">
          <img
            src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
            alt="Project 2"
          />
          <h2>Restaurant Website</h2>
          <h3>A responsive website for a local restaurant.</h3>
        </div>

        <div class="card">
          <img
            src="https://images.unsplash.com/photo-1558545539-2fae21eb1116?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=435&q=80"
            alt="Project 3"
          />
          <h2>Fashion E-commerce</h2>
          <h3>An e-commerce site for a fashion brand.</h3>
        </div>

        <div class="card">
          <img
            src="https://images.unsplash.com/photo-1485846234645-a62644f84728?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1159&q=80"
            alt="Project 4"
          />
          <h2>Movie Recommender</h2>
          <h3>A web app that suggests movies.</h3>
        </div>

        <div class="card">
          <img
            src="https://images.unsplash.com/photo-1530563885674-66db50a1af19?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80"
            alt="Project 5"
          />
          <h2>Weather App</h2>
          <h3>
            A web app that displays the current weather and forecast for a
            location.
          </h3>
        </div>

        <div class="card">
          <img
            src="https://images.unsplash.com/photo-1616356607338-fd87169ecf1a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
            alt="Project 6"
          />
          <h2>Music Player</h2>
          <h3>A web app that allows you to play music and create playlists.</h3>
        </div>
      </div>
    </div>
    <br>
    <br>
    <h1 >
      Hard Skill
     </h1>

     <div class="card-container2">
      <div class="card-skill"><img src="assets/css/images/html.png" alt="HTML"></div>
      <div class="card-skill"><img src="assets/css/images/css.png" alt="CSS"></div>
      <div class="card-skill"><img src="assets/css/images/vscode.png" alt="JavaScript"></div>
      <div class="card-skill"><img src="assets/css/images/github.png" alt="GitHub"></div>
      <div class="card-skill"><img src="assets/css/images/vscode.png" alt="Visual Studio Code"></div>
      <div class="card-skill"><img src="assets/css/images/vscode.png" alt="Visual Studio Code"></div>
    </div>
    <br>
    <br>
    <h1>Soft Skill</h1>
    <div class="column-container">
      <div class="card1">
        <div class="container">
          <h4>Communication</h4>
        </div>
      </div>
      <div class="card1">
        <div class="container">
          <h4>Public Speaking</h4>
        </div>
      </div>
      <div class="card1">
        <div class="container">
          <h4>Leadership</h4>
        </div>
      </div>
    </div>

    <script src="assets\app.js"></script>
  </body>
</html>