Jenny A - Portfolio

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README (kopia).md

@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

components/0-nav-section/NavSection.css

@@ -0,0 +1,12 @@
+/* NavSection.css */
+
+.nav-section {
+  max-height: 100px;
+  background-color: #F3863F;
+}
+
+.logo {
+  display: block;
+  max-height: 75px;
+  margin: 0 0 0px 15px;
+}

components/0-nav-section/NavSection.jsx

@@ -0,0 +1,16 @@
+// NavSection.jsx
+
+import './NavSection.css'
+import logo from '/assets/jenny-logo.png'
+
+export const NavSection = () => {
+  return (
+    <div className="nav-section">
+     <img 
+          className="logo" 
+          src={logo}
+          alt="logo" 
+      />
+    </div>
+  );
+};

components/1-top-section/ProfileImage.jsx

@@ -0,0 +1,12 @@
+// ProfileImage.jsx
+import profileImage from '/assets/jenny-profile.jpg'
+
+export const ProfileImage = () => {
+  return (
+      <img 
+        className="profile-image" 
+        src={profileImage}
+        alt="profile" 
+      />
+  );
+};

components/1-top-section/ProfileInfo.jsx

@@ -0,0 +1,13 @@
+// ProfileInfo.jsx
+import { SocialIconSection } from "./SocialIconSection";
+
+export const ProfileInfo = () => {
+  return (
+    <div className="profile-info">
+      <h3>I am Jenny Andersén</h3>
+      <h2>Frontend Developer</h2>
+      <p>Jenny is a Junior Frontend Developer with growing expertise in JavaScript, React, TypeScript, and Node.js. She is currently finishing a Web Developer Bootcamp, where she has strengthened her abilities in building modern, responsive web applications. Having worked 8 years as a Digital Designer and Webmaster, she has transitioned into web development and is ready to bridge the gap between design and development. Her focus is on creating responsive and visually engaging user experiences. Jenny combines technical skills with an eye for detail and has a constant passion for learning more.</p>
+      <SocialIconSection className="social-icons-left" />
+    </div>
+  );
+};

components/1-top-section/SocialIconSection.jsx

@@ -0,0 +1,25 @@
+// SocialIconSection.jsx
+import './TopSection.css'
+import linkedinIcon from '/assets/icons/Btn-linkedin.svg'
+import githubIcon from '/assets/icons/Btn-github.svg'
+import stackoverflowIcon from '/assets/icons/Btn-stackoverflow.svg'
+import instagramIcon from '/assets/icons/Btn-instagram.svg'
+
+export const SocialIconSection = ({ className }) => {
+  return (
+    <div className={`social-icons ${className || ''}`}>
+      <a href="https://www.linkedin.com/in/jennyandersen1/" target="_blank" rel="noopener noreferrer">
+        <img src={linkedinIcon} alt="LinkedIn" className="social-icon" />
+      </a>
+      <a href="https://github.com/jempa182" target="_blank" rel="noopener noreferrer">
+        <img src={githubIcon} alt="GitHub" className="social-icon" />
+      </a>
+      {/* <a href="https://stackoverflow.com" target="_blank" rel="noopener noreferrer">
+        <img src={stackoverflowIcon} alt="Stack Overflow" className="social-icon" />
+      </a> */}
+      <a href="https://www.instagram.com/jennyandpen/" target="_blank" rel="noopener noreferrer">
+        <img src={instagramIcon} alt="Instagram" className="social-icon" />
+      </a>
+    </div>
+  );
+};

components/1-top-section/TopSection.css

@@ -0,0 +1,104 @@
+/* TopSection.css */
+
+/* Mobile-first base styles */
+.top-section {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: left;
+  padding: 64px 24px 24px 24px;
+}
+
+.profile-img-section {
+  display: flex;
+  flex-direction: row;
+  margin: 16px;
+}
+
+/* Circular profile image container */
+.profile-image {
+  width: 90%;
+  flex-shrink: 0;
+  border-radius: 50%;
+  object-fit: cover;
+  display: block;
+  margin: 0 auto;
+}
+
+.profile-info {
+  width: 100%;
+}
+
+/* Social media icons layout */
+.social-icons {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+  margin: 40px 0 0 0;
+}
+
+.social-icon {
+  width: 32px;
+  height: 32px;
+  transition: transform 0.2s ease;
+}
+
+.social-icon:hover {
+  transform: scale(1.1);
+}
+
+.social-icons-left {
+  justify-content: flex-start;
+}
+
+/* Tablet layout (667px - 1023px) */
+@media (min-width: 667px) and (max-width: 1023px) {
+  .profile-image {
+    width: 100%;
+    max-width: 400px;
+    aspect-ratio: 1 / 1;
+  }
+
+  .profile-img-section {
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+  }
+}
+
+/* Desktop layout (1024px and above) */
+@media (min-width: 1024px) {
+  .top-section-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 64px 24px;
+  }
+
+  .top-section {
+    flex: 1;
+    max-width: 50%;
+    padding: 0;
+  }
+
+  .profile-img-section {
+    width: auto;
+    margin: 0;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .profile-image {
+    width: 400px;
+    height: 400px;
+    object-fit: cover;
+    border-radius: 50%;
+  }
+
+  .profile-info {
+    width: 100%;
+  }
+}

components/1-top-section/TopSection.jsx

@@ -0,0 +1,19 @@
+// TopSection.jsx
+
+import './TopSection.css'
+import { ProfileImage } from './ProfileImage.jsx'
+import { ProfileInfo } from './ProfileInfo.jsx'
+
+export const TopSection = () => {
+  return (
+    <div class="top-section-wrapper">
+    <div className ="top-section">
+      <ProfileInfo />
+    </div>
+
+    <div className="profile-img-section">
+      <ProfileImage />
+    </div>
+    </div>
+  );
+};

components/2-skills-section/SkillCategory.jsx

@@ -0,0 +1,13 @@
+// SkillCategory.jsx
+export const SkillCategory = ({ title, skills }) => {
+  return (
+    <div className="skill-category">
+      <h3>{title}</h3>
+      <ul>
+        {skills.map((skill, index) => (
+          <li key={index}>{skill}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}

components/2-skills-section/SkillsSection.css

@@ -0,0 +1,95 @@
+.skills-section {
+  width: 100%;
+  padding: 64px 24px;
+  display: flex;
+  justify-content: center;
+  background-color: white;
+}
+
+.skills-container {
+  width: 100%;
+  max-width: 1200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+}
+
+.category-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.skill-category {
+  width: 100%;
+  text-align: center;
+}
+
+.skill-category h3 {
+  font-family: "Poppins", sans-serif;
+  font-size: 24px;
+  font-weight: 500;
+  margin-bottom: 24px;
+  color: black;
+}
+
+.skill-category ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.skill-category li {
+  font-family: "Poppins", sans-serif;
+  font-size: 18px;
+  line-height: 2;
+  color: black;
+}
+
+.divider {
+  width: 100px;
+  height: 2px;
+  background-color: #ECCEFF;
+  margin: 16px 0;
+}
+
+/* Desktop styles */
+@media (min-width: 1024px) {
+  .skills-container {
+    width: 100%;
+    max-width: 982px;
+    margin: 0 auto;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 0;
+  }
+
+  .skills-section {
+    padding: 128px 24px 128px 24px;
+    display: flex;
+    justify-content: center;
+  }
+
+
+  .category-wrapper {
+    flex: 1;
+    flex-direction: row;
+    gap: 0;
+    align-items: start;
+  }
+
+  .skill-category {
+    padding: 0 24px;
+  }
+
+  .divider {
+    width: 2px;
+    height: 100%;
+    min-height: 300px;
+    margin: 0;
+  }
+}

components/2-skills-section/SkillsSection.jsx

@@ -0,0 +1,22 @@
+// SkillsSection.jsx
+import './SkillsSection.css'
+import data from './skills.json'
+import { SkillCategory } from './SkillCategory'
+
+export const SkillsSection = () => {
+  return (
+    <div className="skills-section">
+      <div className="skills-container">
+        {data.skillCategories.map((category, index) => (
+          <div key={category.title} className="category-wrapper">
+            <SkillCategory 
+              title={category.title} 
+              skills={category.skills} 
+            />
+            {index < data.skillCategories.length - 1 && <div className="divider" />}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}