Hugging Face's logo

Spaces:
Hmayda
/
bytebard-portfolio-pro
Running

App Files Community
Hmayda commited on
Commit
6e72093
·
verified ·
1 Parent(s): 760c817

i also plan to add course and blog sections and please redesign it and make it responsive

Browse files
Files changed (8) hide show
  1. README.md +8 -5
  2. blog.html +55 -0
  3. components/footer.js +118 -0
  4. components/navbar.js +90 -0
  5. course-modern-javascript.html +88 -0
  6. index.html +347 -19
  7. script.js +41 -0
  8. style.css +166 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Bytebard Portfolio Pro
3
- emoji: 🐠
4
- colorFrom: green
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: ByteBard Portfolio Pro 🎸
3
+ colorFrom: purple
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
blog.html ADDED
@@ -0,0 +1,55 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Blog - ByteBard Portfolio Pro</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="components/navbar.js"></script>
11
+ <script src="components/footer.js"></script>
12
+ </head>
13
+ <body class="bg-gray-50 text-gray-800">
14
+ <custom-navbar></custom-navbar>
15
+
16
+ <main class="container mx-auto px-4 py-20">
17
+ <h1 class="text-4xl font-bold mb-8 text-center">Blog</h1>
18
+
19
+ <div class="max-w-4xl mx-auto">
20
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
21
+ <div class="blog-card">
22
+ <img src="http://static.photos/technology/640x360/20" alt="Blog 1" class="rounded-t-lg w-full h-48 object-cover">
23
+ <div class="p-6">
24
+ <span class="text-sm text-indigo-600">Development • 15 May</span>
25
+ <h3 class="text-xl font-bold mb-2">State Management in 2024</h3>
26
+ <p class="text-gray-600 mb-4">Exploring the best state solutions for modern apps</p>
27
+ <a href="/blog-state-management" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
28
+ Read Article <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
29
+ </a>
30
+ </div>
31
+ </div>
32
+ <!-- More blog cards would go here -->
33
+ </div>
34
+
35
+ <div class="pagination flex justify-center mt-8">
36
+ <nav class="flex items-center space-x-2">
37
+ <a href="#" class="px-3 py-1 rounded-full bg-indigo-600 text-white">1</a>
38
+ <a href="#" class="px-3 py-1 rounded-full hover:bg-indigo-100">2</a>
39
+ <a href="#" class="px-3 py-1 rounded-full hover:bg-indigo-100">3</a>
40
+ <a href="#" class="px-3 py-1 rounded-full hover:bg-indigo-100">
41
+ <i data-feather="chevron-right"></i>
42
+ </a>
43
+ </nav>
44
+ </div>
45
+ </div>
46
+ </main>
47
+
48
+ <custom-footer></custom-footer>
49
+
50
+ <script src="script.js"></script>
51
+ <script>
52
+ feather.replace();
53
+ </script>
54
+ </body>
55
+ </html>
components/footer.js ADDED
@@ -0,0 +1,118 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .footer {
7
+ background-color: #1e1b4b;
8
+ color: white;
9
+ padding: 3rem 2rem;
10
+ }
11
+ .footer-container {
12
+ max-width: 1200px;
13
+ margin: 0 auto;
14
+ display: grid;
15
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
16
+ gap: 2rem;
17
+ }
18
+ .footer-logo {
19
+ font-size: 1.5rem;
20
+ font-weight: 700;
21
+ color: white;
22
+ margin-bottom: 1rem;
23
+ display: inline-block;
24
+ }
25
+ .footer-about {
26
+ max-width: 300px;
27
+ }
28
+ .footer-links h3, .footer-contact h3 {
29
+ font-size: 1.125rem;
30
+ font-weight: 600;
31
+ margin-bottom: 1.5rem;
32
+ }
33
+ .footer-links ul {
34
+ list-style: none;
35
+ padding: 0;
36
+ }
37
+ .footer-links li {
38
+ margin-bottom: 0.75rem;
39
+ }
40
+ .footer-links a {
41
+ color: #a5b4fc;
42
+ text-decoration: none;
43
+ transition: color 0.3s;
44
+ }
45
+ .footer-links a:hover {
46
+ color: white;
47
+ }
48
+ .footer-contact p {
49
+ margin-bottom: 0.75rem;
50
+ display: flex;
51
+ align-items: center;
52
+ }
53
+ .footer-contact i {
54
+ margin-right: 0.5rem;
55
+ }
56
+ .footer-bottom {
57
+ text-align: center;
58
+ padding-top: 2rem;
59
+ margin-top: 2rem;
60
+ border-top: 1px solid #3730a3;
61
+ }
62
+ .social-links {
63
+ display: flex;
64
+ gap: 1rem;
65
+ margin-top: 1.5rem;
66
+ }
67
+ .social-link {
68
+ display: flex;
69
+ align-items: center;
70
+ justify-content: center;
71
+ width: 2.5rem;
72
+ height: 2.5rem;
73
+ border-radius: 50%;
74
+ background-color: #3730a3;
75
+ color: white;
76
+ transition: all 0.3s;
77
+ }
78
+ .social-link:hover {
79
+ background-color: #4f46e5;
80
+ transform: translateY(-2px);
81
+ }
82
+ </style>
83
+ <footer class="footer">
84
+ <div class="footer-container">
85
+ <div class="footer-about">
86
+ <a href="#" class="footer-logo">CodeCraft</a>
87
+ <p>Building innovative digital solutions that drive business growth and enhance user experiences.</p>
88
+ <div class="social-links">
89
+ <a href="#" class="social-link"><i data-feather="github"></i></a>
90
+ <a href="#" class="social-link"><i data-feather="linkedin"></i></a>
91
+ <a href="#" class="social-link"><i data-feather="twitter"></i></a>
92
+ </div>
93
+ </div>
94
+ <div class="footer-links">
95
+ <h3>Quick Links</h3>
96
+ <ul>
97
+ <li><a href="#about">About</a></li>
98
+ <li><a href="#experience">Experience</a></li>
99
+ <li><a href="#projects">Projects</a></li>
100
+ <li><a href="#certifications">Certifications</a></li>
101
+ <li><a href="#contact">Contact</a></li>
102
+ </ul>
103
+ </div>
104
+ <div class="footer-contact">
105
+ <h3>Contact Info</h3>
106
+ <p><i data-feather="mail"></i> hello@example.com</p>
107
+ <p><i data-feather="phone"></i> +1 (555) 123-4567</p>
108
+ <p><i data-feather="map-pin"></i> San Francisco, CA</p>
109
+ </div>
110
+ </div>
111
+ <div class="footer-bottom">
112
+ <p>&copy; ${new Date().getFullYear()} CodeCraft Portfolio. All rights reserved.</p>
113
+ </div>
114
+ </footer>
115
+ `;
116
+ }
117
+ }
118
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,90 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .navbar {
7
+ background-color: white;
8
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
9
+ position: fixed;
10
+ width: 100%;
11
+ top: 0;
12
+ z-index: 1000;
13
+ }
14
+ .nav-container {
15
+ max-width: 1200px;
16
+ margin: 0 auto;
17
+ padding: 1rem 2rem;
18
+ display: flex;
19
+ justify-content: space-between;
20
+ align-items: center;
21
+ }
22
+ .logo {
23
+ font-size: 1.5rem;
24
+ font-weight: 700;
25
+ color: #4f46e5;
26
+ text-decoration: none;
27
+ }
28
+ .nav-links {
29
+ display: flex;
30
+ gap: 2rem;
31
+ }
32
+ .nav-link {
33
+ color: #4b5563;
34
+ text-decoration: none;
35
+ font-weight: 500;
36
+ transition: color 0.3s;
37
+ position: relative;
38
+ }
39
+ .nav-link:hover {
40
+ color: #4f46e5;
41
+ }
42
+ .nav-link::after {
43
+ content: '';
44
+ position: absolute;
45
+ width: 0;
46
+ height: 2px;
47
+ bottom: -4px;
48
+ left: 0;
49
+ background-color: #4f46e5;
50
+ transition: width 0.3s;
51
+ }
52
+ .nav-link:hover::after {
53
+ width: 100%;
54
+ }
55
+ .mobile-menu-btn {
56
+ display: none;
57
+ background: none;
58
+ border: none;
59
+ cursor: pointer;
60
+ }
61
+ @media (max-width: 768px) {
62
+ .nav-links {
63
+ display: none;
64
+ }
65
+ .mobile-menu-btn {
66
+ display: block;
67
+ }
68
+ }
69
+ </style>
70
+ <nav class="navbar">
71
+ <div class="nav-container">
72
+ <a href="#" class="logo">ByteBard</a>
73
+ <div class="nav-links">
74
+ <a href="#about" class="nav-link">About</a>
75
+ <a href="#experience" class="nav-link">Experience</a>
76
+ <a href="#projects" class="nav-link">Projects</a>
77
+ <a href="#courses" class="nav-link">Courses</a>
78
+ <a href="#blog" class="nav-link">Blog</a>
79
+ <a href="#certifications" class="nav-link">Certifications</a>
80
+ <a href="#contact" class="nav-link">Contact</a>
81
+ </div>
82
+ <button class="mobile-menu-btn">
83
+ <i data-feather="menu"></i>
84
+ </button>
85
+ </div>
86
+ </nav>
87
+ `;
88
+ }
89
+ }
90
+ customElements.define('custom-navbar', CustomNavbar);
course-modern-javascript.html ADDED
@@ -0,0 +1,88 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Modern JavaScript Course - ByteBard Portfolio Pro</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="components/navbar.js"></script>
11
+ <script src="components/footer.js"></script>
12
+ </head>
13
+ <body class="bg-gray-50 text-gray-800">
14
+ <custom-navbar></custom-navbar>
15
+
16
+ <main class="container mx-auto px-4 py-20">
17
+ <div class="max-w-4xl mx-auto">
18
+ <div class="flex flex-col md:flex-row gap-8 mb-12">
19
+ <div class="md:w-2/3">
20
+ <h1 class="text-4xl font-bold mb-4">Modern JavaScript Course</h1>
21
+ <p class="text-xl text-gray-600 mb-6">Master ES6+ features and patterns in this comprehensive course</p>
22
+
23
+ <div class="flex items-center space-x-4 mb-6">
24
+ <div class="flex items-center">
25
+ <i data-feather="star" class="mr-1 text-yellow-400"></i>
26
+ <span>4.9 (120 reviews)</span>
27
+ </div>
28
+ <div class="flex items-center">
29
+ <i data-feather="clock" class="mr-1"></i>
30
+ <span>8 hours</span>
31
+ </div>
32
+ <span class="badge" data-level="beginner">Beginner</span>
33
+ </div>
34
+
35
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
36
+ <h2 class="text-2xl font-bold mb-4">Course Description</h2>
37
+ <p class="mb-4">This course will take you from JavaScript fundamentals to advanced ES6+ features, including arrow functions, destructuring, promises, async/await, modules and more.</p>
38
+ <p>By the end, you'll be writing modern, clean and efficient JavaScript code.</p>
39
+ </div>
40
+
41
+ <div class="bg-white rounded-xl shadow-md p-6">
42
+ <h2 class="text-2xl font-bold mb-4">What You'll Learn</h2>
43
+ <ul class="space-y-3">
44
+ <li class="flex items-start">
45
+ <i data-feather="check-circle" class="mr-2 text-green-500 mt-1"></i>
46
+ <span>Modern JavaScript syntax (ES6+)</span>
47
+ </li>
48
+ <li class="flex items-start">
49
+ <i data-feather="check-circle" class="mr-2 text-green-500 mt-1"></i>
50
+ <span>Asynchronous JavaScript patterns</span>
51
+ </li>
52
+ <li class="flex items-start">
53
+ <i data-feather="check-circle" class="mr-2 text-green-500 mt-1"></i>
54
+ <span>Module systems and tooling</span>
55
+ </li>
56
+ <li class="flex items-start">
57
+ <i data-feather="check-circle" class="mr-2 text-green-500 mt-1"></i>
58
+ <span>Best practices and patterns</span>
59
+ </li>
60
+ </ul>
61
+ </div>
62
+ </div>
63
+
64
+ <div class="md:w-1/3">
65
+ <div class="sticky top-24">
66
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6">
67
+ <img src="http://static.photos/technology/640x360/10" alt="Course" class="rounded-lg mb-4 w-full">
68
+ <div class="flex justify-between mb-4">
69
+ <span class="font-bold">$49.99</span>
70
+ <span class="text-sm text-gray-500">$99.99</span>
71
+ </div>
72
+ <a href="#" class="btn-primary w-full block text-center mb-4">Enroll Now</a>
73
+ <a href="#" class="btn-secondary w-full block text-center">Preview Course</a>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </main>
80
+
81
+ <custom-footer></custom-footer>
82
+
83
+ <script src="script.js"></script>
84
+ <script>
85
+ feather.replace();
86
+ </script>
87
+ </body>
88
+ </html>
index.html CHANGED
@@ -1,19 +1,347 @@
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
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>ByteBard Portfolio Pro</title>
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script src="components/navbar.js"></script>
13
+ <script src="components/footer.js"></script>
14
+ </head>
15
+ <body class="bg-gray-50 text-gray-800">
16
+ <custom-navbar></custom-navbar>
17
+
18
+ <main class="container mx-auto px-4 py-12">
19
+ <!-- Hero Section -->
20
+ <section class="flex flex-col md:flex-row items-center justify-between mb-20">
21
+ <div class="md:w-1/2 mb-10 md:mb-0">
22
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="text-indigo-600">Software Engineer</span></h1>
23
+ <p class="text-xl mb-6 text-gray-600">Building digital solutions that make an impact.</p>
24
+ <div class="flex space-x-4">
25
+ <a href="#projects" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg transition">View Projects</a>
26
+ <a href="#contact" class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-lg transition">Contact Me</a>
27
+ </div>
28
+ </div>
29
+ <div class="md:w-1/2 flex justify-center">
30
+ <div class="w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-indigo-100">
31
+ <img src="http://static.photos/technology/640x360/42" alt="Profile" class="w-full h-full object-cover">
32
+ </div>
33
+ </div>
34
+ </section>
35
+
36
+ <!-- About Section -->
37
+ <section id="about" class="mb-20">
38
+ <h2 class="text-3xl font-bold mb-8 text-center">About Me</h2>
39
+ <div class="bg-white rounded-xl shadow-md p-8 max-w-4xl mx-auto">
40
+ <p class="text-lg mb-6">I'm a passionate software engineer with 5+ years of experience building scalable web applications and solving complex problems with elegant solutions.</p>
41
+ <p class="text-lg mb-6">My expertise spans across full-stack development, cloud architecture, and DevOps practices. I thrive in collaborative environments and enjoy mentoring junior developers.</p>
42
+ <div class="grid grid-cols-3 md:grid-cols-6 gap-3 mt-8">
43
+ <div class="skill-card">JavaScript</div>
44
+ <div class="skill-card">React</div>
45
+ <div class="skill-card">Node.js</div>
46
+ <div class="skill-card">Python</div>
47
+ <div class="skill-card">AWS</div>
48
+ <div class="skill-card">Docker</div>
49
+ <div class="skill-card">SQL</div>
50
+ <div class="skill-card">Git</div>
51
+ </div>
52
+ </div>
53
+ </section>
54
+
55
+ <!-- Experience Section -->
56
+ <section id="experience" class="mb-20">
57
+ <h2 class="text-3xl font-bold mb-8 text-center">Work Experience</h2>
58
+ <div class="max-w-4xl mx-auto space-y-8">
59
+ <div class="experience-card">
60
+ <h3 class="text-xl font-bold">Senior Software Engineer</h3>
61
+ <p class="text-indigo-600">Tech Solutions Inc. • 2020 - Present</p>
62
+ <ul class="mt-4 space-y-2">
63
+ <li class="flex items-start">
64
+ <i data-feather="check" class="mr-2 text-green-500 mt-1"></i>
65
+ <span>Led a team of 5 developers to build a SaaS platform serving 10k+ users</span>
66
+ </li>
67
+ <li class="flex items-start">
68
+ <i data-feather="check" class="mr-2 text-green-500 mt-1"></i>
69
+ <span>Reduced API response times by 40% through performance optimization</span>
70
+ </li>
71
+ </ul>
72
+ </div>
73
+ <div class="experience-card">
74
+ <h3 class="text-xl font-bold">Software Engineer</h3>
75
+ <p class="text-indigo-600">Digital Innovations • 2018 - 2020</p>
76
+ <ul class="mt-4 space-y-2">
77
+ <li class="flex items-start">
78
+ <i data-feather="check" class="mr-2 text-green-500 mt-1"></i>
79
+ <span>Developed microservices architecture for e-commerce platform</span>
80
+ </li>
81
+ <li class="flex items-start">
82
+ <i data-feather="check" class="mr-2 text-green-500 mt-1"></i>
83
+ <span>Implemented CI/CD pipelines reducing deployment time by 60%</span>
84
+ </li>
85
+ </ul>
86
+ </div>
87
+ </div>
88
+ </section>
89
+
90
+ <!-- Projects Section -->
91
+ <section id="projects" class="mb-20">
92
+ <h2 class="text-3xl font-bold mb-8 text-center">Featured Projects</h2>
93
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
94
+ <div class="project-card">
95
+ <img src="http://static.photos/technology/640x360/1" alt="Project 1" class="rounded-t-lg w-full h-48 object-cover">
96
+ <div class="p-6">
97
+ <h3 class="text-xl font-bold mb-2">E-Commerce Platform</h3>
98
+ <p class="text-gray-600 mb-4">Full-stack e-commerce solution with payment integration</p>
99
+ <div class="flex flex-wrap gap-2 mb-4">
100
+ <span class="tech-tag">React</span>
101
+ <span class="tech-tag">Node.js</span>
102
+ <span class="tech-tag">MongoDB</span>
103
+ </div>
104
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
105
+ View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
106
+ </a>
107
+ </div>
108
+ </div>
109
+ <div class="project-card">
110
+ <img src="http://static.photos/technology/640x360/2" alt="Project 2" class="rounded-t-lg w-full h-48 object-cover">
111
+ <div class="p-6">
112
+ <h3 class="text-xl font-bold mb-2">Task Management App</h3>
113
+ <p class="text-gray-600 mb-4">Collaborative task management for remote teams</p>
114
+ <div class="flex flex-wrap gap-2 mb-4">
115
+ <span class="tech-tag">Vue.js</span>
116
+ <span class="tech-tag">Firebase</span>
117
+ <span class="tech-tag">TailwindCSS</span>
118
+ </div>
119
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
120
+ View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
121
+ </a>
122
+ </div>
123
+ </div>
124
+ <div class="project-card">
125
+ <img src="http://static.photos/technology/640x360/3" alt="Project 3" class="rounded-t-lg w-full h-48 object-cover">
126
+ <div class="p-6">
127
+ <h3 class="text-xl font-bold mb-2">AI Recommendation Engine</h3>
128
+ <p class="text-gray-600 mb-4">Machine learning based content recommendation system</p>
129
+ <div class="flex flex-wrap gap-2 mb-4">
130
+ <span class="tech-tag">Python</span>
131
+ <span class="tech-tag">TensorFlow</span>
132
+ <span class="tech-tag">Flask</span>
133
+ </div>
134
+ <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
135
+ View Project <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
136
+ </a>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </section>
141
+ <!-- Courses Section -->
142
+ <section id="courses" class="mb-20">
143
+ <h2 class="text-3xl font-bold mb-8 text-center">Featured Courses</h2>
144
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
145
+ <div class="course-card">
146
+ <img src="http://static.photos/technology/640x360/10" alt="Course 1" class="rounded-t-lg w-full h-48 object-cover">
147
+ <div class="p-6">
148
+ <h3 class="text-xl font-bold mb-2">Modern JavaScript</h3>
149
+ <p class="text-gray-600 mb-4">Master ES6+ features and patterns</p>
150
+ <div class="flex justify-between items-center">
151
+ <span class="badge">Beginner</span>
152
+ <span class="text-sm">4.9 ★ (120 reviews)</span>
153
+ </div>
154
+ <a href="/course-modern-javascript" class="btn-secondary w-full mt-4">View Course</a>
155
+ </div>
156
+ </div>
157
+ <div class="course-card">
158
+ <img src="http://static.photos/technology/640x360/11" alt="Course 2" class="rounded-t-lg w-full h-48 object-cover">
159
+ <div class="p-6">
160
+ <h3 class="text-xl font-bold mb-2">React Advanced</h3>
161
+ <p class="text-gray-600 mb-4">Hooks, Context & Performance</p>
162
+ <div class="flex justify-between items-center">
163
+ <span class="badge">Intermediate</span>
164
+ <span class="text-sm">4.8 ★ (95 reviews)</span>
165
+ </div>
166
+ <a href="/course-react-advanced" class="btn-secondary w-full mt-4">View Course</a>
167
+ </div>
168
+ </div>
169
+ <div class="course-card">
170
+ <img src="http://static.photos/technology/640x360/12" alt="Course 3" class="rounded-t-lg w-full h-48 object-cover">
171
+ <div class="p-6">
172
+ <h3 class="text-xl font-bold mb-2">UI/UX Design</h3>
173
+ <p class="text-gray-600 mb-4">From concepts to prototypes</p>
174
+ <div class="flex justify-between items-center">
175
+ <span class="badge">Advanced</span>
176
+ <span class="text-sm">5.0 ★ (200 reviews)</span>
177
+ </div>
178
+ <a href="/course-ui-ux" class="btn-secondary w-full mt-4">View Course</a>
179
+ </div>
180
+ </div>
181
+ </div>
182
+ </section>
183
+
184
+ <!-- Blog Section -->
185
+ <section id="blog" class="mb-20">
186
+ <h2 class="text-3xl font-bold mb-8 text-center">Latest Articles</h2>
187
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
188
+ <div class="blog-card">
189
+ <img src="http://static.photos/technology/640x360/20" alt="Blog 1" class="rounded-t-lg w-full h-48 object-cover">
190
+ <div class="p-6">
191
+ <span class="text-sm text-indigo-600">Development • 15 May</span>
192
+ <h3 class="text-xl font-bold mb-2">State Management in 2024</h3>
193
+ <p class="text-gray-600 mb-4">Exploring the best state solutions for modern apps</p>
194
+ <a href="/blog-state-management" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
195
+ Read Article <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
196
+ </a>
197
+ </div>
198
+ </div>
199
+ <div class="blog-card">
200
+ <img src="http://static.photos/technology/640x360/22" alt="Blog 2" class="rounded-t-lg w-full h-48 object-cover">
201
+ <div class="p-6">
202
+ <span class="text-sm text-indigo-600">Design • 8 May</span>
203
+ <h3 class="text-xl font-bold mb-2">Accessibility First</h3>
204
+ <p class="text-gray-600 mb-4">Building inclusive web experiences from the start</p>
205
+ <a href="/blog-accessibility" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
206
+ Read Article <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
207
+ </a>
208
+ </div>
209
+ </div>
210
+ <div class="blog-card">
211
+ <img src="http://static.photos/technology/640x360/23" alt="Blog 3" class="rounded-t-lg w-full h-48 object-cover">
212
+ <div class="p-6">
213
+ <span class="text-sm text-indigo-600">DevOps • 1 May</span>
214
+ <h3 class="text-xl font-bold mb-2">CI/CD Best Practices</h3>
215
+ <p class="text-gray-600 mb-4">Streamlining your deployment pipeline</p>
216
+ <a href="/blog-ci-cd" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center">
217
+ Read Article <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
218
+ </a>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ <div class="text-center mt-8">
223
+ <a href="/blog" class="btn-primary">View All Articles</a>
224
+ </div>
225
+ </section>
226
+
227
+ <!-- Certifications Section -->
228
+ <section id="certifications" class="mb-20">
229
+ <h2 class="text-3xl font-bold mb-8 text-center">Certifications</h2>
230
+ <div class="max-w-4xl mx-auto grid md:grid-cols-2 gap-6">
231
+ <div class="certification-card">
232
+ <div class="flex items-start">
233
+ <div class="bg-indigo-100 p-3 rounded-lg mr-4">
234
+ <i data-feather="award" class="text-indigo-600 w-6 h-6"></i>
235
+ </div>
236
+ <div>
237
+ <h3 class="text-xl font-bold">AWS Certified Solutions Architect</h3>
238
+ <p class="text-gray-600">Amazon Web Services • 2022</p>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ <div class="certification-card">
243
+ <div class="flex items-start">
244
+ <div class="bg-indigo-100 p-3 rounded-lg mr-4">
245
+ <i data-feather="award" class="text-indigo-600 w-6 h-6"></i>
246
+ </div>
247
+ <div>
248
+ <h3 class="text-xl font-bold">Google Professional Data Engineer</h3>
249
+ <p class="text-gray-600">Google Cloud • 2021</p>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ <div class="certification-card">
254
+ <div class="flex items-start">
255
+ <div class="bg-indigo-100 p-3 rounded-lg mr-4">
256
+ <i data-feather="award" class="text-indigo-600 w-6 h-6"></i>
257
+ </div>
258
+ <div>
259
+ <h3 class="text-xl font-bold">Certified Kubernetes Administrator</h3>
260
+ <p class="text-gray-600">Cloud Native Computing Foundation • 2020</p>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ <div class="certification-card">
265
+ <div class="flex items-start">
266
+ <div class="bg-indigo-100 p-3 rounded-lg mr-4">
267
+ <i data-feather="award" class="text-indigo-600 w-6 h-6"></i>
268
+ </div>
269
+ <div>
270
+ <h3 class="text-xl font-bold">Microsoft Certified: Azure Developer</h3>
271
+ <p class="text-gray-600">Microsoft • 2019</p>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </section>
277
+
278
+ <!-- Contact Section -->
279
+ <section id="contact" class="mb-20">
280
+ <h2 class="text-3xl font-bold mb-8 text-center">Get In Touch</h2>
281
+ <div class="bg-white rounded-xl shadow-md p-8 max-w-4xl mx-auto">
282
+ <div class="grid md:grid-cols-2 gap-8">
283
+ <div>
284
+ <h3 class="text-xl font-bold mb-4">Contact Information</h3>
285
+ <div class="space-y-4">
286
+ <div class="flex items-center">
287
+ <i data-feather="mail" class="mr-4 text-indigo-600"></i>
288
+ <span>hello@example.com</span>
289
+ </div>
290
+ <div class="flex items-center">
291
+ <i data-feather="phone" class="mr-4 text-indigo-600"></i>
292
+ <span>+1 (555) 123-4567</span>
293
+ </div>
294
+ <div class="flex items-center">
295
+ <i data-feather="map-pin" class="mr-4 text-indigo-600"></i>
296
+ <span>San Francisco, CA</span>
297
+ </div>
298
+ </div>
299
+ <div class="mt-8">
300
+ <h3 class="text-xl font-bold mb-4">Connect With Me</h3>
301
+ <div class="flex space-x-4">
302
+ <a href="#" class="social-icon">
303
+ <i data-feather="github"></i>
304
+ </a>
305
+ <a href="#" class="social-icon">
306
+ <i data-feather="linkedin"></i>
307
+ </a>
308
+ <a href="#" class="social-icon">
309
+ <i data-feather="twitter"></i>
310
+ </a>
311
+ <a href="#" class="social-icon">
312
+ <i data-feather="instagram"></i>
313
+ </a>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ <div>
318
+ <form class="space-y-4">
319
+ <div>
320
+ <label for="name" class="block mb-1 font-medium">Name</label>
321
+ <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
322
+ </div>
323
+ <div>
324
+ <label for="email" class="block mb-1 font-medium">Email</label>
325
+ <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
326
+ </div>
327
+ <div>
328
+ <label for="message" class="block mb-1 font-medium">Message</label>
329
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea>
330
+ </div>
331
+ <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg transition w-full">Send Message</button>
332
+ </form>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </section>
337
+ </main>
338
+
339
+ <custom-footer></custom-footer>
340
+
341
+ <script src="script.js"></script>
342
+ <script>
343
+ feather.replace();
344
+ </script>
345
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
346
+ </body>
347
+ </html>
script.js ADDED
@@ -0,0 +1,41 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ // Smooth scrolling for anchor links
3
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
4
+ anchor.addEventListener('click', function (e) {
5
+ e.preventDefault();
6
+
7
+ const targetId = this.getAttribute('href');
8
+ if (targetId === '#') return;
9
+
10
+ const targetElement = document.querySelector(targetId);
11
+ if (targetElement) {
12
+ window.scrollTo({
13
+ top: targetElement.offsetTop - 80,
14
+ behavior: 'smooth'
15
+ });
16
+ }
17
+ });
18
+ });
19
+
20
+ // Form submission handling
21
+ const contactForm = document.querySelector('#contact form');
22
+ if (contactForm) {
23
+ contactForm.addEventListener('submit', function(e) {
24
+ e.preventDefault();
25
+
26
+ // Get form values
27
+ const name = document.getElementById('name').value;
28
+ const email = document.getElementById('email').value;
29
+ const message = document.getElementById('message').value;
30
+
31
+ // Here you would typically send the data to a server
32
+ console.log('Form submitted:', { name, email, message });
33
+
34
+ // Show success message
35
+ alert('Thank you for your message! I will get back to you soon.');
36
+
37
+ // Reset form
38
+ contactForm.reset();
39
+ });
40
+ }
41
+ });
style.css CHANGED
@@ -1,28 +1,176 @@
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
2
+
3
  body {
4
+ font-family: 'Inter', sans-serif;
5
+ scroll-behavior: smooth;
6
+ }
7
+
8
+ .skill-card {
9
+ background-color: #f5f3ff;
10
+ color: #4f46e5;
11
+ padding: 0.75rem 1rem;
12
+ border-radius: 0.5rem;
13
+ text-align: center;
14
+ font-weight: 500;
15
+ transition: all 0.3s ease;
16
+ }
17
+
18
+ .skill-card:hover {
19
+ background-color: #e0e7ff;
20
+ transform: translateY(-2px);
21
+ }
22
+
23
+ .experience-card {
24
+ background-color: white;
25
+ padding: 2rem;
26
+ border-radius: 1rem;
27
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
28
+ transition: transform 0.3s ease;
29
+ }
30
+
31
+ .experience-card:hover {
32
+ transform: translateY(-5px);
33
+ }
34
+ .project-card,
35
+ .course-card,
36
+ .blog-card {
37
+ background-color: white;
38
+ border-radius: 0.75rem;
39
+ overflow: hidden;
40
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
41
+ transition: all 0.3s ease;
42
+ }
43
+
44
+ .project-card:hover,
45
+ .course-card:hover,
46
+ .blog-card:hover {
47
+ transform: translateY(-5px);
48
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
49
+ }
50
+
51
+ .btn-primary {
52
+ display: inline-block;
53
+ background-color: #4f46e5;
54
+ color: white;
55
+ padding: 0.75rem 1.5rem;
56
+ border-radius: 0.5rem;
57
+ font-weight: 500;
58
+ transition: all 0.3s ease;
59
+ }
60
+
61
+ .btn-primary:hover {
62
+ background-color: #4338ca;
63
+ transform: translateY(-2px);
64
+ }
65
+
66
+ .btn-secondary {
67
+ display: inline-block;
68
+ background-color: #e0e7ff;
69
+ color: #4f46e5;
70
+ padding: 0.5rem 1rem;
71
+ border-radius: 0.5rem;
72
+ font-weight: 500;
73
+ transition: all 0.3s ease;
74
+ }
75
+
76
+ .btn-secondary:hover {
77
+ background-color: #c7d2fe;
78
+ transform: translateY(-2px);
79
+ }
80
+
81
+ .badge {
82
+ display: inline-block;
83
+ padding: 0.25rem 0.75rem;
84
+ border-radius: 9999px;
85
+ font-size: 0.75rem;
86
+ font-weight: 600;
87
+ text-transform: uppercase;
88
+ }
89
+
90
+ .badge[data-level="beginner"] {
91
+ background-color: #d1fae5;
92
+ color: #065f46;
93
  }
94
 
95
+ .badge[data-level="intermediate"] {
96
+ background-color: #dbeafe;
97
+ color: #1e40af;
98
+ }
99
+
100
+ .badge[data-level="advanced"] {
101
+ background-color: #fce7f3;
102
+ color: #9d174d;
103
+ }
104
+
105
+ @media (max-width: 640px) {
106
+ .grid-cols-2,
107
+ .grid-cols-3,
108
+ .grid-cols-4 {
109
+ grid-template-columns: 1fr;
110
+ }
111
+
112
+ .hero-section {
113
+ flex-direction: column;
114
+ }
115
+
116
+ .contact-section .grid-cols-2 {
117
+ grid-template-columns: 1fr;
118
+ gap: 2rem;
119
+ }
120
+ }
121
+ .tech-tag {
122
+ background-color: #e0e7ff;
123
+ color: #4f46e5;
124
+ padding: 0.25rem 0.75rem;
125
+ border-radius: 9999px;
126
+ font-size: 0.875rem;
127
+ font-weight: 500;
128
  }
129
 
130
+ .certification-card {
131
+ background-color: white;
132
+ padding: 1.5rem;
133
+ border-radius: 0.75rem;
134
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
135
+ transition: transform 0.3s ease;
136
  }
137
 
138
+ .certification-card:hover {
139
+ transform: translateY(-5px);
 
 
 
 
140
  }
141
 
142
+ .social-icon {
143
+ display: flex;
144
+ align-items: center;
145
+ justify-content: center;
146
+ width: 2.5rem;
147
+ height: 2.5rem;
148
+ border-radius: 50%;
149
+ background-color: #e0e7ff;
150
+ color: #4f46e5;
151
+ transition: all 0.3s ease;
152
  }
153
+
154
+ .social-icon:hover {
155
+ background-color: #4f46e5;
156
+ color: white;
157
+ transform: translateY(-2px);
158
+ }
159
+
160
+ /* Custom scrollbar */
161
+ ::-webkit-scrollbar {
162
+ width: 8px;
163
+ }
164
+
165
+ ::-webkit-scrollbar-track {
166
+ background: #f1f1f1;
167
+ }
168
+
169
+ ::-webkit-scrollbar-thumb {
170
+ background: #c7d2fe;
171
+ border-radius: 4px;
172
+ }
173
+
174
+ ::-webkit-scrollbar-thumb:hover {
175
+ background: #a5b4fc;
176
+ }