jine.github.io/index.html at main · jine/jine.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jim Nelin - Senior Full-Stack &amp; Infrastructure Engineer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Fallback styles in case CDN is blocked during testing */
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-700 via-gray-800 to-gray-900 min-h-screen flex items-center justify-center p-6">
    <div class="max-w-2xl w-full bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl shadow-2xl p-8 md:p-12">
        <!-- Profile Section -->
        <div class="text-center mb-8">
            <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Jim Nelin</h1>
            <p class="text-xl text-gray-300 mb-6">Senior Full-Stack &amp; Infrastructure Engineer</p>
            <p class="text-gray-400 leading-relaxed mb-2">
                Experienced engineer with a passion for new technologies and complex IT challenges. Specialized in infrastructure, networking, and Linux systems across servers, virtual environments, and embedded devices. Currently studying modern frontend development with Tailwind, TypeScript, React/Next.js, and agile practices at Lexicon, Stockholm.
            </p>
            <p class="text-gray-400 text-sm">
                📍 Based in Stockholm, Sweden
            </p>
        </div>

        <!-- Links Section -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center mt-8">
            <!-- GitHub Link -->
            <a href="https://github.com/jine"
               target="_blank"
               rel="noopener noreferrer"
               aria-label="Visit Jim Nelin's GitHub profile"
               class="flex items-center justify-center gap-3 px-6 py-3 bg-gray-800 hover:bg-gray-700 text-white rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                </svg>
                <span>GitHub</span>
            </a>

            <!-- Resume/CV Link -->
            <a href="https://jimnelin.com"
               target="_blank"
               rel="noopener noreferrer"
               aria-label="Visit Jim Nelin's about page"
               class="flex items-center justify-center gap-3 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 9 0 019-9"></path>
                </svg>
                <span>About</span>
            </a>

            <!-- LinkedIn Link -->
            <a href="https://www.linkedin.com/in/jimnelin"
               target="_blank"
               rel="noopener noreferrer"
               aria-label="Visit Jim Nelin's LinkedIn profile"
               class="flex items-center justify-center gap-3 px-6 py-3 bg-blue-700 hover:bg-blue-600 text-white rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                </svg>
                <span>LinkedIn</span>
            </a>

            <!-- Email Link -->
            <a href="mailto:jim@jine.se"
               aria-label="Email Jim Nelin"
               class="flex items-center justify-center gap-3 px-6 py-3 bg-green-600 hover:bg-green-500 text-white rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                </svg>
                <span>Email</span>
            </a>
        </div>
    </div>
</body>
</html>