ChrisBasa.io/index.html at main · Kirroslink/ChrisBasa.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Link landing page</title>
    <!-- Tailwind CSS via CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Lucide Icons via CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lucide/0.263.1/lucide.min.js"></script>
    <style>
        .gradient-bg {
            background: linear-gradient(180deg, #f3f4f6 0%, #434345 100%);
        }
        .link-card:hover {
            transform: translateY(-2px);
        }
    </style>
</head>
<body class="gradient-bg min-h-screen">
    <div class="container mx-auto px-4 py-16 max-w-md">
        <!-- Profile Section -->
        <div class="flex flex-col items-center mb-8">
            <div class="w-24 h-24 rounded-full bg-gray-300 mb-4 overflow-hidden">
                <!-- Replace with your image URL -->
                <img src="https://github.com/Kirroslink/ChrisBasa.io/blob/main/images/WhatsApp%20Image%202025-01-28%20at%2010.28.42_3cc7c398.jpg?raw=true"
                     alt="Profile"
                     class="w-full h-full object-cover">
                </div>
            <h1 class="text-2xl font-bold text-gray-800 mb-2">Christopher Basaldua</h1>
            <p class="text-gray-600 text-center mb-4">
                I'm an Electrical Engineer with a passion for PCB design, embedded systems, and hardware prototyping.
            </p>
        </div>

        <!-- Links Section -->
        <div class="space-y-4">

            <h2 class="text-1xl font-bold text-center"> Main Links </h2>


            <!-- GitHub -->
            <a href="https://github.com/Kirroslink"
               target="_blank"
               rel="noopener noreferrer"
               class="link-card flex items-center justify-between p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-200 group">
                <div class="flex items-center space-x-3">
                    <i data-lucide="github" class="w-5 h-5"></i>
                    <span class="font-medium text-gray-700 group-hover:text-gray-900 text-center">GitHub</span>
                </div>
                <i data-lucide="chevron-right" class="w-5 h-5 text-gray-400 group-hover:text-gray-600"></i>
            </a>

            <!-- Portfolio -->
            <a href="https://sites.google.com/view/christopher-basaldua/home"
               target="_blank"
               rel="noopener noreferrer"
               class="link-card flex items-center justify-between p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-200 group">
                <div class="flex items-center space-x-3">
                    <i data-lucide="github" class="w-5 h-5"></i>
                    <span class="font-medium text-gray-700 group-hover:text-gray-900 text-center">Portfolio</span>
                </div>
                <i data-lucide="chevron-right" class="w-5 h-5 text-gray-400 group-hover:text-gray-600"></i>
            </a>

            <!-- LinkedIn -->
            <a href="https://www.linkedin.com/in/christopher-basaldua-876284183"
               target="_blank"
               rel="noopener noreferrer"
               class="link-card flex items-center justify-between p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-200 group">
                <div class="flex items-center space-x-3">
                    <i data-lucide="linkedin" class="w-5 h-5"></i>
                    <span class="font-medium text-gray-700 group-hover:text-gray-900 text-center">LinkedIn</span>
                </div>
                <i data-lucide="chevron-right" class="w-5 h-5 text-gray-400 group-hover:text-gray-600"></i>
            </a>

            <!-- Email
            <a href="mailto:christopher.basaldua@outlook.com"
               class="link-card flex items-center justify-between p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-200 group">
                <div class="flex items-center space-x-3">
                    <i data-lucide="mail" class="w-5 h-5"></i>
                    <span class="font-medium text-gray-700 group-hover:text-gray-900 text-center">Email</span>
                </div>
                <i data-lucide="chevron-right" class="w-5 h-5 text-gray-400 group-hover:text-gray-600"></i>
            </a>
            -->
        </div>
    </div>

    <script>
        // Initialize Lucide icons
        lucide.createIcons();
    </script>
</body>
</html>