mlverse.github.io/index.html at main · ml-dev-world/mlverse.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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jane Doe - Web Developer</title>
    <style>
        /* Basic CSS Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            padding: 40px 0;
            background-color: #f8f9fa;
            margin-bottom: 30px;
            border-radius: 5px;
        }

        h1 {
            color: #2c3e50;
            margin-bottom: 10px;
        }

        h2 {
            color: #3498db;
            margin: 25px 0 15px 0;
            border-bottom: 2px solid #ecf0f1;
            padding-bottom: 10px;
        }

        .profile-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 20px;
            border: 5px solid white;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        }

        section {
            margin-bottom: 40px;
        }

        .projects {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .project-card {
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            padding: 20px;
            transition: transform 0.3s ease;
        }

        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        footer {
            text-align: center;
            padding: 20px;
            background-color: #f8f9fa;
            margin-top: 30px;
            border-radius: 5px;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }

        .social-links a {
            color: #3498db;
            text-decoration: none;
            font-size: 18px;
        }

        .social-links a:hover {
            color: #2980b9;
        }
    </style>
</head>
<body>
    <header>
        <img src="https://via.placeholder.com/150" alt="Profile Picture" class="profile-img">
        <h1>Jane Doe</h1>
        <p>Web Developer & UI/UX Designer</p>
    </header>

    <section id="about">
        <h2>About Me</h2>
        <p>Hello! I'm Jane, a passionate web developer with 5 years of experience creating responsive and user-friendly websites. I specialize in front-end development with a focus on accessibility and performance optimization.</p>
        <p>When I'm not coding, you can find me hiking, reading sci-fi novels, or experimenting with new recipes in the kitchen.</p>
    </section>

    <section id="skills">
        <h2>Skills</h2>
        <ul>
            <li>HTML5, CSS3, JavaScript (ES6+)</li>
            <li>React.js, Vue.js</li>
            <li>Node.js, Express</li>
            <li>Responsive Web Design</li>
            <li>UI/UX Design Principles</li>
            <li>Git & GitHub</li>
        </ul>
    </section>

    <section id="portfolio">
        <h2>Projects</h2>
        <div class="projects">
            <div class="project-card">
                <h3>E-commerce Website</h3>
                <p>A fully responsive e-commerce platform with product filtering, cart functionality, and secure checkout.</p>
                <p><strong>Technologies:</strong> React.js, Node.js, MongoDB</p>
                <a href="#">View Project</a>
            </div>

            <div class="project-card">
                <h3>Weather Dashboard</h3>
                <p>Real-time weather application that displays current conditions and 5-day forecast for any location.</p>
                <p><strong>Technologies:</strong> JavaScript, OpenWeather API, CSS Grid</p>
                <a href="#">View Project</a>
            </div>

            <div class="project-card">
                <h3>Task Management App</h3>
                <p>Productivity application for organizing tasks with drag-and-drop functionality and priority setting.</p>
                <p><strong>Technologies:</strong> Vue.js, Firebase, Vuetify</p>
                <a href="#">View Project</a>
            </div>
        </div>
    </section>

    <section id="contact">
        <h2>Contact</h2>
        <p>I'm always open to new opportunities and collaborations. Feel free to reach out!</p>
        <p>Email: <a href="mailto:jane.doe@example.com">jane.doe@example.com</a></p>

        <div class="social-links">
            <a href="https://github.com/janedoe" target="_blank">GitHub</a>
            <a href="https://linkedin.com/in/janedoe" target="_blank">LinkedIn</a>
            <a href="https://twitter.com/janedoe" target="_blank">Twitter</a>
        </div>
    </section>

    <footer>
        <p>&copy; 2025 Jane Doe. All rights reserved.</p>
    </footer>
</body>
</html>