aroonsekar.github.io/index.html at master · aroonsekar/aroonsekar.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
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <title>Arun Sekar</title>
</head>
<body>
    <header>
        <div class="contact-info">
            <a href="https://www.linkedin.com/in/arunkumarsekar/" class="contact-link">LinkedIn</a> |
            <a href="https://www.instagram.com/arunsmiracle/" class="contact-link">Instagram</a>  |
            <a href="https://github.com/aroonsekar" class="contact-link">GitHub</a>  |
            <a href="assets/Arun_CV.pdf" class="contact-link">Resume</a>
        </div>
        <div>
            <button id="night-mode-toggle">I am Batman</button>
        </div>

    </header>

    <main>
        <div class="container">

            <!-- Left Section (Profile and Accordion) -->
            <div class="left-section">
                <h1>hi arun here!</h1>
                <h2>Designer / Developer /
                    <a href="assets/favicon/visionary.png" class="contact-link">Visonary:)🔗</a>
                </h2>
                <p> Based out of Manchester, application developer working on 3 different cross platform mobile apps and a webapp all at once... previously a Junior Art Person in an advertising agency based of Chennai, India. Worked on big names too!<br>
                    Always wanted to work on games, have also designed and developed a couple of 2D games which I've lost track of. There is a project though, that I did for my dissertation, you can download and play that. Did everything in unreal engine.
                    <br>
                    <br> <a href="https://drive.google.com/drive/folders/1LQ7kVUzevUhYpG1NQfoKJzIzUxPrGNnY?usp=sharing" class="contact-link"> ~Game link!~</a>
                    <br><br>
                    Another interesting project I did was a virtual city flood simulation for Northumbrian Water Ltd during my masters.
                    <br><br>
                    <a href="" class="contact-link"> ~Game concept document link!~ I'll update this later</a>
                    <br><br>
                    I have also been working on training models in Outlier. Not sure if I can share those here though. But understood a lot about how chatgpt, gemini, claude work under the hood. Interesting.
                    <br><br>
                 ~email me - arunsmiracle@gmail.com i can do a lot..let see if we could get to a common idea~
                </p>

                <h2 style="text-align:left; margin-bottom:0.1em;">Timeline</h2>


                <section class="timeline-container">


                <!-- One timeline-item for each significant year -->
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year">1999</div>
                    <div class="timeline-heading">Season 1: EP 1</div>
                    <div class="timeline-details">
                        <p>Birth year! dont really remember anything tbh.</p>
                    </div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year">2002</div>
                    <div class="timeline-heading">First Day at School</div>
                    <div class="timeline-details">
                        <p>Apparently, cried a lot!</p>
                    </div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year">2003 - 2009</div>
                    <div class="timeline-heading">Don't Remember a Lot. But I do remember...</div>
                    <div class="timeline-details">
                        <p>being curious about everything! modified a wired RC car to run on its own. Built a lot 6W rover with the mechanics set. Average at academics :)</p>
                    </div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year">2010 - 2014</div>
                    <div class="timeline-heading">Did a Lot of Stuff</div>
                    <div class="timeline-details">
                        <p>Not great at Sports-sed to play street cricket, volley ball, shuttle badminton. Though dad encouraged music, wasn;t  my cup of tea. Did successfully pass 4 grades. random art projects, thought I figured what I liked.</p>
                    </div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year">2015</div>
                    <div class="timeline-heading">Secondary School Done</div>
                    <div class="timeline-details">
                        <p>First checkpoint reached. Next up, Higher Secondary!</p>
                    </div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year">2017</div>
                    <div class="timeline-heading">Higher Secondary School Done. Undergrad: Begins </div>
                    <div class="timeline-details">
                        <p>You can have fun after Higher Secondary! Lies!</p>
                        <p>Headed off to undergrad. So many new friends and experience of a lifetime!</p>
                    </div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year">2018 - 2020</div>
                    <div class="timeline-heading">New Experiences</div>
                    <div class="timeline-details">
                        <p>Travelled a lot with academics as the excuse. that was the only best part. and the bois. never struggled with grades</p>
                    </div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year">2021</div>
                    <div class="timeline-heading">Undergrad Done & I am a Junior Art Person? What?</div>
                    <div class="timeline-details">
                        <p>Never imagined I'd be working as a Junior Art Person with a merit in Electrical and Electronics Engineering. Learned so much about design all thanks to my seniors. Also got to work on a lot of amazing projects</p>
                        <a href="https://www.behance.net/arunsmiracle" class="contact-link"> my behance! note: not up to date</a>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year">2023</div>
                    <div class="timeline-heading">canon event</div>
                    <div class="timeline-details">
                        <p>Enrolled in a Master's program. moved to the UK.</p>
                    </div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year">2024</div>
                    <div class="timeline-heading">I am an Associate Software Developer</div>
                    <div class="timeline-details">
                        <p>got the job cause i knew the guy. faked it, till I ...</p>
                    </div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year">2025</div>
                    <div class="timeline-heading">Season 25</div>
                    <div class="timeline-details">
                        <p>another major canon event. ...</p>
                    </div>
                </div>

                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-year">Umm...</div>
                    <div class="no-heading">...</div>
                </div>
            </section>
            <!-- TIMELINE SECTION END -->
        </div>
                <!--
                <section class="ëxperience">
                    <h2> Experience </h2>
                    <h4> Associate Software Developer</h4>
                    <h5> AR Experts Ltd </h5>
                    <h4> Junior Art Person</h4>
                    <h5> Digitally Inspired Media Pvt Ltd </h5>

                </section>


                <section class="accordion">

                    <div class="accordion-item">
                        <button class="accordion-button">NWL Virtual Newcastle Gateshead - Northumbrian Water Limited<span>+</span></button>
                        <div class="accordion-content">
                            <p>Data Management, MS Office Suite, Unreal Engine, 3DS Max</p>
                            <p>For the Advanced Practice Semester, worked on a project with “Northumbrian Water Ltd (NWL)” to explore the viability of simulations on virtual city models to
                                estimate the impact of floods in water systems operations. Used Unreal Engine to simulate a flood situation in the Newcastle Quayside area and developed
                                a game concept for better understanding of environmental risks. This project also involves in project management which requires exceptional leadership,
                                organisational, team-coordination, time management, presentation and communication skills. </p>
                        </div>
                    </div>

                    <div class="accordion-item">
                        <button class="accordion-button"> TOONELAND – An events booking Website <span>+</span></button>
                        <div class="accordion-content">
                            <p>HTML, CSS, JavaScript, PHP, Figma</p>
                            <p>Designed and developed a fully functional Dynamic website using HTML, CSS, JavaScript and PHP for server-side programming. The Design phase was done in
                                Figma which was later developed using the above-mentioned web-development tools. The website comprises of features for user registration and login, ability
                                  to book and manipulate bookings, sessions dedicated for the users, security measures against SQL-injection, cross-site scripting are also employed.</p>
                        </div>
                    </div>

                    <div class="accordion-item">
                        <button class="accordion-button"> SUDOKU <span>+</span></button>
                        <div class="accordion-content">
                            <p>Java, Swing API, Figma, OOPs</p>
                            <p>As a part of the assessment for the module “Object Oriented Programming”, developed a SUDOKU game from the partial code provided. The game was developed
                                  with the Object-Oriented Programming concepts in JAVA. The Game has both Text-based UI and a Graphical UI. Designed the Graphical UI in Figma
                                 and developed in JAVA using Swing API. The assessment also included various testing methods that are used for debugging.
                                 The project underscores the skills in software development lifecycle management and problem-solving within both theoretical and real-world contexts.</p>
                        </div>
                    </div>

                    <div class="accordion-item">
                        <button class="accordion-button"> TheUnblog.in <span>+</span></button>
                        <div class="accordion-content">
                            <p>Wordpress, HTML, CSS, Android Studio, JAVA</p>
                            <p>A travel, food, lifestyle and tech blog is a hobby project designed with Wordpress and customized using HTML, CSS.
                                The Android application is a WebView app of the website “theunblog.in” developed in JAVA using Android Studio.</p>
                        </div>
                    </div>
                </section>
            </div>

        -->

            <!-- Right Section (Tic-Tac-Toe Game) -->
            <div class="right-section">
                <section id="tic-tac-toe">
                    <h1>Bored?</h1>
                    <h2>Tic-Tac-Toe</h2>
                    <h5> the computer very smart atm:) - lmk if you beat it</h5>
                    <div id="board"></div>
                    <div id="message"></div>
                    <button id="play-again" onclick="resetGame()">Play Again</button>
                </section>
            </div>
        </div>
    </main>

    <!-- Footer Section -->
    <footer>
        <div class="footer-content">
            <p id="page-size">Page Size: Calculating...</p>
            <p id="created-by">Created by Arun with ChatGPT.</p>
            <p id="current-time"></p>
        </div>
    </footer>

    <!-- Animations -->
    <div id="dark-glow"></div>
    <div id="light-glow"></div>

    <script src="script.js"></script>

</body>
</html>