Rose portfolio

build the html, js and css files for portfolio
Rose1 · Mar 7, 2024 · 9f72340 · 9f72340
1 parent 0f2766b
commit 9f72340
Show file tree

Hide file tree

Showing 25 changed files with 455 additions and 0 deletions.
diff --git a/assets/Rosario Ancco Resume.pdf b/assets/Rosario Ancco Resume.pdf
diff --git a/assets/Rosario_Ancco_CV.pdf b/assets/Rosario_Ancco_CV.pdf
diff --git a/images/Escudo_UNSAAC.png b/images/Escudo_UNSAAC.png
diff --git a/images/JavaScript-logo.png b/images/JavaScript-logo.png
diff --git a/images/Python.png b/images/Python.png
diff --git a/images/attention to detail.png b/images/attention to detail.png
diff --git a/images/attention-to-details.jpg b/images/attention-to-details.jpg
diff --git a/images/branko travels.png b/images/branko travels.png
diff --git a/images/comunication.png b/images/comunication.png
diff --git a/images/github-logo3.png b/images/github-logo3.png
diff --git a/images/gore-cusco-logo.jpg b/images/gore-cusco-logo.jpg
diff --git a/images/insta-logo4.png b/images/insta-logo4.png
diff --git a/images/jumping_game.png b/images/jumping_game.png
diff --git a/images/linkedin-icon1.svg b/images/linkedin-icon1.svg
diff --git a/images/pomodoro_miniatura.png b/images/pomodoro_miniatura.png
diff --git a/images/problem_solving.png b/images/problem_solving.png
diff --git a/images/rock-paper-scissors.png b/images/rock-paper-scissors.png
diff --git a/images/rose.jpg b/images/rose.jpg
diff --git a/images/smart_cities_peru_sac_logo.jpg b/images/smart_cities_peru_sac_logo.jpg
diff --git a/images/teamwork.jpg b/images/teamwork.jpg
diff --git a/images/teamwork.png b/images/teamwork.png
diff --git a/images/zoluxiones_logo.jpg b/images/zoluxiones_logo.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Rosario codes</title>
+</head>
+<body>
+    <header>
+        <div class="navbar">
+            <a href="#about-me">Rose</a>
+        </div>
+        <nav>
+            <a href="#education">Education</a>
+            <a href="#experience">Experience</a>
+            <a href="#projects">Projects</a>
+            <a href="#skills">Skills</a>
+            <a href="#contact-me">Contact me</a>
+        </nav>
+    </header>
+    <main>
+        <section id="about-me">
+            <div class="container">
+                <div>
+                    <figure>
+                        <img class="rose-photo" src="./images/rose.jpg" alt="a photo of Rose smiling">
+                    </figure>
+                    <button id="download-resume">Download resume</button>
+                </div>
+                <div class="description">
+                    <h1>Hi, I am Rosario🤗!!!</h1>
+                    <p>Front end developer</p>
+                    <p>
+                        I am a young professional passionate about technology and with a background in Software engineering and UX design.
+                        I consider myself perseverant, energetic and self taught person who likes teamwork, challenges and provide solutions.
+                        <br>
+                        I aspire to impact positively in organizations helping business to achieve their goals. <br>
+                        As a female in technology I aspire to help and guide more females in the amazing world of technology 💚. 
+                    </p>
+                    <p>Some facts about me:</p>
+                    <ul>
+                        <li>I like dogs and cats</li>
+                        <li>I love singing and dancing</li>
+                        <li>Love spend my free time in nature</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+        <section id="education">
+            <h1>Education</h1>
+            <div class="container">
+                <div>
+                    <figure>
+                        <img class="unsaac-photo" src="./images/Escudo_UNSAAC.png" alt="Escudo de la UNSAAC">
+                    </figure>
+                </div>
+                <div class="description">
+                    <h2>Bachelor degree in Software Engineering and Conputer Science</h2>
+                    <ul>
+                        <li>📍Cusco - Peru</li>
+                        <li>2014-2020</li>
+                        <li>Faculty of computer and systems engineering</li>
+                        <li>Algorithms, artificial intelligence, data bases, competitive programming</li>
+                        <li>Contestant in The 2014 ACM-ICPC South America/South Finals</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+        <section id="experience">
+            <h1>Experience</h1>
+            <div class="container">
+                <div class="card">
+                    <figure>
+                        <img class="logo" src="./images/gore-cusco-logo.jpg" alt="Gore cusco logo">
+                    </figure>
+                    <h4>Technical assistant</h4>
+                    <ul>
+                        <li>Mar 2023 - Jul 2023</li>
+                        <li>Cusco - Peru</li>
+                    </ul>
+                </div>
+                <div class="card">
+                    <figure>
+                        <img class="logo" src="./images/zoluxiones_logo.jpg" alt="zoluxiones logo">
+                    </figure>
+                    <h4>Software engineer</h4>
+                    <ul>
+                        <li>Mar 2021 - Dec 2022</li>
+                        <li>Lima - Peru</li>
+                    </ul>
+                </div>
+                <div class="card">
+                    <figure>
+                        <img class="logo" src="./images/smart_cities_peru_sac_logo.jpg" alt="smart cities peru logo">
+                    </figure>
+                    <h4>Front end developer intern</h4>
+                    <ul>
+                        <li>Oct 2019 - Jul 2020</li>
+                        <li>Cusco - Peru</li>
+                    </ul>
+
+                </div>
+            </div>
+        </section>
+        <section id="projects">
+            <h1>Projects</h1>
+            <div class="container">
+                <div class="card">
+                    <figure>
+                        <img class="project-image" src="./images/pomodoro_miniatura.png" alt="small image of a pomodoro timer">
+                    </figure>
+                    <h4>Pomodoro timer</h4>
+                    <ul>
+                        <li>Solo project</li>
+                        <li>Tools: Javascript, HTML/CSS</li>
+                        <li>Preview: <a href="https://rose1.github.io/PomodoroTimer/" target="_blank">Click here</a></li>
+                    </ul>
+                </div>
+                <div class="card">
+                    <figure>
+                        <img class="project-image" src="./images/rock-paper-scissors.png" alt="rock, paper and scissors image">
+                    </figure>
+                    <h4>Rock, paper & scissors</h4>
+                    <ul>
+                        <li>Solo project</li>
+                        <li>Tools: Javascript, HTML/CSS</li>
+                        <li>Preview: <a href="https://rose1.github.io/Rock-paper-and-scissors/" target="_blank">Click here</a></li>
+                    </ul>
+                </div>
+                <div class="card">
+                    <figure>
+                        <img class="project-image" src="./images/jumping_game.png" alt="a dog inside a game">
+                    </figure>
+                    <h4>Jumping game</h4>
+                    <ul>
+                        <li>Collaborative project</li>
+                        <li>Tools: Javascript, HTML/CSS</li>
+                        <li>Preview: <a href="https://alessandromancuso.github.io/group-project-4/" target="_blank">Jumping Game</a></li>
+                    </ul>
+                </div>
+                <div class="card">
+                    <figure>
+                        <img class="project-image" src="./images/branko travels.png" alt="branko travel web page">
+                    </figure>
+                    <h4>Travel webpage</h4>
+                    <ul>
+                        <li>Collaborative project</li>
+                        <li>Tools: HTML/CSS</li>
+                        <li>Preview: <a href="https://sizo04.github.io/group-project-1/" target="_blank">Travel webpage</a></li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+        <section id="skills">
+            <h1>Skills</h1>
+            <div class="horizontal-container">
+                <div class="card">
+                    <h3>Soft skills</h3>
+                    <div class="icon-card">
+                        <figure>
+                            <img class="icon-image" src="./images/comunication.png" alt="comunication icon">
+                            <figcaption>Comunication</figcaption>
+                        </figure>
+                        <figure>
+                            <img class="icon-image" src="./images/teamwork.png" alt=" teamwork icon">
+                            <figcaption>Teamwork</figcaption>
+                        </figure>
+                        <figure>
+                            <img class="icon-image" src="./images/problem_solving.png" alt="Problem solving icon">
+                            <figcaption>Problem solving</figcaption>
+                        </figure>
+                        <figure>
+                            <img class="icon-image" src="./images/attention-to-details.jpg" alt="atention to detail icon">
+                            <figcaption>Attention to detail</figcaption>
+                        </figure>
+                    </div>
+                </div>
+                <div class="card">
+                    <h3>Technical skills</h3>
+                    <div class="skills">
+                        <div>
+                            <h3>Programming:</h3>
+                            <ul>
+                                <li>Python</li>
+                                <li>Java</li>
+                                <li>Javascript</li>
+                                <li>C++</li>
+                                <li>C#</li>
+                                <li>Typescript</li>
+                                <li>Angular</li>
+                                <li>HTML/CSS</li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h3>Design:</h3>
+                            <ul>
+                                <li>Figma</li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h4>Agile</h4>
+                            <ul>
+                                <li>Scrum methodology</li>
+                                <li>Kanban Methodology</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section id="contact-me">
+            <h1>Contact me</h1>
+            <div class="container">
+                <a href="https://www.linkedin.com/in/rosario-ancco-peralta/" target="_blank">
+                    <figure>
+                        <img class="icon" src="./images/linkedin-icon1.svg" alt="linkedin logo">
+                    </figure>
+                </a>
+                <a href="https://www.instagram.com/rap_roses_life/" target="_blank">
+                    <figure>
+                        <img class="icon" src="./images/insta-logo4.png" alt="instagram logo">
+                    </figure>
+                </a>
+                <a href="https://github.com/Rose1" target="_blank">
+                    <figure>
+                        <img class="icon" src="./images/github-logo3.png" alt="github logo">
+                    </figure>
+                </a>
+            </div>
+        </section>
+    </main>
+    <footer>
+        <p>Designed and built by Rose</p>
+        <p>© 2024 All rights reserved</p>
+    </footer>
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,38 @@
+const downloadResumeButton = document.getElementById('download-resume');
+const name = document.getElementById('name');
+const email = document.getElementById('email');
+const message = document.getElementById('message');
+const sendMessage = document.getElementById('sendMessage');
+
+
+const downloadResume = () => {
+    console.log('Presionaste el boton descargar')
+    var file_spanish = './assets/Rosario_Ancco_CV.pdf';
+    var file_english = './assets/Rosario Ancco Resume.pdf';
+    // Create a temporary anchor element
+    const downloadLink = document.createElement('a');
+    const downloadLink2 = document.createElement('a');
+    downloadLink.href = file_spanish;
+    downloadLink2.href = file_english;
+    downloadLink.download = 'RosarioAnccoCV.pdf'; // Specify the filename for download
+    downloadLink.target = '_blank';
+    downloadLink2.download = "Rosario_Ancco_Resume.pdf";
+    downloadLink2.target = '_blank';
+
+    // Append the anchor element to the body
+    document.body.appendChild(downloadLink);
+    // Trigger the click event of the anchor link
+    downloadLink.click();
+    // Remove the anchor element from the body
+    document.body.removeChild(downloadLink);
+
+    document.body.appendChild(downloadLink2);
+    downloadLink2.click();
+    document.body.removeChild(downloadLink2);
+
+
+};
+
+
+
+downloadResumeButton.addEventListener('click', downloadResume);