SHPortfolio/index.html at main · evdk25-wq/SHPortfolio · 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
<!DOCTYPE html>
<!-- Build update -->
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JLVDK - Portfolio Full Stack</title>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Courier+Prime:wght@400;700&display=swap"
        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="css/style.css">
    <script defer src="https://cloud.umami.is/script.js"
        data-website-id="7a724083-db3c-4a07-bb75-0db860d0457f"></script>
</head>

<body>

    <canvas id="particles-canvas"></canvas>

    <div class="particle-toggle-container">
        <label class="switch">
            <input type="checkbox" id="particleToggle" checked>
            <span class="slider"></span>
        </label>
        <span class="toggle-label">FX</span>
    </div>

    <div class="intro-text">JLVDK</div>

    <div class="particles" id="particles"></div>

    <div class="comic-container" id="comicContainer">
        <div class="comic-grid" id="comicGrid">
            <button class="panel-button" id="btn-1">À PROPOS</button>
            <button class="panel-button" id="btn-2">STACK</button>
            <button class="panel-button" id="btn-3">EXPERTISE</button>
            <button class="panel-button" id="btn-4">CONTACT</button>
        </div>
    </div>

    <button class="back-btn" id="backBtn" style="display: none;">← RETOUR AUX PANNEAUX</button>

    <div class="content-section" id="section-about">
        <div class="section-inner">
            <div class="panel-label">PANEL I: ENTER THE GHOST-MAN</div>
            <h2>À PROPOS</h2>
            <p>Développeur Full Stack passionné par la création d'expériences web uniques et mémorables. Je ne me
                contente pas de coder, je crée des univers visuels qui marquent les esprits.</p>
            <p>Mon approche combine rigueur technique et créativité débridée. Chaque projet est une opportunité de
                repousser les limites du web et d'explorer de nouvelles possibilités.</p>
            <p>Autodidacte et curieux, je reste constamment à l'affût des dernières technologies pour offrir des
                solutions modernes et performantes.</p>
        </div>
    </div>

    <div class="content-section" id="section-stack">
        <div class="section-inner">
            <div class="panel-label">PANEL II: THE ARSENAL</div>
            <h2>STACK TECHNIQUE</h2>
            <p>Mon expertise technique s'articule autour de la maîtrise du HTML, du CSS et du JavaScript, les trois
                fondements que je mobilise pour concevoir des expériences web structurées et performantes. Je m'appuie
                également sur les frameworks les plus robustes du marché pour enrichir mes créations.</p>
            <div class="stack-grid">
                <div class="stack-item">HTML5</div>
                <div class="stack-item">CSS3</div>
                <div class="stack-item">JAVASCRIPT</div>
                <div class="stack-item">MYSQL</div>

                <div class="stack-item">PYTHON</div>
                <div class="stack-item">REACT</div>
                <div class="stack-item">NODE.JS</div>
                <div class="stack-item">GIT</div>

            </div>
        </div>
    </div>

    <div class="content-section" id="section-expertise">
        <div class="section-inner">
            <div class="panel-label">PANEL III: THE POWERS</div>
            <h2>EXPERTISE</h2>
            <p>Une approche complète du développement web, de la conception à la réalisation.</p>
            <ul class="expertise-list">
                <li>UI/UX Design - Interfaces intuitives et visuellement impactantes</li>

                <li>Développement Frontend - Expériences web modernes et responsives</li>
                <li>Développement Backend - Architecture robuste et scalable</li>
            </ul>
        </div>
    </div>

    <div class="content-section" id="section-contact">
        <div class="section-inner">
            <div class="panel-label">TO BE CONTINUED IN ISSUE #25!</div>
            <h2>CONTACT</h2>
            <p>Prêt à collaborer sur votre prochain projet. Transformons vos idées en réalité.</p>
            <div class="contact-box">
                <h3>NEXT ISSUE</h3>
                <div class="social-links">
                    <a href="https://github.com/evdk25-wq" target="_blank" class="contact-link">
                        <i class="fab fa-github"></i> GITHUB
                    </a>
                    <a href="https://www.linkedin.com/in/j-l-vdk" target="_blank" class="contact-link">
                        <i class="fab fa-linkedin"></i> LINKEDIN
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script src="Javascript/javascript.js"></script>
</body>

</html>