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.

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

Portfolio #382

Open
wants to merge 78 commits into
base: main
Choose a base branch
from
Open
Changes from 7 commits
Commits
Show all changes
78 commits
Select commit Hold shift + click to select a range
8efd017
First commit. Changed title.
JohannaBN Mar 25, 2024
a87dbf2
First commit.
JohannaBN Mar 26, 2024
e9e0937
Favicon.
JohannaBN Mar 26, 2024
4936b27
Added Heading component.
JohannaBN Mar 26, 2024
d59d18b
Header section.
JohannaBN Mar 26, 2024
7b6859e
Header styling.
JohannaBN Mar 27, 2024
5a3507d
Arrow in header.
JohannaBN Mar 27, 2024
092bfd9
Corrected styling on heading.
JohannaBN Mar 27, 2024
72e66d5
Added styling to ProjectCard buttons and tags.
JohannaBN Mar 27, 2024
bde99e8
Added styling and hover effect on buttons in ProjectCard.
JohannaBN Mar 27, 2024
70ef96d
Added skills component.
JohannaBN Mar 27, 2024
b6d85ae
Added styling to skills-section li+ul.
JohannaBN Mar 28, 2024
cea9e27
Added styling to ContactSection.
JohannaBN Mar 28, 2024
ce6ec16
Added social icons and styling to Skills-section.
JohannaBN Mar 28, 2024
5dfd3dd
Added toUpperCase method to heading.
JohannaBN Mar 28, 2024
6ff9a37
Added animation to arrow in Header-section.
JohannaBN Mar 28, 2024
2b15a7a
Changed name on Header component.
JohannaBN Mar 28, 2024
728c0f9
Changed font on index.css.
JohannaBN Mar 28, 2024
1d39c91
Added mockup image to project card and fixed styling issues in Contac…
JohannaBN Mar 28, 2024
b33814d
Added media queries for TechSection.
JohannaBN Mar 30, 2024
02247c7
Added media queries for images.
JohannaBN Mar 31, 2024
d3977e7
Added media queries for ProjectCard.
JohannaBN Mar 31, 2024
8065c27
Added media queries for Skills-section.
JohannaBN Mar 31, 2024
346caf5
Added deafult description to project card in case there is no descrip…
JohannaBN Apr 2, 2024
46a23e7
Changed default image on ProjectCard.
JohannaBN Apr 2, 2024
0a16171
Bugfix - fixed element positioning on tablet and desktop.
JohannaBN Jun 18, 2024
ed61a8a
Merge pull request #1 from JohannaBN/bug/header-styling-on-desktop
JohannaBN Jun 18, 2024
228ac19
Cleaned up code.
JohannaBN Jun 18, 2024
ade5c4a
Added and corrected margins and gap.
JohannaBN Jun 18, 2024
e29363f
Corrected font-sizes.
JohannaBN Jun 18, 2024
3b043e2
Updated fonts.
JohannaBN Jun 18, 2024
4417fe5
Updated fonts, font-sizes and font-colors.
JohannaBN Jun 18, 2024
12dc054
Refactored code and created arrow-component.
JohannaBN Jun 18, 2024
46b1104
Bugfix - Arrow not being at the bottom and center.
JohannaBN Jun 18, 2024
5cfea46
Corrected margins on desktop and extra large screens.
JohannaBN Jun 18, 2024
b461d13
Changed arrow icon and corrected animation.
JohannaBN Jun 18, 2024
cc0fff0
Merge pull request #2 from JohannaBN/bug/header-styling
JohannaBN Jun 18, 2024
5ce0e23
Updated colours and margins for mobile.
JohannaBN Jun 18, 2024
c6fb133
Corrected margin at arrow.
JohannaBN Jun 18, 2024
1915a7e
Updated padding, gap and font sizes for desktop.
JohannaBN Jun 18, 2024
24010f8
Updated media queries for extra large screens.
JohannaBN Jun 18, 2024
bc65dc0
Merge pull request #3 from JohannaBN/bug/styling-tech-section
JohannaBN Jun 18, 2024
77ae631
Restructred project section.
JohannaBN Jun 18, 2024
05caa01
Updated styling for mobile.
JohannaBN Jun 18, 2024
d304df5
Fixed issue with image not resizing correctly on mobile.
JohannaBN Jun 18, 2024
98de087
Updated styling on tablet.
JohannaBN Jun 18, 2024
dfb622f
Updated margins.
JohannaBN Jun 19, 2024
e642fa2
Merge pull request #4 from JohannaBN/bug/styling-portfolio
JohannaBN Jun 19, 2024
a7d6eb4
Updated styling on desktop and extra large screens.
JohannaBN Jun 19, 2024
eca9f4f
Merge pull request #5 from JohannaBN/bug/fontsizes-on-desktop
JohannaBN Jun 19, 2024
7ee6e8d
Updated font and font-size.
JohannaBN Jun 19, 2024
8edbc79
Updated styling on mobile.
JohannaBN Jun 19, 2024
632ba6d
Updated styling on tablet.
JohannaBN Jun 19, 2024
7c9778d
Updated styling on desktop.
JohannaBN Jun 19, 2024
3407830
Updated styling on extra large screens.
JohannaBN Jun 19, 2024
a9483bc
Merge pull request #6 from JohannaBN/bug/styling-tech
JohannaBN Jun 19, 2024
0a73bf8
Updated styling on mobile and updated icons.
JohannaBN Jun 19, 2024
3b9fe1b
Updated font and size on p.
JohannaBN Jun 19, 2024
5aca2f6
Updated styling on tablet and desktop.
JohannaBN Jun 19, 2024
1ba922c
Merge pull request #7 from JohannaBN/bug/styling-contact
JohannaBN Jun 19, 2024
7df55fc
Created json for images.
JohannaBN Jun 19, 2024
b635ba7
Connected json to api fetch to get images for projects.
JohannaBN Jun 19, 2024
f6fed7c
Fixed issue with classnames being removed.
JohannaBN Jun 19, 2024
1132105
Added function to capitalize first letter in project name.
JohannaBN Jun 19, 2024
41b3c76
Updated font color for better accessibility.
JohannaBN Jun 19, 2024
b8b1de5
Added some images for projects.
JohannaBN Jun 19, 2024
4d852b8
Merge pull request #8 from JohannaBN/feature/project-images
JohannaBN Jun 19, 2024
a1ad047
Updated readme.
JohannaBN Jun 19, 2024
db30d55
Updated readme.
JohannaBN Jun 19, 2024
5c99615
Testing another way of showing images.
JohannaBN Jun 19, 2024
3aa5ed8
Updated image paths.
JohannaBN Jun 19, 2024
92249c7
Updated mockup image for final project.
JohannaBN Aug 23, 2024
d933c23
Updated image-path for final project and removed unused files.
JohannaBN Aug 23, 2024
6b95542
Update README.md
JohannaBN Aug 23, 2024
f255d34
Updated image-paths.
JohannaBN Aug 23, 2024
2d41396
Updated readme.
JohannaBN Aug 23, 2024
5dc242e
Corrected typo.
JohannaBN Aug 23, 2024
2f3c199
Updated project image paths.
JohannaBN Aug 23, 2024
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
Binary file removed Preview-PortfolioWebDev-Technigo.png
Binary file not shown.
7 changes: 0 additions & 7 deletions pull_request_template.md

This file was deleted.

54 changes: 0 additions & 54 deletions src/assets/images.json

This file was deleted.

Binary file modified src/assets/images/.DS_Store
Binary file not shown.
3 changes: 0 additions & 3 deletions src/assets/images/icon-github.svg

This file was deleted.

3 changes: 0 additions & 3 deletions src/assets/images/icon-instagram.svg

This file was deleted.

3 changes: 0 additions & 3 deletions src/assets/images/icon-linkedin.svg

This file was deleted.

Binary file added src/assets/images/mockup-conesandstones.png
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 src/assets/images/mockup-happy-thoughts.png
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 src/assets/images/mockup-karategirl.jpg
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 src/assets/images/mockup-labyrinth.png
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 src/assets/images/mockup-portfolio.png
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 src/assets/images/mockup-todo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/HeaderSection.css
Original file line number Diff line number Diff line change
@@ -29,7 +29,7 @@ h2 {
font-family: montserrat;
font-size: 32px;
font-weight: 700;
color: #a6bd9d;
color: #7d8f76;
}

p {
27 changes: 5 additions & 22 deletions src/components/Portfolio.jsx
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ import { Header } from "./HeaderSection";
import { Skills } from "./Skills";
import { Contact } from "./ContactSection";
import { ProjectSection } from "./ProjectSection";
import repoImages from "../project-images.json";

export const Portfolio = () => {
const [repositories, setRepositories] = useState([]);
@@ -40,7 +41,10 @@ export const Portfolio = () => {
<>
<Header repo={repositories[0]} />
<TechSection />
<ProjectSection repositories={repositories} />
<ProjectSection
repositories={repositories}
repoImages={repoImages}
/>
<Skills />
<Contact repo={repositories[0]} />
</>
@@ -49,24 +53,3 @@ export const Portfolio = () => {
</div>
);
};

// import React, { useState, useEffect } from "react";
// import { TechSection } from "./TechSection";
// import { Header } from "./HeaderSection";
// import { Skills } from "./Skills";
// import { Contact } from "./ContactSection";
// import { ProjectSection } from "./ProjectSection";

// export const Portfolio = () => {
// return (
// <div>
// <>
// <Header repo={repositories[0]} />
// <TechSection />
// <ProjectSection />
// <Skills />
// <Contact repo={repositories[0]} />
// </>
// </div>
// );
// };
67 changes: 14 additions & 53 deletions src/components/ProjectCard.jsx
Original file line number Diff line number Diff line change
@@ -2,11 +2,20 @@ import React from "react";
import "./ProjectCard.css";
import githubIcon from "../assets/images/github.svg";
import livedemoIcon from "../assets/images/live-demo.svg";
import mockupImage from "../assets/images/default-project-image.png";
import defaultImage from "../assets/images/default-project-image.png";

export const ProjectCard = ({ repo }) => {
// Replace "-" with an empty space in the project name
const formattedProjectName = repo.name.replace(/-/g, " ");
// Function to capitalize the first letter of each word
const capitalizeFirstLetter = (string) => {
return string.replace(/\b\w/g, (char) => char.toUpperCase());
};

export const ProjectCard = ({ repo, imageUrl }) => {
const imageSrc = imageUrl ? imageUrl : defaultImage;

// Replace "-" with an empty space in the project name and capitalize first letter
const formattedProjectName = capitalizeFirstLetter(
repo.name.replace(/-/g, " ")
);

const handleLiveDemoClick = () => {
window.location.href = repo.homepage;
@@ -18,7 +27,7 @@ export const ProjectCard = ({ repo }) => {

return (
<div className="project-card-container">
<img src={mockupImage} alt="Mockup image" className="mockup-image" />
<img src={imageUrl} alt={repo.name} className="mockup-image" />
<div className="project-content">
<h3 className="project-name">{formattedProjectName}</h3>
<p className="project-description">
@@ -45,51 +54,3 @@ export const ProjectCard = ({ repo }) => {
</div>
);
};

// import React from "react";
// import "./ProjectCard.css";
// import githubIcon from "../assets/images/github.svg";
// import livedemoIcon from "../assets/images/live-demo.svg";
// import mockupImage from "../assets/images/default-project-image.png";

// export const ProjectCard = ({ repo }) => {
// // Replace "-" with an empty space in the project name
// const formattedProjectName = repo.name.replace(/-/g, " ");

// const handleLiveDemoClick = () => {
// window.location.href = repo.homepage;
// };

// const handleViewCodeClick = () => {
// window.location.href = repo.html_url;
// };

// return (
// <div className="project-card-container">
// <img src={mockupImage} alt="Mockup image" className="mockup-image" />
// <div className="project-content">
// <h3 className="project-name">{formattedProjectName}</h3>
// <p className="project-description">
// {repo.description
// ? repo.description
// : "A detailed description of this project is currently being crafted and will be available soon."}
// </p>
// <div className="project-tags-container">
// {repo.topics.map((topic, index) => (
// <p key={index}>{topic}</p>
// ))}
// </div>
// <div className="button-container">
// <button onClick={handleLiveDemoClick}>
// <img src={livedemoIcon} alt="Live Demo Icon" className="icon" />
// Live demo
// </button>
// <button onClick={handleViewCodeClick}>
// <img src={githubIcon} alt="GitHub Icon" className="icon" />
// View the code
// </button>
// </div>
// </div>
// </div>
// );
// };
53 changes: 6 additions & 47 deletions src/components/ProjectSection.jsx
Original file line number Diff line number Diff line change
@@ -3,56 +3,15 @@ import "./ProjectSection.css";
import { Heading } from "./Heading";
import { ProjectCard } from "./ProjectCard";

export const ProjectSection = ({ repositories }) => {
export const ProjectSection = ({ repositories, repoImages }) => {
return (
<div className="repositories-container">
<Heading text="Featured Projects" />
{repositories.map((repo) => (
<ProjectCard key={repo.id} repo={repo} />
))}
{repositories.map((repo) => {
const repoImage = repoImages.find((img) => img.repoName === repo.name);
const imageUrl = repoImage ? repoImage.imageUrl : "";
return <ProjectCard key={repo.id} repo={repo} imageUrl={imageUrl} />;
})}
</div>
);
};

// import React, { useState, useEffect } from "react";
// import "./ProjectSection.css";
// import { Heading } from "./Heading";
// import { ProjectCard } from "./ProjectCard";

// export const ProjectSection = () => {
// const [repositories, setRepositories] = useState([]);
// const [error, setError] = useState(null);

// useEffect(() => {
// fetchRepositories();
// }, []);

// const fetchRepositories = async () => {
// const URL = "https://api.github.com/users/JohannaBN/repos";

// try {
// const response = await fetch(URL);
// if (!response.ok) {
// throw new Error("Could not load repositories");
// }
// const data = await response.json();
// // Sort the repositories based on the created_at date with newest first
// const sortedRepositories = data.sort(
// (a, b) => new Date(b.created_at) - new Date(a.created_at)
// );
// setRepositories(sortedRepositories);
// } catch (error) {
// setError(error.message); // Set error message in state
// }
// };

// return (
// <div className="repositories-container">
// {error && <p>{error}</p>}
// <Heading text="Featured Projects" />
// {repositories.map((repo) => (
// <ProjectCard key={repo.id} repo={repo} />
// ))}
// </div>
// );
// };
4 changes: 2 additions & 2 deletions src/components/Skills.css
Original file line number Diff line number Diff line change
@@ -17,9 +17,9 @@
align-items: center;
}

.skills-section h3 {
.skills-section h4 {
font-family: "Montserrat";
background-color: #a6bd9d;
background-color: #7d8f76;
color: white;
display: inline;
font-size: 24px;
8 changes: 4 additions & 4 deletions src/components/Skills.jsx
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ export const Skills = () => {
<Heading text="Skills" />
<div className="skills-list-section">
<div className="skills-list-container">
<h3>Code</h3>
<h4>Code</h4>
<ul className="skills-code-list">
<li>HTML5</li>
<li>CSS3</li>
@@ -20,7 +20,7 @@ export const Skills = () => {
</ul>
</div>
<div className="skills-list-container">
<h3>Toolbox</h3>
<h4>Toolbox</h4>
<ul className="skills-toolbox-list">
<li>Adobe Photoshop</li>
<li>Adobe Illustrator</li>
@@ -32,7 +32,7 @@ export const Skills = () => {
</ul>
</div>
<div className="skills-list-container">
<h3>More</h3>
<h4>More</h4>
<ul className="skills-upcoming-list">
<li>E-commerce</li>
<li>Branding</li>
@@ -42,7 +42,7 @@ export const Skills = () => {
</ul>
</div>
<div className="skills-list-container">
<h3>Wan't to learn</h3>
<h4>Wan't to learn</h4>
<ul className="skills-more-list">
<li>Typescript</li>
<li>MySQL</li>
86 changes: 86 additions & 0 deletions src/project-images.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
[
{
"repoName": "cones-and-stones",
"imageUrl": "src/assets/images/mockup-conesandstones.png"
},
{
"repoName": "happy-thoughts-api",
"imageUrl": "src/assets/images/mockup-happy-thoughts.png"
},
{
"repoName": "Flowers",
"imageUrl": "src/assets/images/default-project-image.png"
},
{
"repoName": "Karate-girl",
"imageUrl": "src/assets/images/mockup-karategirl.jpg"
},
{
"repoName": "Labyrinth",
"imageUrl": "src/assets/images/mockup-labyrinth.png"
},
{
"repoName": "ToDos",
"imageUrl": "src/assets/images/mockup-todo.png"
},
{
"repoName": "Movies",
"imageUrl": "src/assets/images/default-project-image.png"
},
{
"repoName": "Portfolio",
"imageUrl": "src/assets/images/mockup-portfolio.png"
},
{
"repoName": "Happy-Thoughts",
"imageUrl": "src/assets/images/default-project-image.png"
},
{
"repoName": "Survey",
"imageUrl": "src/assets/images/default-project-image.png"
},
{
"repoName": "Music-Releases",
"imageUrl": "src/assets/images/default-project-image.png"
},
{
"repoName": "Weather-App",
"imageUrl": "src/assets/images/mockup-weather-app.png"
},
{
"repoName": "astronauts-in-space",
"imageUrl": "src/assets/images/default-project-image.png"
},
{
"repoName": "Javasqript-Pizzeria",
"imageUrl": "src/assets/images/default-project-image.png"
},
{
"repoName": "party-rsvp",
"imageUrl": "src/assets/images/default-project-image.png"
},
{
"repoName": "project-business-site",
"imageUrl": "src/assets/images/default-project-image.png"
},
{
"repoName": "News-Site",
"imageUrl": "src/assets/images/default-project-image.png"
},
{
"repoName": "project-mongo-api",
"imageUrl": "src/assets/images/default-project-image.png"
},
{
"repoName": "express-api-starter",
"imageUrl": "src/assets/images/default-project-image.png"
},
{
"repoName": "project-express-api",
"imageUrl": "src/assets/images/default-project-image.png"
},
{
"repoName": "exercise-w9-react-router",
"imageUrl": "src/assets/images/default-project-image.png"
}
]