-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (141 loc) · 10.6 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Website</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="images/avatar.png">
<!-- google poppins font cdn -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- Google Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body class="bg-[#111111]">
<header class="bg-[#000000] text-white ">
<section class="wrapper flex justify-between items-center h-[90px]" >
<h1><img src="images/logo.png" alt="logo" class="w-[90px]"></h1>
<ul class="flex justify-end items-center max-sm:hidden">
<li class="mr-10"><a href="#" text-[16px] class="font-semibond hover:text-green-500">Home</a></li>
<li class="mr-10"><a href="#" text-[16px] class="font-semibond hover:text-green-500">Projects</a></li>
<li class="mr-10"><a href="#" text-[16px] class="font-semibond hover:text-green-500">Experience</a></li>
<li class="mr-10"><a href="#" text-[16px] class="font-semibond hover:text-green-500">Contact</a></li>
</ul>
<span class="material-symbols-outlined sm:hidden">
menu
</span>
</section>
</header>
<section class="py-10 sm:py-20 text-white">
<section class="wrapper">
<div class="flex justify-center mb-5">
<img src="images/avatar.png" alt="avatar" class="w-[180px]">
</div>
<h1 class="text-center font-bold text-[36px] sm:text-[48px] md:text-[56px] leading-none mb-5">I do code and <br> make content <span class="bg-gradient-to-br from-[#41ff4a] to-black text-transparent bg-clip-text">about it!</span> </h1>
<p class="text-[12px] sm:text-[16px] font-normal text-center w-[90%] md:w-[60%] m-auto opacity-50 mb-10">I am a seasoned full-stack software engineer with over 8 years of professional experience, specializing in backend development. My expertise lies in crafting robust and scalable SaaS-based architectures on the Amazon AWS platform.</p>
<div class="flex justify-center items-center max-sm:flex-col gap-4">
<a href="#" class="bg-white text-black py-2 sm:py-4 px-8 rounded-full font-semibold sm:mr-5 hover:bg-[#41ff4a]">Get it touch</a>
<a href="#" class="border-2 border-white py-2 sm:py-4 px-8 rounded-full font-semibold hover:border-[#41ff4a] hover:text-[#41ff4a]">Download cv </a>
</div>
</section>
</section>
<section class="pb-20">
<section class="wrapper">
<h1 class="text-center text-[20px] min-[400px]:text-[28px] font-medium bg-gradient-to-br from-[#ffffff] to-black text-transparent bg-clip-text">EXPERIENCE WITH</h1>
<div class="flex justify-center items-center mt-10">
<img src="images/javascript.png" alt="image" class="w-[32px] min-[450px]:w-[40px] mr-6 min-[450px]:mr-12 transform hover:translate-y-[-10px] duration-500 ease-in-out">
<img src="images/nodejs.png" alt="image" class="w-[32px] min-[450px]:w-[40px] mr-6 min-[450px]:mr-12 transform hover:translate-y-[-10px] duration-500 ease-in-out">
<img src="images/html.png" alt="image" class="w-[32px] min-[450px]:w-[40px] mr-6 min-[450px]:mr-12 transform hover:translate-y-[-10px] duration-500 ease-in-out">
<img src="images/css.png" alt="image" class="w-[32px] min-[450px]:w-[40px] mr-6 min-[450px]:mr-12 transform hover:translate-y-[-10px] duration-500 ease-in-out">
<img src="images/reactjs.png" alt="image" class="w-[32px] min-[450px]:w-[40px] transform hover:translate-y-[-10px] duration-500 ease-in-out">
</div>
</section>
</section>
<section class="pb-20">
<section class="wrapper">
<h1 class="text-center text-[32px] font-bold bg-gradient-to-r from-red-600 to-[#0059ff] text-transparent bg-clip-text mb-10">PROJECTS</h1>
<div class="flex justify-center items-center max-sm:flex-col gap-10">
<div class="sm:w-[40%] bg-[#1e1e1e] sm:mr-10 rounded-2xl transition transform hover:scale-95 duration-1000">
<img src="images/html-project.png" alt="IMAGE" >
<div class="flex justify-between items-center p-4 text-white">
<div>
<h3 class="text-[10px] font-semibold opacity-70">CLICK HERE TO VISIT</h3>
<h1 class="text-[18px] font-bold">HTML TUTORIALS</h1>
</div>
<img src="images/arrow.png" alt="arrow" class="w-[12px]">
</div>
</div>
<div class=" sm:w-[40%] bg-[#1e1e1e] rounded-2xl transition transform hover:scale-95 duration-1000">
<img src="images/css-project.png" alt="IMAGE">
<div class="flex justify-between items-center p-4 text-white">
<div>
<h3 class="text-[10px] font-semibold opacity-70">CLICK HERE TO VISIT</h3>
<h1 class="text-[18px] font-bold">HTML TUTORIALS</h1>
</div>
<img src="images/arrow.png" alt="arrow" class="w-[12px]">
</div>
</div>
</div>
</section>
</section>
<section class="pb-20">
<section class="wrapper sm:px-16">
<h1 class="text-center text-[32px] font-extrabold bg-gradient-to-br from-[#41ffff] to-black text-transparent bg-clip-text mb-10">EXPERIENCE</h1>
<div class="mb-12">
<div class="flex justify-between md:items-center text-white mb-4 flex-col md:flex-row">
<div class="flex flex-col md:flex-row md:justify-between md:items-center">
<img src="images/google-logo.png" alt="google logo" class="w-[28px] sm:w-[34px] mr-4 max-md:mb-3">
<h3 class="text-[18px] sm:text-[22px] font-bold">Software Engineer at Google</h3>
</div>
<span class="text-[12px] sm:text-[14px] font-normal opacity-60">Nov 2019 - Present</span>
</div>
<p class="text-[12px] sm:text-[14px] font-normal text-white opacity-60">
As a Senior Software Engineer at Google, I played a pivotal role in developing innovative solutions for Google's core search algorithms. Collaborating with a dynamic team of engineers, I contributed to the enhancement of search accuracy and efficiency, optimizing user experiences for millions of users worldwide.
</p>
</div>
<div class="mb-12">
<div class="flex justify-between md:items-center text-white mb-4 flex-col md:flex-row">
<div class="flex flex-col md:flex-row md:justify-between md:items-center ">
<img src="images/apple-logo.png" alt="google logo" class="w-[28px] sm:w-[34px] mr-4 max-md:mb-3">
<h3 class="text-[18px] sm:text-[22px] font-bold">Software Engineer at Apple</h3>
</div>
<span class="text-[12px] sm:text-[14px] font-normal opacity-60">Jan 2018 - Dec 2017</span>
</div>
<p class="text-[12px] sm:text-[14px] font-normal text-white opacity-60">
During my tenure at Apple, I held the role of Software Architect, where I plated a key role in shaping the architecture of mission-critical software projects. Responsible for designing scalable and efficient systems, I provided technical leadrship to a cross-functional team.
</p>
</div>
<div class="mb-12">
<div class="flex justify-between md:items-center text-white mb-4 flex-col md:flex-row">
<div class="flex flex-col md:flex-row md:justify-between md:items-center ">
<img src="images/meta-logo.png" alt="google logo" class="w-[28px] sm:w-[34px] mr-4 max-md:mb-3">
<h3 class="text-[18px] sm:text-[22px] font-bold">Software Engineer at Meta</h3>
</div>
<span class="text-[12px] sm:text-[14px] font-normal opacity-60">Jan 2017 - Oct 2019</span>
</div>
<p class="text-[12px] sm:text-[14px] font-normal text-white opacity-60">
at Meta, I served as a Software Engineer, focusing on the design and implementation of backend systems for the social media giant's dynamic platform. Working on projects that involved large-scale data processing and user engagement features, I leaveraged my expertice to ensure seamless functionality and scalability.
</p>
</div>
</section>
</section>
<footer class="bg-[#1e1e1e] max-[450px]:py-10 py-20 text-white">
<section class="wrapper">
<h1 class="max-[450px]:text-[24px] text-[32px] font-semibold max-[450px]:mb-5 mb-10">Contact</h1>
<p class="max-[450px]:text-[12px] text-[16px] font-light opacity-60 max-[450px]:w-full w-[75%]">Seasoned Full Stack Software Engineer with over 8 years of hands-on experience in designing and implementing robust, scalable, and innovative web solutions, Adept at leveraging a comprehensive skill set encompassing front-end and back-end technologies</p>
<div class="flex justify-start items-centemax-[450px]:my-5 my-10">
<img src="images/Email Icon.png" alt="email" class="max-[450px]:w-[18px] w-[22px] mr-2">
<p class="max-[450px]:text-[12px] text-[16px] font-normal opacity-70">ajmalfaris.me@gmail.com</p>
</div>
<div class="flex justify-start items-center">
<img src="images/instagram (1).png" alt="instagram" class="max-[450px]:w-[18px] w-[24px] mr-8">
<img src="images/x.png" alt="x" class="max-[450px]:w-[18px] w-[24px] mr-8">
<img src="images/youtube.png" alt="yt" class="max-[450px]:w-[18px] w-[24px] mr-8">
</div>
</section>
</footer>
</body>
</html>