Skip to content

Commit

Permalink
add media queries and clean up comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@FredricLaestander
FredricLaestander committed Nov 3, 2024
1 parent a9b4e68 commit f621ba9
Show file tree
Hide file tree
Showing 13 changed files with 411 additions and 523 deletions.
316 changes: 152 additions & 164 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,173 +26,161 @@ <h1>
<img src="assets/icons/mouse.svg" alt="mouse icon" />
</section>

<section class="profile" id="profile">
<img src="assets/images/profile.jpg" alt="info" />

<div class="title">
<h2>Fredric Laestander</h2>
<p>Full stack Web Developer</p>
</div>

<div class="location">
<img src="assets/icons/pin.svg" alt="pin icon" />
<p>Stockholm, Sweden</p>
<span>SE</span>
</div>

<p class="quote">Building real products for real clients, not just more projects</p>

<nav>
<a href="assets/CV.pdf" download class="resume">
<img src="assets/icons/download.svg" alt="download icon" />
<p>Resume</p>
</a>
<a href="https://github.com/FredricLaestander" class="github">
<img src="assets/icons/github.svg" alt="github icon" />
<p>Github</p>
</a>

<a href="https://www.linkedin.com/in/fredric-laestander-36000b336/" class="linkedin">
<img src="assets/icons/linkedin.svg" alt="linkedin icon" />
<p>LinkedIn</p>
</a>
<a href="mailto:[email protected]" class="contact">
<img src="assets/icons/mail.svg" alt="mail icon" />
<p>Contact me</p>
</a>
</nav>
</section>

<section class="skills" id="skills">
<h2>Skills</h2>
<div class="languages">
<h3>Languages</h3>
<div class="tags">
<p>Python</p>
<p>HTML</p>
<p>CSS</p>
<p>Javascript</p>
<p>Typescript</p>
</div>
</div>

<div class="frameworks">
<h3>Frameworks</h3>
<div class="tags">
<p>ReactJS</p>
<p>Laravel</p>
<p>Express</p>
<p>Angular</p>
<p>WebSocket</p>
</div>
</div>

<div class="backend">
<h3>Backend</h3>
<div class="tags">
<p>PHP</p>
</div>
</div>

<div class="databases">
<h3>Databases</h3>
<div class="tags">
<p>Docker</p>
<p>PDO</p>
<p>MongoDB</p>
</div>
</div>

<div class="practices">
<h3>Practices</h3>
<div class="tags">
<p>MVC</p>
<p>DOM</p>
<p>Figma</p>
<p>VS Code</p>
<p>Git</p>
<p>Github</p>
</div>
</div>
</section>

<section class="education" id="education">
<h2>Education</h2>
<div class="info">
<img src="assets/icons/chasacademy.svg" alt="chas academy logo">
<div class="content">
<h3>Full Stack Open Source</h3>
<p>Chas Academy, Stockholm</p>
<p class="date">August 2024 - Present</p>
<!-- margin bottom 8px -->
<details>
<summary>
<img src="assets/icons/chevron-down.svg" alt="chevron icon">
<p>View details</p>
</summary>
<ul>
<li>Appointed as Project Leader for a six-week UX and Design initiative</li>
<li>Created a portfolio using exclusively HTML and CSS</li>
</ul>
</details>
<div class="container">
<section class="profile" id="profile">
<img src="assets/images/profile.jpg" alt="info" />
<div class="title">
<h2>Fredric Laestander</h2>
<p>Full stack Web Developer</p>
</div>
</div>

<div class="info">
<img src="assets/icons/stockholmstad.svg" alt="stockholmstad logo">
<div class="content">
<h3>Social Science</h3>
<p>Bernadottegymnasiet, Stockholm</p>
<p class="date">August 2017 - June 2020</p>
<!-- margin bottom 8px -->
<details>
<summary>
<img src="assets/icons/chevron-down.svg" alt="chevron icon">
<p>View details</p>
</summary>
<ul>
<li>Focuses on human behavior and social relationships</li>
<li>Includes a leadership course to develop skills in guiding and influencing groups</li>
<li>Emphasizes understanding and analyzing individual behaviors</li>
<li>Encourages critical thinking about social dynamics and structures</li>
</ul>
</details>
<div class="location">
<img src="assets/icons/pin.svg" alt="pin icon" />
<p>Stockholm, Sweden</p>
<span>SE</span>
</div>
<p class="quote">Building real products for real clients, not just more projects</p>
<nav>
<a href="assets/CV.pdf" download class="resume">
<img src="assets/icons/download.svg" alt="download icon" />
<p>Resume</p>
</a>
<a href="https://github.com/FredricLaestander" class="github">
<img src="assets/icons/github.svg" alt="github icon" />
<p>Github</p>
</a>
<a href="https://www.linkedin.com/in/fredric-laestander-36000b336/" class="linkedin">
<img src="assets/icons/linkedin.svg" alt="linkedin icon" />
<p>LinkedIn</p>
</a>
<a href="mailto:[email protected]" class="contact">
<img src="assets/icons/mail.svg" alt="mail icon" />
<p>Contact me</p>
</a>
</nav>
</section>

<div class="column">
<section class="skills" id="skills">
<h2>Skills</h2>
<div class="languages">
<h3>Languages</h3>
<div class="tags">
<p>Python</p>
<p>HTML</p>
<p>CSS</p>
<p>Javascript</p>
<p>Typescript</p>
</div>
</div>
<div class="frameworks">
<h3>Frameworks</h3>
<div class="tags">
<p>ReactJS</p>
<p>Laravel</p>
<p>Express</p>
<p>Angular</p>
<p>WebSocket</p>
</div>
</div>
<div class="backend">
<h3>Backend</h3>
<div class="tags">
<p>PHP</p>
</div>
</div>
<div class="databases">
<h3>Databases</h3>
<div class="tags">
<p>Docker</p>
<p>PDO</p>
<p>MongoDB</p>
</div>
</div>
<div class="practices">
<h3>Practices</h3>
<div class="tags">
<p>MVC</p>
<p>DOM</p>
<p>Figma</p>
<p>VS Code</p>
<p>Git</p>
<p>Github</p>
</div>
</div>
</section>
<section class="education" id="education">
<h2>Education</h2>
<div class="info">
<img src="assets/icons/chasacademy.svg" alt="chas academy logo">
<div class="content">
<h3>Full Stack Open Source</h3>
<p>Chas Academy, Stockholm</p>
<p class="date">August 2024 - Present</p>
<details>
<summary>
<img src="assets/icons/chevron-down.svg" alt="chevron icon">
<p>View details</p>
</summary>
<ul>
<li>Appointed as Project Leader for a six-week UX and Design initiative</li>
<li>Created a portfolio using exclusively HTML and CSS</li>
</ul>
</details>
</div>
</div>
<div class="info">
<img src="assets/icons/stockholmstad.svg" alt="stockholmstad logo">
<div class="content">
<h3>Social Science</h3>
<p>Bernadottegymnasiet, Stockholm</p>
<p class="date">August 2017 - June 2020</p>
<details>
<summary>
<img src="assets/icons/chevron-down.svg" alt="chevron icon">
<p>View details</p>
</summary>
<ul>
<li>Focuses on human behavior and social relationships</li>
<li>Includes a leadership course to develop skills in guiding and influencing groups</li>
<li>Emphasizes understanding and analyzing individual behaviors</li>
<li>Encourages critical thinking about social dynamics and structures</li>
</ul>
</details>
</div>
</div>
</section>
<section class="projects" id="projects">
<h2>Projects</h2>
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Technologies Used</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">U01</th>
<td>Led a 5-person UX and Design project using structured project methodology.</td>
<td>Figma, VS Code, Git, Github</td>
</tr>
<tr>
<th scope="row">Weight</th>
<td>Created a KG and LBS converter with exclusively Python</td>
<td>VS Code</td>
</tr>
</tbody>
</table>
</section>
<section class="video" id="video">
<h2>Video</h2>
<video controls fullscreen>
<source src="assets/videos/IMG_2390.TRIM.mp4" alt="Fredric dancing to the celebrationcermony in Star wars the complete saga">
</video>
</section>
</div>
</section>

<section class="projects" id="projects">
<h2>Projects</h2>
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Technologies Used</th>
</tr>
</thead>

<tbody>
<tr>
<th scope="row">U01</th>
<td>Led a 5-person UX and Design project using structured project methodology.</td>
<td>Figma, VS Code, Git, Github</td>
</tr>
<tr>
<th scope="row">Weight</th>
<td>Created a KG and LBS converter with exclusively Python</td>
<td>VS Code</td>
</tr>
</tbody>
</table>
</section>

<section class="video" id="video">
<h2>Video</h2>
<video controls fullscreen>
<source src="assets/videos/IMG_2390.TRIM.mp4" alt="Fredric dancing to the celebrationcermony in Star wars the complete saga">
</video>
</section>
</div>
</main>

<footer>
Expand Down
17 changes: 17 additions & 0 deletions styles/_breakpoint.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
@mixin xl {
@media (min-width: 1500px) {
@content;
}
}

@mixin lg {
@media (min-width: 1100px) {
@content;
}
}

@mixin sm {
@media (min-width: 700px) {
@content;
}
}
Loading

0 comments on commit f621ba9

Please sign in to comment.