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

Erika's portfolio #378

Open
wants to merge 50 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
50 commits
Select commit Hold shift + click to select a range
7341b09
First commit
Tejpex Mar 25, 2024
4edce03
Created first components and added display of projects
Tejpex Mar 26, 2024
af8be78
Added tech-section + Started styling
Tejpex Mar 26, 2024
6ca4d32
Worked with styling of projects
Tejpex Mar 26, 2024
d95edd4
Added pictures + Styled buttons
Tejpex Mar 26, 2024
b4b0f2e
Created tag-component
Tejpex Mar 26, 2024
e04abe4
Added picture of myself
Tejpex Mar 27, 2024
d5b4765
Created articles-section
Tejpex Mar 27, 2024
c77903e
Worked with styling
Tejpex Mar 28, 2024
601888d
Added skills-section and divider-line
Tejpex Mar 28, 2024
6c10e29
Moved the project files from subfolder to head folder
Tejpex Mar 28, 2024
4bc251a
Animated arrow
Tejpex Mar 28, 2024
96cd05b
Worked with styling of contact info
Tejpex Mar 28, 2024
d682b8f
Tidied up css-code
Tejpex Mar 28, 2024
8d5dabc
Added footer and social media links + styling
Tejpex Mar 29, 2024
57d9612
Updated link to github-icon
Tejpex Mar 30, 2024
c816ddf
Updated link to web-icon
Tejpex Mar 30, 2024
db12217
Renamed files fo coherence
Tejpex Mar 30, 2024
aad8566
Moved files + changed to grid-layout
Tejpex Mar 30, 2024
9965077
Worked with layout, so npthing goes outside the page
Tejpex Mar 31, 2024
133f78c
Fixed foote-animation
Tejpex Mar 31, 2024
e30d50a
Moved pictures to public-folder
Tejpex Apr 1, 2024
acb2128
Changed profile-picture
Tejpex Apr 1, 2024
e9432d7
Made introduction responsive
Tejpex Apr 1, 2024
7a5b36c
Worked with responsive layout of projects-section
Tejpex Apr 1, 2024
46cf1fd
Made tech-section responsive
Tejpex Apr 1, 2024
eab9158
Worked with responsivness
Tejpex Apr 1, 2024
9b538f1
Styled skills-section
Tejpex Apr 1, 2024
6a71e9a
Changed colors for accessibility
Tejpex Apr 1, 2024
fab67de
Tidied up code
Tejpex Apr 1, 2024
17a1812
Adjusted margins
Tejpex Apr 1, 2024
ffb707b
Tidied up code + worked with responsivness
Tejpex Apr 1, 2024
a5d03c7
Cleaned up code
Tejpex Apr 1, 2024
b416cd3
Made layout of skills-section responsive
Tejpex Apr 1, 2024
6c2a5bf
Styled article-section
Tejpex Apr 1, 2024
374c438
Styling of article-section
Tejpex Apr 2, 2024
6729e32
Made it possible to change color on icons on hover
Tejpex Apr 2, 2024
f60ecde
Fixed bug
Tejpex Apr 2, 2024
f24a4b4
Worked with styling on projects-section
Tejpex Apr 2, 2024
7c67079
Made projects-section responsive
Tejpex Apr 5, 2024
cfc095c
Added project-movies to json
Tejpex Apr 7, 2024
248f875
Added favicon
Tejpex Apr 8, 2024
51886bb
Update with project to-do
Tejpex Apr 12, 2024
c22ee30
Updated presentation + added more projects
Tejpex May 3, 2024
19e95cc
Updated projects and skills
Tejpex Jul 5, 2024
acbb2d6
Fixed styling-issues in project-section
Tejpex Jul 9, 2024
d8ce4ed
Added project + workd with layout
Tejpex Oct 2, 2024
d38f714
Removed double picture + added project
Tejpex Oct 2, 2024
d40e2f1
Updated projects
Tejpex Oct 10, 2024
ddc57d0
Add project-blog
Tejpex Dec 9, 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
Prev Previous commit
Next Next commit
Removed double picture + added project
Tejpex committed Oct 2, 2024
commit d38f714d2055bd72de35e530c280db0ef5baafc4
15 changes: 9 additions & 6 deletions projects.json
Original file line number Diff line number Diff line change
@@ -22,12 +22,7 @@
"name": "Simon Game",
"description": "A game created with jQuery.",
"image": "/simon-game.png",
"tags": [
"HTML5",
"CSS3",
"JavaScript",
"jQuery"
],
"tags": ["HTML5", "CSS3", "JavaScript", "jQuery"],
"netlify": "https://cosmic-biscuit-989d56.netlify.app/",
"github": "https://github.com/Tejpex/jQuery-Simon-Game"
},
@@ -79,6 +74,14 @@
"netlify": "https://sweet-gingersnap-a21875.netlify.app/",
"github": "https://github.com/Tejpex/project-labyrinth-zustand-vite"
},
{
"name": "Scout Info",
"description": "A site made for my local scout group with information about upcoming summer camp.",
"image": "/tallhagen-scout.png",
"tags": ["HTML5", "CSS3", "JavaScript", "React", "React Context"],
"netlify": "https://tallhagen-scoutlager.netlify.app/",
"github": "https://github.com/Tejpex/tallhagen"
},
{
"name": "To Do",
"description": "This is a site where you can make a to-do-list, mark tasks as completed and/or remove them. React Context is used to handle global state.",
Binary file added public/tallhagen-scout.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 21 additions & 4 deletions src/components/ContactInfo.jsx
Original file line number Diff line number Diff line change
@@ -23,26 +23,43 @@ export const ContactInfo = () => {
<h2>[email protected]</h2>
Copy link
Contributor

Choose a reason for hiding this comment

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

This element is too wide in mobile (320px)

</div>
<div className="social-media-box">
<a href="https://www.linkedin.com/in/erika-wernbro/" target="_blank">
<a
href="https://www.linkedin.com/in/erika-wernbro/"
target="_blank"
rel="noopener noreferrer"
>
<img src={linkedIn} alt="LinkedIn-icon" className="icon" />
</a>
<a href="https://github.com/Tejpex" target="_blank">
<a
href="https://github.com/Tejpex"
target="_blank"
rel="noopener noreferrer"
>
<img src={githubSmall} alt="Github-icon" className="icon" />
</a>
<a
href="https://stackoverflow.com/users/23468394/tejpex"
target="_blank"
rel="noopener noreferrer"
>
<img
src={stackOverflow}
alt="StackOverflow-icon"
className="icon"
/>
</a>
<a href="https://bsky.app/profile/tejpex.bsky.social" target="_blank">
<a
href="https://bsky.app/profile/tejpex.bsky.social"
target="_blank"
rel="noopener noreferrer"
>
<img src={blueSky} alt="Bluesky-icon" className="icon" />
</a>
<a href="https://www.instagram.com/tejpex/" target="_blank">
<a
href="https://www.instagram.com/mittlillagronaliv3/"
target="_blank"
rel="noopener noreferrer"
>
<img src={instagram} alt="Instagram-icon" className="icon" />
</a>
</div>
108 changes: 65 additions & 43 deletions src/components/Introduction.css
Original file line number Diff line number Diff line change
@@ -4,12 +4,21 @@
row-gap: 32px;
}

#intro-card {
display: grid;
grid-template-columns: 164px 494px;
grid-template-rows: 97px 164px;
row-gap: 32px;
column-gap: 22px;
}

#greeting-box {
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-self: stretch;
grid-column-start: 1;
grid-column-end: 3;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-self: stretch;
}

#intro-heading {
@@ -19,16 +28,15 @@
}

#top-intro-picture {
display: none;
}
/*Use order to make it move instead of having it double.*/
#intro-picture {
margin-right: 22px;
grid-column-start: 1;
grid-row-start: 2;
margin-right: 22px;
}

.profile-box {
display: flex;
align-items: center;
.profile-text {
grid-row-start: 2;
grid-column-start: 2;
align-self: start;
}

.arrow-box {
@@ -51,41 +59,55 @@
}

@media (max-width:667px) {
#top-intro-picture {
display: flex;
margin: 0 0 32px;
align-self: center;
}

#intro-picture {
display: none;
}
#intro-card {
display: flex;
flex-direction: column;
gap: 0;
}

#top-intro-picture {
display: flex;
align-self: center;
margin-bottom: 32px;
}

#greeting-box {
height: 61px;
margin-bottom: 32px;
}

#greeting {
font-size: 18px;
}
#greeting {
font-size: 18px;
}

#intro-heading {
font-size: 32px;
}
#intro-heading {
font-size: 32px;
}
}

@media (min-width:668px) and (max-width:1024px) {
#intro-section {
padding-top: 128px;
padding-bottom: 20px;
row-gap: 118px;
}
#intro-section {
padding-top: 128px;
padding-bottom: 20px;
row-gap: 118px;
}
}

@media (min-width:1025px) {
#intro-section {
padding-top: 332px;
padding-bottom: 63px;
row-gap: 200px;
}

#intro-heading {
margin-bottom: 16px;
}
}
#intro-section {
padding-top: 332px;
padding-bottom: 63px;
row-gap: 200px;
}

#intro-card {
grid-template-columns: 164px 772px;
grid-template-rows: 137px 164px;
row-gap: 32px;
column-gap: 22px;
}

#intro-heading {
margin-bottom: 16px;
}
}
28 changes: 10 additions & 18 deletions src/components/Introduction.jsx
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ import "./Introduction.css"
export const Introduction = () => {
return (
<div className="section" id="intro-section">
<div className="card">
<div className="card" id="intro-card">
<img
src={profilePicture}
alt="Picture of Erika"
@@ -15,26 +15,18 @@ export const Introduction = () => {
<div id="greeting-box">
<h2 id="greeting">Hi, I&apos;m Erika Wernbro</h2>
<h1 id="intro-heading">Frontend Developer</h1>
</div>
<div className="profile-box">
<img
src={profilePicture}
alt="Picture of Erika"
className="profile-picture"
id="intro-picture"
/>
<p>
I am a frontend developer with a background in teaching. I&apos;m
passionate about combining creativity, and organizational skills, to
make information more available and creating engaging, user-friendly
digital experiences. My creativity and aptitude for learning new
skills makes me confident in my ability to contribute to the success of any organization seeking a dedicated and talented frontend developer!
</p>
</div>
</div>
<p className="profile-text">
I am a frontend developer with a background in teaching. I&apos;m
passionate about combining creativity, and organizational skills, to
make information more available and creating engaging, user-friendly
digital experiences. My creativity and aptitude for learning new
skills makes me confident in my ability to contribute to the success of any organization seeking a dedicated and talented junior developer!
</p>
</div>
<div className="arrow-box card">
<img className="arrow" src={arrow} alt="down arrow" />
</div>
</div>
)
}
}