Portfolio-website/index.html at main · Ruby-here/Portfolio-website · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Portfolio</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-50">
    <!-- Header -->
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-4">
            <nav class="flex justify-between items-center">
                <div class="text-2xl font-bold text-indigo-600">Portfolio</div>
                <div class="hidden md:flex space-x-8">
                    <a href="index.html" class="text-indigo-600 font-medium">Home</a>
                    <a href="about.html" class="text-gray-600 hover:text-indigo-600">About</a>
                    <a href="projects.html" class="text-gray-600 hover:text-indigo-600">Projects</a>
                    <a href="contact.html" class="text-gray-600 hover:text-indigo-600">Contact</a>
                </div>
                <button id="menu-toggle" class="md:hidden text-gray-600">
                    <i class="fas fa-bars text-2xl"></i>
                </button>
            </nav>
        </div>
    </header>

    <!-- Mobile Menu -->
    <div id="mobile-menu" class="hidden md:hidden bg-white">
        <div class="container mx-auto px-4 py-2">
            <div class="flex flex-col space-y-3 pb-4">
                <a href="index.html" class="text-indigo-600 font-medium">Home</a>
                <a href="about.html" class="text-gray-600 hover:text-indigo-600">About</a>
                <a href="projects.html" class="text-gray-600 hover:text-indigo-600">Projects</a>
                <a href="contact.html" class="text-gray-600 hover:text-indigo-600">Contact</a>
            </div>
        </div>
    </div>

    <!-- Hero Section -->
    <section class="py-20 md:py-32 bg-gradient-to-r from-indigo-500 to-purple-600 text-white">
        <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
                <h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="text-yellow-300">Ruby</span></h1>
                <h2 class="text-2xl md:text-3xl font-semibold mb-6">Frontend Developer & UI/UX Designer</h2>
                <p class="text-xl mb-8 max-w-lg">I create beautiful, responsive websites with modern technologies and a focus on user experience.</p>
                <div class="flex flex-wrap gap-4">
                    <a href="projects.html" class="bg-white text-indigo-600 font-semibold py-3 px-6 rounded-full hover:bg-gray-100 transition duration-300">View Projects</a>
                    <a href="contact.html" class="border-2 border-white text-white font-semibold py-3 px-6 rounded-full hover:bg-white hover:text-indigo-600 transition duration-300">Contact Me</a>
                </div>
            </div>
            <div class="md:w-1/2 flex justify-center">
                <div class="relative">
                    <div class="w-64 h-64 md:w-80 md:h-80 bg-gray-200 rounded-full overflow-hidden border-4 border-white shadow-xl">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Profile" class="w-full h-full object-cover">
                    </div>
                    <div class="absolute -bottom-4 -right-4 bg-yellow-400 text-gray-900 font-bold py-2 px-4 rounded-full">
                        <span>1 Year Experience</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Skills Preview -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">My Skills</h2>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                <div class="text-center">
                    <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fab fa-html5 text-2xl text-indigo-600"></i>
                    </div>
                    <h3 class="font-semibold">HTML5</h3>
                </div>
                <div class="text-center">
                    <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fab fa-css3-alt text-2xl text-indigo-600"></i>
                    </div>
                    <h3 class="font-semibold">CSS3</h3>
                </div>
                <div class="text-center">
                    <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fab fa-js text-2xl text-indigo-600"></i>
                    </div>
                    <h3 class="font-semibold">JavaScript</h3>
                </div>
                <div class="text-center">
                    <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fab fa-react text-2xl text-indigo-600"></i>
                    </div>
                    <h3 class="font-semibold">React</h3>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <h2 class="text-2xl font-bold text-indigo-400">Ruby</h2>
                    <p class="mt-2 text-gray-400">Frontend Developer & UI/UX Designer</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white">
                        <i class="fab fa-github text-2xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white">
                        <i class="fab fa-linkedin text-2xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white">
                        <i class="fab fa-twitter text-2xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white">
                        <i class="fab fa-instagram text-2xl"></i>
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; 2023 Ruby. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>