Skip to content

Commit

Permalink
v1
Browse files Browse the repository at this point in the history
  • Loading branch information
@efrymire
efrymire committed Sep 12, 2023
1 parent 552c649 commit 4f14e96
Show file tree
Hide file tree
Showing 15 changed files with 259 additions and 73 deletions.
Binary file added public/clusters.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/components-v.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/components.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/covid-map.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/nbc.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 5 additions & 3 deletions src/app/blur/blur.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@
z-index: -1;

circle {
opacity: 0.5;
transform-origin: 50%;
animation: 10s infinite clockwise;
animation: 6s infinite clockwise;

&:first-of-type, &:last-of-type {
&:first-of-type {
animation: 6s 2s/ infinite linear counter-clockwise;
}
&:last-of-type {
animation: 10s infinite linear counter-clockwise;
}
}
Expand Down
12 changes: 6 additions & 6 deletions src/app/blur/blur.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@ export default function Blur() {
return (<svg className={styles.blur}>
<filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic"
stdDeviation="50"/>
stdDeviation="40"/>
<feColorMatrix
type="matrix"
result='gooey'
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 .5 0 " />
0 0 0 .4 0 " />
</filter>
<circle cx="44%" cy="48%" r="10%" fill="#6bb486" filter="url(#blur)"></circle>
<circle cx="50%" cy="60%" r="10%" fill="#cd6464" filter="url(#blur)"></circle>
<circle cx="50%" cy="44%" r="10%" fill="#6cb4d5" filter="url(#blur)"></circle>
<circle cx="54%" cy="40%" r="10%" fill="#efef77" filter="url(#blur)"></circle>
<circle cx="58%" cy="58%" r="8%" fill="#8ad5a5" filter="url(#blur)"></circle>
<circle cx="50%" cy="50%" r="8%" fill="#e38080" filter="url(#blur)"></circle>
<circle cx="44%" cy="38%" r="10%" fill="#ecec89" filter="url(#blur)"></circle>
<circle cx="40%" cy="42%" r="10%" fill="#a5c1ce" filter="url(#blur)"></circle>
</svg>)
}
13 changes: 0 additions & 13 deletions src/app/globals.css
View file

This file was deleted.

35 changes: 35 additions & 0 deletions src/app/globals.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
@import "./mixins.scss";

:root {
--max-width: 1100px;
--border-radius: 12px;

font-size: 14px;
}

body {
margin: 0;
}
* {
box-sizing: border-box;
}
h1 {
@include h1-mixin;
}
h4 {
@include h4-mixin;
}
p {
@include p-mixin;
}
a {
@include h4-mixin;
text-decoration: none;
color: inherit;
cursor: pointer;
padding: 0 0.25em;
font-size: 0.8em;
font-family: var(--font-roboto-mono);
color: inherit;
cursor: pointer;
}
14 changes: 9 additions & 5 deletions src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import './globals.css'
import './globals.scss'
import type { Metadata } from 'next'
import { Inter, Source_Sans_3, Roboto_Mono } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

const sourceSansPro = Source_Sans_3({
subsets: ['latin'],
variable: '--font-source-sans-pro',
variable: '--font-source-sans',
weight: ['400', '700'],
style: ['normal', 'italic'],
display: 'swap',
Expand All @@ -20,8 +20,8 @@ const robotoMono = Roboto_Mono({
})

export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
title: 'Ellie Frymire',
description: 'elliefrymire.com',
}

export default function RootLayout({
Expand All @@ -31,7 +31,11 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body className={`${sourceSansPro.className} ${robotoMono.className}`}>{children}</body>
<body
className={`${sourceSansPro.variable} ${robotoMono.variable}`}
>
{children}
</body>
</html>
)
}
18 changes: 11 additions & 7 deletions src/app/mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
@mixin h1 {
font-family: var(--font-source-sans-pro);
@mixin h1-mixin {
font-family: var(--font-source-sans);
font-size: 2em;
font-weight: 700;
text-transform: uppercase;
}

@mixin h3 {
@mixin h3-mixin {
font-family: var(--font-roboto-mono);
font-size: 1.25em;
font-weight: 400;
color: #CCC
color: #CCC;
}

@mixin h4 {
@mixin h4-mixin {
font-family: var(--font-roboto-mono);
font-weight: 400;
}

@mixin p {
font-family: var(--font-source-sans-pro);
@mixin p-mixin {
font-size: 1em;
line-height: 1.5em;
font-family: var(--font-source-sans);

}
59 changes: 38 additions & 21 deletions src/app/page.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,25 +18,39 @@
}

.page {
scroll-snap-align: center;
scroll-snap-align: start;
display: inline-flex;
gap: 2em;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 6em;
height: 100vh;
flex-basis: 100%;
flex-grow: 0;
flex-shrink: 0;

h1 {
@include h1-mixin;
}
}

.link {
a {
display: inline-flex;
align-items: center;
}
}


.home {
position: relative;
flex-direction: row;
justify-content: center;
align-items: center;

.name {
@include h1;
font-family: var(--font-source-sans);
font-size: 2em;
font-weight: 700;
text-transform: uppercase;
text-align: right;
width: min-content;
}
Expand All @@ -46,12 +60,10 @@
flex-direction: column;
gap: 1em;

a {
@include h4;
display: flex;
text-decoration: none;
color: inherit;
cursor: pointer;
span {
a {
font-size: 1em;
}

&:hover {
font-weight: 700;
Expand All @@ -63,13 +75,13 @@
transform: translate(0px, -20px) rotate(-30deg);
}
&:nth-child(2) {
transform: translate(20px, -10px) rotate(-15deg);
transform: translate(22px, -10px) rotate(-15deg);
}
&:nth-child(3) {
transform: translate(30px, 0px) rotate(0);
}
&:nth-child(4) {
transform: translate(20px, 10px) rotate(15deg);
transform: translate(22px, 10px) rotate(15deg);
}
&:nth-child(5) {
transform: translate(0px, 20px) rotate(30deg);
Expand All @@ -83,19 +95,24 @@
}

.about {
a {
color: inherit;
cursor: pointer;
}
flex-direction: row;
justify-content: center;
align-items: center;
padding: 20%;
gap: 4em;
}

.projects {
.work {
flex-direction: column;
gap: 4em;
width: fit-content;
padding-right: 50%;
margin: auto;
height: 100%;

}

.about, .projects, .resume {
padding: 20%;
gap: 4em;
.about, .work, .resume {
@media (max-width: 800px) {
padding: 10%;
gap: 2em;
Expand Down
34 changes: 16 additions & 18 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,20 @@ import Image from 'next/image'
import Canvas from './blur/blur'
import styles from './page.module.scss'
import Resume from './resume/resume'
import Work from './work/work'

function LinkWithArrow({ children, href }: { children: any, href:string }) {
return (<a href={href} target='_blank'>{children}
export function LinkWithArrow({ children, href }: { children: any, href: string }) {
return (
<span className={styles.link}>
<a href={href} target='_blank'>{children}
<Image
className={styles.arrow}
src="/arrow.svg"
alt="arrow"
width={10}
height={12}
height={10}
/>
</a>)
</a></span>)
}

export default function Home() {
Expand All @@ -32,40 +35,35 @@ export default function Home() {
ELLIE FRYMIRE
</div>
<div className={styles.pages}>
<a onClick={() => scroll("about")}>about</a>
<a onClick={() => scroll("projects")}>projects</a>
<a onClick={() => scroll("resume")}>resume</a>
<span><a onClick={() => scroll("about")}>about</a></span>
<span><a onClick={() => scroll("work")}>work</a></span>
<span><a onClick={() => scroll("resume")}>resume</a></span>
<LinkWithArrow href='https://github.com/efrymire'>github</LinkWithArrow>
<LinkWithArrow href='https://www.linkedin.com/in/elliefrymire'>linkedin</LinkWithArrow>
</div>
</div>

<div className={`${styles.page} ${styles.about}`} id="about">
<h1 >About</h1>
<div>
<p>
Driven and accomplished designer and developer living in San Francisco, California.
<br/><br/>
I have a strong business and client background, with startup experience working on mission critical products.
I like to think I am both a passionate creative and an analytical thinker.
I enjoy both designing and coding projects from start to finish, but also speaking about and teaching my work.
<br/><br/>
I am currently working on data visualization web components at <LinkWithArrow href="https://atom.finance/">Atom Finance</LinkWithArrow>, while teaching as an adjunct lecturer in the <LinkWithArrow href="https://www.gc.cuny.edu/data-analysis-and-visualization">CUNY Data Visualization and Analysis program</LinkWithArrow>.
</div>
I am currently working on a web components library of financial visualizations at <LinkWithArrow href="https://atom.finance/">Atom Finance</LinkWithArrow>, while teaching as an adjunct lecturer in the <LinkWithArrow href="https://www.gc.cuny.edu/data-analysis-and-visualization">CUNY Data Visualization and Analysis</LinkWithArrow> program.
</p>
</div>

<div className={`${styles.page} ${styles.projects}`} id="projects">
<h1 >Projects</h1>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div className={`${styles.page} ${styles.work}`} id="work">
<Work/>
</div>

<div className={`${styles.page} ${styles.resume}`} id="resume">
<Resume/>
</div>


</main>
</>
)
</>)
}
39 changes: 39 additions & 0 deletions src/app/work/work.module.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@

.projectsMarquee {
display: inline-flex;
gap: 4em;

.projectTile {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 1em 2em 2em;
width: 400px;
border: 1px solid #eee;
box-shadow: 0px 0px 10px #EEE;

div {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
}

.thumbnail {
border-radius: 2px;
object-fit: contain;
// border: 1px solid #EEE;
}

.button {
padding: 1em 2em;
font-size: 1em;
// background-color: #EEE;
border: 1px solid #eee;
box-shadow: 0px 0px 10px #EEE;
border-radius: 2px;
margin: 1em 0em;
}
}
}
Loading

0 comments on commit 4f14e96

Please sign in to comment.