Portfolio/experience.html at main · AverageTaaf/Portfolio · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Experience - Taafeef Bin Montaquim</title>
    <meta name="description"
        content="Taafeef's work experience, education, and professional journey as a UI/UX Designer and Front-End Developer">
    <meta name="keywords"
        content="developer experience, Bangladesh developer, student developer journey, web development career">
    <link rel="stylesheet" href="/css/fonts.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

<body>
    <div class="theme-toggle-container">
        <button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">
            <i class="fas fa-moon"></i>
        </button>
    </div>

    <!-- Parallax Background Elements -->
    <div class="parallax-bg">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
        <div class="shape shape-3"></div>
        <div class="shape shape-4"></div>
    </div>

    <header class="header">
        <nav class="nav">
            <div class="nav-brand">
                <a href="/home">Taafeef</a>
            </div>
            <ul class="nav-links">
                <li><a href="/home">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/services">Services</a></li>
                <li><a href="/projects">Projects</a></li>
                <li><a href="/experience" class="active">Experience</a></li>
                <li><a href="/testimonials">Testimonials</a></li>
                <li><a href="/blog">Blog</a></li>
                <li><a href="/contact">Contact</a></li>
                <li><a href="/socials">Socials</a></li>
            </ul>
            <div class="nav-toggle">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </nav>
    </header>

    <main class="main">
        <section class="experience-hero">
            <div class="container">
                <h1 class="section-title fade-in">My Experience</h1>
                <p class="experience-intro fade-in">My journey in design and development, from early explorations to
                    current professional work.</p>
            </div>
        </section>

        <section class="timeline-section">
            <div class="container">
                <h2 class="section-title">Professional Timeline</h2>
                <div class="timeline">
                    <div class="timeline-item fade-in">
                        <div class="timeline-date">2023 - Present</div>
                        <div class="timeline-content">
                            <h3 class="timeline-title">UI/UX Designer & Front-End Developer</h3>
                            <h4 class="timeline-subtitle">redinTech - Roblox Company</h4>
                            <p class="timeline-description">Designing and developing user interfaces for Roblox games
                                and experiences, creating responsive web designs, and implementing front-end solutions
                                with a focus on user experience and performance.</p>
                            <div class="timeline-skills">
                                <span class="skill-tag">UI/UX Design</span>
                                <span class="skill-tag">Front-End Development</span>
                                <span class="skill-tag">Roblox Studio</span>
                                <span class="skill-tag">Figma</span>
                            </div>
                        </div>
                    </div>

                    <div class="timeline-item fade-in">
                        <div class="timeline-date">2022 - 2023</div>
                        <div class="timeline-content">
                            <h3 class="timeline-title">Freelance Web Developer</h3>
                            <h4 class="timeline-subtitle">Self-Employed</h4>
                            <p class="timeline-description">Worked on various web development projects for clients,
                                focusing on creating responsive websites, implementing UI designs, and ensuring
                                cross-browser compatibility. Developed skills in client communication and project
                                management.</p>
                            <div class="timeline-skills">
                                <span class="skill-tag">HTML/CSS</span>
                                <span class="skill-tag">JavaScript</span>
                                <span class="skill-tag">Responsive Design</span>
                                <span class="skill-tag">Client Management</span>
                            </div>
                        </div>
                    </div>

                    <div class="timeline-item fade-in">
                        <div class="timeline-date">2021 - 2022</div>
                        <div class="timeline-content">
                            <h3 class="timeline-title">Student Developer</h3>
                            <h4 class="timeline-subtitle">Personal Projects & Learning</h4>
                            <p class="timeline-description">Focused on learning web development fundamentals, exploring
                                different programming languages, and building personal projects to apply new skills.
                                Developed a strong foundation in problem-solving and self-directed learning.</p>
                            <div class="timeline-skills">
                                <span class="skill-tag">Programming Fundamentals</span>
                                <span class="skill-tag">Problem Solving</span>
                                <span class="skill-tag">Self-Learning</span>
                                <span class="skill-tag">Project Development</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="education-section">
            <div class="container">
                <h2 class="section-title">Education</h2>
                <div class="education-grid">
                    <div class="education-card fade-in">
                        <div class="education-icon">
                            <i class="fas fa-graduation-cap"></i>
                        </div>
                        <h3 class="education-title">High School Student</h3>
                        <h4 class="education-subtitle">Science Stream</h4>
                        <p class="education-period">2021 - Present</p>
                        <p class="education-description">Currently pursuing high school education with a focus on
                            science subjects while developing programming and design skills through self-study and
                            projects.</p>
                    </div>

                    <div class="education-card fade-in">
                        <div class="education-icon">
                            <i class="fas fa-laptop-code"></i>
                        </div>
                        <h3 class="education-title">Self-Taught Developer</h3>
                        <h4 class="education-subtitle">Online Courses & Practice</h4>
                        <p class="education-period">2020 - Present</p>
                        <p class="education-description">Continuously learning through online resources, documentation,
                            tutorials, and hands-on project development. Focus on practical application of concepts.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="certifications-section">
            <div class="container">
                <h2 class="section-title">Certifications & Achievements</h2>
                <div class="certifications-grid">
                    <div class="certification-card fade-in">
                        <h3 class="certification-title">Web Development Fundamentals</h3>
                        <p class="certification-issuer">Self-Studied</p>
                        <p class="certification-date">2022</p>
                    </div>

                    <div class="certification-card fade-in">
                        <h3 class="certification-title">UI/UX Design Principles</h3>
                        <p class="certification-issuer">Online Course Completion</p>
                        <p class="certification-date">2023</p>
                    </div>

                    <div class="certification-card fade-in">
                        <h3 class="certification-title">JavaScript ES6+</h3>
                        <p class="certification-issuer">Self-Studied</p>
                        <p class="certification-date">2023</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2023 Taafeef Bin Montaquim. All rights reserved.</p>
        </div>
    </footer>

    <script src="/js/parallax.js"></script>
    <script src="/js/animations.js"></script>
    <script src="/js/main.js"></script>
</body>

</html>