Skip to content

Commit

Permalink
Update content and styles
Browse files Browse the repository at this point in the history
  • Loading branch information
shftlvch committed Jan 2, 2024
1 parent eaeabb0 commit 45539d8
Show file tree
Hide file tree
Showing 6 changed files with 127 additions and 73 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
},
"dependencies": {
"@astrojs/check": "^0.3.4",
"@fontsource-variable/raleway": "^5.0.17",
"astro": "^4.0.9",
"typescript": "^5.3.3"
},
Expand Down
7 changes: 7 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions src/content/bio.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
- documentary filmmaker
- reportage photographer
- art/style photographer
23 changes: 23 additions & 0 deletions src/content/description.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
Anna is a prominent media professional with a focus on social and LGBTQ+ narratives in documentary filmmaking. With just a director career spanning over four years, she has been pivotal in developing the YouTube channel **"Straight talk with gay people by Karen Shainyan"**, which has become a crucial platform for discussing LGBTQ+ issues within Russia. The channel has successfully reached approximately more than 200,000 subscribers featuring interviews with notable figures and exploring various facets of queer life in Russia.

## Projects

### Queerography

Anna broadened her impact with “Queerography” [youtube](https://www.youtube.com/watch?v=a6dean6qJHM) (English subtitles) the first documentary series dedicated to the queer community's experience across Russia: thousands of kilometres from Kaliningrad to Vladivostok. The series sheds light on the queer life amidst legal and societal challenges.

### Skazhi Gordeevoi (Tell Gordeeva)

Collaborating with Katerina Gordeeva [youtube](https://www.youtube.com/c/skazhigordeevoy/featured), Anna co-created the project “Skazhi Gordeevoi” for Russian independent media outlet Meduza.io. Serving as the director and DOP, Anna has been producing the very first 20 episodes that delve into a variety of compelling stories and voices forming the concept that has been thriving till today.

## Highlights

- Yekaterinburg, Queerography series. The film showcases the vibrant lives of Yekaterinburg's residents, from trans-activists to war veterans turned drag queens, as they navigate family, acceptance, and the right to love in a city renowned for its economic significance and cultural milestones like hosting Russia's first gay pride parades. **49m**, [youtube](https://www.youtube.com/watch?v=a6dean6qJHM) (English subtitles)
- Elena Kostyuchenko, special correspondent for Novaya Gazeta about her work in the war in Ukraine, the environmental disaster in Norilsk, and also about how to live and love in Russia if you are a lesbian. **1h48m**, [youtube](https://www.youtube.com/watch?v=AAV7yPTHjyA) (English subtitles)
- The investigative video delves into the harrowing plight of LGBTQ+ people in Chechnya, unearthing the stark realities behind international sanctions and societal perceptions within the Russian context. **1h09m**, [youtube](https://www.youtube.com/watch?v=tCYTKvzrUug) (English subtitles)
- Billy Porter, The Kinky Boots and Pose actor, speaks about Trump, bullying, winning the red carpet game and his war on gender stereotypes. **1h03m**, [youtube](https://www.youtube.com/watch?v=FQdE7d3dtWM&t=0s)
- Interviews with queer influencers: [watch here](https://www.youtube.com/playlist?list=PLgNBPM5oMiVpZmbwLrUB5qkG4G7ASPJUr)
- Sci-fi series on queerness: [explore the series](https://www.youtube.com/playlist?list=PLgNBPM5oMiVpDK2tNhkbVlA0xqf_zneB_)
- Other “Skazhi Gordeevoi” episodes: [Meduza project](https://www.youtube.com/c/skazhigordeevoy/videos)

Anna's work not only captures the essence of contemporary queer narratives but also boldly ventures into spaces of significant social and political sensitivity. Her portfolio is a testament to her dedication to authenticity, storytelling, and the pursuit of visibility for marginalized communities.
47 changes: 44 additions & 3 deletions src/layouts/Layout.astro
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
import "@fontsource-variable/raleway";
interface Props {
title: string;
}
const { title } = Astro.props;
---


<!doctype html>
<html lang="en">
<head>
Expand All @@ -28,6 +28,27 @@ const { title } = Astro.props;
</html>
<style is:global>
:root {
/* Primary color palette */
--background-color: #c4c1c0; /* light gray with a hint of beige for a lighter background */
--text-color: #171616; /* very dark gray for primary text */
--link-color: #65676f; /* medium gray with a slight blue tint for links */
--link-hover-color: #444241; /* dark charcoal gray for link hover states */
--border-color: #988f8b; /* muted taupe for borders and subtle accents */

/* Typography */
--heading-color: #171616; /* very dark gray for headings and bold text */
--body-text-color: #444241; /* dark gray for body text */
--subtle-text-color: #65676f; /* medium gray for less emphasized text, such as captions and secondary information */

/* Interactive elements */
--link-active-color: #171616; /* very dark gray for active link states */
--input-border-color: #988f8b; /* muted taupe for form input borders */
--input-focus-color: #444241; /* dark charcoal gray for form input focus outline */

/* Utility colors for backgrounds, dividers, etc. */
--divider-color: #444241; /* dark gray for lines and dividers */
--light-background: #e0dddb; /* a lighter shade of the base gray for card backgrounds or alternate sections */

--accent: 136, 58, 234;
--accent-light: 224, 204, 250;
--accent-dark: 49, 10, 101;
Expand All @@ -37,11 +58,10 @@ const { title } = Astro.props;
rgb(var(--accent-light)) 30%,
white 60%
);
--background-color: #111;
}
html {
font-family:
"Raleway",
"Raleway Variable",
-apple-system,
"Helvetica Neue",
Arial,
Expand All @@ -56,5 +76,26 @@ const { title } = Astro.props;
}
body {
background-color: var(--background-color);
color: var(--text-color);
line-height: 1.2;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--heading-color);
}

a {
color: var(--link-color);
font-weight: bolder;
text-decoration: underline;
text-decoration-color: var(--link-color);
}

a:hover {
color: var(--link-hover-color);
}
</style>
119 changes: 49 additions & 70 deletions src/pages/index.astro
Original file line number Diff line number Diff line change
@@ -1,112 +1,91 @@
---
import Layout from "../layouts/Layout.astro";
import { Content as Description } from "../content/description.md";
import { Content as Bio } from "../content/bio.md";
---

<Layout title="Anna Shmitko">
<main class="container">
<h1 class="title">@annashmitko</h1>
<header class="header">
<a
class="title"
href="https://www.instagram.com/annashmitko/"
target="_blank"
rel="noopener noreferrer"><h1>@annashmitko</h1></a
>
<div class="bio"><Bio /></div>
</header>
<div class="description">
<Description />
</div>
<div class="desc">
<ul class="desc__roles">
<li>documentary filmmaker</li>
<li>reportage photographer</li>
<li>art/style photographer</li>
</ul>
<div class="desc__heading">contact:</div>
<div class="desc__contact">
<a class="link" href="mailto:annashmitko@gmail.com"
>annashmitko@gmail.com</a
<a
class="link"
target="_blank"
rel="noopener noreferrer"
href="mailto:annashmitko@gmail.com">annashmitko@gmail.com</a
><br />
<a class="link" href="https://www.instagram.com/annashmitko/"
>instagram</a
<a
class="link"
target="_blank"
rel="noopener noreferrer"
href="https://www.instagram.com/annashmitko/">instagram</a
>
</div>
</div>

<div class="pic"></div>
</main>
</Layout>

<style>
<style is:inline>
.container {
position: relative;
margin: 0 auto;
height: 100vh;
max-width: 640px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
/* text-align: center; */
margin: 0 auto;
}

.title {
display: block;
font-weight: 800;
font-size: 100px;
color: #000;
/* color: rgb(255, 0, 0); */
letter-spacing: 1px;
transform: rotate(-90deg);
position: absolute;
transform-origin: right top;
top: 0;
right: 100%;
.header {
padding-top: 64px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 36px;
}

.desc {
color: #858585;
padding-bottom: 400px;
padding-left: 100px;
.bio {
}

.desc__roles {
.bio ul {
list-style: none;
padding: 0;
margin-bottom: 36px;
margin: 0;
}

.desc__contact {
.description li {
margin-bottom: 8px;
}

.desc__heading {
font-weight: bolder;
font-size: 14px;
.description {
padding-bottom: 20px;
}

.link {
.title {
display: block;
font-weight: 800;
font-size: 24px;
color: var(--heading-color);
text-decoration: none;
color: #858585;
/* letter-spacing: 1px; */
}

.pic {
height: 400px;
position: absolute;
bottom: 0;
z-index: -1;
background-image: url("/portrait.png");
background-size: contain;
width: 100%;
animation: pic-slide 300s ease-in-out infinite;
.title h1 {
margin: 0;
}

.subtitle {
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
.desc {
padding-bottom: 64px;
}

.links {
padding-top: 15px;
}

@keyframes pic-slide {
0% {
background-position-x: 0;
}
100% {
background-position-x: 100000%;
}
}
</style>

0 comments on commit 45539d8

Please sign in to comment.