ferry5245.github.io/index.html at master · ferry5245/ferry5245.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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Fey's Website</title>
</head>
<body>
    <!-- Header -->
    <section id="header">
        <div class="header container">
            <div class="nav-bar">
                <div class="my-name">
                    <h1><a href="#hero"><span>F</span>EY</a></h1>
                </div>
                <div class="nav-list">
                    <div class="hamburger"><div class="bar"></div></div>
                    <ul>
                        <li><a href="#hero" data-after="Home">Home</a></li>
                        <li><a href="#about" data-after="About">About</a></li>
                        <li><a href="#services" data-after="Services">Services</a></li>
                        <li><a href="#skills" data-after="Skills">Skills</a></li>
                        <li><a href="#contact" data-after="Contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Header -->

    <!--Hero Section-->
    <section id="hero">
        <div class="hero container">
            <div>
                <h1>Hello<span></span></h1>
                <h1>My Name is<span></span></h1>
                <h1>Ferry Chandra<span></span></h1>
                <a href="CV.pdf" download="CV_Ferry Chandra.pdf" type="button" class="cta">Curriculum Vitae</a>
            </div>
        </div>
    </section>
    <!--End of Hero Section-->

    <!-- About Me -->
    <section id="about">
        <div class="about container">
            <div class="col-left">
                <div class="about-img">
                    <img src="Images/IMG-20191007-WA0022-LONG.jpg">
                </div>
            </div>
            <div class="col-right">
                <h1 class="section-title">About <span>Me</span></h1>
                <h2>Ferry Chandra</h2>
                <p>Hey there, nice to greet you. Well, you know my full name already, but you can call me Ferry or either <span>FEY</span>
                    as in my assistant code at the Laboratory that I'm in.
                    I am an assistant of Daskom Laboratory in Telkom University. I am humbled to be the part of this laboratory.
                </p>
                <a href="CV.pdf" download="CV_Ferry Chandra.pdf" type="button" class="cta">Download Resume</a>
            </div>
        </div>
    </section>
    <!-- End of About Me -->

    <!-- Service Section -->
    <section id="services">
        <div class="services container">
            <div class="service-top">
                <h1 class="section-title">Serv<span>i</span>ces</h1>
            <p>Hey hey, here are some services that I can offer to you. I may not be the best at it,
                but I will do my best to lend you a hand with the skills that I already have.
            </p>
            </div>
            <div class="service-bottom">
                <div class="service-item">
                    <div class="icon"><img src="Images/Microphone.png"></div>
                    <h2>Public Speaking</h2>
                    <p>I have a little bit of ability when it comes to speak myself up. I am a talkative person,
                        and I don't hesitate to provide you some help as an MC, orator, and even lector in Mass.
                    </p>
                </div>
                <div class="service-item">
                    <div class="icon"><img src="Images/Music.png"></div>
                    <h2>Flutist</h2>
                    <p>I was a Flutist for my Seminary's Symphony Orchestra, and my teacher is Mas Didiek SSS.
                        It has been a long time since I last played, my skill may be a little rusty.
                    </p>
                </div>
                <div class="service-item">
                    <div class="icon"><img src="Images/Coding-icons.png"></div>
                    <h2>Basic Programming</h2>
                    <p>There are some programming languages that I am currently working on, and those programming
                        languages are Python, C, JavaScript. I am looking forward to improve
                        my skills even futher with mutual learning.
                    </p>
                </div>
                <div class="service-item">
                    <div class="icon"><img src="Images/Tutor-icons.png"></div>
                    <h2>Tutor and Trainer</h2>
                    <p>I once remembered that someone had told me that by teaching, a one is also learning. Therefore,
                        I would like to share my knowledge in some of these subjects, such as Mathemathical, Latin,
                        Basic Programming, and even Sports.
                    </p>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Service Section -->

    <!-- Skill Building -->
    <section id="skills">
        <div class="skills container">
            <div class="skills-header">
                <h1 class="section-title">Skill <span>Upgrade</span></h1>
            </div>
            <div class="all-skills">
                <div class="skills-item">
                    <div class="skills-info">
                        <h1>Basketball</h1>
                        <h2>Once was a Dunker</h2>
                        <p>When I was at high school, I became the only one who can dunks. But since I never get a workout,
                            everything fades, but that's not an excuse. Time to pick my pace up.<br>
                            "I can't relate to lazy people. We don't speak the same language. I don't understand you, I don't want
                            to understand you."<br>
                            - Kobe Bean Bryant -
                        </p>
                    </div>
                    <div class="skills-img">
                        <img src="Images/Kobe-Wallpaper.jpg" alt="Basketball">
                    </div>
                </div>
                <div class="skills-item">
                    <div class="skills-info">
                        <h1>Programming</h1>
                        <h2>Way to Break the Brain Cells</h2>
                        <p>I would admit. It is a long way up from the current skill of mine to reach the desired star.
                            Yet giving up is not an option, got to say to myself about something that is worth to fight for.
                            I will say, this is the one.<br>
                            "A ship in harbor is safe, but that is not what ships are built for."<br>
                            - John A. Shedd -
                        </p>
                    </div>
                    <div class="skills-img">
                        <img src="Images/programming.jpg" alt="Programming">
                    </div>
                </div>
                <div class="skills-item">
                    <div class="skills-info">
                        <h1>Music</h1>
                        <h2>Not Being Great, yet to Enjoy</h2>
                        <p>At the time, I was a Flute principal in my Seminary's Symphony Orchestra. Was a part of
                            "Music of Stillness" Vocal Concert of Vox Alberti, and currently taking part as a member of
                            Telkom University Choir. Although that I don't have that much of a skill, but I tried to do my best.<br>
                            "Bene Cantat Bis Orat"<br>
                            - Sancto Agustinus a Hippo -
                        </p>
                    </div>
                    <div class="skills-img">
                        <img src="Images/IMG_20210831_205909.jpg" alt="Orchestra">
                    </div>
                </div>
                <div class="skills-item">
                    <div class="skills-info">
                        <h1>Trading and Investing</h1>
                        <h2>Retirement is a certainty, but the fund is not</h2>
                        <p>Learning to risk my assests for the investment is not an easy thing, but thinking about the future
                            is a must. The older I am, the more responsibility that I must carry on, therefore I would say that
                            investing is one of the way to relieve it a little.<br>
                            "Be Fearful When Others Are Greedy<br>and<br>Greedy When Others Are Fearful"<br>
                            - Warren Buffet -
                        </p>
                    </div>
                    <div class="skills-img">
                        <img src="Images/Trading-Wallpaper.jpg" alt="Trading">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Skill Building -->

    <!-- Contact Me -->
    <section id="contact">
        <div class="contact container">
            <div><h1 class="section-title">Personal <span>Contact</span></h1></div>
            <div class="contact-items">
                <div class="contact-item">
                    <div class="icon"><img src="Images/Whatsapp-icons.png"></div>
                    <div class="contact-info">
                        <h1>Whatsapp</h1>
                        <h2>+62 896 3670 3133</h2>
                    </div>
                </div>
                <div class="contact-item" id="gmail">
                    <div class="icon"><img src="Images/Gmail-icons.png"></div>
                    <div class="contact-info">
                        <h1>Gmail</h1>
                        <h2>ignatiusferry5245@gmail.com</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End of Contact Me -->

    <!-- Footer -->
    <section id="footer">
        <div class="footer container">
            <div class="my-name"><h1><span>F</span>erry <span>C</span>handra</h1></div>
            <h2>Feel Free to Reach Out for Me</h2>
            <div class="social-icon">
                <div class="social-item">
                    <a href="https://www.facebook.com/ignatiusferry.chandra" target="_blank"><img src="Images/Facebook-icons.png"></a>
                </div>
                <div class="social-item">
                    <a href="https://www.instagram.com/basiliusferry/" target="_blank"><img src="Images/Instagram-logo.png"></a>
                </div>
                <div class="social-item">
                    <a href="https://twitter.com/ferry_5245" target="_blank"><img src="Images/Twitter-icons.png"></a>
                </div>
                <div class="social-item">
                    <a href="https://github.com/ferry5245" target="_blank"><img src="Images/Github-icons.png"></a>
                </div>
            </div>
            <div id="end">Copyright © 2020 Ferry. All rights reserved</div>
        </div>
    </section>
    <!-- End of Footer -->
    <script src="script.js"></script>
</body>
</html>