From f4746d175318c9a199e64c44f2bbc18f5730c35a Mon Sep 17 00:00:00 2001 From: Gytis Leonavicius <101097792+LeoGytis@users.noreply.github.com> Date: Sun, 22 Dec 2024 13:04:23 +0200 Subject: [PATCH] initial profile updates --- src/app/globals.css | 133 ++++++++++++++------------- src/app/layout.tsx | 53 ++++++----- src/components/Experience.tsx | 114 +++++++++++------------ src/components/ExperienceWrapper.tsx | 77 ++++++++-------- src/components/NavBar.tsx | 66 +++++++------ 5 files changed, 233 insertions(+), 210 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 9dabaee..54cc251 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -6,100 +6,107 @@ @import "../styles/animations.css"; @layer base { - html { - --color-primary: #fff; - /* --color-text-primary: #cbd5e1; */ - --color-text-primary: #fff; - /* --color-text-secondary: #94a4b7; */ - --color-text-secondary: #fff; - --color-secondary: #5eead4; - --color-tag: #5eead4; - --color-tag-bg: #2dd4bf1a; - --color-tag-border: #5eead480; - --color-background-start: #042d41; - --color-background-end: #043e55; - --color-stars: #a8ff4b; - } + html { + --color-primary: #fff; + /* --color-text-primary: #cbd5e1; */ + --color-text-primary: #fff; + /* --color-text-secondary: #94a4b7; */ + --color-text-secondary: #fff; + --color-secondary: #5eead4; + --color-tag: #5eead4; + --color-tag-bg: #2dd4bf1a; + --color-tag-border: #5eead480; + --color-background-start: #042d41; + --color-background-end: #043e55; + --color-stars: #a8ff4b; + } } * { - box-sizing: border-box; - padding: 0; - margin: 0; + box-sizing: border-box; + padding: 0; + margin: 0; } html, body { - max-width: 100vw; - overflow-x: hidden; + max-width: 100vw; + overflow-x: hidden; } body { - color: var(--color-primary); - background: linear-gradient(to bottom, transparent, var(--color-background-end)) var(--color-background-start); + color: var(--color-primary); + background: linear-gradient( + to bottom, + transparent, + var(--color-background-end) + ) + var(--color-background-start); } h3, p { - color: var(--color-text-primary); + color: var(--color-text-primary); } a:hover { - color: var(--color-tag); + color: var(--color-tag); } h5 { - color: var(--color-text-secondary); + color: var(--color-text-secondary); } .hover_border:hover { - @media (min-width: 1024px) { - border-radius: 4px; - background-color: rgba(0, 0, 0, 0.2); - box-shadow: 0px 0px 12px 0px var(--color-tag-border); - } + @media (min-width: 1024px) { + border-radius: 4px; + background-color: rgba(0, 0, 0, 0.2); + box-shadow: 0px 0px 12px 0px var(--color-tag-border); + } } .tool_tag { - display: flex; - align-items: center; - background-color: var(--color-tag-bg); - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 0.7rem; - line-height: 1rem; - font-weight: 400; - line-height: 1.5rem; - color: var(--color-tag); - border: 0.5px solid var(--color-tag-border); - border-radius: 8px; - &:hover { - cursor: default; - box-shadow: 0px 0px 6px 0px var(--color-tag-border); - } + display: flex; + align-items: center; + background-color: var(--color-tag-bg); + padding-left: 0.5rem; + padding-right: 0.5rem; + font-size: 0.7rem; + line-height: 1rem; + font-weight: 400; + line-height: 1.5rem; + color: var(--color-tag); + border: 0.5px solid var(--color-tag-border); + border-radius: 8px; + &:hover { + cursor: default; + box-shadow: 0px 0px 6px 0px var(--color-tag-border); + } } .nav_item { - display: flex; - align-items: center; - &:hover { - cursor: pointer; - color: var(--color-tag); - } + display: flex; + align-items: center; + font-size: 20px; + font-weight: 500; + &:hover { + cursor: pointer; + color: var(--color-tag); + } - &.active { - color: var(--color-tag); - .nav_indicator { - width: 50px; - } - } + &.active { + color: var(--color-tag); + .nav_indicator { + width: 50px; + } + } } .nav_indicator { - content: ""; - width: 4px; - height: 2px; - margin-right: 10px; - background-color: var(--color-tag); - transition: all 1s; + content: ""; + width: 4px; + height: 2px; + margin-right: 10px; + background-color: var(--color-tag); + transition: all 1s; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 2ea57a1..12e3640 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,33 +1,38 @@ +import type { Metadata } from "next"; import "./globals.css"; -import type {Metadata} from "next"; -import {Nunito, Inter, Lato, Quicksand} from "next/font/google"; +// import {Nunito, Inter, Lato, Quicksand} from "next/font/google"; +import { Quicksand } from "next/font/google"; import website_image from "../../public/images/website_image.png"; -const inter = Lato({ - weight: "400", - subsets: ["latin"], +const font = Quicksand({ + // weight: "400", + subsets: ["latin"], }); export const metadata: Metadata = { - metadataBase: new URL("https://leogytis.github.io/"), - title: "Gytis | Web Developer", - description: "Inclusive products and digital experiences for the web.", - authors: [{name: "Gytis Leonavicius", url: "https://leogytis.github.io/"}], - openGraph: { - title: "Gytis | Web Developer", - description: "Inclusive products and digital experiences for the web.", - images: [ - { - url: website_image.src, - }, - ], - }, + metadataBase: new URL("https://leogytis.github.io/"), + title: "Gytis | Web Developer", + description: "Inclusive products and digital experiences for the web.", + authors: [{ name: "Gytis Leonavicius", url: "https://leogytis.github.io/" }], + openGraph: { + title: "Gytis | Web Developer", + description: "Inclusive products and digital experiences for the web.", + images: [ + { + url: website_image.src, + }, + ], + }, }; -export default function RootLayout({children}: {children: React.ReactNode}) { - return ( - - {children} - - ); +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + {children} + + ); } diff --git a/src/components/Experience.tsx b/src/components/Experience.tsx index dce44ca..6b0b8b3 100644 --- a/src/components/Experience.tsx +++ b/src/components/Experience.tsx @@ -1,62 +1,62 @@ -import acterio from '../../public/images/experience/acterio.jpg'; -import elnis from '../../public/images/experience/elnis.jpg'; -import telesoftas from '../../public/images/experience/telesoftas.png'; -import aplinkos_ministerija from '../../public/images/experience/aplinkos_ministerija.jpg'; -import ExperienceWrapper from './ExperienceWrapper'; +import acterio from "../../public/images/experience/acterio.jpg"; +import aplinkos_ministerija from "../../public/images/experience/aplinkos_ministerija.jpg"; +import elnis from "../../public/images/experience/elnis.jpg"; +import telesoftas from "../../public/images/experience/telesoftas.png"; +import ExperienceWrapper from "./ExperienceWrapper"; const Experience: any = () => { - return ( -
- - - - -
- ); + return ( +
+ + + + +
+ ); }; export default Experience; diff --git a/src/components/ExperienceWrapper.tsx b/src/components/ExperienceWrapper.tsx index 3bffa64..0a667f2 100644 --- a/src/components/ExperienceWrapper.tsx +++ b/src/components/ExperienceWrapper.tsx @@ -1,44 +1,47 @@ -import Link from 'next/link'; -import ToolTags from '../utils/ToolTags'; -import Image, {StaticImageData} from 'next/image'; -import elnis from '../../public/images/experience/elnis.jpg'; -import telesoftas from '../../public/images/experience/telesoftas.png'; -import aplinkos_ministerija from '../../public/images/experience/aplinkos_ministerija.png'; -import {BsLink45Deg} from 'react-icons/bs'; +import Image, { StaticImageData } from "next/image"; +import Link from "next/link"; +import { BsLink45Deg } from "react-icons/bs"; interface ExperienceProps { - imageSrc: StaticImageData; - title: string; - link: string; - role: string; - date: string; - description: string; - // tags: string[]; + imageSrc: StaticImageData; + title: string; + link: string; + role: string; + date: string; + description: string; + // tags: string[]; } -const ExperienceWrapper = ({imageSrc, title, link, role, date, description}: ExperienceProps) => { - return ( -
-
-
- {title} -
- - {title} - - -

{role}

-
{date}
-
-
-

{description}

-
-
-
- ); +const ExperienceWrapper = ({ + imageSrc, + title, + link, + role, + date, + description, +}: ExperienceProps) => { + return ( +
+
+
+ {title} +
+ + {title} + + +

{role}

+
{date}
+
+
+

{description}

+
+
+
+ ); }; export default ExperienceWrapper; diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index 872b10f..a7b9a7b 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -1,38 +1,46 @@ -import {Link as ScrollLink} from "react-scroll"; +import { Link as ScrollLink } from "react-scroll"; import SocialMedia from "./SocialMedia"; const NavBar: any = () => { - return ( -
-
-

Gytis Leonavičius

-

Web developer

-

Inclusive products and digital experiences for the web

-
- + +
+ ); }; export default NavBar;