├── CNAME
├── .gitattributes
├── favicon.ico
├── assets
    └── img
    │   ├── favicon-16x16.png
    │   ├── favicon-32x32.png
    │   ├── apple-touch-icon.png
    │   ├── android-chrome-192x192.png
    │   └── android-chrome-512x512.png
├── site.webmanifest
├── favicon.svg
├── style.css
└── index.html


/CNAME:
--------------------------------------------------------------------------------
1 | pirac.es


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/piraces/minimalist-portfolio/main/favicon.ico


--------------------------------------------------------------------------------
/assets/img/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/piraces/minimalist-portfolio/main/assets/img/favicon-16x16.png


--------------------------------------------------------------------------------
/assets/img/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/piraces/minimalist-portfolio/main/assets/img/favicon-32x32.png


--------------------------------------------------------------------------------
/assets/img/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/piraces/minimalist-portfolio/main/assets/img/apple-touch-icon.png


--------------------------------------------------------------------------------
/assets/img/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/piraces/minimalist-portfolio/main/assets/img/android-chrome-192x192.png


--------------------------------------------------------------------------------
/assets/img/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/piraces/minimalist-portfolio/main/assets/img/android-chrome-512x512.png


--------------------------------------------------------------------------------
/site.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "Raúl Piracés portfolio",
 3 |     "short_name": "Raúl Piracés",
 4 |     "icons": [
 5 |         {
 6 |             "src": "/assets/img/android-chrome-192x192.png",
 7 |             "sizes": "192x192",
 8 |             "type": "image/png",
 9 |             "purpose": "any maskable"
10 |         },
11 |         {
12 |             "src": "/assets/img/android-chrome-512x512.png",
13 |             "sizes": "512x512",
14 |             "type": "image/png",
15 |             "purpose": "any maskable"
16 |         }
17 |     ],
18 |     "theme_color": "#000000",
19 |     "background_color": "#000000",
20 |     "display": "standalone"
21 | }


--------------------------------------------------------------------------------
/favicon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 3 |  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 5 |  width="192.000000pt" height="192.000000pt" viewBox="0 0 192.000000 192.000000"
 6 |  preserveAspectRatio="xMidYMid meet">
 7 | <metadata>
 8 | Created by potrace 1.16, written by Peter Selinger 2001-2019
 9 | </metadata>
10 | <g transform="translate(0.000000,192.000000) scale(0.100000,-0.100000)"
11 | fill="#000000" stroke="none">
12 | <path d="M90 1903 c-30 -21 -52 -43 -73 -73 -16 -23 -17 -92 -17 -870 0 -916
13 | -3 -857 50 -910 53 -53 -6 -50 910 -50 916 0 857 -3 910 50 53 53 50 -6 50
14 | 910 0 916 3 857 -50 910 -53 53 6 50 -910 50 -778 0 -847 -1 -870 -17z m978
15 | -348 c81 -19 148 -54 195 -102 46 -45 65 -80 83 -148 46 -169 -25 -347 -166
16 | -420 -17 -9 -30 -17 -30 -20 0 -2 59 -109 130 -238 72 -128 130 -243 130 -255
17 | 0 -21 -4 -22 -104 -22 l-104 0 -70 133 c-39 72 -95 177 -125 232 l-55 100
18 | -116 3 -116 3 0 -236 0 -235 -105 0 -105 0 0 610 0 610 248 0 c182 0 263 -4
19 | 310 -15z"/>
20 | <path d="M720 1194 l0 -196 148 4 c135 3 151 5 192 28 60 34 90 87 90 162 0
21 | 94 -29 144 -105 179 -33 15 -65 19 -182 19 l-143 0 0 -196z"/>
22 | </g>
23 | </svg>
24 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | /* global */
  2 | .grid-2{
  3 |     display: grid;
  4 |     grid-template-columns: repeat(2,1fr);
  5 | }
  6 | 
  7 | body{
  8 |     margin: 0;
  9 |     padding: 0;
 10 |     font-family: 'Roboto', sans-serif;
 11 |     background-color: #101214;
 12 |     color: #ffffff;
 13 | 
 14 | }
 15 | 
 16 | h2,.white{
 17 |     color: #ffffff;
 18 | }
 19 | 
 20 | a{
 21 |     color: #ffffff;
 22 |     text-decoration: none;
 23 | }
 24 | 
 25 | .no-text {
 26 | 	line-height: 0;
 27 |     font-size: 0;
 28 |     color: transparent;
 29 | }
 30 | 
 31 | /* section 1 */
 32 | .section-1{
 33 |     padding-top: 40vh;
 34 |     text-align: center;
 35 | }
 36 | 
 37 | .section-1 p{
 38 |     font-size: 1.1rem;
 39 |     padding-bottom: 20px;
 40 |     margin:0;
 41 | }
 42 | 
 43 | .section-1 h2{
 44 |     font-size: 1.7rem;
 45 |     margin-bottom: 20px;
 46 | }
 47 | 
 48 | .section-1 a{
 49 |     font-size: 1.5rem;
 50 |     padding: 20px;
 51 | }
 52 | /* section 2 */
 53 | .section-2{
 54 |     padding-top: 10vh;
 55 |     width: 70%;
 56 | }
 57 | 
 58 | .section-2 h2{
 59 |     font-size: 1.7rem;
 60 |     margin-bottom: 20px;
 61 | }
 62 | 
 63 | .section-2 p{
 64 |     font-size: 1.1rem;
 65 |     padding-bottom: 20px;
 66 |     margin:0;
 67 | }
 68 | 
 69 | .section-2 a{
 70 |     display: block;
 71 |     padding: 5px;
 72 |     font-size: 1.2rem;
 73 |     padding-left: 0;
 74 |     width: 100px;
 75 | }
 76 | 
 77 | /* media queres */
 78 | @media(max-width:1560px){
 79 |     .grid-2{
 80 |         grid-template-columns: 1fr;
 81 |     }
 82 |     .section-1{
 83 |         padding:0;
 84 |         padding-top: 5rem;
 85 |     }
 86 |     .section-2{
 87 |         padding: 0;
 88 |         padding-left: 1.5rem;
 89 |         padding-top: 2rem;
 90 |         margin: 0 auto;
 91 |     }
 92 | }
 93 | 
 94 | /* Modified from: https://codepen.io/alanhouser/pen/aErrQJ */
 95 | #timeline-content {
 96 | 	margin-top: 50px;
 97 | 	text-align: center;
 98 | }
 99 | 
100 | /* Timeline */
101 | .timeline {
102 | 	border-left: 4px solid #ffffff;
103 | 	border-bottom-right-radius: 4px;
104 | 	border-top-right-radius: 4px;
105 | 	background: rgba(255, 255, 255, 0.03);
106 | 	color: rgba(255, 255, 255, 0.8);
107 | 	font-family: 'Roboto', sans-serif;
108 | 	letter-spacing: 0.5px;
109 | 	position: relative;
110 | 	line-height: 1.4em;
111 | 	font-size: 1.03em;
112 | 	padding: 50px;
113 | 	list-style: none;
114 | 	text-align: left;
115 | 	font-weight: 100;
116 | }
117 | 
118 | .timeline h1 {
119 | 	font-family: 'Roboto', sans-serif;
120 | 	letter-spacing: 1.5px;
121 | 	font-weight: 100;
122 | 	font-size: 1.4em;
123 | }
124 | 
125 | .timeline h2,
126 | .timeline h3 {
127 | 	font-family: 'Roboto', sans-serif;
128 | 	letter-spacing: 1.5px;
129 | 	font-weight: 400;
130 | 	font-size: 1.4em;
131 | }
132 | 
133 | .timeline .event {
134 | 	border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
135 | 	padding-bottom: 25px;
136 | 	margin-bottom: 50px;
137 | 	position: relative;
138 | }
139 | 
140 | .timeline .event:last-of-type {
141 | 	padding-bottom: 0;
142 | 	margin-bottom: 0;
143 | 	border: none;
144 | }
145 | 
146 | .timeline .event:before,
147 | .timeline .event:after {
148 | 	position: absolute;
149 | 	display: block;
150 | 	top: 0;
151 | }
152 | 
153 | .timeline .event:before {
154 | 	left: -14.5rem;
155 | 	color: #ffffff;
156 | 	content: attr(data-date);
157 | 	text-align: right;
158 | 	font-weight: 100;
159 | 	font-size: 0.9em;
160 | 	min-width: 120px;
161 | 	font-family: 'Roboto', sans-serif;
162 | }
163 | 
164 | .timeline .event:after {
165 | 	box-shadow: 0 0 0 4px #ffffff;
166 | 	left: -57.85px;
167 | 	background: #313534;
168 | 	border-radius: 50%;
169 | 	height: 11px;
170 | 	width: 11px;
171 | 	content: "";
172 | 	top: 5px;
173 | }
174 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
  9 |     <link rel="preload"
 10 |         href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
 11 |         integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
 12 |         crossorigin="anonymous" referrerpolicy="no-referrer"
 13 |         as="style"
 14 |         onload="this.onload=null;this.rel='stylesheet'"/>
 15 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 16 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 17 |     <link rel="preload" 
 18 |         href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
 19 |         as="style"
 20 |         onload="this.onload=null;this.rel='stylesheet'">
 21 |     <noscript>
 22 |         <link rel="stylesheet" 
 23 |             href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap">
 24 |         <link rel="stylesheet"
 25 |             href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
 26 |             integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
 27 |             crossorigin="anonymous" referrerpolicy="no-referrer"/>
 28 |     </noscript>
 29 | 
 30 |     <link rel="stylesheet" href="style.css">
 31 | 
 32 |     <title>Raúl Piracés - Portfolio</title>
 33 | 
 34 |     <meta name="description" content="Raúl Piracés personal portfolio">
 35 |     <meta property="og:title" content="Raúl Piracés - Portfolio">
 36 |     <meta property="og:description" content="Raúl Piracés personal portfolio">
 37 |     <meta property="og:image" content="https://pirac.es/assets/img/android-chrome-512x512.png">
 38 |     <meta property="og:image:alt" content="Main logo for portfolio">
 39 |     <meta property="og:locale" content="en_US">
 40 |     <meta property="og:type" content="website">
 41 |     <meta name="twitter:card" content="summary_large_image">
 42 |     <meta property="og:url" content="https://pirac.es">
 43 |     <link rel="canonical" href="https://pirac.es">
 44 | 
 45 |     <link rel="icon" href="/favicon.ico">
 46 |     <link rel="icon" href="/favicon.svg" type="image/svg+xml">
 47 |     <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
 48 |     <link rel="manifest" href="/site.webmanifest">
 49 |     <meta name="theme-color" content="#000000">
 50 |     <script async defer data-website-id="bb1d2abe-e200-4149-860c-37649d86c53e" src="https://stats.piraces.co/umami.js"></script>
 51 | </head>
 52 | 
 53 | <body>
 54 |     <div class="grid-2">
 55 |         <div class="section-1">
 56 |             <i class="fas fa-code fa-5x white"></i>
 57 |             <h2>Raúl Piracés</h2>
 58 |             <p>Zaragoza, Spain.</p>
 59 |             <a href="https://piraces.dev"><span class="no-text">My blog</span><i class="fa-solid fa-blog"></i></a>
 60 |             <a href="https://twitter.com/piraces_"><span class="no-text">Twitter account</span><i class="fab fa-twitter"></i></a>
 61 |             <a href="https://www.linkedin.com/in/ra%C3%BAl-pirac%C3%A9s-alastuey-137569a5/"><span class="no-text">LinkedIn profile</span><i
 62 |                     class="fab fa-linkedin"></i></a>
 63 |             <a href="https://github.com/piraces"><span class="no-text">GitHub profile</span><i class="fab fa-github"></i></a>
 64 |         </div>
 65 |         <div class="section-2">
 66 |             <h2>About</h2>
 67 |             <p>Hello! I'm a Software Engineer from Zaragoza (Spain) that loves Web Development, Data Mining and Business
 68 |                 Intelligence.</p>
 69 | 
 70 |             <p>I got my Bachelor’s Degree in Computer Science and Engineering in 2016 at University of Zaragoza.
 71 |                 Nowadays, I'm actually working as full stack developer using .NET environment (Core and Framework) and
 72 |                 Angular/Vue.js on top.</p>
 73 | 
 74 |             <p>I'm constantly learning new languages and creating my own personal projects. Besides, I really enjoy
 75 |                 attending tech events, sports and walking in the countryside. Take a look at my resume, my list of
 76 |                 projects, my blog to know more about me.</p>
 77 |             <h2>Experience</h2>
 78 |             <!-- Modified from: https://codepen.io/alanhouser/pen/aErrQJ -->
 79 |             <div id="timeline-content">
 80 |                 <ul class="timeline">
 81 |                     <li class="event" data-date="Oct. 2019 - Now">
 82 |                         <h3>Plain Concepts (Spain)</h3>
 83 |                         <p>Software Development Engineer</p>
 84 |                     </li>
 85 |                     <li class="event" data-date="Aug. 2018 - Oct. 2019">
 86 |                         <h3>Vueling Airlines S.A. (Spain)</h3>
 87 |                         <p>.Net Analyst Developer</p>
 88 |                     </li>
 89 |                     <li class="event" id="date" data-date="July 2018 - Oct. 2019">
 90 |                         <h3>Hiberus Tecnología, Zaragoza (Spain)</h3>
 91 |                         <p>.Net Analyst Developer</p>
 92 |                     </li>
 93 |                     <li class="event" data-date="Dec. 2016 - July 2018">
 94 |                         <h3>Software Engineer</h3>
 95 |                         <p>Endalia HR Consulting &amp; Software, Zaragoza (Spain).</p>
 96 |                     </li>
 97 |                 </ul>
 98 |             </div>
 99 |             <h2>Contact</h2>
100 |             <p>raul [at] piraces.dev</p>
101 |         </div>
102 |     </div>
103 | </body>
104 | 
105 | </html>


--------------------------------------------------------------------------------