Hugging Face's logo

Spaces:
Alexvatti
/
Alex-Tech-Projects
Running

App Files Community
Alexvatti commited on
Commit
3dcab53
·
verified ·
1 Parent(s): c130134

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +187 -17
index.html CHANGED
@@ -1,19 +1,189 @@
1
- <!doctype html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <style>
5
+ body {
6
+ background-color: rgb(184, 209, 234);
7
+ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
8
+ }
9
+
10
+ h1 {
11
+ font-size: 50px;
12
+ text-align: center;
13
+ color: blue;
14
+ margin-top: 30px;
15
+ }
16
+
17
+ h2 {
18
+ font-size: 36px;
19
+ text-align: center;
20
+ color: darkgreen;
21
+ background-color: lightgray;
22
+ padding: 10px;
23
+ border-bottom: 2px solid gray;
24
+ margin-top: 20px;
25
+ }
26
+
27
+ div {
28
+ background-color: antiquewhite;
29
+ color: black;
30
+ padding: 20px;
31
+ margin: 20px;
32
+ border-radius: 8px;
33
+ }
34
+
35
+ ul {
36
+ list-style-type: square;
37
+ padding-left: 20px;
38
+ margin: 10px 0;
39
+ }
40
+
41
+ ol {
42
+ list-style-type: upper-roman;
43
+ padding-left: 20px;
44
+ margin: 10px 0;
45
+ }
46
+
47
+ table {
48
+ width: 100%;
49
+ border-collapse: collapse;
50
+ margin: 20px 0;
51
+ }
52
+
53
+ table, th, td {
54
+ border: 1px solid black;
55
+ }
56
+
57
+ th {
58
+ background-color: #f2f2f2;
59
+ padding: 10px;
60
+ text-align: left;
61
+ }
62
+
63
+ td {
64
+ padding: 10px;
65
+ }
66
+
67
+ a:link {
68
+ color: blue;
69
+ text-decoration: none;
70
+ }
71
+
72
+ a:visited {
73
+ color: brown;
74
+ }
75
+
76
+ a:hover {
77
+ color: blueviolet;
78
+ text-decoration: underline;
79
+ }
80
+
81
+ a:active {
82
+ color: orange;
83
+ }
84
+
85
+ p {
86
+ font-size: 16px;
87
+ line-height: 1.6;
88
+ margin: 10px 0;
89
+ color: #333;
90
+ }
91
+
92
+ .profile-container {
93
+ text-align: center;
94
+ margin: 30px 0;
95
+ }
96
+
97
+ .profile-img {
98
+ width: 150px;
99
+ height: 150px;
100
+ border-radius: 50%;
101
+ border: 4px solid blue;
102
+ margin-bottom: 15px;
103
+ transition: transform 0.6s ease-in-out;
104
+ display: inline-block;
105
+ }
106
+
107
+ .profile-img:hover {
108
+ transform: scale(1.1) rotate(-10deg);
109
+ }
110
+ </style>
111
+ </head>
112
+
113
+ <body>
114
+
115
+ <h1>Personal Portfolio</h1>
116
+
117
+ <div class="profile-container" id="1234567">
118
+ <img src="Alex.jpeg" alt="Your Profile Picture" class="profile-img">
119
+ <p>Hello! I am [Your Name], a passionate [Your Profession, e.g., Frontend Developer, UX Designer, Full Stack Developer] with a knack for creating intuitive, user-centric designs and efficient code. With a background in [mention your background, e.g., Computer Science, Graphic Design], I strive to build impactful digital experiences that solve real-world problems.</p>
120
+ </div>
121
+
122
+ <h2>Skills</h2>
123
+ <ul>
124
+ <li>Frontend Development (HTML, CSS, JavaScript, React.js)</li>
125
+ <li>Backend Development (Node.js, Express.js, Django)</li>
126
+ <li>Database Management (MySQL, MongoDB, PostgreSQL)</li>
127
+ <li>UI/UX Design (Figma, Adobe XD, Sketch)</li>
128
+ <li>Version Control (Git, GitHub, GitLab)</li>
129
+ <li>Agile and Scrum Methodologies</li>
130
+ </ul>
131
+
132
+ <h2>Projects</h2>
133
+ <ol>
134
+ <li>Project Name 1 - Brief description of the project and the technologies used.</li>
135
+ <li>Project Name 2 - Brief description of the project and the technologies used.</li>
136
+ <li>Project Name 3 - Brief description of the project and the technologies used.</li>
137
+ </ol>
138
+
139
+ <h2>Experience</h2>
140
+ <ul>
141
+ <li>Company Name (Job Title, Duration)</li>
142
+ <li>Key responsibilities and achievements.</li>
143
+ <li>Company Name (Job Title, Duration)</li>
144
+ <li>Key responsibilities and achievements.</li>
145
+ </ul>
146
+
147
+ <h2>Education</h2>
148
+ <ul>
149
+ <li>Degree Name - University Name (Year)</li>
150
+ <li>Relevant Certifications or Courses</li>
151
+ </ul>
152
+
153
+ <h2>Contact Information</h2>
154
+ <ul>
155
+ <li>Email: alexvatti@gmail.com</li>
156
+ <li>LinkedIn:<a href="https://www.linkedin.com/in/alexdatascientist/">LinkedIn</a></li>
157
+ <li>GitHub: <a href="https://github.com/alexvatti">GitHub</a></li>
158
+ </ul>
159
+
160
+ <h2>Project Showcase</h2>
161
+ <table class="video-table">
162
+ <tr>
163
+ <td>
164
+ <<iframe width="420" height="315" src="https://www.youtube.com/embed/4ulUSNYD4uo?si=QPrXZdl5WEY1ap8U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
165
+ </td>
166
+ <td>
167
+ <iframe width="420" height="315" src="https://www.youtube.com/embed/c2ifRxzqmi0?si=D5xmXgeGf2Gz-bzL" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
168
+ </td>
169
+ <td>
170
+ <iframe width="420" height="315" src="https://www.youtube.com/embed/x6JohBmu7XY?si=v0gfnIxpcvkgxILV" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
171
+ </td>
172
+ </tr>
173
+ <tr>
174
+ <td>
175
+ <iframe src="https://www.youtube.com/embed/VIDEO_ID_4" title="Project 4" allowfullscreen></iframe>
176
+ </td>
177
+ <td>
178
+ <iframe src="https://www.youtube.com/embed/VIDEO_ID_5" title="Project 5" allowfullscreen></iframe>
179
+ </td>
180
+ <td>
181
+ <iframe src="https://www.youtube.com/embed/VIDEO_ID_6" title="Project 6" allowfullscreen></iframe>
182
+ </td>
183
+ </tr>
184
+ </table>
185
+
186
+ <p>Thank you for visiting my portfolio! Feel free to reach out if you’d like to connect or collaborate.</p>
187
+
188
+ </body>
189
  </html>