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

Feature/6 mobile friendly #14

Merged
merged 8 commits into from
Jan 17, 2025
Merged

Feature/6 mobile friendly #14

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
207f31b
style: add breakpoints and make mobile friendly
okaziya Jan 15, 2025
66d3b01
style: :art: make header responsive
okaziya Jan 15, 2025
31a48d9
Merge branch 'main' into feature/6-mobile-friendly
okaziya Jan 16, 2025
0cc7ffc
Rename Glasses-white.png to glasses-white.png
okaziya Jan 16, 2025
8d77191
fix: attempt to fix layout bug
okaziya Jan 16, 2025
9e9af2d
refactor: minor stylistic improvments
okaziya Jan 16, 2025
5decb71
style: :art: safe pdf icon for the future use
okaziya Jan 16, 2025
7cdf0f9
style: change style of the download PDF button based on the matching …
okaziya Jan 17, 2025
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
4 changes: 2 additions & 2 deletions app/[locale]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React from "react";

import HeroSection from "../../components/HeroSection";
import ContactSection from "../../components/ContactSection";
import ContactSection from "../../components/ContactSection/ContactSection";
import WorkExperienceSection from "../../components/WorkExperienceSection";
import { Locale } from "../../types";
import SkillsSection from "../../components/SkillsSection";
import EducationSection from "../../components/EducationSection";
import LanguagesSection from "../../components/LanguagesSection";
import LanguagesSection from "../../components/LanguagesSection/LanguagesSection";
import Image from "next/image";
import { getImagePath } from "../../utils/imagePath";

Expand Down
9 changes: 8 additions & 1 deletion components/Button/Button.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client"
"use client";

import styled from "styled-components";
import { media } from "../../styles/media";

export const PrimaryButton = styled.button`
background-color: ${({ theme }) => theme.colors.brand};
Expand All @@ -16,4 +17,10 @@ export const PrimaryButton = styled.button`
background-color: rgba(107, 107, 241, 1);
box-shadow: 5px 5px 20px rgba(84, 84, 212, 0.75);
}

${media.mobile`
white-space: nowrap;
padding: 12px 16px;
max-height: 48px;
`}
`;
23 changes: 0 additions & 23 deletions components/ContactSection.tsx
View file
Open in desktop

This file was deleted.

12 changes: 12 additions & 0 deletions components/ContactSection/ContactSection.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
"use client";

import styled from "styled-components";
import { media } from "../../styles/media";

export const ContactSectionWrapper = styled.section`
display: flex;

${media.tablet`
flex-direction: column
`}
`;
24 changes: 24 additions & 0 deletions components/ContactSection/ContactSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React from "react";
import { montserratExtraBold } from "../../styles/fonts";
import { getTranslations } from "../../lib/getTranslations";

import { Locale } from "../../types";
import ContactInformation from "../ContactInformation";
import { ContactSectionWrapper } from "./ContactSection.styles";

export default function ContactSection({ locale }: { locale: Locale }) {
const translations = getTranslations(locale);

return (
<ContactSectionWrapper>
<div className="section-first-column">
<h2 className={montserratExtraBold.className}>
{translations.contact.title}
</h2>
</div>
<div>
<ContactInformation locale={locale} />
</div>
</ContactSectionWrapper>
);
}
1 change: 1 addition & 0 deletions components/ContactSection/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from "./ContactSection";
16 changes: 13 additions & 3 deletions components/EducationSection/EducationSection.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,27 @@
"use client"
"use client";
import styled from "styled-components";
import { media } from "../../styles/media";

export const EducationSectionWrapper = styled.section`
position: relative;

display: flex;

${media.tablet`
flex-direction: column
`}

&::before {
content: "";
position: absolute;
top: 300px;
left: -350px;
width: 215%;
width: 215%;
height: 860px;
background: linear-gradient(rgba(251, 168, 28, 0.084), rgba(224, 86, 136, 0.0315));
background: linear-gradient(
rgba(251, 168, 28, 0.084),
rgba(224, 86, 136, 0.0315)
);
filter: blur(300px);
transform: rotate(-22deg);
z-index: -1;
Expand Down
6 changes: 3 additions & 3 deletions components/EducationSection/EducationSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ export default function EducationSection({ locale }: { locale: Locale }) {
const translations = getTranslations(locale);

return (
<EducationSectionWrapper className="d-flex">
<div>
<h2 className={`${montserratExtraBold.className} section-first-column`}>
<EducationSectionWrapper>
<div className="section-first-column">
<h2 className={montserratExtraBold.className}>
{translations.education.title}
</h2>
</div>
Expand Down
29 changes: 17 additions & 12 deletions components/ExperienceItem/ExperienceItem.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
"use client"
"use client";

import styled from "styled-components";

export const ExperienceItemArticle = styled.article`
margin-bottom: 40px;
.company-title {
margin-bottom: 40px;

h5 {
font-weight: 700;

&.company-title {
font-weight: 300;
}
}

ul {
color: rgba(255, 255, 255, 0.7);
font-weight: 300;
font-size: 20px;
padding-left: 20px;
li {
padding-top: 16px;
line-height: 28px;
}
ul {
color: ${({ theme }) => theme.colors.textMuted};
font-size: 20px;
padding-left: 20px;
font-weight: 400;
li {
padding-top: 16px;
line-height: 28px;
}
}
`;
23 changes: 21 additions & 2 deletions components/Header/Header.styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,27 @@
"use client";

import styled from "styled-components";
import { media } from "../../styles/media";

export const StyledHeader = styled.header`
max-width: ${({ theme }) => theme.maxWidth.desktop};
height: 60px;
max-width: ${({ theme }) => theme.breakpoints.desktop};
min-height: 60px;

${media.mobile`
min-height: 76px;
`}
`;

export const ImageWrapper = styled.div`
width: 100%;
max-width: 80px;
margin-bottom: 12px;
img {
width: 100%;
height: auto;
}

${media.mobile`
max-width: 56px;
`}
`;
21 changes: 11 additions & 10 deletions components/Header/Header.tsx
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On desktop it looks really nice as it is! When looking at the header in mobile mode, I think that the top 3 centimeters of the screen looks quite cramped. When in mobile-portrait mode, I think it would look better if the "Ladda ner CV" text was abbreviated to "PDF" or "PDF ⬇️" or "⬇️". Probably it would be better if dropping the sun glasses too, on mobile. What does @mkl-adsn think?

IMG_2498 Large

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about that?

Skärmavbild 2025-01-16 kl 16 05 48

Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ import { getTranslations } from "../../lib/getTranslations";
import { Locale } from "../../types";
import Image from "next/image";
import Button from "../Button";
import { StyledHeader } from "./Header.styles";
import { CONTACT_INFO } from "../../config";
import { ImageWrapper, StyledHeader } from "./Header.styles";
import { getImagePath } from "../../utils/imagePath";

export default function Header({ locale }: { locale: Locale }) {
Expand All @@ -13,14 +12,16 @@ export default function Header({ locale }: { locale: Locale }) {
return (
<StyledHeader className="mx-auto d-flex justify-content-between">
<div className="d-flex flex-column justify-content-between">
<Image
src={getImagePath("/glasses.png")}
alt={translations.images.logoAlt}
width={80}
height={16}
priority
unoptimized
/>
<ImageWrapper>
<Image
src={getImagePath("/glasses.png")}
alt={translations.images.logoAlt}
width={80}
height={16}
priority
unoptimized
/>
</ImageWrapper>
<h3 className="m-0">{translations.name}</h3>
</div>
<div className="d-flex">
Expand Down
7 changes: 7 additions & 0 deletions components/Header/LanguageSwitcher.styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import Link from "next/link";

import styled from "styled-components";
import { media } from "../../styles/media";

export const StyledLanguageSwitcher = styled(Link)`
background-color: transparent;
Expand All @@ -17,4 +18,10 @@ export const StyledLanguageSwitcher = styled(Link)`
transform: scale(1.1);
}
}

${media.mobile`
width: 48px;
height: 48px;
justify-content: center;
`}
`;
2 changes: 1 addition & 1 deletion components/Header/LanguageSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function LanguageSwitcher({ locale }: { locale: Locale }) {
return (
<StyledLanguageSwitcher
href={`/${nextLocale}`}
className="language-switcher mx-1 align-items-center btn btn-light d-flex p-3 border-0"
className="language-switcher mx-1 align-items-center btn btn-light d-flex p-2 p-lg-3 border-0"
>
<Image
src={getImagePath(flagSrc)}
Expand Down
57 changes: 45 additions & 12 deletions components/HeroSection/HeroSection.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,53 @@
"use client"
"use client";
import styled from "styled-components";
import { media } from "../../styles/media";

export const HeroSectionWrapper = styled.section`
position: relative;
display: flex;
align-items: center;
justify-content: space-between;

.profile-photo-wrapper {
width: 560px;
height: 560px;
position: relative;
${media.laptop`
flex-direction: column
`}

.main-info {
max-width: 560px ${media.laptop`
align-self: flex-start;
`};
}

h1 {
font-weight: 800;
font-size: 72px;
.profile-photo-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-width: 560px;

img {
width: 100%;
height: auto;
}

${media.laptop`
align-self: flex-end;
max-width: 560px;
min-width: auto;
width: 100%;
`}

${media.tablet`
max-width: 400px;
`}

${media.mobile`
align-self: center;
max-width: 296px;
`}
}

h3 {
color: rgba(255, 255, 255, 0.7);
color: ${({ theme }) => theme.colors.textMuted};
font-size: 26px;
line-height: 34px;
position: relative;
Expand All @@ -44,22 +72,27 @@ export const HeroSectionWrapper = styled.section`
left: -401px;
width: 108%;
height: 35%;
background: linear-gradient(rgba(84, 84, 212, 0.27), rgba(84, 84, 212, 0.1134));
background: linear-gradient(
rgba(84, 84, 212, 0.27),
rgba(84, 84, 212, 0.1134)
);
filter: blur(300px);
transform: rotate(30deg);
z-index: -1;
border-radius: 233px;
}


&::after {
content: "";
position: absolute;
top: 570px;
right: -30%;
width: 108%;
height: 45%;
background: linear-gradient(rgba(251, 168, 28, 0.0832), rgba(224, 86, 136, 0.048));
background: linear-gradient(
rgba(251, 168, 28, 0.0832),
rgba(224, 86, 136, 0.048)
);
filter: blur(300px);
transform: rotate(-25deg);
z-index: -1;
Expand Down
2 changes: 1 addition & 1 deletion components/HeroSection/HeroSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function HeroSection({ locale }: { locale: Locale }) {

return (
<HeroSectionWrapper>
<div>
<div className={"main-info"}>
<h1 className={`${montserratExtraBold.className} m-0`}>
{translations.heroSection.title}
</h1>
Expand Down
12 changes: 12 additions & 0 deletions components/LanguagesSection/LanguagesSection.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
"use client";

import styled from "styled-components";
import { media } from "../../styles/media";

export const LanguageSectionWrapper = styled.section`
display: flex;

${media.tablet`
flex-direction: column
`}
`;
Loading