Skip to content

Commit

Permalink
website: Improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikosszzz
nikosszzz committed Jul 25, 2024
1 parent 1303d50 commit 9c22a7f
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 52 deletions.
23 changes: 12 additions & 11 deletions src/app/components/AboutSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import css from "../../../public/css.png";
import kotlin from "../../../public/kotlin.png";
import tauri from "../../../public/tauri.png";
import cs from "../../../public/csharp.png";
import Link from "next/link";

export default function AboutSection() {
return (
Expand All @@ -21,42 +22,42 @@ export default function AboutSection() {
Hello! I'm Nikos, a 18 year old living in Greece. I am striving to become an software engineer but in the meanwhile I am experimenting in alot of different fields such as web development. I am actively involved with expanding and enriching my knowledge and sharpening my skills/abilities.
<div className="flex flex-col items-center">
<span className="text-center font-extrabold text-2xl md:text-3xl mt-10">Languages & Frameworks I use</span>
<Button className="flex flex-row flex-wrap gap-1 bg-gradient-to-r from-[#686c6d] via-[#292e2e] to-[#111717] mb-10 px-5" span={true}>
<Button className="flex flex-row flex-wrap gap-1 justify-center bg-gradient-to-r from-[#686c6d] via-[#292e2e] to-[#111717] mb-10 px-5" span={true}>
<Icon icon={[react, electron, nodejs, nextjs, ts, js, html, css, kotlin, tauri, cs]} className="h-12 w-12 sm:h-8 sm:w-8" />
</Button>
</div>
I&apos;ve started experimenting with coding when I was 13 and from that point onwards I&apos;ve decided to follow the path of being a developer. I hope to meet others that are also interested in this field and collaborate with them aswell as seek out new opportunities.
<div className="pt-10">
You can also donate to support me if you wish to, using one of the buttons below.
<div className="pt-2">
<a href="https://github.com/sponsors/nikosszzz">
<div className="pt-2 flex flex-row flex-wrap gap-2">
<Link href={"https://github.com/sponsors/nikosszzz"}>
<Button className="box-content px-[20px] inline-block text-3xl font-extrabold rounded-full bg-gradient-to-r from-[#111717] via-[#292e2e] to-[#686c6d]">
<div className="flex flex-row gap-2 items-center">
<Icon icon={"github"} width={32} height={32} className="w-8 h-8 mr-2 self-center rounded-xl" /> <span className="text-lg font-bold" > GitHub </span>
<Icon icon={"github"} width={32} height={32} className="w-8 h-8 rounded-xl" /> <span className="text-lg font-bold" > GitHub </span>
</div>
</Button>
</a>
<a href="https://paypal.me/nikoszz">
</Link>
<Link href="https://paypal.me/nikoszz">
<Button className="box-content px-[20px] inline-block text-3xl font-extrabold rounded-full bg-gradient-to-r from-[#111717] via-[#292e2e] to-[#686c6d]">
<div className="flex flex-row gap-2 items-center">
<Image src="/paypalLogo.webp" width={32} height={32} className='w-8 h-8 rounded-xl' alt={""} /> <span className="text-lg font-bold" > PayPal </span>
</div>
</Button>
</a>
<a href="https://ko-fi.com/nikoszz">
</Link>
<Link href="https://ko-fi.com/nikoszz">
<Button className="box-content px-[20px] inline-block text-3xl font-extrabold rounded-full bg-gradient-to-r from-[#111717] via-[#292e2e] to-[#686c6d]">
<div className="flex flex-row gap-2 items-center">
<Image src="/kofiLogo.webp" width={32} height={32} className='w-8 h-8 rounded-xl' alt={""} /> <span className="text-lg font-bold" > Ko-Fi </span>
</div>
</Button>
</a>
<a href="https://liberapay.com/nikoszz/donate">
</Link>
<Link href="https://liberapay.com/nikoszz/donate">
<Button className="box-content px-[20px] inline-block text-3xl font-extrabold rounded-full bg-gradient-to-r from-[#111717] via-[#292e2e] to-[#686c6d]">
<div className="flex flex-row gap-2 items-center">
<Image src="/liberapayLogo.webp" width={32} height={32} className='w-8 h-8 rounded-xl' alt={""} /> <span className="text-lg font-bold"> Liberapay </span>
</div>
</Button>
</a>
</Link>
</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/app/components/Button.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { CSSProperties } from "react";
import type { CSSProperties, MouseEventHandler } from "react";

export default function Button({ style, className, children, span }: { style?: CSSProperties; className?: string; children: React.ReactNode, span?: boolean }): JSX.Element {
export default function Button({ style, className, children, span, onClick }: { style?: CSSProperties; className?: string; children: React.ReactNode, span?: boolean; onClick?: MouseEventHandler<HTMLElement>; }): JSX.Element {
return span ?
(<span className={`py-3 px-8 pt-2 pb-2 rounded-full bg-blue-500 items-center inline-flex ${className}`} style={style ? style : undefined}> {children} </span>)
: (<button className={`py-3 px-8 pt-2 pb-2 rounded-full bg-blue-500 items-center inline-flex ${className}`} style={style ? style : undefined}> {children} </button>)
(<span onClick={onClick ?? undefined} className={`py-3 px-8 pt-2 pb-2 rounded-full bg-blue-500 items-center inline-flex ${className}`} style={style ? style : undefined}> {children} </span>)
: (<button onClick={onClick ?? undefined} className={`py-3 px-8 pt-2 pb-2 rounded-full bg-blue-500 items-center inline-flex ${className}`} style={style ? style : undefined}> {children} </button>)
}
23 changes: 11 additions & 12 deletions src/app/components/NavBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
"use client";
import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { usePathname, useRouter } from "next/navigation";
import Button from "./Button";
import type { Route } from "next";

const navigation = [
const navigation: { id: Route; title: string; }[] = [
{
id: "/",
title: "Home",
Expand All @@ -16,19 +16,17 @@ const navigation = [

export default function Navbar() {
const pathname = usePathname();
const router = useRouter();

return (
<div className={`w-full ps-10 pe-10 sm:ps-3 sm:pe-3 fixed top-0 z-20 bg-secondary`}>
<nav className='flex justify-between items-center h-16 gap-2'>
<div className="flex flex-row items-center gap-2">
<Link
href={"/"}
onClick={() => {
window.scrollTo(0, 0)
}}
>
<Image src="/githubpfp.webp" width={460} height={460} className='w-9 h-9' alt={""} />
</Link>
<button>
<Image src="/githubpfp.webp" width={460} height={460} className='w-9 h-9' alt={""} onClick={() => {
if (pathname !== "/") router.push("/")
}} />
</button>
<span className="text-base lg:text-2xl"> Personal Website </span>
</div>
<div className='inline-flex flex-row gap-5 sm:gap-2'>
Expand All @@ -39,8 +37,9 @@ export default function Navbar() {
: "text-zinc-300"
} bg-zinc-800 hover:text-white text-[18px] sm:text-base font-medium pl-5 pr-5 items-center transition ease-in 500ms
`}
onClick={() => router.push(nav.id)}
>
<a href={nav.id}>{nav.title}</a>
{nav.title}
</Button>
))}
</div>
Expand Down
39 changes: 14 additions & 25 deletions src/app/info/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import discord from "../../../public/discord.png";
import react from "../../../public/react.png";
import typescript from "../../../public/typescript.png";
import css from "../../../public/css.png";
import Link from "next/link";

const projectsData = [
{
Expand Down Expand Up @@ -120,26 +121,22 @@ export default function Info() {
<div className="flex flex-col gap-2">
{projectsData.map((d) => (
<div key={d.name} className="px-4 py-4 rounded-lg shadow bg-primary">
<a href={d.url} target="_blank" className="flex flex-row gap-2 mb-2">
<Link href={{ href: d.url }} target="_blank" className="flex flex-row gap-2 mb-2">
<Icon icon={"github"} height={32} width={32} />
<h5 className="text-lg md:text-2xl font-semibold place-self-center text-gray-900 dark:text-white">{d.name}</h5>
<div key={`${d.name}-icons`} className="flex flex-row gap-2 w-[24px] h-[24px] lg:w-[32px] lg:h-[32px]">
<Icon icon={d.extra} />
</div>

</a>
</Link>
<div className="flex flex-row justify-between text-gray-500 dark:text-gray-400">
<span className="mr-[5px]">
{d.desc}
</span>
<Button className="h-5 r bg-gradient-to-r from-[#111717] via-[#292e2e] to-[#686c6d] hover:underline pl-2 pr-2">
<a href={d.url} target="_blank" className="flex flex-row items-center">
<Link href={{ href: d.url }} target="_blank" className="flex flex-row items-center">
{d.button_text ? d.button_text : "Go"}
<svg className="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
<path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
</svg>
</a>
</Link>
</Button>
</div>
</div>
Expand All @@ -152,26 +149,22 @@ export default function Info() {
<div className="flex flex-col gap-2">
{contribData.map((d) => (
<div key={d.name} className="px-4 py-4 rounded-lg shadow bg-primary">
<a href={d.url} target="_blank" className="flex flex-row gap-2 mb-2">
<Link href={{ href: d.url }} target="_blank" className="flex flex-row gap-2 mb-2">
<Icon icon={"github"} height={32} width={32} />
<h5 className="text-lg md:text-2xl font-semibold place-self-center text-gray-900 dark:text-white">{d.name}</h5>
<div key={`${d.name}-icons`} className="flex flex-row gap-2 w-[24px] h-[24px] lg:w-[32px] lg:h-[32px]">
<Icon icon={d.extra} />
</div>

</a>
</Link>
<div className="flex flex-row justify-between text-gray-500 dark:text-gray-400">
<span className="mr-[5px]">
{d.desc}
</span>
<Button className="h-5 r bg-gradient-to-r from-[#111717] via-[#292e2e] to-[#686c6d] hover:underline pl-2 pr-2">
<a href={d.url} target="_blank" className="flex flex-row items-center">
<Link href={{ href: d.url }} target="_blank" className="flex flex-row items-center">
Go
<svg className="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
<path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
</svg>
</a>
</Link>
</Button>
</div>
</div>
Expand All @@ -181,23 +174,19 @@ export default function Info() {
<Button className="mt-10 text-4xl md:text-6xl font-extrabold bg-gradient-to-r from-[#111717] via-[#292e2e] to-[#686c6d] px-5" span={true}> Find me on </Button>
<div className="mt-2 flex flex-col gap-2">
{accountData.map((d) => (
<div key={d.name} className="px-4 py-4 rounded-lg shadow bg-primary">
<a href={d.url} target="_blank" className="flex flex-row gap-2 mb-2">
<div key={d.type} className="px-4 py-4 rounded-lg shadow bg-primary">
<Link href={{ href: d.url }} target="_blank" className="flex flex-row gap-2 mb-2">
{d.icon}
<h5 className="text-lg md:text-2xl font-semibold place-self-center text-gray-900 dark:text-white">{d.name}</h5>
</a>
</Link>
<div className="flex flex-row justify-between text-gray-500 dark:text-gray-400">
<span className="mr-[5px]">
{d.description}
</span>
<Button className="h-5 r bg-gradient-to-r from-[#111717] via-[#292e2e] to-[#686c6d] hover:underline pl-2 pr-2">
<a href={d.url} target="_blank" className="flex flex-row items-center">
<Link href={{ href: d.url }} target="_blank" className="flex flex-row items-center">
Go
<svg className="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
<path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
</svg>
</a>
</Link>
</Button>
</div>
</div>
Expand Down

0 comments on commit 9c22a7f

Please sign in to comment.