kryzziii.github.io/project-ifen-form.html at main · Kryzziii/kryzziii.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
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#F5F5F7">
    <title>Projektdetails | Chris Jemming</title>
    <link rel="icon" type="image/png" href="assets/favicon.png">

    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <script src="js/components.js" defer></script>
    <script src="js/main.js" defer></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.body.classList.add('preload');
            setTimeout(() => { document.body.classList.remove('preload'); }, 200);
        });
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme) { document.documentElement.setAttribute('data-theme', savedTheme); }
    </script>
</head>
<body class="preload">

<div class="background-orbs">
    <div class="orb orb-1"></div>
    <div class="orb orb-2"></div>
</div>

<app-navbar></app-navbar>

<main class="container">

    <div class="back-nav fade-in">
        <a href="projects.html" class="back-link"><i class="fa-solid fa-arrow-left"></i> Back to Projects</a>
    </div>

    <section class="fade-in" style="margin-bottom: 30px;">
        <h1 style="font-size: 2.5rem; margin-bottom: 10px;">Online Form - IFEN / MENJE</h1>
        <p style="color: var(--text-secondary); font-size: 1.2rem;">Forms available throughout the MENJE with specific permissions per user</p>
    </section>

    <div class="project-hero-frame fade-in">
        <img src="assets/projects/ifen-form-cover.jpeg" alt="Project preview" class="project-hero-img">
    </div>

    <div class="bento-grid">

        <div class="glass-card fade-in" style="padding: 32px; align-self: start;">
            <h3 style="margin-bottom: 20px;"><i class="fa-solid fa-circle-info"></i> Key Facts</h3>

            <ul class="meta-list">
                <li class="meta-item">
                    <span class="meta-label">Company</span>
                    <span class="meta-value">IFEN</span>
                </li>
                <li class="meta-item">
                    <span class="meta-label">Year</span>
                    <span class="meta-value">2021</span>
                </li>
                <li class="meta-item">
                    <span class="meta-label">Role</span>
                    <span class="meta-value">Intern</span>
                </li>
                <li class="meta-item">
                    <span class="meta-label">Context</span>
                    <span class="meta-value">Internship Project</span>
                </li>
            </ul>

            <h4 style="margin-top: 30px; margin-bottom: 15px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary);">Tech Stack</h4>
            <div class="skill-cloud">
                <span class="skill-tag">Visual Basic</span>
                <span class="skill-tag">Access</span>
                <span class="skill-tag">SQL</span>
            </div>
        </div>

        <div class="glass-card span-2 fade-in" style="padding: 40px;">
            <h3 style="margin-bottom: 20px;"><i class="fa-solid fa-pen-nib"></i> Project description</h3>

            <div class="rich-text">
                <p>
                    I developed a prototype of a multilingual dynamic online form with specific permissions per user. This prototype has been transferred to the systems of <i>CGIE</i>. <a href="https://portal.education.lu/cgie/ABOUT-US" style="font-style: italic; color: var(--text-secondary)">CGIE</a> is the IT department of the Luxembourgish Ministry of Education.
                </p>

                <h3>Architecture</h3>
                <p>
                    The prototype has been developed in Microsoft Access with Visual Basic and had an SQL-powered Database in its backend.
                </p>

                <h3>Scope of use</h3>
                <p>
                    It was a prototype for an online form that would be used by employees of the Luxembourgish Ministry of Education (MENJE). The form allows users to fill in various fields and submit the data, which is then stored in a central database. The form also includes user authentication and permission management, ensuring that only authorized personnel can access and modify certain sections of the form.
                </p>
                <p>
                    This form is now available throughout the whole MENJE, which means that every employee of the Luxembourgish education system has access to it.
                </p>
            </div>
        </div>

        <div class="glass-card span-3 fade-in" style="padding: 32px;">
            <h3><i class="fa-solid fa-images"></i> Insights</h3>
            <p style="color: var(--text-secondary);">Screenshots from forms and dashboard (with test data).</p>

            <div class="gallery-grid">
                <div class="gallery-item">
                    <img src="assets/projects/ifen-form-anfrage.jpeg" alt="Form 1">
                </div>
                <div class="gallery-item">
                    <img src="assets/projects/ifen-form-angebot.jpeg" alt="Form 2">
                </div>
                <div class="gallery-item">
                    <img src="assets/projects/ifen-form-dashboard.png" alt="Dashboard">
                </div>
            </div>
        </div>

    </div>

</main>

<app-footer></app-footer>
</body>
</html>