edit the htmls
This commit is contained in:
Dilanka-H
286
css/main.css
286
css/main.css
@@ -7,32 +7,20 @@
|
||||
'Noto Color Emoji';
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--color-blue-500: oklch(62.3% 0.214 259.815);
|
||||
--color-blue-600: oklch(54.6% 0.245 262.881);
|
||||
--color-purple-300: oklch(82.7% 0.119 306.383);
|
||||
--color-gray-50: oklch(98.5% 0.002 247.839);
|
||||
--color-gray-300: oklch(87.2% 0.01 258.338);
|
||||
--color-gray-500: oklch(55.1% 0.027 264.364);
|
||||
--color-gray-600: oklch(44.6% 0.03 256.802);
|
||||
--color-gray-700: oklch(37.3% 0.034 259.733);
|
||||
--color-gray-800: oklch(27.8% 0.033 256.848);
|
||||
--color-black: #000;
|
||||
--color-white: #fff;
|
||||
--spacing: 0.25rem;
|
||||
--container-2xl: 42rem;
|
||||
--container-3xl: 48rem;
|
||||
--text-xs: 0.75rem;
|
||||
--text-xs--line-height: calc(1 / 0.75);
|
||||
--text-sm: 0.875rem;
|
||||
--text-sm--line-height: calc(1.25 / 0.875);
|
||||
--text-base: 1rem;
|
||||
--text-base--line-height: calc(1.5 / 1);
|
||||
--text-lg: 1.125rem;
|
||||
--text-lg--line-height: calc(1.75 / 1.125);
|
||||
--text-xl: 1.25rem;
|
||||
--text-xl--line-height: calc(1.75 / 1.25);
|
||||
--text-2xl: 1.5rem;
|
||||
--text-2xl--line-height: calc(2 / 1.5);
|
||||
--text-3xl: 1.875rem;
|
||||
--text-3xl--line-height: calc(2.25 / 1.875);
|
||||
--text-4xl: 2.25rem;
|
||||
@@ -40,12 +28,10 @@
|
||||
--text-6xl: 3.75rem;
|
||||
--text-6xl--line-height: 1;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--leading-snug: 1.375;
|
||||
--leading-relaxed: 1.625;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--blur-xl: 24px;
|
||||
--default-transition-duration: 150ms;
|
||||
@@ -224,9 +210,21 @@
|
||||
.top-10 {
|
||||
top: calc(var(--spacing) * 10);
|
||||
}
|
||||
.top-15 {
|
||||
top: calc(var(--spacing) * 15);
|
||||
}
|
||||
.top-20 {
|
||||
top: calc(var(--spacing) * 20);
|
||||
}
|
||||
.top-40 {
|
||||
top: calc(var(--spacing) * 40);
|
||||
}
|
||||
.top-70 {
|
||||
top: calc(var(--spacing) * 70);
|
||||
}
|
||||
.right-1\/3 {
|
||||
right: calc(1/3 * 100%);
|
||||
}
|
||||
.right-1\/4 {
|
||||
right: calc(1/4 * 100%);
|
||||
}
|
||||
@@ -236,18 +234,33 @@
|
||||
.right-20 {
|
||||
right: calc(var(--spacing) * 20);
|
||||
}
|
||||
.right-50 {
|
||||
right: calc(var(--spacing) * 50);
|
||||
}
|
||||
.right-100 {
|
||||
right: calc(var(--spacing) * 100);
|
||||
}
|
||||
.bottom-20 {
|
||||
bottom: calc(var(--spacing) * 20);
|
||||
}
|
||||
.left-1\/3 {
|
||||
left: calc(1/3 * 100%);
|
||||
}
|
||||
.left-1\/4 {
|
||||
left: calc(1/4 * 100%);
|
||||
}
|
||||
.left-5 {
|
||||
left: calc(var(--spacing) * 5);
|
||||
}
|
||||
.left-20 {
|
||||
left: calc(var(--spacing) * 20);
|
||||
}
|
||||
.left-50 {
|
||||
left: calc(var(--spacing) * 50);
|
||||
}
|
||||
.left-100 {
|
||||
left: calc(var(--spacing) * 100);
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
@media (width >= 40rem) {
|
||||
@@ -275,9 +288,6 @@
|
||||
.m-5 {
|
||||
margin: calc(var(--spacing) * 5);
|
||||
}
|
||||
.m-6 {
|
||||
margin: calc(var(--spacing) * 6);
|
||||
}
|
||||
.m-10 {
|
||||
margin: calc(var(--spacing) * 10);
|
||||
}
|
||||
@@ -293,15 +303,15 @@
|
||||
.mt-6 {
|
||||
margin-top: calc(var(--spacing) * 6);
|
||||
}
|
||||
.mt-16 {
|
||||
margin-top: calc(var(--spacing) * 16);
|
||||
}
|
||||
.mt-auto {
|
||||
margin-top: auto;
|
||||
}
|
||||
.mb-2 {
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
.mb-3 {
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
.mb-4 {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -320,6 +330,9 @@
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
.h-2\.5 {
|
||||
height: calc(var(--spacing) * 2.5);
|
||||
}
|
||||
@@ -341,6 +354,9 @@
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-inside {
|
||||
list-style-position: inside;
|
||||
}
|
||||
@@ -368,6 +384,9 @@
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.gap-2 {
|
||||
gap: calc(var(--spacing) * 2);
|
||||
}
|
||||
.gap-6 {
|
||||
gap: calc(var(--spacing) * 6);
|
||||
}
|
||||
@@ -388,6 +407,13 @@
|
||||
margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.space-x-5 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-inline-start: calc(calc(var(--spacing) * 5) * var(--tw-space-x-reverse));
|
||||
margin-inline-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
}
|
||||
.space-x-6 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-x-reverse: 0;
|
||||
@@ -421,9 +447,6 @@
|
||||
border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-accent {
|
||||
background-color: #9333ea;
|
||||
}
|
||||
.bg-accent\/5 {
|
||||
background-color: color-mix(in oklab, #9333ea 5%, transparent);
|
||||
}
|
||||
@@ -433,9 +456,6 @@
|
||||
.bg-secondary {
|
||||
background-color: #d3d9e6;
|
||||
}
|
||||
.bg-secondary\/5 {
|
||||
background-color: color-mix(in oklab, #d3d9e6 5%, transparent);
|
||||
}
|
||||
.p-4 {
|
||||
padding: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -469,10 +489,6 @@
|
||||
.text-start {
|
||||
text-align: start;
|
||||
}
|
||||
.text-2xl {
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
||||
}
|
||||
.text-3xl {
|
||||
font-size: var(--text-3xl);
|
||||
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
||||
@@ -556,10 +572,29 @@
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.transition-transform {
|
||||
transition-property: transform, translate, scale, rotate;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.duration-300 {
|
||||
--tw-duration: 300ms;
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
.select-none {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.hover\:scale-110 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
--tw-scale-x: 110%;
|
||||
--tw-scale-y: 110%;
|
||||
--tw-scale-z: 110%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-accent\/10 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -574,6 +609,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.active\:scale-95 {
|
||||
&:active {
|
||||
--tw-scale-x: 95%;
|
||||
--tw-scale-y: 95%;
|
||||
--tw-scale-z: 95%;
|
||||
scale: var(--tw-scale-x) var(--tw-scale-y);
|
||||
}
|
||||
}
|
||||
.md\:block {
|
||||
@media (width >= 48rem) {
|
||||
display: block;
|
||||
@@ -618,9 +661,9 @@
|
||||
border-color: #2f314a;
|
||||
}
|
||||
}
|
||||
.dark\:bg-darkaccent\/10 {
|
||||
.dark\:bg-darkaccent\/40 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: color-mix(in oklab, #2563eb 10%, transparent);
|
||||
background-color: color-mix(in oklab, #2563eb 40%, transparent);
|
||||
}
|
||||
}
|
||||
.dark\:bg-darkprimary {
|
||||
@@ -654,11 +697,97 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:dark\:bg-darkaccent\/20 {
|
||||
.hover\:dark\:bg-darkaccent\/0 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: color-mix(in oklab, #2563eb 20%, transparent);
|
||||
background-color: color-mix(in oklab, #2563eb 0%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:dark\:bg-darkaccent\/30 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: color-mix(in oklab, #2563eb 30%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.\[\&\>svg\]\:h-5 {
|
||||
&>svg {
|
||||
height: calc(var(--spacing) * 5);
|
||||
}
|
||||
}
|
||||
.\[\&\>svg\]\:w-5 {
|
||||
&>svg {
|
||||
width: calc(var(--spacing) * 5);
|
||||
}
|
||||
}
|
||||
.hover\:\[\&\>svg\]\:text-\[\#0088cc\] {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
&>svg {
|
||||
color: #0088cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:\[\&\>svg\]\:text-\[\#cc6d00\] {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
&>svg {
|
||||
color: #cc6d00;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:\[\&\>svg\]\:drop-shadow-\[0_0_6px_rgba\(35\,36\,59\,0\.5\)\] {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
&>svg {
|
||||
--tw-drop-shadow-size: drop-shadow(0 0 6px var(--tw-drop-shadow-color, rgba(35,36,59,0.5)));
|
||||
--tw-drop-shadow: var(--tw-drop-shadow-size);
|
||||
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.md\:\[\&\>svg\]\:h-8 {
|
||||
@media (width >= 48rem) {
|
||||
&>svg {
|
||||
height: calc(var(--spacing) * 8);
|
||||
}
|
||||
}
|
||||
}
|
||||
.md\:\[\&\>svg\]\:w-8 {
|
||||
@media (width >= 48rem) {
|
||||
&>svg {
|
||||
width: calc(var(--spacing) * 8);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:hover\:\[\&\>svg\]\:text-\[\#7dd3fc\] {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
&>svg {
|
||||
color: #7dd3fc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:hover\:\[\&\>svg\]\:drop-shadow-\[0_0_6px_rgba\(74\,140\,255\,0\.8\)\] {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
&>svg {
|
||||
--tw-drop-shadow-size: drop-shadow(0 0 6px var(--tw-drop-shadow-color, rgba(74,140,255,0.8)));
|
||||
--tw-drop-shadow: var(--tw-drop-shadow-size);
|
||||
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -788,6 +917,78 @@
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-duration {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-scale-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
@property --tw-scale-y {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
@property --tw-scale-z {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 1;
|
||||
}
|
||||
@property --tw-blur {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-brightness {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-contrast {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-grayscale {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-hue-rotate {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-invert {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-opacity {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-saturate {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-sepia {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-drop-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-drop-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-drop-shadow-alpha {
|
||||
syntax: "<percentage>";
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
@property --tw-drop-shadow-size {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@layer properties {
|
||||
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
||||
*, ::before, ::after, ::backdrop {
|
||||
@@ -819,6 +1020,23 @@
|
||||
--tw-backdrop-opacity: initial;
|
||||
--tw-backdrop-saturate: initial;
|
||||
--tw-backdrop-sepia: initial;
|
||||
--tw-duration: initial;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-scale-z: 1;
|
||||
--tw-blur: initial;
|
||||
--tw-brightness: initial;
|
||||
--tw-contrast: initial;
|
||||
--tw-grayscale: initial;
|
||||
--tw-hue-rotate: initial;
|
||||
--tw-invert: initial;
|
||||
--tw-opacity: initial;
|
||||
--tw-saturate: initial;
|
||||
--tw-sepia: initial;
|
||||
--tw-drop-shadow: initial;
|
||||
--tw-drop-shadow-color: initial;
|
||||
--tw-drop-shadow-alpha: 100%;
|
||||
--tw-drop-shadow-size: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
6300
documents/DilankaHerath-CV.pdf
Normal file
6300
documents/DilankaHerath-CV.pdf
Normal file
File diff suppressed because one or more lines are too long
@@ -11,6 +11,7 @@ type ApiHandler struct {
|
||||
Templates *template.Template
|
||||
ProjectStore *store.SQLiteProjectStore
|
||||
ExperienceStore *store.SQLiteExperienceStore
|
||||
FooterTemplateData []FooterTemplateData
|
||||
}
|
||||
|
||||
func (h *ApiHandler) Render(w http.ResponseWriter, tmpl string, data interface{}) {
|
||||
@@ -20,24 +21,65 @@ func (h *ApiHandler) Render(w http.ResponseWriter, tmpl string, data interface{}
|
||||
}
|
||||
}
|
||||
|
||||
type FooterTemplateData struct {
|
||||
Link string
|
||||
Height string
|
||||
Width string
|
||||
Path string
|
||||
}
|
||||
|
||||
func NewApiHandler(db *sql.DB) *ApiHandler {
|
||||
tmpl := template.Must(template.New("").ParseGlob("views/*.html"))
|
||||
template.Must(tmpl.ParseGlob("views/partials/*.html"))
|
||||
|
||||
footerTemplateData := []FooterTemplateData{
|
||||
{
|
||||
Link: "mailto:dilankaherath14@gmail.com",
|
||||
Height: "5",
|
||||
Width: "5",
|
||||
Path: "M61.4 64C27.5 64 0 91.5 0 125.4 0 126.3 0 127.1 .1 128L0 128 0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-256-.1 0c0-.9 .1-1.7 .1-2.6 0-33.9-27.5-61.4-61.4-61.4L61.4 64zM464 192.3L464 384c0 8.8-7.2 16-16 16L64 400c-8.8 0-16-7.2-16-16l0-191.7 154.8 117.4c31.4 23.9 74.9 23.9 106.4 0L464 192.3zM48 125.4C48 118 54 112 61.4 112l389.2 0c7.4 0 13.4 6 13.4 13.4 0 4.2-2 8.2-5.3 10.7L280.2 271.5c-14.3 10.8-34.1 10.8-48.4 0L53.3 136.1c-3.3-2.5-5.3-6.5-5.3-10.7z",
|
||||
},
|
||||
{
|
||||
Link: "https://www.linkedin.com/in/dilanka-herath",
|
||||
Height: "5",
|
||||
Width: "5",
|
||||
Path: "M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 0 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z",
|
||||
},
|
||||
{
|
||||
Link: "https://github.com/DilankaHer",
|
||||
Height: "5",
|
||||
Width: "5",
|
||||
Path: "M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z",
|
||||
},
|
||||
{
|
||||
Link: "https://line.me/ti/p/~dilankaa",
|
||||
Height: "5",
|
||||
Width: "5",
|
||||
Path: "M311 196.8l0 81.3c0 2.1-1.6 3.7-3.7 3.7l-13 0c-1.3 0-2.4-.7-3-1.5L254 230 254 278.2c0 2.1-1.6 3.7-3.7 3.7l-13 0c-2.1 0-3.7-1.6-3.7-3.7l0-81.3c0-2.1 1.6-3.7 3.7-3.7l12.9 0c1.1 0 2.4 .6 3 1.6l37.3 50.3 0-48.2c0-2.1 1.6-3.7 3.7-3.7l13 0c2.1-.1 3.8 1.6 3.8 3.5l0 .1zm-93.7-3.7l-13 0c-2.1 0-3.7 1.6-3.7 3.7l0 81.3c0 2.1 1.6 3.7 3.7 3.7l13 0c2.1 0 3.7-1.6 3.7-3.7l0-81.3c0-1.9-1.6-3.7-3.7-3.7zm-31.4 68.1l-35.6 0 0-64.4c0-2.1-1.6-3.7-3.7-3.7l-13 0c-2.1 0-3.7 1.6-3.7 3.7l0 81.3c0 1 .3 1.8 1 2.5 .7 .6 1.5 1 2.5 1l52.2 0c2.1 0 3.7-1.6 3.7-3.7l0-13c0-1.9-1.6-3.7-3.5-3.7l.1 0zm193.7-68.1l-52.3 0c-1.9 0-3.7 1.6-3.7 3.7l0 81.3c0 1.9 1.6 3.7 3.7 3.7l52.2 0c2.1 0 3.7-1.6 3.7-3.7l0-13.1c0-2.1-1.6-3.7-3.7-3.7l-35.5 0 0-13.6 35.5 0c2.1 0 3.7-1.6 3.7-3.7l0-13.1c0-2.1-1.6-3.7-3.7-3.7l-35.5 0 0-13.7 35.5 0c2.1 0 3.7-1.6 3.7-3.7l0-13c-.1-1.9-1.7-3.7-3.7-3.7l.1 0zM512 93.4l0 326c-.1 51.2-42.1 92.7-93.4 92.6l-326 0C41.4 511.9-.1 469.8 0 418.6l0-326C.1 41.4 42.2-.1 93.4 0l326 0c51.2 .1 92.7 42.1 92.6 93.4zM441.6 233.5c0-83.4-83.7-151.3-186.4-151.3S68.8 150.1 68.8 233.5c0 74.7 66.3 137.4 155.9 149.3 21.8 4.7 19.3 12.7 14.4 42.1-.8 4.7-3.8 18.4 16.1 10.1s107.3-63.2 146.5-108.2c27-29.7 39.9-59.8 39.9-93.1l0-.2z",
|
||||
},
|
||||
{
|
||||
Link: "https://wa.me/66615971121",
|
||||
Height: "5",
|
||||
Width: "5",
|
||||
Path: "M380.9 97.1c-41.9-42-97.7-65.1-157-65.1-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480 117.7 449.1c32.4 17.7 68.9 27 106.1 27l.1 0c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3 18.6-68.1-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1s56.2 81.2 56.1 130.5c0 101.8-84.9 184.6-186.6 184.6zM325.1 300.5c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7 .9-6.9-.5-9.7s-12.5-30.1-17.1-41.2c-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3s19.9 53.7 22.6 57.4c2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4s4.6-24.1 3.2-26.4c-1.3-2.5-5-3.9-10.5-6.6z",
|
||||
},
|
||||
}
|
||||
|
||||
return &ApiHandler{
|
||||
Templates: tmpl,
|
||||
ProjectStore: store.NewSQLiteProjectStore(db),
|
||||
ExperienceStore: store.NewSQLiteExperienceStore(db),
|
||||
FooterTemplateData: footerTemplateData,
|
||||
}
|
||||
}
|
||||
|
||||
func (h *ApiHandler) InitPage(w http.ResponseWriter, r *http.Request) {
|
||||
var hxRequest = r.Header.Get("HX-Request")
|
||||
if hxRequest != "true" {
|
||||
h.Render(w, "index", nil)
|
||||
h.Render(w, "index", h.FooterTemplateData)
|
||||
return
|
||||
}
|
||||
h.Render(w, "about-partial", nil)
|
||||
h.Render(w, "about-partial", h.FooterTemplateData)
|
||||
}
|
||||
|
||||
func (h *ApiHandler) ProjectsPage(w http.ResponseWriter, r *http.Request) {
|
||||
|
||||
@@ -1,28 +1,8 @@
|
||||
{{ block "footer" .}}
|
||||
<footer id="contact" class="bg-secondary dark:bg-darksecondary mt-auto py-10">
|
||||
<div class="container mx-auto text-center">
|
||||
<h2 class="text-2xl font-bold mb-4">Get in Touch</h2>
|
||||
<p class="mb-6">
|
||||
Feel free to reach out via email or connect on my socials.
|
||||
</p>
|
||||
<div class="flex justify-center gap-6">
|
||||
<a
|
||||
href="mailto:dilankaherath14@gmail.com"
|
||||
class="text-blue-600 hover:underline"
|
||||
>Email</a
|
||||
>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/dilanka-herath"
|
||||
target="_blank"
|
||||
class="text-blue-600 hover:underline"
|
||||
>LinkedIn</a
|
||||
>
|
||||
<a
|
||||
href="https://github.com/DilankaHer"
|
||||
target="_blank"
|
||||
class="text-blue-600 hover:underline"
|
||||
>GitHub</a
|
||||
>
|
||||
{{ range . }}{{ template "footer-contact" .}} {{ end }}
|
||||
</div>
|
||||
<p class="mt-6 text-gray-500 text-sm">© 2025 Dilanka Herath</p>
|
||||
</div>
|
||||
|
||||
14
views/helper-blocks.html
Normal file
14
views/helper-blocks.html
Normal file
@@ -0,0 +1,14 @@
|
||||
{{ block "footer-contact" .}}
|
||||
<a href="{{.Link}}"
|
||||
target="_blank"
|
||||
class="text-blue-600">
|
||||
<span class="[&>svg]:h-{{.Height}} [&>svg]:w-{{.Width}}">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 512 512">
|
||||
<path d="{{ .Path }}"/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
@@ -41,6 +41,30 @@
|
||||
class="absolute top-3/4 left-20 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
|
||||
>Docker</span
|
||||
>
|
||||
<span
|
||||
class="absolute top-20 left-100 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
|
||||
>Mongo</span
|
||||
>
|
||||
<span
|
||||
class="absolute top-15 right-100 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
|
||||
>C++</span
|
||||
>
|
||||
<span
|
||||
class="absolute bottom-20 right-1/3 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
|
||||
>Javascript</span
|
||||
>
|
||||
<span
|
||||
class="absolute top-1/2 left-1/4 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
|
||||
>Nest</span
|
||||
>
|
||||
<span
|
||||
class="absolute top-70 left-50 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
|
||||
>MySQL</span
|
||||
>
|
||||
<span
|
||||
class="absolute top-70 right-50 text-purple-300/50 dark:text-gray-300/10 text-xl font-bold"
|
||||
>Python</span
|
||||
>
|
||||
</div>
|
||||
<!-- Header Section -->
|
||||
<!-- {{ template "header" }} -->
|
||||
@@ -48,7 +72,7 @@
|
||||
<div id="content" class="flex-grow">{{ template "about-partial" . }}</div>
|
||||
</div>
|
||||
<!-- Footer Section -->
|
||||
{{ template "footer" }}
|
||||
{{ template "footer" .}}
|
||||
</body>
|
||||
{{ template "script" }}
|
||||
</html>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
hx-get="/projects"
|
||||
hx-target="#content"
|
||||
hx-push-url="true"
|
||||
class="px-8 py-6 rounded-full bg-accent/5 dark:bg-darkaccent/10 backdrop-blur-xl border border-white/20 shadow-xl text-xl font-semibold hover:bg-accent/10 hover:dark:bg-darkaccent/20 transition"
|
||||
class="px-8 py-6 rounded-full bg-accent/5 dark:bg-darkaccent/40 backdrop-blur-xl border border-white/20 shadow-xl text-xl font-semibold hover:bg-accent/10 hover:dark:bg-darkaccent/30 transition"
|
||||
>
|
||||
Projects
|
||||
</a>
|
||||
@@ -29,7 +29,7 @@
|
||||
hx-get="/experience"
|
||||
hx-target="#content"
|
||||
hx-push-url="true"
|
||||
class="px-8 py-6 rounded-full bg-accent/5 dark:bg-darkaccent/10 backdrop-blur-xl border border-white/20 shadow-xl text-xl font-semibold hover:bg-accent/10 hover:dark:bg-darkaccent/20 transition"
|
||||
class="px-8 py-6 rounded-full bg-accent/5 dark:bg-darkaccent/40 backdrop-blur-xl border border-white/20 shadow-xl text-xl font-semibold hover:bg-accent/10 hover:dark:bg-darkaccent/30 transition"
|
||||
>
|
||||
Experience
|
||||
</a>
|
||||
|
||||
@@ -1,5 +1,22 @@
|
||||
{{ block "experience-partial" . }}
|
||||
<h2 class="text-lg md:text-3xl font-bold m-6 mb-3">Experience</h2>
|
||||
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.<path d="M240 6.1c9.1-8.2 22.9-8.2 32 0l232 208c9.9 8.8 10.7 24 1.8 33.9s-24 10.7-33.9 1.8l-8-7.2 0 205.3c0 35.3-28.7 64-64 64l-288 0c-35.3 0-64-28.7-64-64l0-205.3-8 7.2c-9.9 8.8-25 8-33.9-1.8s-8-25 1.8-33.9L240 6.1zm16 50.1L96 199.7 96 448c0 8.8 7.2 16 16 16l48 0 0-104c0-39.8 32.2-72 72-72l48 0c39.8 0 72 32.2 72 72l0 104 48 0c8.8 0 16-7.2 16-16l0-248.3-160-143.4zM208 464l96 0 0-104c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24l0 104z"/></svg> -->
|
||||
{{ block "experience-partial" . }}
|
||||
<div class="inline-flex flex-row m-10 mb-6 mt-16 items-center space-x-5">
|
||||
<span class="text-lg md:text-3xl font-bold clickable
|
||||
hover:scale-110 transition-transform duration-300
|
||||
flex items-center gap-2 cursor-pointer
|
||||
[&>svg]:h-5 [&>svg]:w-5 md:[&>svg]:h-8 md:[&>svg]:w-8
|
||||
hover:[&>svg]:text-[#0088cc]
|
||||
dark:hover:[&>svg]:text-[#7dd3fc]
|
||||
hover:[&>svg]:drop-shadow-[0_0_6px_rgba(35,36,59,0.5)] dark:hover:[&>svg]:drop-shadow-[0_0_6px_rgba(74,140,255,0.8)]
|
||||
active:scale-95" onclick="clickBackButton()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 512 512">
|
||||
<path d="M240 6.1c9.1-8.2 22.9-8.2 32 0l232 208c9.9 8.8 10.7 24 1.8 33.9s-24 10.7-33.9 1.8l-8-7.2 0 205.3c0 35.3-28.7 64-64 64l-288 0c-35.3 0-64-28.7-64-64l0-205.3-8 7.2c-9.9 8.8-25 8-33.9-1.8s-8-25 1.8-33.9L240 6.1zm16 50.1L96 199.7 96 448c0 8.8 7.2 16 16 16l48 0 0-104c0-39.8 32.2-72 72-72l48 0c39.8 0 72 32.2 72 72l0 104 48 0c8.8 0 16-7.2 16-16l0-248.3-160-143.4zM208 464l96 0 0-104c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24l0 104z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="text-lg md:text-3xl font-bold underline"> Experience</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row m-10 mb-2 mt-1 text-sm md:text-lg">
|
||||
<section class="font-bold">
|
||||
|
||||
@@ -1,5 +1,21 @@
|
||||
{{ block "projects-partial" . }}
|
||||
<h2 class="text-3xl font-bold m-6">Projects</h2>
|
||||
<div class="inline-flex flex-row m-10 mb-6 mt-16 items-center space-x-5">
|
||||
<span class="text-lg md:text-3xl font-bold clickable
|
||||
hover:scale-110 transition-transform duration-300
|
||||
flex items-center gap-2 cursor-pointer
|
||||
[&>svg]:h-5 [&>svg]:w-5 md:[&>svg]:h-8 md:[&>svg]:w-8
|
||||
hover:[&>svg]:text-[#0088cc]
|
||||
dark:hover:[&>svg]:text-[#7dd3fc]
|
||||
hover:[&>svg]:drop-shadow-[0_0_6px_rgba(35,36,59,0.5)] dark:hover:[&>svg]:drop-shadow-[0_0_6px_rgba(74,140,255,0.8)]
|
||||
active:scale-95" onclick="clickBackButton()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 512 512">
|
||||
<path d="M240 6.1c9.1-8.2 22.9-8.2 32 0l232 208c9.9 8.8 10.7 24 1.8 33.9s-24 10.7-33.9 1.8l-8-7.2 0 205.3c0 35.3-28.7 64-64 64l-288 0c-35.3 0-64-28.7-64-64l0-205.3-8 7.2c-9.9 8.8-25 8-33.9-1.8s-8-25 1.8-33.9L240 6.1zm16 50.1L96 199.7 96 448c0 8.8 7.2 16 16 16l48 0 0-104c0-39.8 32.2-72 72-72l48 0c39.8 0 72 32.2 72 72l0 104 48 0c8.8 0 16-7.2 16-16l0-248.3-160-143.4zM208 464l96 0 0-104c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24l0 104z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="text-lg md:text-3xl font-bold underline"> Projects</span>
|
||||
</div>
|
||||
{{ range . }} {{ template "project-partial-range" . }} {{ end}} {{ end }} {{
|
||||
block "project-partial-range" . }}
|
||||
<div class="m-4">
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
{{ block "script" .}}
|
||||
<script>
|
||||
function clickBackButton() {
|
||||
console.log('Back button clicked', window.history.state);
|
||||
if (window.history.state && window.history.state["htmx"]) {
|
||||
window.history.back();
|
||||
} else {
|
||||
window.location.href = '/';
|
||||
}
|
||||
}
|
||||
function setScatteredWordsVisibility() {
|
||||
const scatteredWords = document.getElementById('scatteredWords');
|
||||
if (!scatteredWords) return;
|
||||
@@ -18,7 +26,8 @@
|
||||
setScatteredWordsVisibility();
|
||||
});
|
||||
|
||||
document.body.addEventListener('htmx:historyRestore', function () {
|
||||
document.body.addEventListener('htmx:historyRestore', function (e) {
|
||||
console.log('Restoring history state', e.detail);
|
||||
setScatteredWordsVisibility();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user