Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Starter #28

Open
wants to merge 2 commits into
base: STARTER
Choose a base branch
from
Open

Starter #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3804651
finish
nielsvg22 Apr 5, 2022
35ecf69
finish
nielsvg22 Apr 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3,010 changes: 2,997 additions & 13 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

22 changes: 15 additions & 7 deletions src/components/Acomplishments/Acomplishments.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,24 @@ import { Section, SectionDivider, SectionTitle } from '../../styles/GlobalCompon
import { Box, Boxes, BoxNum, BoxText } from './AcomplishmentsStyles';

const data = [
{ number: 20, text: 'Open Source Projects'},
{ number: 1000, text: 'Students', },
{ number: 1900, text: 'Github Followers', },
{ number: 5000, text: 'Github Stars', }
{ number: 1, text: 'Open Source Projects'},
{ number: 6 , text: ' Months Students', },
{ number: 6, text: 'Projects', },
{ number: 4, text: 'Coding languages', }
];

const Acomplishments = () => (
<div>
Acomplishments
</div>
<Section>
<SectionTitle>Personal Acomplishments</SectionTitle>
<Boxes>
{data.map((card, index) =>(
<Box key={index}>
<BoxNum>{card.number} + </BoxNum>
<BoxText>{card.text}</BoxText>
</Box>
))}
</Boxes>
</Section>
);

export default Acomplishments;
32 changes: 29 additions & 3 deletions src/components/Footer/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,35 @@ import { CompanyContainer, FooterWrapper, LinkColumn, LinkItem, LinkList, LinkTi

const Footer = () => {
return (
<div>
Footer
</div>
<FooterWrapper>
<LinkList>
<LinkColumn>
<LinkTitle>Call</LinkTitle>
<LinkItem href="Tel: 06-573-208-14">06-573-208-14</LinkItem>
</LinkColumn>
<LinkColumn>
<LinkTitle>Email</LinkTitle>
<LinkItem href="mailto: [email protected]">[email protected]</LinkItem>
</LinkColumn>
</LinkList>
<SocialIconsContainer>
<CompanyContainer>
<Slogan>There is no dresscode here</Slogan>
</CompanyContainer>
<SocialContainer>
<SocialIcons href="https://github.com">
<AiFillGithub size="3rem"/>
</SocialIcons>

<SocialIcons href="https://linkedin.com">
<AiFillLinkedin size="3rem"/>
</SocialIcons>
<SocialIcons href="https://instagram.com">
<AiFillInstagram size="3rem"/>
</SocialIcons>
</SocialContainer>
</SocialIconsContainer>
</FooterWrapper>
);
};

Expand Down
43 changes: 39 additions & 4 deletions src/components/Header/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,47 @@ import React from 'react';
import { AiFillGithub, AiFillInstagram, AiFillLinkedin } from 'react-icons/ai';
import { DiCssdeck } from 'react-icons/di';

import { Container, Div1, Div2, Div3, NavLink, SocialIcons } from './HeaderStyles';
import { Container, Div1, Div2, Div3, NavLink, SocialIcons, Span } from './HeaderStyles';

const Header = () => (
<div>
Header
</div>
<Container>
<Div1>
<Link href="/">
<a style={{ display: 'flex', alignItems: 'center', color: 'white', marginBottom: '20px'}}>
<DiCssdeck size="3rem" /> <Span>Portfolio</Span>
</a>
</Link>
</Div1>
<Div2>
<li>
<Link href="#project">
<NavLink>Projects</NavLink>
</Link>
</li>
<li>
<Link href="#tech">
<NavLink>Technologies</NavLink>
</Link>
</li>
<li>
<Link href="#about">
<NavLink>About</NavLink>
</Link>
</li>
</Div2>
<Div3>
<SocialIcons href="https://github.com">
<AiFillGithub size="3rem"/>
</SocialIcons>

<SocialIcons href="https://linkedin.com">
<AiFillLinkedin size="3rem"/>
</SocialIcons>
<SocialIcons href="https://instagram.com">
<AiFillInstagram size="3rem"/>
</SocialIcons>
</Div3>
</Container>
);

export default Header;
4 changes: 4 additions & 0 deletions src/components/Header/HeaderStyles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ export const Container = styled.div`
grid-row-gap: 0.5rem;
}
`;

export const Span = styled.span`
font-size: 2rem;
`;
export const Div1 = styled.div`
grid-area: 1 / 1 / 2 / 2;
display: flex;
Expand Down
15 changes: 12 additions & 3 deletions src/components/Hero/Hero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,18 @@ import Button from '../../styles/GlobalComponents/Button';
import { LeftSection } from './HeroStyles';

const Hero = (props) => (
<div>
Hero
</div>
<Section row nopadding>
<LeftSection>
<SectionTitle main center>
Hello i'm Niels <br />
A Software Developer
</SectionTitle>
<SectionText>
I'm a beginning Software Developer, currently i'm learning to write code through the procces of agile and scrum.
</SectionText>
<Button onClick={() => window.location = 'https://github.com/'}>Learn More</Button>
</LeftSection>
</Section>
);

export default Hero;
33 changes: 30 additions & 3 deletions src/components/Projects/Projects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,37 @@ import { BlogCard, CardInfo, ExternalLinks, GridContainer, HeaderThree, Hr, Tag,
import { Section, SectionDivider, SectionTitle } from '../../styles/GlobalComponents';
import { projects } from '../../constants/constants';



const Projects = () => (
<div>
Projects
</div>
<Section nopadding id="projects">
<SectionDivider />
<SectionTitle main>Projects</SectionTitle>
<GridContainer>
{projects.map(({id, image, title, description, tags, source, visit}) => (
<BlogCard key={id}>
< Img src={image} />
<TitleContent>
<HeaderThree title>{title}</HeaderThree>
<Hr />
</TitleContent>
<CardInfo>{description}</CardInfo>
<div>
<titleContent>Stack</titleContent>
<TagList>
{tags.map((tag, i) => (
<Tag key={i}>{tag}</Tag>
))}
</TagList>
</div>
<UtilityList>
<ExternalLinks href={visit}>Code</ExternalLinks>
<ExternalLinks href={source}>Source</ExternalLinks>
</UtilityList>
</BlogCard>
))}
</GridContainer>
</Section>
);

export default Projects;
44 changes: 41 additions & 3 deletions src/components/Technologies/Technologies.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,47 @@ import { Section, SectionDivider, SectionText, SectionTitle } from '../../styles
import { List, ListContainer, ListItem, ListParagraph, ListTitle } from './TechnologiesStyles';

const Technologies = () => (
<div>
Technologies
</div>
<Section id='tech'>
<SectionDivider />
<br />
<SectionTitle>Technologies</SectionTitle>
<SectionText>
I've worked with variants of technologies like JavaScript, React, Xcode, Java, Backend and Frontend
</SectionText>
<List>
<ListItem>
<DiReact size="5rem" />
<ListContainer>
<ListParagraph>
<ListTitle>Front-End</ListTitle>
Experiance with <br />
React.js
</ListParagraph>
</ListContainer>
</ListItem>
<ListItem>
<DiFirebase size="5rem" />
<ListContainer>
<ListParagraph>
<ListTitle>Back-End</ListTitle>
Experiance with <br />
Json
</ListParagraph>
</ListContainer>
</ListItem>
<ListItem>
<DiZend size="5rem" />
<ListContainer>
<ListParagraph>
<ListTitle>UX/UI</ListTitle>
Experiance with <br />
Wireframes
</ListParagraph>
</ListContainer>
</ListItem>

</List>
</Section>
);

export default Technologies;
129 changes: 99 additions & 30 deletions src/components/TimeLine/TimeLine.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,46 +7,115 @@ import { TimeLineData } from '../../constants/constants';
const TOTAL_CAROUSEL_COUNT = TimeLineData.length;

const Timeline = () => {
// const [activeItem, setActiveItem] = useState(0);
// const carouselRef = useRef();
const [activeItem, setActiveItem] = useState(0);
const carouselRef = useRef();

// const scroll = (node, left) => {
// return node.scrollTo({ left, behavior: 'smooth' });
// }
const scroll = (node, left) => {
return node.scrollTo({ left, behavior: 'smooth' });
}

// const handleClick = (e, i) => {
// e.preventDefault();
const handleClick = (e, i) => {
e.preventDefault();

// if (carouselRef.current) {
// const scrollLeft = Math.floor(carouselRef.current.scrollWidth * 0.7 * (i / TimeLineData.length));
if (carouselRef.current) {
const scrollLeft = Math.floor(carouselRef.current.scrollWidth * 0.7 * (i / TimeLineData.length));

// scroll(carouselRef.current, scrollLeft);
// }
// }
scroll(carouselRef.current, scrollLeft);
}
}

// const handleScroll = () => {
// if (carouselRef.current) {
// const index = Math.round((carouselRef.current.scrollLeft / (carouselRef.current.scrollWidth * 0.7)) * TimeLineData.length);
const handleScroll = () => {
if (carouselRef.current) {
const index = Math.round((carouselRef.current.scrollLeft / (carouselRef.current.scrollWidth * 0.7)) * TimeLineData.length);

// setActiveItem(index);
// }
// }
setActiveItem(index);
}
}

// // snap back to beginning of scroll when window is resized
// // avoids a bug where content is covered up if coming from smaller screen
// useEffect(() => {
// const handleResize = () => {
// scroll(carouselRef.current, 0);
// }
// snap back to beginning of scroll when window is resized
// avoids a bug where content is covered up if coming from smaller screen
useEffect(() => {
const handleResize = () => {
scroll(carouselRef.current, 0);
}

// window.addEventListener('resize', handleResize);
// }, []);
window.addEventListener('resize', handleResize);
}, []);

return (
<div>
Timeline
</div>
<Section id="about">
<SectionTitle>About Me</SectionTitle>
<SectionText>
I'm Niels van Gortel and i'm 21 years old. I started my code journey half a year ago with no knowledge at all. Now 6 months later is have been
learning so much, from starting with a console application in java to building a full stack app in java and javascript.
</SectionText>
<CarouselContainer ref={carouselRef} onScroll={handleScroll}>
<>
{TimeLineData.map((item, index) => (
<CarouselMobileScrollNode
key={index}
final={index === TOTAL_CAROUSEL_COUNT - 1}>
<CarouselItem
index={index}
id={`carousel__item-${index}`}
active={activeItem}
onClick={(e) => handleClick(e, index)}>
<CarouselItemTitle>
{item.year}
<CarouselItemImg
width="208"
height="6"
viewBox="0 0 208 6"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2.5 5.5C3.88071 5.5 5 4.38071 5 3V3.5L208 3.50002V2.50002L5 2.5V3C5 1.61929 3.88071 0.5 2.5 0.5C1.11929 0.5 0 1.61929 0 3C0 4.38071 1.11929 5.5 2.5 5.5Z"
fill="url(#paint0_linear)"
fill-opacity="0.33"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="-4.30412e-10"
y1="0.5"
x2="208"
y2="0.500295"
gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop
offset="0.79478"
stop-color="white"
stop-opacity="0"
/>
</linearGradient>
</defs>
</CarouselItemImg>
</CarouselItemTitle>
<CarouselItemText>{item.text}</CarouselItemText>
</CarouselItem>
</CarouselMobileScrollNode>
))}
</>
</CarouselContainer>
<CarouselButtons>
{TimeLineData.map((item, index) => {
return (
<CarouselButton
key={index}
index={index}
active={activeItem}
onClick={(e) => handleClick(e, index)}
type="button">
<CarouselButtonDot active={activeItem} />
</CarouselButton>
);
})}
</CarouselButtons>
<SectionDivider />
</Section>
);
};

export default Timeline;
export default Timeline;
Loading