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/1-top-section/ProfileImage.jsx

@@ -0,0 +1,12 @@
+// ProfileImage.jsx
+import profileImage from '../../src/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>Sara is an exceptional developer known for her innovative solutions and exceptional coding abilities. She creates user-friendly applications and solves complex issues with ease. Her drive for excellence makes her a valuable asset to any project and a standout in the technology field.</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 '../../src/assets/icons/Btn-linkedin.svg'
+import githubIcon from '../../src/assets/icons/Btn-github.svg'
+import stackoverflowIcon from '../../src/assets/icons/Btn-stackoverflow.svg'
+import instagramIcon from '../../src/assets/icons/Btn-instagram.svg'
+
+export const SocialIconSection = ({ className }) => {
+  return (
+    <div className={`social-icons ${className || ''}`}>
+      <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">
+        <img src={linkedinIcon} alt="LinkedIn" className="social-icon" />
+      </a>
+      <a href="https://github.com" 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://instagram.com" 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,94 @@
+.skills-section {
+  width: 100%;
+  padding: 64px 24px;
+  display: flex;
+  justify-content: center;
+}
+
+.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;
+}
+
+.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: #333;
+}
+
+.divider {
+  width: 100px;
+  height: 2px;
+  background-color: #FF6B00;
+  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: 64px 24px 128px 24px;
+    display: flex;
+    justify-content: center;
+    margin:
+  }
+
+
+  .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>
+  )
+}

components/2-skills-section/skills.json

@@ -0,0 +1,44 @@
+{
+  "skillCategories": [
+    {
+      "title": "Code",
+      "skills": [
+        "HTML5",
+        "CSS3",
+        "Javascript ES6",
+        "React",
+        "Styled Components",
+        "GitHub"
+      ]
+    },
+    {
+      "title": "Toolbox",
+      "skills": [
+        "Atom",
+        "Postman",
+        "Adobe Photoshop",
+        "Adobe Illustrator",
+        "Figma",
+        "Keynote",
+        "Slack"
+      ]
+    },
+    {
+      "title": "Upcoming",
+      "skills": [
+        "Node.js"
+      ]
+    },
+    {
+      "title": "More",
+      "skills": [
+        "Branding",
+        "Strategy",
+        "Process Design",
+        "Concept",
+        "Development",
+        "Agile methodology"
+      ]
+    }
+  ]
+}