-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (140 loc) · 16.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Full stack engineer based in Sri Lanka, specializing in UI development using React.">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/x-icon" href="/favicon.ico?">
<meta name="generator" content="Astro v2.9.6">
<title>Shanil De Silva - Full stack engineer</title>
<link rel="stylesheet" href="/portfolio/astro/index.07cc0b17.css" /><script type="module">document.addEventListener("DOMContentLoaded",function(){document.getElementById("downloadButton")?.addEventListener("click",function(){const d="./shanil-de-silva-cv.pdf",n=document.createElement("a");n.href=d,n.download="shanil-desilva-cv.pdf",n.click(),document.body.removeChild(n)})});
</script></head>
<body class="h-full overflow-auto">
<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var d;{let h={0:t=>t,1:t=>JSON.parse(t,a),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(JSON.parse(t,a)),5:t=>new Set(JSON.parse(t,a)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(JSON.parse(t)),9:t=>new Uint16Array(JSON.parse(t)),10:t=>new Uint32Array(JSON.parse(t))},a=(t,e)=>{if(t===""||!Array.isArray(e))return e;let[r,n]=e;return r in h?h[r](n):void 0};customElements.get("astro-island")||customElements.define("astro-island",(d=class extends HTMLElement{constructor(){super(...arguments);this.hydrate=async()=>{var o;if(!this.hydrator||!this.isConnected)return;let e=(o=this.parentElement)==null?void 0:o.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let r=this.querySelectorAll("astro-slot"),n={},c=this.querySelectorAll("template[data-astro-template]");for(let s of c){let i=s.closest(this.tagName);i!=null&&i.isSameNode(this)&&(n[s.getAttribute("data-astro-template")||"default"]=s.innerHTML,s.remove())}for(let s of r){let i=s.closest(this.tagName);i!=null&&i.isSameNode(this)&&(n[s.getAttribute("name")||"default"]=s.innerHTML)}let l=this.hasAttribute("props")?JSON.parse(this.getAttribute("props"),a):{};await this.hydrator(this)(this.Component,l,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))}}connectedCallback(){!this.hasAttribute("await-children")||this.firstChild?this.childrenConnectedCallback():new MutationObserver((e,r)=>{r.disconnect(),setTimeout(()=>this.childrenConnectedCallback(),0)}).observe(this,{childList:!0})}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}start(){let e=JSON.parse(this.getAttribute("opts")),r=this.getAttribute("client");if(Astro[r]===void 0){window.addEventListener(`astro:${r}`,()=>this.start(),{once:!0});return}Astro[r](async()=>{let n=this.getAttribute("renderer-url"),[c,{default:l}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),o=this.getAttribute("component-export")||"default";if(!o.includes("."))this.Component=c[o];else{this.Component=c;for(let s of o.split("."))this.Component=this.Component[s]}return this.hydrator=l,this.hydrate},e,this)}attributeChangedCallback(){this.hydrate()}},d.observedAttributes=["props"],d))}})();</script><astro-island uid="Zzxv3H" prefix="r13" component-url="/portfolio/astro/ThemeWrapper.c3e648a7.js" component-export="ThemeWrapper" renderer-url="/portfolio/astro/client.83b22eca.js" props="{}" ssr="" client="load" opts="{"name":"ThemeWrapper","value":true}" await-children=""><div class="light"><astro-slot>
<div>
<astro-island uid="b04A9" prefix="r9" component-url="/portfolio/astro/BackgroundBlur.d1cbddab.js" component-export="BackgroundBlur" renderer-url="/portfolio/astro/client.83b22eca.js" props="{"className":[0,"fixed top-0 left-0 w-full h-screen -z-10"]}" ssr="" client="load" opts="{"name":"BackgroundBlur","value":true}" await-children=""><div class="fixed top-0 left-0 w-full h-screen -z-10 bg-default"><div id="blur-circle" class="bg-blueGradient"></div><div id="blur"></div></div></astro-island>
<div class="fixed top-0 bg-transparent w-full">
<astro-island uid="jBMvr" prefix="r10" component-url="/portfolio/astro/NavBar.39ad7ef8.js" component-export="NavBar" renderer-url="/portfolio/astro/client.83b22eca.js" props="{}" ssr="" client="load" opts="{"name":"NavBar","value":true}" await-children=""><div class="bg-transparent "><div class="absolute h-[80px] w-full bg-gradient-to-t from-transparent to-bgDefault -z-10"></div><nav class="hidden md:flex w-full"><ul class="flex w-full"><li><a class="focus:text-primary font-heading p-4 ml-2 block hover:text-primary transition-colors cursor-pointer" href="#main">Shanil</a></li><li class="ml-auto"><a class="focus:text-primary focus:font-bold p-4 block hover:text-primary hover:font-bold transition-colors cursor-pointer" href="#about">About</a></li><li class=""><a class="focus:text-primary focus:font-bold p-4 block hover:text-primary hover:font-bold transition-colors cursor-pointer" href="#tech">Technologies</a></li><li class=""><a class="focus:text-primary focus:font-bold p-4 block hover:text-primary hover:font-bold transition-colors cursor-pointer" href="#projects">Projects</a></li></ul><div class="p-4"><label for="dark-mode"><a class="cursor-pointer"><svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-[25px] w-[25px] text-default"><path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M22 12.0004C22 17.5232 17.5228 22.0004 12 22.0004C10.8358 22.0004 9.71801 21.8014 8.67887 21.4357C8.24138 20.3772 8 19.217 8 18.0004C8 15.7792 8.80467 13.7459 10.1384 12.1762C11.31 13.8818 13.2744 15.0004 15.5 15.0004C17.8615 15.0004 19.9289 13.741 21.0672 11.8572C21.3065 11.4612 22 11.5377 22 12.0004Z" fill="#373737"></path><path d="M2 12C2 16.3586 4.78852 20.0659 8.67887 21.4353C8.24138 20.3768 8 19.2166 8 18C8 15.7788 8.80467 13.7455 10.1384 12.1758C9.42027 11.1303 9 9.86422 9 8.5C9 6.13845 10.2594 4.07105 12.1432 2.93276C12.5392 2.69347 12.4627 2 12 2C6.47715 2 2 6.47715 2 12Z" fill="#777B7C"></path></svg></a><input id="dark-mode" name="dark-mode" type="checkbox" hidden=""/></label></div></nav><div class="flex md:hidden justify-between p-4 z-10"><div class="font-heading bold"><a>Shanil De Silva</a></div><div class="flex gap-5"><label for="dark-mode"><a class="cursor-pointer"><svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-[25px] w-[25px] text-default"><path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M22 12.0004C22 17.5232 17.5228 22.0004 12 22.0004C10.8358 22.0004 9.71801 21.8014 8.67887 21.4357C8.24138 20.3772 8 19.217 8 18.0004C8 15.7792 8.80467 13.7459 10.1384 12.1762C11.31 13.8818 13.2744 15.0004 15.5 15.0004C17.8615 15.0004 19.9289 13.741 21.0672 11.8572C21.3065 11.4612 22 11.5377 22 12.0004Z" fill="#373737"></path><path d="M2 12C2 16.3586 4.78852 20.0659 8.67887 21.4353C8.24138 20.3768 8 19.2166 8 18C8 15.7788 8.80467 13.7455 10.1384 12.1758C9.42027 11.1303 9 9.86422 9 8.5C9 6.13845 10.2594 4.07105 12.1432 2.93276C12.5392 2.69347 12.4627 2 12 2C6.47715 2 2 6.47715 2 12Z" fill="#777B7C"></path></svg></a><input id="dark-mode" name="dark-mode" type="checkbox" hidden=""/></label><label for="nav" id="hamburger-menu" class="group"><button><svg class="text-default" fill="currentColor" width="25px" height="25px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.75 7C20.75 7.41421 20.4142 7.75 20 7.75L4 7.75C3.58579 7.75 3.25 7.41421 3.25 7C3.25 6.58579 3.58579 6.25 4 6.25L20 6.25C20.4142 6.25 20.75 6.58579 20.75 7Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M20.75 12C20.75 12.4142 20.4142 12.75 20 12.75L4 12.75C3.58579 12.75 3.25 12.4142 3.25 12C3.25 11.5858 3.58579 11.25 4 11.25L20 11.25C20.4142 11.25 20.75 11.5858 20.75 12Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M20.75 17C20.75 17.4142 20.4142 17.75 20 17.75L4 17.75C3.58579 17.75 3.25 17.4142 3.25 17C3.25 16.5858 3.58579 16.25 4 16.25L20 16.25C20.4142 16.25 20.75 16.5858 20.75 17Z" fill="currentColor"></path></svg></button></label></div><nav class="absolute top-0 left-0 h-0 flex bg-subdued w-full group-checked:h-screen transition-[height] duration-300 justify-center items-center -z-10 overflow-hidden h-0"><ul class="flex flex-col items-center gap-y-6"><li><a class="p-4 text-4xl bold hover:brightness-90" href="#main">Shanil De Silva</a></li><li><a class="p-4 text-4xl bold hover:brightness-90" href="#about">About</a></li><li><a class="p-4 text-4xl bold hover:brightness-90" href="#tech">Technologies</a></li><li><a class="p-4 text-4xl bold hover:brightness-90" href="#projects">Projects</a></li></ul></nav></div></div></astro-island>
</div>
<div class="mx-5 pt-2 max-w-5xl md:mx-auto px-6 bg-transparent">
<div class="flex flex-col">
<main class="flex justify-center flex-col h-screen gap-y-2" id="main">
<div class="text-3xl font-bold">Hi, I'm <span>Shanil De Silva</span></div>
<h1 class="text-5xl font-heading font-extrabold bg-blueGradient text-transparent bg-clip-text">
Full Stack Developer.
</h1>
<div class="text-3xl">Specializing in interactive UI development</div>
<!-- <a
href="https://drive.google.com/uc?export=download&id=1qB3RhOf2TPmPTQ91HqA6F1nI51vdAkz6"
download="Shanil De Silva - CV.pdf"
> -->
<button id="downloadButton" class="rounded-md px-4 py-2 flex cursor-pointer bg-transparent border-2 border-primary hover:shadow-lg hover:bg-primaryFill hover:text-inverse focus:shadow-lg focus:bg-primaryFill focus:text-inverse w-fit gap-2 items-center mt-6 group">
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="30px" viewBox="0 0 24 24" fill="none" class="text-default group-hover:text-inverse group-focus:text-inverse"><path d="M3 15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 3V16M12 16L16 11.625M12 16L8 11.625" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
<div>Resume</div>
</button>
<!-- </a> -->
</main>
<section id="about" class="min-h-screen">
<h2 class="font-heading text-3xl mb-4 bg-blueGradient bg-clip-text text-transparent mt-[60px]">
About Me
</h2>
<div>
<div>
<p class="mb-2">
Experienced web developer, specializing in building intuitive and user
friendly User Interfaces. I have 3 years of experience delivering production
grade software for a variety of clients.
</p>
<p class="mb-2">
Collaborated with international teams to create impactful software solutions
utilized by thousands. Proficient in orchestrating development efforts for
user interfaces, ranging from small-scale projects to large-scale endeavors.
Thrives in close collaboration with designers to transform their visions
into interactive realities.
</p>
<p class="mb-2">
I am currently completing my Bachelors in Engineering part time and I have a
Bachlors in Business - Major in finance and managment
</p>
</div>
</div>
</section>
<section id="tech" class="min-h-screen">
<h2 class="font-heading text-3xl mb-4 bg-blueGradient bg-clip-text text-transparent mt-[60px]">
Technologies I've used
</h2>
<div>
<div class="flex gap-10 flex-wrap items-center justify-center mt-20">
<div class="flex flex-col items-center gap-y-4"><img class="w-16 md:w-32 aspect-square" src="/portfolio/astro/react.b2af9f3f.svg" alt="react logo"/><div class="text-accent font-bold">React</div></div><div class="flex flex-col items-center gap-y-4"><img class="w-16 md:w-32 aspect-square" src="/portfolio/astro/typescript.b786a2bf.svg" alt="typescript logo"/><div class="text-accent font-bold">Typescript</div></div><div class="flex flex-col items-center gap-y-4"><img class="w-16 md:w-32 aspect-square" src="/portfolio/astro/java.3db65323.svg" alt="java logo"/><div class="text-accent font-bold">Java</div></div><div class="flex flex-col items-center gap-y-4"><img class="w-16 md:w-32 aspect-square" src="/portfolio/astro/tailwind.7c29d970.svg" alt="tailwind logo"/><div class="text-accent font-bold">Tailwind</div></div><div class="flex flex-col items-center gap-y-4"><img class="w-16 md:w-32 aspect-square" src="/portfolio/astro/css.f35d6129.svg" alt="css logo"/><div class="text-accent font-bold">CSS</div></div><div class="flex flex-col items-center gap-y-4"><img class="w-16 md:w-32 aspect-square" src="/portfolio/astro/html.82e7043a.svg" alt="html logo"/><div class="text-accent font-bold">HTML</div></div><div class="flex flex-col items-center gap-y-4"><img class="w-16 md:w-32 aspect-square" src="/portfolio/astro/astro.4db4d155.svg" alt="astro logo"/><div class="text-accent font-bold">Astro</div></div><div class="flex flex-col items-center gap-y-4"><img class="w-16 md:w-32 aspect-square" src="/portfolio/astro/mongo.64a21d47.svg" alt="mongo logo"/><div class="text-accent font-bold">MongoDB</div></div>
</div>
</div>
</section>
<section id="projects" class="min-h-screen">
<h2 class="font-heading text-3xl mb-4 bg-blueGradient bg-clip-text text-transparent mt-[60px]">
Projects & Experience
</h2>
<div>
<div class="flex flex-col gap-y-8">
<div>
<h4 class="font-bold text-xl mb-2">
Full stack development for Insurance broker
</h4>
<p class="mb-2">
Contributed primarily to the UI development of the brokerage platform,
which comprised an integrated backend operations platform, a B2B portal
for client management, and a customizable web application for displaying
plans and benefits. Played a pivotal role in the company's transition from
internal software to a SaaS model, leading the development of a unified UI
that seamlessly integrated three distinct platforms and portals. I
actively participated in API development and some Backend Engineering for
the platform.
</p>
<p class="font-semibold">
Technologies: <span class="text-accent">React, Javascript, TypeScript, Java, Springboot, Mongodb
</span>
</p>
</div>
<div>
<h4 class="font-bold text-xl mb-2">
Frontend Engineer for FinTech Company
</h4>
<p class="mb-2">
I worked directly with an engineering team based in Singapore,
contributing to UI development. I contributed to the expansion of a
consumer-focused web application into a new geographical region. This
involved adapting the user interface to cater to the new region while
maintaining a common design to be used in multiple regions and languages.
I also worked on incrementally migrating the old web application to the
Next.js-based application while revamping core functionalities of the
application.
</p>
<p class="font-semibold">
Technologies: <span class="text-accent">React, TypeScript, Tailwind, NextJs, NestJs</span>
</p>
</div>
<div>
<h4 class="font-bold text-xl mb-2">Sudoku Solver</h4>
<p class="mb-2">
An application that takes Sudoku puzzles as inputs and uses a brute force
algorithm to test solutions and calculates answers for Sudoku puzzles
</p>
<p class="font-semibold">
Technologies: <span class="text-accent">React, Javascript</span>
</p>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</astro-slot></div></astro-island>
<astro-island uid="2s80dT" prefix="r11" component-url="/portfolio/astro/ThemeWrapper.c3e648a7.js" component-export="ThemeWrapper" renderer-url="/portfolio/astro/client.83b22eca.js" props="{}" ssr="" client="load" opts="{"name":"ThemeWrapper","value":true}" await-children=""><div class="light"><astro-slot>
<footer class="py-6 text-xs w-full flex justify-center">
<div class="text-primary">
Developed by Shanil De Silva, built using <a href="https://astro.build/" class="underline cursor-pointer text-link" target="_blank">Astro</a>
</div>
</footer>
</astro-slot></div></astro-island>
</body>
</html>