Updated portfolio
This commit is contained in:
@@ -1,154 +0,0 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono);
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto);
|
||||
|
||||
h2, p {
|
||||
font-family: 'Roboto Mono';
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #101010;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #f5304c;
|
||||
font-family: 'Roboto Mono';
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
@media (orientation: landscape) {
|
||||
.home {
|
||||
position: relative;
|
||||
margin-top: -10%;
|
||||
margin-left: 10%;
|
||||
width: 45%;
|
||||
@-moz-document url-prefix() {
|
||||
margin-top: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (orientation: portrait) {
|
||||
.home {
|
||||
position: relative;
|
||||
margin-top: 10%;
|
||||
margin-left: 5%;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
.logo {
|
||||
width: 280px;
|
||||
border-radius: 50%;
|
||||
margin-left: 64%;
|
||||
margin-top: 10%;
|
||||
/* border: 3px solid #f5304c; */
|
||||
/* outline: 10px solid #f5304c; */
|
||||
/* outline-offset: 30px; */
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
.logo {
|
||||
width: 120px;
|
||||
border-radius: 50%;
|
||||
margin-left: 64%;
|
||||
margin-top: 10%;
|
||||
/* border: 3px solid #f5304c; */
|
||||
/* outline: 10px solid #f5304c; */
|
||||
/* outline-offset: 30px; */
|
||||
}
|
||||
}
|
||||
|
||||
.tech {
|
||||
color: #f5304c;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
@media (orientation: portrait) {
|
||||
.tech-stack {
|
||||
position: absolute;
|
||||
left: 53%;
|
||||
transform: translateX(-50%);
|
||||
top: 86%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
.tech-stack {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
.shape-blob {
|
||||
background:#f5304c;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
border-radius: 30% 50% 20% 40%;
|
||||
animation:
|
||||
transform 20s ease-in-out infinite both alternate,
|
||||
movement_one 40s ease-in-out infinite both;
|
||||
opacity:.7;
|
||||
position: absolute;
|
||||
left: 70%;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
@media (orientation: landscape) {
|
||||
.shape-blob.one{
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
left: -200px;
|
||||
top: -150px;
|
||||
transform: rotate(-180deg);
|
||||
animation: transform 30s ease-in-out infinite both alternate, movement_two 60s ease-in-out infinite both;
|
||||
}}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
.shape-blob.two{
|
||||
height: 350px;
|
||||
width: 350px;
|
||||
left: 500px;
|
||||
top: -150px;
|
||||
transform: rotate(-180deg);
|
||||
animation: transform 30s ease-in-out infinite both alternate, movement_two 60s ease-in-out infinite both;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes transform
|
||||
{
|
||||
0%,
|
||||
100% { border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%; }
|
||||
20% { border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%; }
|
||||
40% { border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%; }
|
||||
60% { border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%; }
|
||||
80% { border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%; }
|
||||
}
|
||||
|
||||
|
||||
@keyframes movement_one
|
||||
{
|
||||
0%,
|
||||
100% { transform: none; }
|
||||
50% { transform: translate(50%, 20%) rotateY(10deg) scale(1.2); }
|
||||
}
|
||||
|
||||
@keyframes movement_two
|
||||
{
|
||||
0%,
|
||||
500% { transform: none; }
|
||||
50% { transform: translate(50%, 20%) rotate(-200deg) scale(1.2);}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import { getBlog } from '../blog';
|
||||
import { notion, n2m } from '../notion';
|
||||
|
||||
export async function GET(req: Request, { params }: { params: Promise<{ blogId: string }> }) {
|
||||
let [status, data] = await getBlog(notion, n2m, (await params).blogId);
|
||||
return Response.json(data, { status });
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
import { Client } from '@notionhq/client';
|
||||
import { NotionToMarkdown } from "notion-to-md";
|
||||
|
||||
interface Blog {
|
||||
id: string,
|
||||
title: string,
|
||||
tags: { name: string, color: string }[],
|
||||
date: string,
|
||||
description: string,
|
||||
};
|
||||
|
||||
type QueryResponse = { cursor: string | null, hasMore: boolean, items: Blog[] };
|
||||
type Error = { msg: string };
|
||||
|
||||
export async function getBlogs(notion: Client, databaseId: string, cursor: string | undefined, pageSize: number): Promise<[number, QueryResponse | Error]> {
|
||||
try {
|
||||
const response = await notion.databases.query({
|
||||
database_id: databaseId,
|
||||
filter: {
|
||||
property: "Status",
|
||||
status: {
|
||||
equals: "Posted"
|
||||
}
|
||||
},
|
||||
start_cursor: cursor,
|
||||
page_size: pageSize,
|
||||
});
|
||||
return [200, {cursor: response.next_cursor, hasMore: response.has_more, items: response.results.map(convertBlog)}];
|
||||
} catch (err: any) {
|
||||
return [400, {msg: String(err)}];
|
||||
}
|
||||
}
|
||||
|
||||
function convertBlog(page: any): Blog {
|
||||
return {
|
||||
id: page.id,
|
||||
title: page.properties.Title.title[0].plain_text,
|
||||
description: [page.properties.Description.rich_text.map((d: { plain_text: string; }) => (d.plain_text))].join(" "),
|
||||
date: page.properties.Date.created_time,
|
||||
tags: page.properties.Tags.multi_select.map((tag: any) => ({name: tag.name, color: tag.color})),
|
||||
};
|
||||
}
|
||||
|
||||
interface FullBlog extends Blog {
|
||||
markdown: string,
|
||||
};
|
||||
|
||||
export async function getBlog(notion: Client, n2m: NotionToMarkdown, pageId: string): Promise<[number, FullBlog | Error]> {
|
||||
try {
|
||||
const page: any = await notion.pages.retrieve({ page_id: pageId })
|
||||
if (page.properties.Status.status.name !== 'Posted')
|
||||
return [400, {msg: 'Blog not found'}]
|
||||
try {
|
||||
const blog = convertBlog(page);
|
||||
const mdBlocks = await n2m.pageToMarkdown(page.id);
|
||||
return [200, {
|
||||
id: blog.id,
|
||||
title: blog.title,
|
||||
description: blog.description,
|
||||
tags: blog.tags,
|
||||
date: blog.date,
|
||||
markdown: n2m.toMarkdownString(mdBlocks).parent || '',
|
||||
}];
|
||||
} catch (err: any) {
|
||||
return [500, {msg: String(err)}];
|
||||
}
|
||||
} catch {
|
||||
return [400, {msg: 'Blog not found'}]
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import dotenv from 'dotenv';
|
||||
import { Client } from '@notionhq/client';
|
||||
import { NotionToMarkdown } from 'notion-to-md';
|
||||
dotenv.config();
|
||||
|
||||
export const notion = new Client( { auth: process.env.NOTION_API_KEY } )
|
||||
export const n2m = new NotionToMarkdown({
|
||||
notionClient: notion,
|
||||
});
|
||||
|
||||
if (process.env.NOTION_DATABASE_ID === undefined) {
|
||||
console.error('[server] Error: environment variable \'NOTION_DATABASE_ID\' not found')
|
||||
process.exit();
|
||||
}
|
||||
export const databaseId: string = process.env.NOTION_DATABASE_ID;
|
||||
@@ -1,12 +0,0 @@
|
||||
import { getBlogs } from './blog';
|
||||
import { notion, databaseId } from './notion';
|
||||
|
||||
export async function GET(request: Request) {
|
||||
const url = new URL(request.url);
|
||||
var cursor = url.searchParams.get('cursor') || undefined;
|
||||
if (cursor === '')
|
||||
cursor = undefined;
|
||||
const size = parseInt(url.searchParams.get('size') || '5');
|
||||
let [status, response] = await getBlogs(notion, databaseId, cursor, size);
|
||||
return Response.json(response, { status });
|
||||
}
|
||||
@@ -1,138 +0,0 @@
|
||||
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800;900&display=swap);
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono);
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto);
|
||||
|
||||
p {
|
||||
font-family: 'Roboto Mono';
|
||||
color: white;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #101010;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.blog_title {
|
||||
font-family: 'Montserrat';
|
||||
color: white;
|
||||
text-align: left;
|
||||
font-weight: 800;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'Montserrat';
|
||||
color: #f5304c;
|
||||
text-align: left;
|
||||
font-weight: 800;
|
||||
font-size: 36px;
|
||||
margin-top: -1%;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-family: sans-serif;
|
||||
color: #f5304c;
|
||||
text-align: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-family: 'Montserrat';
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-family: 'Montserrat';
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #f5304c;
|
||||
font-family: 'Roboto Mono';
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 10px auto;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.blog {
|
||||
background-color: #151515;
|
||||
border-radius: 10px;
|
||||
border: 10px solid #151515;
|
||||
margin: 20px;
|
||||
transition: transform 0.4s ease;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.blog.blog:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
.blog_container {
|
||||
margin: 60px auto;
|
||||
width: 730px;
|
||||
text-align: left;
|
||||
overflow-wrap: break-word;
|
||||
user-select: text;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 730px) {
|
||||
.blog_container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
|
||||
MARKDOWN
|
||||
|
||||
*/
|
||||
|
||||
.markdown {
|
||||
font-family: 'Roboto Mono';
|
||||
margin-top: 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ol li::marker {
|
||||
color: #f5304c;
|
||||
}
|
||||
|
||||
ul li::marker {
|
||||
color: #f5304c;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
color: #f5304c;
|
||||
}
|
||||
|
||||
.markdown h1, h2 {
|
||||
color: #f5304c;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
padding: inherit;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
}
|
||||
@@ -1,88 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import ContentLoader from "react-content-loader"
|
||||
|
||||
export function LoadingBlog(props: any) {
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsClient(true);
|
||||
}, []);
|
||||
|
||||
if (!isClient) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<ContentLoader
|
||||
speed={2}
|
||||
viewBox="0 0 290 50"
|
||||
backgroundColor="#3b3b3b"
|
||||
foregroundColor="#f5304c"
|
||||
{...props}
|
||||
>
|
||||
<rect x="0" y="0" rx="7" ry="7" width="290" height="18" />
|
||||
<rect x="0" y="25" rx="3" ry="3" width="78" height="7" />
|
||||
<rect x="0" y="37" rx="3" ry="3" width="200" height="7" />
|
||||
</ContentLoader>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function LoadingBlogRead(props: any) {
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
const [numRects, setNumRects] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
setIsClient(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const updateRectCount = () => {
|
||||
const windowHeight = window.innerHeight;
|
||||
const rectHeight = 46;
|
||||
const count = Math.floor(windowHeight / rectHeight);
|
||||
setNumRects(count);
|
||||
};
|
||||
|
||||
updateRectCount();
|
||||
window.addEventListener('resize', updateRectCount);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', updateRectCount);
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (!isClient) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const viewBoxHeight = window.innerHeight / 3;
|
||||
|
||||
return (
|
||||
<ContentLoader
|
||||
speed={2}
|
||||
viewBox={`0 0 340 ${viewBoxHeight}`}
|
||||
backgroundColor="#3b3b3b"
|
||||
foregroundColor="#f5304c"
|
||||
style={{ marginTop: "20px" }}
|
||||
{...props}
|
||||
>
|
||||
<rect x="0" y="0" rx="7" ry="7" width="290" height="18" />
|
||||
<rect x="0" y="25" rx="3" ry="3" width="78" height="7" />
|
||||
{Array.from({ length: numRects }).map((_, i) => (
|
||||
<rect
|
||||
x="0"
|
||||
y={45 + i * 14}
|
||||
rx="3"
|
||||
ry="3"
|
||||
width={Math.random() * (300 - 80) + 80}
|
||||
height="9"
|
||||
key={i}
|
||||
/>
|
||||
))}
|
||||
</ContentLoader>
|
||||
);
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
import React from 'react';
|
||||
import Markdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import remarkBreaks from 'remark-breaks';
|
||||
import remarkMath from 'remark-math';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
import rehypeKatex from 'rehype-katex';
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { gruvboxDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import 'katex/dist/katex.min.css';
|
||||
|
||||
type MarkdownRendererProps = {
|
||||
children: string;
|
||||
};
|
||||
|
||||
export default function MarkdownRenderer({ children: markdown }: MarkdownRendererProps) {
|
||||
return (
|
||||
<Markdown
|
||||
remarkPlugins={[remarkGfm, remarkMath, remarkBreaks]}
|
||||
rehypePlugins={[rehypeRaw, rehypeKatex]}
|
||||
components={{
|
||||
code({ node, inline, className, children, ...props }: any) {
|
||||
const match = /language-(\w+)/.exec(className || '');
|
||||
return !inline && match ? (
|
||||
<SyntaxHighlighter style={gruvboxDark} PreTag="div" language={match[1]} {...props}>
|
||||
{String(children).replace(/\n$/, '')}
|
||||
</SyntaxHighlighter>
|
||||
) : (
|
||||
<code className={className} {...props}>
|
||||
{children}
|
||||
</code>
|
||||
);
|
||||
},
|
||||
ul({ children, ...props }) {
|
||||
return (
|
||||
<ul style={{ listStyleType: 'disc', listStylePosition: 'inside' }} {...props}>
|
||||
{children}
|
||||
</ul>
|
||||
);
|
||||
},
|
||||
ol({ children, ...props }) {
|
||||
return (
|
||||
<ol style={{ listStyleType: 'decimal', listStylePosition: 'inside' }} {...props}>
|
||||
{children}
|
||||
</ol>
|
||||
);
|
||||
},
|
||||
li({ children, ...props }) {
|
||||
return (
|
||||
<li style={{ marginBottom: '4px' }} {...props}>
|
||||
{children}
|
||||
</li>
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{markdown}
|
||||
</Markdown>
|
||||
);
|
||||
}
|
||||
@@ -1,80 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import '../Blog.css';
|
||||
import MarkdownRenderer from './MarkdownRenderer';
|
||||
import { LoadingBlogRead } from '../Loading';
|
||||
import { BlogT2 } from '../page';
|
||||
|
||||
export default function Blog({ params }: { params: Promise<{ id: string }> }) {
|
||||
const [blog, setBlog] = useState<BlogT2 | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
params
|
||||
.then(({ id }) => {
|
||||
return fetch(`/api/${id}`);
|
||||
})
|
||||
.then((res) => {
|
||||
if (!res.ok) {
|
||||
throw new Error('Failed to fetch blog');
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
.then((data) => {
|
||||
if (isMounted) setBlog(data);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (isMounted) setError(err.message);
|
||||
console.error(err);
|
||||
});
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [params]);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<main>
|
||||
<a href="/blog"><h1 className="name">Leo's blog</h1></a>
|
||||
<div className="blog_container">
|
||||
<p className="error">Error loading blog: {error}</p>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
if (blog !== null) {
|
||||
return (
|
||||
<main>
|
||||
<a href="/blog"><h1 className="name">Leo's blog</h1></a>
|
||||
<div className="blog_container">
|
||||
<h2 className="blog_title">{blog.title}</h2>
|
||||
<p className="date">
|
||||
{new Date(blog.date).toLocaleString('default', {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})}
|
||||
</p>
|
||||
<div className="markdown">
|
||||
<MarkdownRenderer>
|
||||
{blog.markdown.replaceAll('\n-\n', '\n<br/>\n')}
|
||||
</MarkdownRenderer>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
<a href="/blog"><h1 className="name">Leo's blog</h1></a>
|
||||
<div className="blog_container">
|
||||
<LoadingBlogRead />
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -1,130 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import './Blog.css';
|
||||
import { LoadingBlog } from './Loading';
|
||||
import InfiniteScroll from "react-infinite-scroll-component";
|
||||
|
||||
export type BlogT = {
|
||||
title: string,
|
||||
description: string,
|
||||
id: string,
|
||||
date: string,
|
||||
tags: { name: string, color: string }[]
|
||||
};
|
||||
|
||||
export type BlogT2 = {
|
||||
title: string,
|
||||
description: string,
|
||||
id: string,
|
||||
date: string,
|
||||
tags: { name: string, color: string }[],
|
||||
markdown: string,
|
||||
};
|
||||
|
||||
const notionColors: { [index: string]: {
|
||||
background: string,
|
||||
color: string,
|
||||
} } = {
|
||||
default: { background: "#191919", color: "#D4D4D4" },
|
||||
gray: { background: "#252525", color: "#9B9B9B" },
|
||||
brown: { background: "#2E2724", color: "#A27763" },
|
||||
orange: { background: "#36291F", color: "#CB7B37" },
|
||||
yellow: { background: "#372E20", color: "#C19138" },
|
||||
green: { background: "#242B26", color: "#4F9768" },
|
||||
blue: { background: "#1F282D", color: "#447ACB" },
|
||||
purple: { background: "#2A2430", color: "#865DBB" },
|
||||
pink: { background: "#2E2328", color: "#BA4A78" },
|
||||
red: { background: "#332523", color: "#BE524B" }
|
||||
};
|
||||
|
||||
export default function Blog() {
|
||||
const [items, setItems] = useState<BlogT[]>([]);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [cursor, setCursor] = useState('');
|
||||
|
||||
const fetchData = () => {
|
||||
if (hasMore) {
|
||||
fetch(`/api/?cursor=${cursor}&size=10`).then((res) => {
|
||||
res.json().then((data: { items: BlogT[], hasMore: boolean, cursor: string }) => {
|
||||
setItems((prev) => [...prev, ...data.items]);
|
||||
setHasMore(data.hasMore);
|
||||
setCursor(data.cursor);
|
||||
}).catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
}).catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const refreshData = () => {
|
||||
setItems([]);
|
||||
setHasMore(true);
|
||||
setCursor('');
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
document.title = "Leo's blog";
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<main>
|
||||
<a href="/blog"><h1 className='name'>Leo's blog</h1></a>
|
||||
<div className='container'>
|
||||
<InfiniteScroll
|
||||
pullDownToRefresh
|
||||
pullDownToRefreshThreshold={50}
|
||||
dataLength={items.length}
|
||||
next={fetchData}
|
||||
hasMore={hasMore}
|
||||
loader={<LoadingBlog/>}
|
||||
refreshFunction={refreshData}
|
||||
endMessage={
|
||||
<p style={{ textAlign: 'center' }}>
|
||||
<a>Yay! You have seen it all</a>
|
||||
</p>
|
||||
}
|
||||
>
|
||||
{items.map((blog, i) => (
|
||||
<a key={i} href={`/blog/${blog.id}`} style={{ textDecoration: 'none' }}>
|
||||
<div className='blog'>
|
||||
<h2 className='title'>{blog.title}</h2>
|
||||
<p className='date'>{new Date(blog.date).toLocaleString('default', { month: 'long', day: 'numeric', year: 'numeric' })}</p>
|
||||
<p className='description'>{blog.description}</p>
|
||||
{blog.tags.map((tag, i) => (
|
||||
notionColors[tag.color] !== undefined ?
|
||||
<span key={i} style={{
|
||||
background: notionColors[tag.color].background,
|
||||
color: notionColors[tag.color].color,
|
||||
fontSize: '12px',
|
||||
border: '5px solid ' + notionColors[tag.color].background,
|
||||
fontFamily: 'sans-serif',
|
||||
borderRadius: '5px',
|
||||
display: 'inline-block',
|
||||
marginTop: '8px',
|
||||
marginLeft: i === 0 ? '0px' : '8px',
|
||||
}}>{tag.name}</span>
|
||||
:
|
||||
<span key={i} style={{
|
||||
background: tag.color,
|
||||
color: tag.color,
|
||||
fontSize: '12px',
|
||||
border: '5px solid ' + tag.color,
|
||||
fontFamily: 'sans-serif',
|
||||
borderRadius: '5px',
|
||||
display: 'inline-block',
|
||||
marginTop: '8px',
|
||||
marginLeft: i === 0 ? '0px' : '8px',
|
||||
}}>{tag.name}</span>
|
||||
))}
|
||||
</div>
|
||||
</a>
|
||||
))}
|
||||
</InfiniteScroll>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
+7
-23
@@ -1,3 +1,7 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
@@ -10,33 +14,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
+18
-9
@@ -1,9 +1,21 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import Navbar from "@/components/Navbar";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Leo's portfolio",
|
||||
description: "Leo's portfolio"
|
||||
title: "Leo's Portfolio",
|
||||
description: "",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -13,13 +25,10 @@ export default function RootLayout({
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<title>Leo's portfolio</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/logo.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/logo.png" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/logo.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<body>
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
<Navbar />
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+14
-63
@@ -1,69 +1,20 @@
|
||||
"use client";
|
||||
import Background from "@/components/Background";
|
||||
import PinnedRepos from "@/components/PinnedRepos";
|
||||
|
||||
import './Page.css';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faGolang, faJs, faPython, faRust } from '@fortawesome/free-brands-svg-icons';
|
||||
import GraphemeSplitter from 'grapheme-splitter';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
const Typewriter = dynamic(() => import('typewriter-effect'), { ssr: false });
|
||||
|
||||
const stringSplitter = (text: string): any => {
|
||||
const splitter = new GraphemeSplitter();
|
||||
return splitter.splitGraphemes(text);
|
||||
};
|
||||
|
||||
export default function Home() {
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="app">
|
||||
<img src="logo.png" alt="Logo" className="logo" />
|
||||
<div className="shape-blob"></div>
|
||||
<div className="shape-blob one"></div>
|
||||
<div className="shape-blob two"></div>
|
||||
<div className="home">
|
||||
<h2>
|
||||
<Typewriter
|
||||
options={{
|
||||
stringSplitter,
|
||||
loop: true,
|
||||
}}
|
||||
onInit={(typewriter) => {
|
||||
typewriter
|
||||
.typeString("Hey, I'm Leo 👋🏻")
|
||||
.start()
|
||||
.pauseFor(2400)
|
||||
.deleteAll()
|
||||
.typeString("A software developer")
|
||||
.pauseFor(2400)
|
||||
.changeDeleteSpeed(10)
|
||||
.deleteChars(18)
|
||||
.typeString("Cybersecurity engineer")
|
||||
.pauseFor(2400)
|
||||
.deleteChars(22)
|
||||
.typeString("Computer architect")
|
||||
.pauseFor(2400);
|
||||
}}
|
||||
/>
|
||||
</h2>
|
||||
<p>
|
||||
I'm a developer and researcher from Tirane, Albania. I'm the leader of{' '}
|
||||
<a href="https://github.com/orus-dev">Orus</a>. I've been coding for 5
|
||||
years and I'm in love with it. I work on free and open source projects.
|
||||
I'm also willing to work on paid projects with a payment. You can find
|
||||
me on <a href="https://instagram.com/kleo.dev">Instagram</a>,{' '}
|
||||
<a href="https://github.com/kleo-dev">GitHub</a>,{' '}
|
||||
<a href="https://www.youtube.com/@0xkleo">YouTube</a>, Or if you
|
||||
prefer to contact me via Discord: leocodes. You can also check out{' '}
|
||||
<a href="/blog">My Blog</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="tech-stack">
|
||||
<FontAwesomeIcon icon={faRust} className="tech" />
|
||||
<FontAwesomeIcon icon={faPython} className="tech" />
|
||||
<FontAwesomeIcon icon={faGolang} className="tech" />
|
||||
<FontAwesomeIcon icon={faJs} className="tech" />
|
||||
<div>
|
||||
<Background/>
|
||||
<div className="content-center mx-auto sm:w-[900px]">
|
||||
<h1 className="py-2">Hey, I'm Leo 👋🏻</h1>
|
||||
<p className="font-semibold">A passionate software enginner in Albania. I build full stack web apps but mainly desktop apps and TUI apps.</p>
|
||||
<h1 className="py-3 text-red-400">Pinned Projects</h1>
|
||||
<section className="w-full max-w-4xl mb-10 px-6 sm:px-0">
|
||||
<PinnedRepos />
|
||||
</section>
|
||||
<footer className="text-red-400 flex w-full prose absolute bottom-0 py-4 lg:px-0 md:px-8 px-8"><p className="m-0 text-sm"><a className="text-red hover:text-red-400 duration-300 underline decoration-dotted underline-offset-4" target="_blank" rel="noreferrer" href="https://opensource.org/license/apache-2-0">Apache-2.0</a> © <a className="text-red hover:text-red-400 duration-300 underline decoration-dotted underline-offset-4" target="_blank" rel="noreferrer" href="https://github.com/kleo-dev">Kleo</a></p></footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user