Mikaelas js-project-portfolio #54
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,3 @@ | ||
| # Portfolio | ||
|
|
||
| mikaela-js-project-portfolio.netlify.app | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,6 +7,10 @@ | |
| <title>Portfolio</title> | ||
| </head> | ||
| <body> | ||
| <style> | ||
| @import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap'); | ||
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); | ||
| </style> | ||
|
There was a problem hiding this comment. Nice that you added it in index.html, it loads before react mounts and causes fewer layout shifts, me usually add it as: /* index.css */ but import in CSS is slower (blocks rendering) and can cause FOUT/FOIT (flash of unstyled text). 👍 |
||
| <div id="root"></div> | ||
| <script type="module" src="/src/main.jsx"></script> | ||
| </body> | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,33 @@ | ||
| import { ThemeProvider } from "styled-components" | ||
| import { theme, GlobalStyle } from "./styles/styles" | ||
| import { | ||
| HeroSection, | ||
| TechSection, | ||
| ProjectSection, | ||
| ArticleSection, | ||
| SkillsSection, | ||
| ContactSection | ||
| } from "./components/sections/sections.js" | ||
|
|
||
| export const App = () => { | ||
| return ( | ||
| <> | ||
| <ThemeProvider theme={theme}> | ||
| <GlobalStyle/> | ||
| <header> | ||
| <HeroSection variant="hero"/> | ||
| </header> | ||
| <main> | ||
| <TechSection variant="tech"/> | ||
| <ProjectSection variant="projects"/> | ||
| <ArticleSection variant="articles"/> | ||
| <SkillsSection variant="skills"/> | ||
| </main> | ||
| <footer> | ||
| <ContactSection variant="contact"/> | ||
| </footer> | ||
| </ThemeProvider> | ||
| </> | ||
|
|
||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import styled from "styled-components" | ||
| import { CardImage, Tag, Button, SvgIcon } from "../ui/ui" | ||
|
There was a problem hiding this comment. Nice that you built some core component =) |
||
| import { CardTitle, BodyText } from "../typography/typography" | ||
| import { DocumentIcon } from "../svg-icons/svg-icons" | ||
|
|
||
| const StyledArticleCard = styled.div` | ||
|
There was a problem hiding this comment. Maybe considering using styled.article for <Article semantic html :D |
||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 28px; | ||
| ` | ||
|
|
||
| export const ArticleCard = ({ article }) => { | ||
| return ( | ||
| <StyledArticleCard> | ||
| <CardImage src={article.image} alt={article.alt}/> | ||
| <Tag tag={article.date} /> | ||
| <CardTitle title={article.name} /> | ||
| <BodyText text={article.description} /> | ||
|
There was a problem hiding this comment. Nice! Would maybe recommend trying to use <Title/Text> as component and variant can be maybe "Card" or something :] but nice |
||
| <Button href={article.link} text= "Read article" variant="article"> | ||
|
There was a problem hiding this comment. text= " a nice little spacing maybe accidentally came here |
||
| <SvgIcon icon={<DocumentIcon />} width="44" viewBox="0 0 50 50" /> | ||
| </Button> | ||
| </StyledArticleCard> | ||
| ) | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import styled from "styled-components" | ||
| import { CardImage, Tag, Button, SvgIcon} from "../ui/ui" | ||
| import { CardTitle, BodyText } from "../typography/typography" | ||
| import { GlobeIcon, GithubIcon } from "../svg-icons/svg-icons" | ||
| import { FlexWrapper } from "../../styles/styles" | ||
|
|
||
| const StyledProjectCard = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 28px; | ||
|
|
||
| @media (min-width: ${({ theme }) => theme.breakpoints.tablet}) { | ||
| flex-direction: row; | ||
| gap: 30px; | ||
| } | ||
| ` | ||
| const ButtonWrapper = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 2px; | ||
|
|
||
| @media (min-width: ${({ theme }) => theme.breakpoints.tablet}) { | ||
| flex-direction: row; | ||
| gap: 30px; | ||
| } | ||
| ` | ||
| const Container = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 20px; | ||
| ` | ||
|
|
||
| export const ProjectCard = ({ project }) => { | ||
| return ( | ||
| <StyledProjectCard> | ||
| <CardImage src={project.image} alt={project.alt}/> | ||
| <Container> | ||
| <CardTitle title={project.name} /> | ||
| <BodyText text={project.description} /> | ||
|
|
||
| <FlexWrapper gap="4px" wrap="wrap"> | ||
| {project.tags.map(tag => ( | ||
| <Tag key={tag} tag={tag} /> | ||
| ))} | ||
| </FlexWrapper> | ||
| <ButtonWrapper> | ||
| <Button href={project.netlify} text= "Live demo" variant="demo"> | ||
| <SvgIcon icon={<GlobeIcon />} width="44" viewBox="2 0 48 48" /> | ||
| </Button> | ||
| <Button href={project.github} text= "View the code" variant="code"> | ||
| <SvgIcon icon={<GithubIcon />} width="44" viewBox="0 0 32 32" /> | ||
| </Button> | ||
| </ButtonWrapper> | ||
| </Container> | ||
| </StyledProjectCard> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import styled from 'styled-components' | ||
| import { UnorderedList } from "../ui/ui" | ||
| import { SkillTitle } from "../typography/typography" | ||
|
|
||
| const StyledSkillColumn = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| text-align: center; | ||
| gap: 16px; | ||
|
|
||
| @media (min-width: ${({ theme }) => theme.breakpoints.tablet}) { | ||
| text-align: left; | ||
| align-items: flex-start; | ||
| } | ||
| ` | ||
|
|
||
| export const SkillColumn = ({ skillsList, colIndex }) => { | ||
| return ( | ||
| <StyledSkillColumn> | ||
| <SkillTitle title={skillsList.title} index={colIndex} /> | ||
| <UnorderedList items={skillsList.skills} /> | ||
| </StyledSkillColumn> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export { ArticleCard } from './ArticleCard' | ||
| export { ProjectCard } from './ProjectCard' | ||
| export { SkillColumn } from './SkillColumn' |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export const Card = () => { | ||
| return ( | ||
| <> | ||
| </> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export const FooterStrip = () => { | ||
| return ( | ||
| <> | ||
| </> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export const Section = () => { | ||
| return ( | ||
| <> | ||
| </> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export const Wrapper = () => { | ||
| return ( | ||
| <> | ||
| </> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| export { Card } from './Card' | ||
| export { FooterStrip } from './FooterStrip' | ||
| export { Section } from './Section' | ||
| export { Wrapper } from './Wrapper' |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import styled from "styled-components" | ||
| import { SectionTitle } from "../typography/typography" | ||
| import { ArticleCard } from "../cards/cards" | ||
| import articles from "../../data/articles" | ||
| import { StyledSection } from '../../styles/StyledSection' | ||
|
|
||
|
|
||
| const GridContainer = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 40px; | ||
| @media (min-width: ${props => props.theme.breakpoints.desktop}) { | ||
| display: grid; | ||
| width: fit-content; | ||
| margin: 0 auto; | ||
| grid-template-columns: repeat(2, auto); | ||
| column-gap: 40px; | ||
| row-gap: 40px; | ||
| } | ||
| @media (min-width: ${props => props.theme.breakpoints.desktopLarge}) { | ||
| column-gap: 64px; | ||
| row-gap: 64px; | ||
| } | ||
| ` | ||
| export const ArticleSection = ({ variant }) => { | ||
| return ( | ||
| <StyledSection variant={variant} gap="56px" padding="120px 16px"> | ||
| <SectionTitle title="My words" variant={variant} textAlign="left"/> | ||
|
|
||
|
|
||
| <GridContainer> | ||
| {articles.articles.map((article, index) => ( | ||
| <ArticleCard | ||
| key={index} | ||
| article={article} | ||
| /> | ||
| ))} | ||
| </GridContainer> | ||
| </StyledSection> | ||
| ) | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import styled from 'styled-components' | ||
| import { Avatar } from '../ui/ui' | ||
| import { SectionTitle, BodyText } from '../typography/typography' | ||
| import aboutMe from '../../data/aboutMe' | ||
| import { StyledSection } from '../../styles/StyledSection' | ||
|
|
||
| const StyledDiv = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| ` | ||
|
|
||
|
|
||
|
|
||
| export const ContactSection = ({ variant }) => { | ||
| return ( | ||
| <StyledSection variant={variant} gap="56px" padding="120px 16px"> | ||
| <SectionTitle title="Let's talk!" variant={variant} /> | ||
| <Avatar /> | ||
| <StyledDiv> | ||
| <BodyText text={aboutMe.name} weight="semibold" fontSizeT="tablet" | ||
| fontSizeD="desktop"fontFam="heading"/> | ||
|
There was a problem hiding this comment. looks a bit wierd with fontSizeD="desktop"fontFam=" no spacing? :D |
||
| <BodyText text={aboutMe.phone} weight="semibold" fontSizeT="tablet" | ||
| fontSizeD="desktop"fontFam="heading"/> | ||
| <BodyText text={aboutMe.email} weight="semibold" fontSizeT="tablet" | ||
| fontSizeD="desktop"fontFam="heading"/> | ||
| </StyledDiv> | ||
| </StyledSection> | ||
| ) | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import styled from 'styled-components' | ||
| import { Avatar } from '../ui/ui' | ||
| import { BodyText, PageTitle } from '../typography/typography' | ||
| import { intro, role, description, avatar } from "../../data/aboutMe" | ||
| import { StyledSection } from '../../styles/StyledSection' | ||
|
|
||
| // Don't show from Tablet breakpoint and up | ||
| const MobileLayout = styled.div` | ||
| @media (min-width: ${({ theme }) => theme.breakpoints.tablet}) { | ||
| display: none; | ||
| } | ||
| ` | ||
| // Don't show up until Tablet breakpoint | ||
| const DesktopLayout = styled.div` | ||
| @media (max-width: ${({ theme }) => theme.breakpoints.tablet}) { | ||
| display: none; | ||
| } | ||
| ` | ||
| // Grouping into and PageTitle | ||
| const StyledContainer1 = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| ` | ||
|
|
||
| // Grouping Avatar and description | ||
| const StyledContainer2 = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 28px; | ||
| ` | ||
|
|
||
| export const HeroSection = ({ variant }) => { | ||
| return ( | ||
| <> | ||
| <MobileLayout > | ||
| <StyledSection variant={variant} padding="56px 16px" gap="32px"> | ||
| <Avatar /> | ||
| <StyledContainer1> | ||
| <BodyText text={intro} weight="semibold" fontFam="heading" /> | ||
| <PageTitle title={role} variant={variant} /> | ||
| </StyledContainer1> | ||
| <BodyText text={description} /> | ||
| </StyledSection> | ||
| </MobileLayout > | ||
| <DesktopLayout > | ||
| <StyledSection variant={variant} | ||
| paddingTablet="120px 32px" | ||
| paddingDesktop="330px 160px 180px" | ||
| paddingDesktopL="330px 230px" | ||
| gapTablet="44px"> | ||
| <StyledContainer1> | ||
| <BodyText text={intro} weight="semibold" fontFam="heading" | ||
| fontSizeT="tablet" | ||
| fontSizeD="desktop" /> | ||
| <PageTitle title={role} variant={variant} /> | ||
| </StyledContainer1> | ||
| <StyledContainer2> | ||
| <Avatar /> | ||
| <BodyText text={description} /> | ||
| </StyledContainer2> | ||
| </StyledSection> | ||
| </DesktopLayout > | ||
| </> | ||
| ) | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import { SectionTitle } from "../typography/typography" | ||
| import { ProjectCard } from "../cards/cards" | ||
| import projects from "../../data/projects" | ||
| import { StyledSection } from '../../styles/StyledSection' | ||
|
|
||
| export const ProjectSection = ({ variant }) => { | ||
| return ( | ||
| <StyledSection variant={variant} gap="56px"> | ||
| <SectionTitle title="Featured projects" variant={variant} textAlign="left"/> | ||
|
|
||
| {projects.projects.map((project, index) => ( | ||
| <ProjectCard | ||
| key={index} | ||
| project={project} | ||
| /> | ||
| ))} | ||
| </StyledSection> | ||
| ) | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I didnt see any images, maybe intentionally? on the projects articles etc
