Skip to content

Commit

Permalink
Update layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@artemnovichkov
artemnovichkov committed Oct 28, 2024
1 parent a33584e commit 141f76b
Show file tree
Hide file tree
Showing 7 changed files with 253 additions and 262 deletions.
33 changes: 0 additions & 33 deletions src/app/_components/container.tsx
View file

This file was deleted.

145 changes: 145 additions & 0 deletions src/app/_components/experience.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
import Image from "next/image"

export default function Experience() {
return (
<div>
<p className="font-bold text-3xl tracking-tight mb-4 text-black dark:text-white">
Experience
</p>
<h3 className="font-bold text-2xl tracking-tight mb-4 text-black dark:text-white">
Full-time positions
</h3>
<ul>
{fullTimePositions.map((position) => (
<li key={position.company}>
<Position position={position} />
</li>
))}
</ul>
<h3 className="font-bold text-2xl tracking-tight mb-4 text-black dark:text-white">
Part-time positions
</h3>
<ul>
{partTimePositions.map((position) => (
<li key={position.company}>
<Position position={position} />
</li>
))}
</ul>
</div>
)
}

interface PositionProps {
position: {
title: string;
company: string;
image: string;
url: string;
startDate: string;
finishDate?: string;
}
}

const Position: React.FC<PositionProps> = ({ position }) => {
const startDate = new Date(position.startDate)
const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'short' };
const startDateTag = (<time dateTime={startDate.toISOString()}>{startDate.toLocaleDateString('en-US', options)}</time>)
let finishDateTag = (<p>{`Current`}</p>)
if (position.finishDate != undefined) {
const finishDate = new Date(position.finishDate)
finishDateTag = (<time dateTime={finishDate.toISOString()}>{finishDate.toLocaleDateString('en-US', options)}</time>)
}
return (
<div className="flex flex-row items-start gap-4 mb-4">
<Image
className="rounded"
priority
alt={position.company}
src={position.image}
width={40}
height={40}
/>
<div className="flex flex-col items-start">
<p className="text-xl text-black dark:text-white">{position.title}</p>
<a className="text-base underline text-black dark:text-white"
target="_blank"
rel="noopener noreferrer"
href={position.url}>
{position.company}
</a>
<div className="flex items-center gap-1 text-sm text-gray-600 dark:text-gray-400">
{startDateTag}
{`→`}
{finishDateTag}
</div>
</div>
</div>
)
}

const fullTimePositions = [
{
title: "iOS Developer",
company: "Welltory",
image: "/images/companies/welltory.png",
url: "https://welltory.com",
startDate: "2022-06",
},
{
title: "iOS Developer",
company: "Skyeng",
image: "/images/companies/skyeng.png",
url: "https://skyeng.ru",
startDate: "2020-07",
finishDate: "2022-06",
},
{
title: "iOS Developer",
company: "Rosberry",
image: "/images/companies/rosberry.png",
url: "https://rosberry.com",
startDate: "2014-11",
finishDate: "2020-07",
},
{
title: "iOS Developer",
company: "Burning Buttons",
image: "/images/companies/burning_buttons.png",
url: "https://burningbuttons.com",
startDate: "2014-02",
finishDate: "2014-05",
}
]

const partTimePositions = [
{
title: "iOS Expert",
company: "Netology",
image: "/images/companies/netology.png",
url: "https://netology.ru/programs/ios-developer",
startDate: "2020-08",
},
{
title: "iOS Mentor",
company: "Solvery",
image: "/images/companies/solvery.png",
url: "https://solvery.io/ru/mentor/artemnovichkov",
startDate: "2021-07",
},
{
title: "iOS Mentor",
company: "Codementor",
image: "/images/companies/codementor.png",
url: "https://www.codementor.io/@artemnovichkov",
startDate: "2017-12",
},
{
title: "Freelance iOS Developer",
company: "Upwork",
image: "/images/companies/upwork.png",
url: "https://www.upwork.com/freelancers/~01be851609bdb126f7",
startDate: "2015-09",
finishDate: "2018-09",
},
]
19 changes: 19 additions & 0 deletions src/app/_components/header.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import Link from "next/link";

export default function Header() {
return (
<header className="sticky-nav w-full py-4">
<nav>
<Link href="/" className="p-4 text-gray-900 hover:text-gray-600 dark:text-white">
Home
</Link>
<Link href="/blog" className="p-4 text-gray-900 hover:text-gray-600 dark:text-white">
Blog
</Link>
<Link href="/feed.xml" className="p-4 text-gray-900 hover:text-gray-600 dark:text-white">
RSS
</Link>
</nav>
</header>
)
}
47 changes: 22 additions & 25 deletions src/app/blog/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { getPostBySlug, getAllPosts } from '@/lib/api'
import markdownToHtml from '@/lib/markdownToHtml'
import Container from '@/app/_components/container'
import PostHeader from '@/app/_components/post-header'
import PostActions from '@/app/_components/post-actions'
import Image from 'next/image'
Expand Down Expand Up @@ -40,7 +39,7 @@ export async function generateMetadata({ params }: { params: { slug: string } })

export async function generateStaticParams(): Promise<{ slug: string }[]> {
const posts = getAllPosts();

return posts.map((post) => ({
slug: post.slug,
}));
Expand All @@ -50,29 +49,27 @@ export default async function BlogPost({ params }: { params: { slug: string } })
const post = getPostBySlug(params.slug);
const content = await markdownToHtml(post.content || "");
return (
<Container>
<div>
<article>
<h1 className="mb-4 font-bold text-3xl tracking-tight text-black dark:text-white">
{post.title}
</h1>
<PostHeader post={post} />
<Image
priority
alt={post.title}
src={post.cover}
width={1200}
height={740}
className="mb-4"
/>
<div
className="prose dark:prose-dark"
dangerouslySetInnerHTML={{ __html: content }}
/>
</article>
<PostActions post={post} />
</div>
</Container>
<div>
<article>
<h1 className="mb-4 font-bold text-3xl tracking-tight text-black dark:text-white">
{post.title}
</h1>
<PostHeader post={post} />
<Image
priority
alt={post.title}
src={post.cover}
width={1200}
height={740}
className="mb-4"
/>
<div
className="prose dark:prose-dark"
dangerouslySetInnerHTML={{ __html: content }}
/>
</article>
<PostActions post={post} />
</div>
);
}

23 changes: 9 additions & 14 deletions src/app/blog/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,20 @@
import { getAllPosts } from "@/lib/api";
import Container from "../_components/container";
import PostPreview from "../_components/post-preview";

export default function Blog() {
const posts = getAllPosts();
return (
<main>
<Container>
<p className="font-bold text-3xl tracking-tight mb-8 text-black dark:text-white">Blog</p>
<div>
<section>
<ul>
{posts.map((post) => (
<li key={post.slug}>
<PostPreview post={post} />
</li>
))}
</ul>
</section>
</div>
</Container>
<section>
<ul>
{posts.map((post) => (
<li key={post.slug}>
<PostPreview post={post} />
</li>
))}
</ul>
</section>
</main>
);
}
42 changes: 24 additions & 18 deletions src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,34 @@
import { name, title, about } from '@/lib/const'
import type { Metadata } from 'next'
import '@/app/globals.css'
import Header from './_components/header';
import Footer from './_components/footer';

export const metadata: Metadata = {
title: name,
description: about,
robots: {
index: true,
follow: true,
index: true,
follow: true,
},
openGraph: {
title: name,
description: about,
url: 'https://www.artemnovichkov.com/',
siteName: title,
images: ['https://www.artemnovichkov.com/images/banner.png'],
title: name,
description: about,
url: 'https://www.artemnovichkov.com/',
siteName: title,
images: ['https://www.artemnovichkov.com/images/banner.png'],
},
twitter: {
card: 'summary_large_image',
title: name,
description: about,
siteId: '3081906297',
creator: '@iosartem',
creatorId: '3081906297',
images: ['https://www.artemnovichkov.com/images/banner.png'],
card: 'summary_large_image',
title: name,
description: about,
siteId: '3081906297',
creator: '@iosartem',
creatorId: '3081906297',
images: ['https://www.artemnovichkov.com/images/banner.png'],
},
other: {
'yandex-verification': '0dbe1f786dcb070d',
'yandex-verification': '0dbe1f786dcb070d',
},
};

Expand All @@ -37,9 +39,13 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body>
{children}
<body className="bg-white dark:bg-black">
<Header />
<main className="flex flex-col justify-center max-w-2xl mx-auto px-4 sm:px-0">
{children}
</main>
<Footer />
</body>
</html>
);
}
}
Loading

0 comments on commit 141f76b

Please sign in to comment.