HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel='stylesheet' type='text/css'href='https://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' />
<link rel="stylesheet" type="text/css" href="./styles.css" />
<link rel="icon" href="https://github.com/DomenicCerri/DomenicCerri.github.io/blob/main/assets/icon/favicon.ico?raw=true" type="image/x-icon"/>
<script src="https://kit.fontawesome.com/ea4d1b3e0f.js" crossorigin="anonymous"></script>
<title>Domenic Cerri | Data Scientist</title>
<meta name="description" content="Highly motivated post-doctorate-level data scientist with extensive experience in life sciences and quantitative research" />
</head>
<body>
<!-- START NAV -->
<header>
<nav id="navbar" class="nav">
<div class="logo">
<a href="#welcome-section"><span><b>Domenic</b> CERRI</span></a>
</div>
<div class="nav-menu" id="nav-menu">
<ul class="nav-list" id="nav-list">
<li>
<a href="#welcome-section">Home</a>
</li>
<li>
<a href="#about">About me</a>
</li>
<li>
<a href="#skills">Skills</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<div class="hamburger" id="hamburger">
<i class="fa-solid fa-bars"></i></label>
</div>
</nav>
</header>
<!-- START NAV JS -->
<script type="text/javascript">
const showMenu = (toggleId, navId) =>{
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
if(toggle && nav){
toggle.addEventListener('click', ()=>{
nav.classList.toggle('show')
})
}
}
showMenu('hamburger','nav-menu')
</script>
<script type="text/javascript">
const nav = document.getElementById('nav-menu'),
navLink = nav.querySelectorAll('li')
function linkAction(){
nav.classList.toggle('show')
}
navLink.forEach(n => n.addEventListener('click', linkAction))
</script>
<!-- END NAV JS -->
<!-- END NAV -->
<main>
<!-- START HOME -->
<section id="welcome-section">
<div class="grid">
<div class="desc">
<h1>Hi<br>I'm <span>Dom</span><br>
Data Scientist</h1>
<div class="home-buttons">
<a href="https://github.com/DomenicCerri/DomenicCerri.github.io/blob/main/assets/data/Domenic-Cerri_Resume_07-07-2022-web?raw=true" class="button">Résumé</a>
<a href="https://scholar.google.com/citations?hl=en&user=r_I8HzgAAAAJ" class="button pubs" target="_blank">Publications</a>
<a href="#contact" class="button ct">Contact</a>
</div>
</div>
<div class="me-img">
<svg class="img-shape" viewbox="0 0 479 467" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Picture of Dom with gold quadrilateral background</title>
<mask id="mask0" mask-type="alpha">
<path d="M 109 127 L 10 464 L 327 449 L 453 5"/>
</mask>"
<g mask="url(#mask0)">
<path d="M 109 127 L 10 464 L 327 449 L 453 5"/>
<image width="217" height="215" href="https://github.com/DomenicCerri/DomenicCerri.github.io/blob/main/assets/img/me-noback.png?raw=true"/>
</g>
</svg>
</div>
<div class="social">
<a href="https://www.linkedin.com/in/domenic-cerri" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="https://github.com/DomenicCerri" target="_blank"><i class="fa-brands fa-github"></i></a>
</div>
</div>
</section>
<!-- END HOME -->
<!-- START ABOUT -->
<section id="about">
<div class="grid">
<h2>About me</h2>
<div class="about-desc">
<p>Highly motivated, self-driven data scientist with over six years of post-doctoral, quantitative research experience in neuroscience. My general curiosity, analytical mind, and love of learning have propelled me through my scientific career and fostered a passion for programming and data science. This passion drives me to continuously expand and sharpen my data science toolkit and seek out opportunities to leverage my quantitative research skills to extract knowledge and insights from challenging new sources of noisy, structured and unstructured data.</p>
</div>
<div class="about-img">
<img src="https://github.com/DomenicCerri/DomenicCerri.github.io/blob/main/assets/img/me2.jpg?raw=true" alt="Picture of Dom at the beach" />
</div>
</div>
</section>
<!-- END ABOUT -->
<!-- START SKILLS -->
<section id="skills">
<div class="grid">
<h2>My skills</h2>
<div class="skills-desc">
<p>I have over 12 years of successful quantitative research experience, requiring
quick, independent acquisition of domain-specific knowledge and technical skills and
implementation of programming-based data acquisition, processing, analysis, and visualization
solutions. Notably, I have developed data handling pipelines to manage deep, broad, and complex datasets and generate reproducible results — which are critical for efficient collaboration and effective decision making. I have a proven track record of adapting and expanding my data science skillset to complete the requirements of diverse projects, from dimensionality reduction and general linear model-based estimation of significant voxels in fMRI data to the front-end development of this website.</p>
</div>
<div class="skills-list">
<div>
<i class="skill-icon python">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
aria-label="Python" role="img"
viewBox="0 0 512 512">
<g fill="#5a9fd4">
<path id="p" d="M254 64c-16 0-31 1-44 4-39 7-46 21-46 47v35h92v12H130c-27 0-50 16-58 46-8 35-8 57 0 93 7 28 23 47 49 47h32v-42c0-30 26-57 57-57h91c26 0 46-21 46-46v-88c0-24-21-43-46-47-15-3-32-4-47-4zm-50 28c10 0 17 8 17 18 0 9-7 17-17 17-9 0-17-8-17-17 0-10 8-18 17-18z"/>
</g>
<use xlink:href="#p" fill="#ffd43b" transform="rotate(180,256,255)"/>
</svg>
</i>
<span class="bold">Python</span><span class="right"> 6 years</span>
</div>
<div>
<i class="skill-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 150">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#2A3238;}
.st2{fill:#4DA925;}
</style>
<g>
<g>
<path class="st0" d="M118.9,40.3L81.7,18.2c-4.4-2.6-9.9-2.6-14.4,0L30.1,40.3c-4.4,2.6-7.2,7.5-7.2,12.8v44.2
c0,5.3,2.7,10.1,7.2,12.8l37.2,22.1c2.2,1.3,4.7,2,7.2,2s5-0.7,7.2-2l37.2-22.1c4.4-2.6,7.2-7.5,7.2-12.8V53
C126.1,47.8,123.4,42.9,118.9,40.3z"/>
</g>
<g>
<g>
<path class="st1" d="M118.9,40.3L81.7,18.2c-2.2-1.3-4.7-2-7.2-2s-5,0.7-7.2,2L30.1,40.3c-4.4,2.6-7.2,7.5-7.2,12.8v44.2
c0,5.3,2.7,10.1,7.2,12.8l37.2,22.1c2.2,1.3,4.7,2,7.2,2s5-0.7,7.2-2l37.2-22.1c4.4-2.6,7.2-7.5,7.2-12.8V53
C126.1,47.8,123.4,42.9,118.9,40.3z M68.6,129.8l-37.2-22.1c-3.6-2.2-5.9-6.2-5.9-10.5V53c0-4.3,2.3-8.4,5.9-10.5l37.2-22.1
c1.8-1.1,3.8-1.6,5.9-1.6c2.1,0,4.1,0.6,5.9,1.6l37.2,22.1c3.1,1.8,5.1,5,5.7,8.5c-1.2-2.6-4-3.4-7.3-1.5L80.9,71.3
c-4.4,2.6-7.6,5.4-7.6,10.7v43.4c0,3.2,1.3,5.2,3.2,5.8c-0.6,0.1-1.3,0.2-2,0.2C72.5,131.5,70.4,130.9,68.6,129.8z"/>
</g>
</g>
<g>
<path class="st2" d="M109.2,101.5l-9.3,5.5c-0.2,0.1-0.4,0.3-0.4,0.6v2.4c0,0.3,0.2,0.4,0.4,0.3l9.4-5.7c0.2-0.1,0.3-0.4,0.3-0.7
v-2.1C109.6,101.5,109.4,101.4,109.2,101.5z"/>
</g>
<g>
<path class="st0" d="M89.4,81.1c0.3-0.2,0.5,0,0.6,0.4v3.2c1.3-0.5,2.5-0.7,3.6-0.4c0.2,0.1,0.3,0.4,0.2,0.7l-0.7,2.8
c-0.1,0.2-0.2,0.4-0.3,0.6c-0.1,0.1-0.1,0.1-0.2,0.1s-0.2,0.1-0.3,0c-0.5-0.1-1.6-0.4-3.4,0.6c-1.9,1-2.6,2.6-2.5,3.8
c0,1.5,0.8,1.9,3.3,1.9c3.4,0.1,4.9,1.6,5,5c0,3.4-1.8,7.1-4.6,9.3l0.1,3.2c0,0.4-0.2,0.8-0.5,1l-1.9,1.1c-0.3,0.2-0.5,0-0.6-0.4
v-3.1c-1.6,0.7-3.2,0.8-4.3,0.4c-0.2-0.1-0.3-0.4-0.2-0.7l0.7-2.9c0.1-0.2,0.2-0.5,0.3-0.6c0.1-0.1,0.1-0.1,0.2-0.1
c0.1-0.1,0.2-0.1,0.3,0c1.1,0.4,2.6,0.2,3.9-0.5c1.8-0.9,2.9-2.7,2.9-4.5c0-1.6-0.9-2.3-3-2.3c-2.7,0-5.2-0.5-5.3-4.5
c0-3.3,1.7-6.7,4.4-8.8v-3.2c0-0.4,0.2-0.8,0.5-1L89.4,81.1z"/>
</g>
</g>
</svg>
</i>
<span class="bold">Bash</span><span class="right"> 2 years</span>
</div>
<div>
<i class="skill-icon git">
<svg class= "git" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 97 97" >
<g>
<path fill="#F05133" d="M92.71,44.408L52.591,4.291c-2.31-2.311-6.057-2.311-8.369,0l-8.33,8.332L46.459,23.19
c2.456-0.83,5.272-0.273,7.229,1.685c1.969,1.97,2.521,4.81,1.67,7.275l10.186,10.185c2.465-0.85,5.307-0.3,7.275,1.671
c2.75,2.75,2.75,7.206,0,9.958c-2.752,2.751-7.208,2.751-9.961,0c-2.068-2.07-2.58-5.11-1.531-7.658l-9.5-9.499v24.997
c0.67,0.332,1.303,0.774,1.861,1.332c2.75,2.75,2.75,7.206,0,9.959c-2.75,2.749-7.209,2.749-9.957,0c-2.75-2.754-2.75-7.21,0-9.959
c0.68-0.679,1.467-1.193,2.307-1.537V36.369c-0.84-0.344-1.625-0.853-2.307-1.537c-2.083-2.082-2.584-5.14-1.516-7.698
L31.798,16.715L4.288,44.222c-2.311,2.313-2.311,6.06,0,8.371l40.121,40.118c2.31,2.311,6.056,2.311,8.369,0L92.71,52.779
C95.021,50.468,95.021,46.719,92.71,44.408z"/>
</g>
</svg>
</i>
<span class="bold">Git</span><span class="right"> 2 years</span>
</div>
<div>
<i class="skill-icon sql fa-solid fa-database">
</i>
<span class="bold">SQL</span><span class="right"> 2 years</span>
</div>
<div>
<i class="skill-icon jupyter">
<svg viewBox="0 0 44 51" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:figma="http://www.figma.com/figma/ns">
<g id="Canvas" transform="translate(-1640 -2453)" figma:type="canvas">
<g id="Group" style="mix-blend-mode:normal;" figma:type="group">
<g id="g" style="mix-blend-mode:normal;" figma:type="group">
<g id="path" style="mix-blend-mode:normal;" figma:type="group">
<g id="path9 fill" style="mix-blend-mode:normal;" figma:type="vector">
<use xlink:href="#path0_fill" transform="translate(1640.54 2474.36)" fill="#4E4E4E" style="mix-blend-mode:normal;"/>
</g>
</g>
<g id="path" style="mix-blend-mode:normal;" figma:type="group">
<g id="path10 fill" style="mix-blend-mode:normal;" figma:type="vector">
<use xlink:href="#path1_fill" transform="translate(1645.68 2474.37)" fill="#4E4E4E" style="mix-blend-mode:normal;"/>
</g>
</g>
<g id="path" style="mix-blend-mode:normal;" figma:type="group">
<g id="path11 fill" style="mix-blend-mode:normal;" figma:type="vector">
<use xlink:href="#path2_fill" transform="translate(1653.39 2474.26)" fill="#4E4E4E" style="mix-blend-mode:normal;"/>
</g>
</g>
<g id="path" style="mix-blend-mode:normal;" figma:type="group">
<g id="path12 fill" style="mix-blend-mode:normal;" figma:type="vector">
<use xlink:href="#path3_fill" transform="translate(1660.43 2474.39)" fill="#4E4E4E" style="mix-blend-mode:normal;"/>
</g>
</g>
<g id="path" style="mix-blend-mode:normal;" figma:type="group">
<g id="path13 fill" style="mix-blend-mode:normal;" figma:type="vector">
<use xlink:href="#path4_fill" transform="translate(1667.55 2472.54)" fill="#4E4E4E" style="mix-blend-mode:normal;"/>
</g>
</g>
<g id="path" style="mix-blend-mode:normal;" figma:type="group">
<g id="path14 fill" style="mix-blend-mode:normal;" figma:type="vector">
<use xlink:href="#path5_fill" transform="translate(1672.47 2474.29)" fill="#4E4E4E" style="mix-blend-mode:normal;"/>
</g>
</g>
<g id="path" style="mix-blend-mode:normal;" figma:type="group">
<g id="path15 fill" style="mix-blend-mode:normal;" figma:type="vector">
<use xlink:href="#path6_fill" transform="translate(1679.98 2474.24)" fill="#4E4E4E" style="mix-blend-mode:normal;"/>
</g>
</g>
</g>
</g>
<g id="g" style="mix-blend-mode:normal;" figma:type="group">
<g id="path" style="mix-blend-mode:normal;" figma:type="group">
<g id="path16 fill" style="mix-blend-mode:normal;" figma:type="vector">
<use xlink:href="#path7_fill" transform="translate(1673.48 2453.69)" fill="#767677" style="mix-blend-mode:normal;"/>
</g>
</g>
<g id="path" style="mix-blend-mode:normal;" figma:type="group">
<g id="path17 fill" style="mix-blend-mode:normal;" figma:type="vector">
<use xlink:href="#path8_fill" transform="translate(1643.21 2484.27)" fill="#F37726" style="mix-blend-mode:normal;"/>
</g>
</g>
<g id="path" style="mix-blend-mode:normal;" figma:type="group">
<g id="path18 fill" style="mix-blend-mode:normal;" figma:type="vector">
<use xlink:href="#path9_fill" transform="translate(1643.21 2457.88)" fill="#F37726" style="mix-blend-mode:normal;"/>
</g>
</g>
<g id="path" style="mix-blend-mode:normal;" figma:type="group">
<g id="path19 fill" style="mix-blend-mode:normal;" figma:type="vector">
<use xlink:href="#path10_fill" transform="translate(1643.28 2496.09)" fill="#9E9E9E" style="mix-blend-mode:normal;"/>
</g>
</g>
<g id="path" style="mix-blend-mode:normal;" figma:type="group">
<g id="path20 fill" style="mix-blend-mode:normal;" figma:type="vector">
<use xlink:href="#path11_fill" transform="translate(1641.87 2458.43)" fill="#616262" style="mix-blend-mode:normal;"/>
</g>
</g>
</g>
</g>
</g>
</g>
<defs>
<path id="path0_fill" d="M 1.74498 5.47533C 1.74498 7.03335 1.62034 7.54082 1.29983 7.91474C 0.943119 8.23595 0.480024 8.41358 0 8.41331L 0.124642 9.3036C 0.86884 9.31366 1.59095 9.05078 2.15452 8.56466C 2.45775 8.19487 2.6834 7.76781 2.818 7.30893C 2.95261 6.85005 2.99341 6.36876 2.93798 5.89377L 2.93798 0L 1.74498 0L 1.74498 5.43972L 1.74498 5.47533Z"/>
<path id="path1_fill" d="M 5.50204 4.76309C 5.50204 5.43081 5.50204 6.02731 5.55545 6.54368L 4.496 6.54368L 4.42478 5.48423C 4.20318 5.85909 3.88627 6.16858 3.50628 6.38125C 3.12628 6.59392 2.69675 6.70219 2.26135 6.69503C 1.22861 6.69503 0 6.13415 0 3.84608L 0 0.0445149L 1.193 0.0445149L 1.193 3.6057C 1.193 4.84322 1.57583 5.67119 2.65309 5.67119C 2.87472 5.67358 3.09459 5.63168 3.29982 5.54796C 3.50505 5.46424 3.69149 5.34039 3.84822 5.18366C 4.00494 5.02694 4.1288 4.84049 4.21252 4.63527C 4.29623 4.43004 4.33813 4.21016 4.33575 3.98853L 4.33575 0L 5.52874 0L 5.52874 4.72748L 5.50204 4.76309Z"/>
<path id="path2_fill" d="M 0.0534178 2.27264C 0.0534178 1.44466 0.0534178 0.768036 0 0.153731L 1.06836 0.153731L 1.12177 1.2666C 1.3598 0.864535 1.70247 0.534594 2.11325 0.311954C 2.52404 0.0893145 2.98754 -0.0176786 3.45435 0.00238095C 5.03908 0.00238095 6.23208 1.32892 6.23208 3.30538C 6.23208 5.63796 4.7987 6.79535 3.24958 6.79535C 2.85309 6.81304 2.45874 6.7281 2.10469 6.54874C 1.75064 6.36937 1.44888 6.10166 1.22861 5.77151L 1.22861 5.77151L 1.22861 9.33269L 0.0534178 9.33269L 0.0534178 2.29935L 0.0534178 2.27264ZM 1.22861 4.00872C 1.23184 4.17026 1.24972 4.33117 1.28203 4.48948C 1.38304 4.88479 1.61299 5.23513 1.93548 5.48506C 2.25798 5.735 2.65461 5.87026 3.06262 5.86944C 4.31794 5.86944 5.05689 4.8456 5.05689 3.3588C 5.05689 2.05897 4.36246 0.946096 3.10714 0.946096C 2.61036 0.986777 2.14548 1.20726 1.79965 1.5662C 1.45382 1.92514 1.25079 2.3979 1.22861 2.89585L 1.22861 4.00872Z"/>
<path id="path3_fill" d="M 1.31764 0.0178059L 2.75102 3.85499C 2.90237 4.28233 3.06262 4.7987 3.16946 5.18153C 3.2941 4.7898 3.42764 4.29123 3.5879 3.82828L 4.88773 0.0178059L 6.14305 0.0178059L 4.36246 4.64735C 3.47216 6.87309 2.92908 8.02158 2.11 8.71601C 1.69745 9.09283 1.19448 9.35658 0.649917 9.48166L 0.356119 8.48453C 0.736886 8.35942 1.09038 8.16304 1.39777 7.90584C 1.8321 7.55188 2.17678 7.10044 2.4038 6.5882C 2.45239 6.49949 2.48551 6.40314 2.50173 6.3033C 2.49161 6.19586 2.46457 6.0907 2.42161 5.9917L 0 0L 1.29983 0L 1.31764 0.0178059Z"/>
<path id="path4_fill" d="M 2.19013 0L 2.19013 1.86962L 3.8995 1.86962L 3.8995 2.75992L 2.19013 2.75992L 2.19013 6.26769C 2.19013 7.06896 2.42161 7.53191 3.08043 7.53191C 3.31442 7.53574 3.54789 7.5088 3.77486 7.45179L 3.82828 8.34208C 3.48794 8.45999 3.12881 8.51431 2.76882 8.50234C 2.53042 8.51726 2.29161 8.48043 2.06878 8.39437C 1.84595 8.30831 1.64438 8.17506 1.47789 8.00377C 1.11525 7.51873 0.949826 6.91431 1.01494 6.31221L 1.01494 2.75102L 0 2.75102L 0 1.86072L 1.03274 1.86072L 1.03274 0.275992L 2.19013 0Z"/>
<path id="path5_fill" d="M 1.17716 3.57899C 1.153 3.88093 1.19468 4.18451 1.29933 4.46876C 1.40398 4.75301 1.5691 5.01114 1.78329 5.22532C 1.99747 5.43951 2.2556 5.60463 2.53985 5.70928C 2.8241 5.81393 3.12768 5.85561 3.42962 5.83145C 4.04033 5.84511 4.64706 5.72983 5.21021 5.49313L 5.41498 6.38343C 4.72393 6.66809 3.98085 6.80458 3.23375 6.78406C 2.79821 6.81388 2.36138 6.74914 1.95322 6.59427C 1.54505 6.43941 1.17522 6.19809 0.869071 5.88688C 0.562928 5.57566 0.327723 5.2019 0.179591 4.79125C 0.0314584 4.38059 -0.0260962 3.94276 0.0108748 3.50777C 0.0108748 1.54912 1.17716 0 3.0824 0C 5.21911 0 5.75329 1.86962 5.75329 3.06262C 5.76471 3.24644 5.76471 3.43079 5.75329 3.61461L 1.15046 3.61461L 1.17716 3.57899ZM 4.66713 2.6887C 4.70149 2.45067 4.68443 2.20805 4.61709 1.97718C 4.54976 1.74631 4.43372 1.53255 4.2768 1.35031C 4.11987 1.16808 3.92571 1.0216 3.70739 0.920744C 3.48907 0.81989 3.25166 0.767006 3.01118 0.765656C 2.52201 0.801064 2.06371 1.01788 1.72609 1.37362C 1.38847 1.72935 1.19588 2.19835 1.18607 2.6887L 4.66713 2.6887Z"/>
<path id="path6_fill" d="M 0.0534178 2.19228C 0.0534178 1.42663 0.0534178 0.767806 0 0.162404L 1.06836 0.162404L 1.06836 1.43553L 1.12177 1.43553C 1.23391 1.04259 1.4656 0.694314 1.78468 0.439049C 2.10376 0.183783 2.4944 0.034196 2.90237 0.0110538C 3.01466 -0.00368459 3.12839 -0.00368459 3.24068 0.0110538L 3.24068 1.12393C 3.10462 1.10817 2.9672 1.10817 2.83114 1.12393C 2.427 1.13958 2.04237 1.30182 1.7491 1.58035C 1.45583 1.85887 1.27398 2.23462 1.23751 2.63743C 1.20422 2.8196 1.18635 3.00425 1.1841 3.18941L 1.1841 6.65267L 0.00890297 6.65267L 0.00890297 2.20118L 0.0534178 2.19228Z"/>
<path id="path7_fill" d="M 6.03059 2.83565C 6.06715 3.43376 5.92485 4.02921 5.6218 4.54615C 5.31875 5.0631 4.86869 5.47813 4.32893 5.73839C 3.78917 5.99864 3.18416 6.09233 2.59097 6.00753C 1.99778 5.92272 1.44326 5.66326 0.998048 5.26219C 0.552837 4.86113 0.23709 4.33661 0.0910307 3.75546C -0.0550287 3.17431 -0.0247891 2.56283 0.177897 1.99893C 0.380583 1.43503 0.746541 0.944221 1.22915 0.589037C 1.71176 0.233853 2.28918 0.0303686 2.88784 0.00450543C 3.28035 -0.0170932 3.67326 0.0391144 4.04396 0.169896C 4.41467 0.300677 4.75587 0.503453 5.04794 0.766561C 5.34 1.02967 5.57718 1.34792 5.74582 1.70301C 5.91446 2.0581 6.01124 2.44303 6.03059 2.83565L 6.03059 2.83565Z"/>
<path id="path8_fill" d="M 18.6962 7.12238C 10.6836 7.12238 3.64131 4.24672 0 0C 1.41284 3.82041 3.96215 7.1163 7.30479 9.44404C 10.6474 11.7718 14.623 13.0196 18.6962 13.0196C 22.7695 13.0196 26.745 11.7718 30.0877 9.44404C 33.4303 7.1163 35.9796 3.82041 37.3925 4.0486e-13C 33.7601 4.24672 26.7445 7.12238 18.6962 7.12238Z"/>
<path id="path9_fill" d="M 18.6962 5.89725C 26.7089 5.89725 33.7512 8.77291 37.3925 13.0196C 35.9796 9.19922 33.4303 5.90333 30.0877 3.57559C 26.745 1.24785 22.7695 4.0486e-13 18.6962 0C 14.623 4.0486e-13 10.6474 1.24785 7.30479 3.57559C 3.96215 5.90333 1.41284 9.19922 0 13.0196C 3.64131 8.76401 10.648 5.89725 18.6962 5.89725Z"/>
<path id="path10_fill" d="M 7.59576 3.56656C 7.64276 4.31992 7.46442 5.07022 7.08347 5.72186C 6.70251 6.3735 6.13619 6.89698 5.45666 7.22561C 4.77713 7.55424 4.01515 7.67314 3.26781 7.56716C 2.52046 7.46117 1.82158 7.13511 1.26021 6.63051C 0.698839 6.12591 0.300394 5.46561 0.115637 4.73375C -0.0691191 4.00188 -0.0318219 3.23159 0.222777 2.52099C 0.477376 1.8104 0.93775 1.19169 1.54524 0.743685C 2.15274 0.295678 2.87985 0.0386595 3.63394 0.00537589C 4.12793 -0.0210471 4.62229 0.0501173 5.08878 0.214803C 5.55526 0.37949 5.98473 0.63447 6.35264 0.965179C 6.72055 1.29589 7.01971 1.69584 7.233 2.1422C 7.4463 2.58855 7.56957 3.07256 7.59576 3.56656L 7.59576 3.56656Z"/>
<path id="path11_fill" d="M 2.25061 4.37943C 1.81886 4.39135 1.39322 4.27535 1.02722 4.04602C 0.661224 3.81668 0.371206 3.48424 0.193641 3.09052C 0.0160762 2.69679 -0.0411078 2.25935 0.0292804 1.83321C 0.0996686 1.40707 0.294486 1.01125 0.589233 0.695542C 0.883981 0.37983 1.2655 0.158316 1.68581 0.0588577C 2.10611 -0.0406005 2.54644 -0.0135622 2.95143 0.136572C 3.35641 0.286707 3.70796 0.553234 3.96186 0.902636C 4.21577 1.25204 4.3607 1.66872 4.37842 2.10027C 4.39529 2.6838 4.18131 3.25044 3.78293 3.67715C 3.38455 4.10387 2.83392 4.35623 2.25061 4.37943Z"/>
</defs>
</svg>
</i>
<span class="bold">Jupyter</span><span class="right"> 6 years</span>
</div>
<div>
<i class="skill-icon html">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/>
<path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512"/>
<path fill="#f16529" d="M256 480.5V131H404.3L376 447"/>
<path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26"/>
<path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8"/>
</svg>
</i>
<span class="bold">HTML</span><span class="right"> 1 year</span>
</div>
<div>
<i class="skill-icon css">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="0 0 362.73401 511.99998"
sodipodi:docname="CSS3.svg">
<defs
<sodipodi:namedview />
<g
transform="translate(-193.633,-276.3622)">
<g
transform="translate(119,276.3622)">
<polygon
points="437.367,100.62 404.321,470.819 255.778,512 107.644,470.877 74.633,100.62 "
style="fill:#264de4" />
<polygon
points="376.03,447.246 404.27,130.894 256,130.894 256,480.523 "
style="fill:#2965f1" />
<polygon
points="150.31,268.217 154.38,313.627 256,313.627 256,268.217 "
style="fill:#ebebeb" />
<polygon
points="256,176.305 255.843,176.305 142.132,176.305 146.26,221.716 256,221.716 "
style="fill:#ebebeb" />
<polygon
points="256,433.399 256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 "
style="fill:#ebebeb" />
<path
d="m 160,0 55,0 0,23 -32,0 0,23 32,0 0,23 -55,0 z"
/>
<path
d="m 226,0 55,0 0,20 -32,0 0,4 32,0 0,46 -55,0 0,-21 32,0 0,-4 -32,0 z"
/>
<path
d="m 292,0 55,0 0,20 -32,0 0,4 32,0 0,46 -55,0 0,-21 32,0 0,-4 -32,0 z"
/>
<polygon
points="311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 369.597,176.305 255.843,176.305 255.843,221.716 319.831,221.716 315.699,268.217 255.843,268.217 255.843,313.627 "
style="fill:#ffffff" />
</g>
</g>
</svg>
</i>
<span class="bold">CSS</span><span class="right">1 year</span>
</div>
<div>
<i class="skill-icon excel">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2289.75 2130"
>
<path fill="#185C37" d="M1437.75,1011.75L532.5,852v1180.393c0,53.907,43.7,97.607,97.607,97.607l0,0h1562.036
c53.907,0,97.607-43.7,97.607-97.607l0,0V1597.5L1437.75,1011.75z"/>
<path fill="#21A366" d="M1437.75,0H630.107C576.2,0,532.5,43.7,532.5,97.607c0,0,0,0,0,0V532.5l905.25,532.5L1917,1224.75
L2289.75,1065V532.5L1437.75,0z"/>
<path fill="#107C41" d="M532.5,532.5h905.25V1065H532.5V532.5z"/>
<path opacity="0.1" d="M1180.393,426H532.5v1331.25h647.893c53.834-0.175,97.432-43.773,97.607-97.607
V523.607C1277.825,469.773,1234.227,426.175,1180.393,426z"/>
<path opacity="0.2" d="M1127.143,479.25H532.5V1810.5h594.643
c53.834-0.175,97.432-43.773,97.607-97.607V576.857C1224.575,523.023,1180.977,479.425,1127.143,479.25z"/>
<path opacity="0.2" d="M1127.143,479.25H532.5V1704h594.643c53.834-0.175,97.432-43.773,97.607-97.607
V576.857C1224.575,523.023,1180.977,479.425,1127.143,479.25z"/>
<path opacity="0.2" d="M1073.893,479.25H532.5V1704h541.393c53.834-0.175,97.432-43.773,97.607-97.607
V576.857C1171.325,523.023,1127.727,479.425,1073.893,479.25z"/>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="203.5132" y1="1729.0183" x2="967.9868" y2="404.9817" gradientTransform="matrix(1 0 0 -1 0 2132)">
<stop offset="0" style="stop-color:#18884F"/>
<stop offset="0.5" style="stop-color:#117E43"/>
<stop offset="1" style="stop-color:#0B6631"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M97.607,479.25h976.285c53.907,0,97.607,43.7,97.607,97.607v976.285
c0,53.907-43.7,97.607-97.607,97.607H97.607C43.7,1650.75,0,1607.05,0,1553.143V576.857C0,522.95,43.7,479.25,97.607,479.25z"/>
<path fill="#FFFFFF" d="M302.3,1382.264l205.332-318.169L319.5,747.683h151.336l102.666,202.35
c9.479,19.223,15.975,33.494,19.49,42.919h1.331c6.745-15.336,13.845-30.228,21.3-44.677L725.371,747.79h138.929l-192.925,314.548
L869.2,1382.263H721.378L602.79,1160.158c-5.586-9.45-10.326-19.376-14.164-29.66h-1.757c-3.474,10.075-8.083,19.722-13.739,28.755
l-122.102,223.011H302.3z"/>
<path fill="#33C481" d="M2192.143,0H1437.75v532.5h852V97.607C2289.75,43.7,2246.05,0,2192.143,0L2192.143,0z"/>
<path fill="#107C41" d="M1437.75,1065h852v532.5h-852V1065z"/>
</svg>
</i>
<span class="bold">Excel</span><span class="right">12 years</span>
</div>
</div>
<div class="other-skills">
<ul><span class="bold">Machine Learning</span>
<li>Tensorflow</li>
<li>Keras</li>
<li>Scikit-learn</li>
</ul>
<ul><span class="bold">Data Visualization</span>
<li>Matplotlib</li>
<li>Seaborn</li>
<li>Powerpoint</li>
<li>GraphPad</li>
</ul>
<ul><span class="bold">Data Handling</span>
<li>Pandas</li>
<li>NumPy</li>
<li>PostgreSQL</li>
<li>SQLAlchemy</li>
<li>MATLAB</li>
<li>VBA</li>
</ul>
<ul><span class="bold">Statistical Analysis</span>
<li>SciPy</li>
<li>Statistica</li>
<li>SAS</li>
<li>SPSS</li>
</ul>
</div>
<div class="certs">
<a id="profile-link" href="https://www.freecodecamp.org/Domenic_Cerri" class="button" target="_blank">Certifications</a>
</div>
<figure class="skill-img">
<img src="https://github.com/DomenicCerri/DomenicCerri.github.io/blob/main/assets/img/yokohama.jpg?raw=true?raw=true" alt="Picture of Dom giving a talk at the JCBFM 2019 Niels Lassen Award Session in Yokohama, Japan" />
<figcaption>Effective Scientific Communication</figcaption>
</figure>
</div>
</section>
<!-- END SKILLS -->
<!-- START PROJECTS -->
<section id="projects">
<div class="grid">
<h2>My projects</h2>
<div class="projects-grid">
<div class="project-tile replit" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/rps.png" height= "420" width = "662.5" alt="Markov chain Rock Paper Scissors project preview" />
<h3>Markov Chain Rock Paper Scissors</h3>
<div class="project-desc" id="project-desc">
<p>The project goal was to create a program with > 60% win-rate in Rock, Paper, Scissors against opponent programs with varied strategies. My tunable solution uses an nth-order Markov chain to "learn" opponent strategies, with optional decay and counter parameters to account for evolving and match-history-based opponent strategies, respectively. For added challenge, I restricted my solution to a single nested function using only native Python packages.</p>
<a href="https://replit.com/@DomenicCerri/boilerplate-rock-paper-scissors" target="_blank" class="button">Try on Replit</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/catdog-sm.png" height= "420" width = "662.5" alt="CNN Cat vs Dog Image Classifier project preiew" />
<h3>CNN Cat vs Dog Image Classifier</h3>
<div class="project-desc" id="project-desc">
<p>This project was to correctly classify dog and cat images with >= 63% accuracy from a training/validation set of 3000 images within a simple predefined workflow. My solution uses a convolutional neural network with two convolutional layers and straightforward data augmentation, built in Keras and Tensorflow 2.0, to achieve 68% test accuracy. While not within the limited criteria for this project, higher accuracy can be achieved with similar "compute" by using transfer learning with pre-trained models like MobileNet v2 or automated architecture and hyper-parameter tuning.</p>
<a href="https://colab.research.google.com/drive/1pJ2Sp6SIP3i1yLsOaG5NJTyjuwgMwpfg?usp=sharing" target="_blank" class="button">Try on Colab</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/books.png" height= "420" width = "662.5" alt="KNN Book Recommendation Engine project preview" />
<h3>KNN Book Recommendation Engine</h3>
<div class="project-desc" id="project-desc">
<p>The goal of this project was to generate book recommendations from a dataset of 1.1 million ratings for 270,000 books from 90,000 users. To this end, I used the K-Nearest Neighbors algorithm from Scikit-learn to measure the cosine distance between books and return the five closest matches to a given book argument. I provide an initial solution designed to produce a predetermined test outcome, then improve upon it with more appropriate handling of missing data, data filtering, and recommendation ordering.</p>
<a href="https://colab.research.google.com/drive/1Na8tpaS5ZxhXfYVjRZqqs989seRsv0fM?usp=sharing" target="_blank" class="button">Try on Colab</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/healthcost.png" height= "420" width = "662.5" alt="DNN Regression Health Cost Calculator project preview" />
<h3>DNN Regression Health Cost Calculator</h3>
<div class="project-desc" id="project-desc">
<p>For this project, I was tasked to predict health care expenses within $3500 using demographic data from 1070 patients. I was able to predict expenses from a test sample within $2723 using a deep neural network model with two dense layers designed in Keras and Tensorflow 2.0. To improve predictions, I selected only the features correlated with expenses. To make the model end-to-end, accepting raw data as input, I included all normalization and encoding steps as preprocessing layers.</p>
<a href="https://colab.research.google.com/drive/1byi90eUT-VakirBsJsT1z54rM6OoUGLR?usp=sharing" target="_blank" class="button">Try on Colab</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/sms-classify.png" height= "420" width = "662.5" alt="RNN SMS Text Classifier project preview" />
<h3>RNN SMS Text Classifier</h3>
<div class="project-desc" id="project-desc">
<p>The challenge for this project was to classify SMS messages as either "ham", normal messages from friends, or "spam", advertisements from companies, etcetera. My model, with one bidirectional, long short-term memory, recurrent neural network layer and baked-in data cleaning/standardization, text vectorization, and word embedding layers achieved a validation accuracy, precision, and recall of > 99.8% and accurately classified predetermined test cases. Notably, the training data was imbalanced with 3619 ham and 560 spam messages, so I oversampled the minority class to reduce majority bias.</p>
<a href="https://colab.research.google.com/drive/17vG8oVoDHppsnrO3JmSqPzicDizFOuA1?usp=sharing" target="_blank" class="button">Try on Colab</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/universe-preview.png" height= "420" width = "662.5" alt="Celestial Bodies Database project preview" />
<h3>Celestial Bodies Database</h3>
<div class="project-desc" id="project-desc">
<p>In this simple project I constructed and populated a relational database of celestial bodies from scratch using PostgreSQL command-line statements.</p>
<a href="https://github.com/DomenicCerri/FCC-Celestial-Bodies-Database.git" target="_blank" class="button">GitHub</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/Worldcup-Database-preview.png" height= "420" width = "662.5" alt="World Cup Database SQL Scripts project preview" />
<h3>World Cup Database SQL Scripts</h3>
<div class="project-desc" id="project-desc">
<p>For this project, I constructed a relational database for data from the final three rounds of the World Cup tournament since 2014, wrote a Bash script to populate the database from a tabular data file, and finally wrote a Bash script execute several queries for different user stories and output the results.</p>
<a href="https://github.com/DomenicCerri/FCC-Worldcup-Database.git" target="_blank" class="button">GitHub</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/Salon-Appointment-Scheduler-preview.png" height= "420" width = "662.5" alt="Salon Appointment Scheduler project preview" />
<h3>Salon Appointment Scheduler</h3>
<div class="project-desc" id="project-desc">
<p>The goal of this project was to create a user interface to keep track of salon customers and their appointments. I created a relational database with PostgreSQL to track customers, salon services, and appointments, and wrote an interface in Bash to query and insert information related to dynamically generated user prompts.</p>
<a href="https://github.com/DomenicCerri/FCC-Salon-Appointment-Scheduler.git" target="_blank" class="button">GitHub</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/Periodic-Table-preview.png" height= "420" width = "662.5" alt="Periodic Table Lookup Tool project preview" />
<h3>Periodic Table Lookup Script</h3>
<div class="project-desc" id="project-desc">
<p>For this project I used PostgreSQL to fix and update an existing database containing periodic table elements and their properties and created a small Bash program to output information about an element given a valid atomic number, symbol, or name. Notably, development of this code was version controlled in a Git repository using best practices.</p>
<a href="https://github.com/DomenicCerri/FCC-Periodic-Table-Database.git" target="_blank" class="button">GitHub</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/Number-Guessing-Game_preview.png" height= "420" width = "662.5" alt="Number Guessing Game project preview" />
<h3>Number Guessing Game</h3>
<div class="project-desc" id="project-desc">
<p>The goal of this project was to create game where users guess a hidden random number between 1 and 1000 and track users' game history. Using Git best practices for version control during development, I created a small relational database with PostgreSQL to store usernames, high scores, and games played, then wrote a Bash user interface to control the game logic, display dynamic user prompts, and automatically query, update, and insert information into the game history database based on user input.</p>
<a href="https://github.com/DomenicCerri/FCC-Number-Guessing-Game.git" target="_blank" class="button">GitHub</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/fmri-processing-and-analysis-preview.png" height= "420" width = "662.5" alt="fMRI Data Handling and Analysis project preview" />
<h3>fMRI Data Handling and Analysis</h3>
<div class="project-desc" id="project-desc">
<p>To handle and analyze large 4D fMRI datasets efficiently and reproducibly, I made a Python wrapper to pass fMRI data through a pipeline package, developed by a colleague, that executes standard preprocessing and subject-level general linear model analyses of event-related fMRI data. For subsequent group-level analyses, pipeline results are passed via shell scripts within my wrapper to open-source fMRI analysis software for significance testing of 3D voxels and clusters. For further analyses of fMRI signal changes extracted from brain regions of interest, I created sequential functions to detrend, wrangle, find peaks in, and visualize peri-event time-series data using several Python libraries including: Pandas, NumPy, Matplotlib, Seaborn, and Scikit-learn.</p>
<a href="https://github.com/DomenicCerri/fMRI-processing-and-analysis" target="_blank" class="button">GitHub</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/electrophysiology-processing-and-analysis-preview.png" height= "420" width = "662.5" alt="Electrophysiology Data Handling and Analysis project preview" />
<h3>Electrophysiology Data Handling and Analysis</h3>
<div class="project-desc" id="project-desc">
<p>To handle and analyze large, high-frequency, multi-channel, event-related electrophysiology data, I created Python batch preprocessing scripts to export proprietary format multi-unit, local field potential, and single-event-resolution data to accessible tabular data formats. For group-level analyses of the preprocessed data, I created sequential functions to detrend, normalize, wrangle, find peaks in, and visualize the peri-event time-series and/or spectral power information in these datasets with several Python libraries including: Pandas, NumPy, Matplotlib, Seaborn, and Scikit-learn.</p>
<a href="https://github.com/DomenicCerri/Electrophysiology-processing-and-analysis" target="_blank" class="button">GitHub</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/photometry-voltammetry-analysis-preview.png" height= "420" width = "662.5" alt="Photometry and Voltammetry Data Handling and Analysis project preview" />
<h3>Photometry and Voltammetry Data Handling and Analysis</h3>
<div class="project-desc" id="project-desc">
<p>To preprocess, detrend, normalize, wrangle, detect peaks in, and visualize high-frequency, peri-event, time-series data from multi-spectral photometry and fast-scan cyclic voltammetry recordings, I created sequential Python functions using several libraries including: Pandas, NumPy, Matplotlib, Seaborn, and Scikit-learn. In addition, for the detection of spontaneous activity in photometry data without discrete experimental events, I added additional functions using the SciPy library to high-pass filter raw time-series data and apply threshold, width, and timing constraints to peak detection.</p>
<a href="https://github.com/DomenicCerri/Photometry-or-voltammetry-processing-and-analysis" target="_blank" class="button">GitHub</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/MED-PC-behavior-and-hardware-synchronization-preview.png" height= "420" width = "662.5" alt="Animal Behavior and Hardware Synchronization project preview" />
<h3>Animal Behavior and Hardware Synchronization</h3>
<div class="project-desc" id="project-desc">
<p>Behavioral and/or multimodal neuroscience experiments often require precise, automatic, timing and synchronization of manipulations and measurements — operating under a conditional logic framework. For this purpose, I have written several scripts in the proprietary state-notation language, MedState, designed for specific or modular experimental paradigms, behavioral tasks, and/or hardware configurations.</p>
<a href="https://github.com/DomenicCerri/MED-PC-animal-behavior-and-hardware-synchronization" target="_blank" class="button">GitHub</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/mean-var-std-calculator_preview.png" height= "420" width = "662.5" alt="Mean Variance Standard Deviation Calculator project preview" />
<h3>Mean Variance Standard Deviation Calculator</h3>
<div class="project-desc" id="project-desc">
<p>For this project, I wrote a simple Python function that accepts a list of 9 digits (otherwise raising a ValueError), converts them into a 3x3 NumPy array, then returns a dictionary containing the mean, variance, standard deviation, maximum, minimum, and sum along both axes and for the flattened matrix.</p>
<a href="https://replit.com/@DomenicCerri/boilerplate-mean-variance-standard-deviation-calculator" target="_blank" class="button">Try on Replit</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/Demographic-Data-Analyzer_preview.png" height= "420" width = "662.5" alt="Demographic Data Analyzer project preview" />
<h3>Demographic Data Analyzer</h3>
<div class="project-desc" id="project-desc">
<p>In this project I created a Python function to calculate and optionally print demographic data from the 1994 Census database. The raw tabular data was read into a Pandas DataFrame and a variety of functions were used to index, filter, and transform the data to answer a series of specific questions.</p>
<a href="https://replit.com/@DomenicCerri/boilerplate-demographic-data-analyzer" target="_blank" class="button">Try on Replit</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/medical-data-visualizer_preview.png" height= "420" width = "662.5" alt="Medical Data Visualizer project preview" />
<h3>Medical Data Visualizer</h3>
<div class="project-desc" id="project-desc">
<p>The goal of this project was to visualize and make calculations from tabular medical examination data. In Python, I used Pandas DataFrame functions for feature engineering, normalization, data cleaning, and data wrangling, and created functions to generate categorical plots and heatmaps of the processed data with Matplotlib and Seaborn.</p>
<a href="https://replit.com/@DomenicCerri/boilerplate-medical-data-visualizer" target="_blank" class="button">Try on Replit</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/page-view-time-series-visualizer_preview.png" height= "420" width = "662.5" alt="Page View Timeseries Visualizer project preview" />
<h3>Page View Timeseries Visualizer</h3>
<div class="project-desc" id="project-desc">
<p>For this project I created visualizations with Python for a tabular dataset containing the number of daily page views on the freeCodeCamp.org forum from 2016-05-09 to 2019-12-03 in order to help understand the patterns in visits and identify yearly and monthly growth. To this end, I cleaned and wrangled the data in Pandas and created plotting functions with Seaborn and Matplotlib for an exploratory line plot, a bar plot categorized by month and year, and box plots categorized by either month or year.</p>
<a href="https://replit.com/@DomenicCerri/boilerplate-page-view-time-series-visualizer" target="_blank" class="button">Try on Replit</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/sea-level-predictor-preview.png" height= "420" width = "662.5" alt="Sea Level Predictor project preview" />
<h3>Sea Level Predictor</h3>
<div class="project-desc" id="project-desc">
<p>This project's challenge was to predict sea level change through the year 2050 from global average sea level changes reported by the EPA since 1880. My solution is a Python function which creates a scatterplot of the original data with Matplotlib and overlays a line of best fit calculated by the SciPy linregress function for the total dataset and for only years after 2000. As an extra challenge, I extended the x-axis date range with Pandas date-time functions instead of simply creating NumPy integer vectors.</p>
<a href="https://replit.com/@DomenicCerri/boilerplate-sea-level-predictor" target="_blank" class="button">Try on Replit</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/arithmetic-formatter-preview.png" height= "420" width = "662.5" alt="Arithmetic Formatter project preview" />
<h3>Arithmetic Formatter</h3>
<div class="project-desc" id="project-desc">
<p>I wrote a Python function that takes a list of arithmetic problems and arranges them vertically and side-by-side cleanly and consistently — similar to grade school math worksheets. In addition, this function returns meaningful error prompts for different types of invalid input, and accepts an optional argument to print the results.</p>
<a href="https://replit.com/@DomenicCerri/boilerplate-arithmetic-formatter" target="_blank" class="button">Try on Replit</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/time-calculator-preview.png" height= "420" width = "662.5" alt="Time Calculator project preview" />
<h3>Time Calculator</h3>
<div class="project-desc" id="project-desc">
<p>This is a Python function I created that takes a start time and duration and returns a cleanly-formatted string with the end time, including the number of days later if applicable, and the day of the week if a starting day is specified. I included a helper function to convert AM and PM to 24-hour time which reduced the complexity of the time calculation function.</p>
<a href="https://replit.com/@DomenicCerri/boilerplate-time-calculator" target="_blank" class="button">Try on Replit</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/budget-tool-preview.png" height= "420" width = "662.5" alt="Budget App project preview" />
<h3>Budget App</h3>
<div class="project-desc" id="project-desc">
<p>To make an open-ended command-line budget app, I used Python object-oriented programming to create a Category class that can instantiate objects based on different budget categories like food, clothing, auto, etc., has methods to deposit, withdraw, get balance of, transfer, or check funds, and keeps a ledger of all transactions. In addition, I included a function to return a spending chart, cleanly and consistently formatted to print in the command line, that displays the percentage of the total budget spent in each category.</p>
<a href="https://replit.com/@DomenicCerri/boilerplate-budget-app-1" target="_blank" class="button">Try on Replit</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/polygon-area-calculator-preview.png" height= "420" width = "662.5" alt="Polygon Area Calculator project preview" />
<h3>Polygon Area Calculator</h3>
<div class="project-desc" id="project-desc">
<p>For this project I used Python object-oriented programming to create a Rectangle class with a Square subclass inheriting its methods, including: setting height or width, getting the area, perimeter, or diagonal length, returning a cleanly-formatted text picture of the shape for command-line printing, and calculating the number of one shape object that could fit in another. To maintain equal side lengths in the Square class, the set height and set width methods and a new method to set side length are functionally equivalent.</p>
<a href="https://replit.com/@DomenicCerri/boilerplate-polygon-area-calculator" target="_blank" class="button">Try on Replit</a>
</div>
</div>
<div class="project-tile" id="project-tile">
<img class="project-img" src="https://raw.githubusercontent.com/DomenicCerri/DomenicCerri.github.io/main/assets/img/probability-calculator-preview.png" height= "420" width = "662.5" alt="Probability Calculator project preview" />
<h3>Probability Calculator</h3>
<div class="project-desc" id="project-desc">
<p>This project is a simulation of the classic "urn problem". In this instance, a certain number of balls are drawn without replacement from a hat, then it is determined if an expected combination of balls is in the draw or not. To calculate the experimental probability of getting an expected ball combination in one draw, I used Python object-oriented programming to create a Hat class with a ball drawing method and an Experiment function to copy a hat object, draw balls and check the outcome, then repeat the process a large number of times.</p>
<a href="https://replit.com/@DomenicCerri/boilerplate-probability-calculator-1" target="_blank" class="button">Try on Replit</a>
</div>
</div>
<div class="project-tile extra" id="project-tile">
<a href="https://github.com/DomenicCerri/DomenicCerri.github.io/blob/main/assets/data/Domenic-Cerri_Resume_05-20-2022.pdf?raw=true" class="button">Résumé</a>
<a href="https://scholar.google.com/citations?hl=en&user=r_I8HzgAAAAJ" class="button" target="_blank">Publications</a>
<a href="https://reporter.nih.gov/search/g2i-Ez6_jUuXU-1cIN2SbQ/projects?shared=true" class="button" target="_blank">Grants (PI)</a>
<div class="grant"> <span>Grants (Major Role):</span>
<a href="https://reporter.nih.gov/search/SSwbJW2AsEyxu9-5TTmCOA/projects?shared=true" class="button num" target="_blank">1</a>
<a href="https://reporter.nih.gov/search/kX3yMBxKkU-Tqm4_HQmkIg/projects?shared=true" class="button num" target="_blank">2</a>
</div>
</div>
</div>
</div>
</section>
<!-- START PROJECT JS -->
<script type="text/javascript">
const projects = document.querySelectorAll('.project-tile')
function openAction(parent){
const desc = parent.querySelector('.project-desc')
desc.classList.toggle('open')
}
projects.forEach(n => n.addEventListener('click', function(){openAction(n)}))
</script>
<!-- END PROJECT JS -->
<!-- END PROJECTS -->
<!-- START CONTACT -->
<section id="contact">
<div class="grid">
<h2>Contact</h2>
<div class="contact-desc">
<p>Let's work together! I'd love to hear from you about new data science projects, collaborations, and job opportunities.</p>
</div>
<div class="contacts social">
<a href="https://www.linkedin.com/in/domenic-cerri" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="https://github.com/DomenicCerri" target="_blank"><i class="fa-brands fa-github"></i></a>
<a class="kaggle" href="https://www.kaggle.com/domeniccerri" target="_blank"><i class="fa-brands fa-kaggle"></i></a>
</div>
<div id="contact-form">
<form id="gform" action="https://docs.google.com/forms/d/e/1FAIpQLSfTYRybm_Bg8P6nDY1AnPjhZrnPSjkZtmPKSsX_uA6TU6aj-w/formResponse?" target="hidden_iframe" method="post" onsubmit="submitted=true;">
<input type="hidden" name="entry.1501372576" value="Contact from doctor-dom.com" />
<input type="email" name="entry.1045781291" placeholder="Email" required>
<textarea name="entry.839337160" cols="0" rows="10" placeholder="Message" required></textarea>
<button type="submit">Send</button>
</form>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {}"></iframe>
<!-- START CONTACT JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">var submitted=false;</script>
<script type="text/javascript">
$('#gform').on('submit', function(e) {
$('#gform *').fadeOut(1000);
$('#gform').prepend("<br><br><br><strong>Thank you for getting in touch!</strong><br><br>I've received your message and will get back to you soon.<br><br>Have a great day!<br>Dom");
});
</script>
<!-- END CONTACT JS-->
</div>
</div>
</section>
<!-- END CONTACT -->
</main>
<footer>
© <script type="text/javascript">document.write(new Date().getFullYear());</script>. All Rights Reserved.
</footer>
</body>
</html>
/* Custom properties/variables */
:root {
--gold: #F2D00E;
--turquoise: #01A2A6;
--darkgrey: #1f1f1f;
--lightblue: #60aae7 ;
--purple:#D0C7CC;
--grey: #333434;
--lightgrey:#615966;
--orange:#f29111;
--header-height: 4rem;
}
/* Default settings/properties */
*, ::before, ::after {
box-sizing: border-box;
}
html, body{
font-family: 'Roboto', sans-serif;
color: var(--darkgrey);
padding: 0;
margin: 0;
height: 100%;
scroll-behavior: smooth;
}
html {
font-size: 62.5%; /* 1rem = 10px */
}
body {
font-size: 1rem;
min-width: 30rem;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
.grid {
display: grid;
row-gap: 5rem;
align-content: center;
max-width: 102.4rem;
height: 100%;
width: 100%;
margin: 0 auto;
}
.grid > * {
padding: 0 2rem;
}
section {
height: min-content;
overflow: hidden;
}
.button {
background: var(--gold);
color: var(--darkgrey);
font-weight: 600;
padding: .5rem 1.5rem;
font-size: 1.5rem;
}
.button:hover {
color: var(--gold);
transition: .5s;
background: var(--darkgrey);
}
h2 {
font-size: 5.4rem;
font-weight: 250;
color: white;
text-align: center;
text-transform: uppercase;
}
.bold {
font-weight: 600;
}
.right {
margin-left: auto;
display: none;
}
/* Nav bar/menu */
header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: var(--darkgrey);
color: white;
}
nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 1.5rem;
font-size: 1.5rem;
max-width: 102.4rem;
}
.logo {
text-transform: uppercase;
font-size: 1.75rem;
padding: .25rem .5rem;
border-radius: 1rem;
}
.logo:hover, .hamburger:hover {
background: var(--lightgrey);
}
.nav-list {
display: flex;
justify-content: space-between;
}
.nav-list li {
margin: 2rem;
}
.nav-list li a {
position: relative;
}
.hamburger {
font-size: 2.5rem;
cursor: pointer;
margin-right: 1.5rem;
padding: .25rem .5rem;
border-radius: .5rem;
}
.nav-list li a:hover {
font-weight: 600;
}
.show {
right: 0;
}
/* Home section */
#welcome-section {
position: relative;
background: var(--purple);
height: 100vh;
min-height: 75rem;
}
.desc h1 {
font-size: 4rem;
font-weight: 600;
}
.desc {
z-index: 99;
}
.desc span {
color: var(--gold);
text-shadow: .2rem .2rem .3rem var(--darkgrey);
}
.me-img {
position: relative;
width: 100%;
max-width: 75rem;
padding: 0;
justify-self: center;
z-index: 1;
margin-top: -1rem;
margin-right: -1rem;
}
.me-img svg {
margin: 0 auto;
}
.home-buttons {
position: absolute;
display: grid;
row-gap: 2rem;
column-gap: 0rem;
grid-template-columns: repeat(auto-fill, 12rem);
justify-items: start;
justify-content: start;
width: 100%;
}
.pubs {
justify-self: start;
margin-left: -1.4rem;
}
.social {
display: flex;
flex-direction: column;
text-align: center;
justify-self: end;
margin-top: -15rem;
z-index: 99;
}
.social a {
width: 3.5rem;
margin-bottom: 2rem;
font-size: 2rem;
padding: .5rem;
border: .2rem solid black;
}
.social a:hover {
color: white;
transition: .5s;
background: var(--darkgrey)
}
.img-shape {
fill: var(--gold);
width: 100%;
}
.img-shape image{
width: 360px;
height: 570px;
}
/* About Section */
#about {
background: var(--turquoise);
}
#about > .grid * {
margin:0;
}
.about-img {
position: relative;
width: 100%;
max-width: 60rem;
padding: 0;
justify-self: center;
}
.about-img img {
width: 100%;
border-radius: 2rem;
}
.about-desc {
color: white;
font-size: 1.55rem;
font-weight: 300;
text-align: center;
}
/* Skills Section */
#skills {
background: var(--purple);
}
#skills > .grid * {
margin:0;
}
#skills h2 {
color: var(--darkgrey);
}
.skills-desc {
color: var(--darkgrey);
font-size: 1.5rem;
font-weight: 300;
text-align: center;
}
.skills-desc:after{
background: var(--lightgrey);
height: .1rem;
width: 40%;
min-width: 24rem;
content: "";
display: block;
margin: 3rem auto 0 auto;
}
.skills-list {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 2rem;
row-gap: 1.5rem;
justify-items: left;
}
.skills-list div {
display: flex;
align-items: center;
gap: .2rem;
font-size: 1.7rem;
}
.skill-icon {
height: 6rem;
width: 6rem;
font-size: 4rem;
text-align: center;
overflow: hidden;
}
.skill-icon svg {
height: 6rem;
width: 6rem;
}
.git svg, .jupyter svg, .html svg, .css svg {
height: 5.2rem;
width: 5.2rem;
padding-top: .5rem;
}
.excel svg {
height: 4.9rem;
width: 4.9rem;
padding-top: .7rem;
}
.sql {
color: var(--orange);
padding-top: 1rem;
}
.other-skills {
display: grid;
font-size: 1.5rem;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
column-gap: 1rem;
row-gap: 1rem;
justify-items: center;
}
.other-skills ul {
padding: 1.5rem .2rem;
margin: 0;
width: 100%;
border-radius: 2rem;
text-align: center;
max-width: 20rem;
}
.other-skills ul:nth-child(1) {
background: #636393;
color: #636393;
}
.other-skills ul:nth-child(2) {
background: #B5222D;
color: #B5222D;
}
.other-skills ul:nth-child(3) {
background: #D4953C;
color: #D4953C;
}
.other-skills ul:nth-child(4) {
background: #609491;
color: #609491;
}
.other-skills span {
color: white;
}
.other-skills li {
text-align: left;
padding-left: 1.5rem;
padding-bottom: .25rem;
padding-right: 4rem;
background: white;
font-weight: 600;
width: 100%;
}
.other-skills li:nth-of-type(1) {
margin-top: 1rem;
padding-top: .5rem;
border-radius: 2rem 2rem 0 0;
}
.other-skills li:last-of-type {
padding-bottom: .5rem;
border-radius: 0 0 2rem 2rem;
}
.other-skills {
padding-left: 0;
padding-right: 0;
}
.skill-img {
position: relative;
padding: 2.5rem 0 0 0;
text-align: center;
}
.skill-img img {
width: 100%;
max-width: 60rem;
border-radius: 2rem;
}
.skill-img figcaption {
font-size: 1.5rem;
font-weight: 600;
position: absolute;
top: 0;
right: 0;
left: 0;
margin: 0 auto;
}
.certs {
grid-column: 1 / -1;
display: flex;
text-align: center;
justify-content: center;
margin-top: -3rem !important;
}
.certs > .button {
padding: .5rem 0;
width: 80%;
max-width: 30rem;
}
/* Projects section */
#projects {
background: var(--darkgrey);
}
#projects > .grid {
max-width: 100%;
}
#projects > .grid * {
margin:0;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: .2rem;
padding: 0;
}
.project-tile {
overflow: hidden;
background: white;
opacity: 80%;
position: relative;
transition: .5s ease-in-out;
}
.project-tile:hover {
opacity: 100%;
cursor: pointer;
}
.replit {
background: rgb(28, 35, 51)
}
h3 {
position: absolute;
top: 2rem;
left: 2rem;
font-weight: 100;
font-size: 2rem;
margin: 0;
max-width: calc(100% - 4rem);
color: white;
background: rgba(0,0,0,.7);
padding: 1rem;
}
.project-img {
width: 100%;
height: auto;
transition: .5s ease-in-out;
padding: .5rem 1rem;
}
.project-img:hover {
padding: 0;
width: 100%;
}
.project-desc {
height: 0;
bottom: -100%;
position: relative;
left: 0;
color: white;
background: var(--grey);
font-size: 1.55rem;
font-weight: 300;
transition: .5s ease-in-out;
transform-style: preserve-3d;
}
.project-desc:before {
height: 40rem;
width: 100%;
background: var(--darkgrey);
content: " ";
position: absolute;
top: 0;
left: 0;
transform: translateZ(-1px);
}
.project-desc p {
margin: 0;
}
.project-desc .button {
position: absolute;
left: 2rem;
top: -2.8rem;
}
.project-desc .button:hover {
background: rgba(0,0,0,.7);
}
.extra {
background: none;
grid-column: 1 / -1;
display: grid;
row-gap: 2rem;
grid-template-columns: repeat(2, auto);
grid-template-rows: 1fr 1fr;
justify-content: center;
transition: none;
opacity: 100%;
padding-top: 2rem;
}
.extra > * {
white-space: pre;
}
.extra > *:nth-child(1) {
width: 8.4rem;
}
.extra > *:nth-child(2) {
width: 11.3rem;
}
.extra > *:nth-child(3) {
width: 10.3rem;
}
.grant {
color: white;
font-size: 1.5rem;
display: flex;
align-items: center;
gap: .5rem;
padding-left: 0.5rem;
width: 19.5rem;
}
.grant > a {
padding: .5rem .75rem;
}
/* Contact section */
#contact {
background: var(--turquoise);
height: 100vh;
min-height: 80rem;
}
#contact > .grid > *:not(#contact-form) {
margin:0;
}
.contact-desc {
color: white;
font-size: 1.55rem;
font-weight: 300;
text-align: center;
padding-top: 0;
}
.contact-desc:after{
background: white;
height: .1rem;
width: 40%;
min-width: 24rem;
content: "";
display: block;
margin: 3rem auto 0 auto;
}
#contact .social {
flex-direction: row;
gap: 3rem;
justify-content: space-between;
justify-self: center;
max-width: 30rem;
width: 40%;
padding: 0;
}
#contact a {
border-color: white;
color: white;
margin: 0 auto;
}
.kaggle {
display: none;
}
#contact a:hover {
color: var(--turquoise);
background: white;
}
#contact-form {
max-width: 50rem;
width: 100%;
padding: 0 2rem;
margin: 0 auto;
}
#contact-form input, #contact-form textarea{
width: 100%;
font-size: 1.5rem;
font-weight: 600;
font-family: inherit;
padding: 1rem;
border-radius: .5rem;
border: none;
outline: none;
margin-bottom: 2rem;
}
form > input:focus, form > textarea:focus {
box-shadow: 0 0 0 3px var(--grey);
}
button {
display: block;
margin-left: auto;
background: white;
color: var(--turquoise);
font-weight: 600;
padding: .75rem 1.5rem;
font-size: 1.5rem;
border: .2rem solid white;
border-radius: .5rem;
}
button:hover{
color: white;
transition: .5s;
background: var(--turquoise);
cursor: pointer;
}
#gform {
font-weight: 300;
font-size: 1.7rem;
color: var(--darkgrey);
}
/* Footer */
footer {
background: var(--darkgrey);
color: white;
text-align: center;
font-size: 1.5rem;
padding: 4rem 0 8rem;
}
/* FOR DEVELOPMENT */
/*#welcome-section {display: none} /**/
/*#about {display: none} /**/
/*#skills {display:none} /**/
/*#projects {display:none} /**/
/*#contact {display:none} /**/
/*.grid > * {border: 1px solid red} /**/
/* MEDIA QUERIES */
@media screen and (max-width: 20em) /*320px*/ {
.grid {
row-gap: 2rem;
}
#welcome-section {
min-height: 64rem;
}
.me-img{
margin: 0 -2rem 0 -1rem
}
.social {
margin-top: -12rem;
}
section {
padding-top: calc(var(--header-height) + 2rem);
padding-bottom: 2rem;
}
h2 {
font-size: 5.3rem;
}
.certs {
margin-top: -1rem !important;
}
#contact {
min-height: 70rem;
}
}
@media screen and (min-width: 26.25em) { /*420px*/
#welcome-section {
min-height: 85rem;
}
}
@media screen and (min-width: 33.75em) /*540px*/ {
#welcome-section {
min-height: 95rem;
}
.skills-list {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
h2 {
font-size: 7rem;
}
.skills-desc, .contact-desc {
font-size: 1.6rem;
}
.projects-grid {
grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
}
.button:not(.project-desc .button) {
font-size: 1.7rem;
}
.home-buttons {
row-gap: 2rem;
grid-template-columns: repeat(auto-fill, 14.5rem);
justify-items: start;
justify-content: start;
width: 100%;
}
.pubs {
margin-left: -1.6rem;
}
.social {
margin-top: -17rem;
}
.social a {
width: 4.5rem;
margin-bottom: 3rem;
font-size: 2.5rem;
padding: .75rem .5rem;
}
.extra > *:nth-child(1) {
width: 9.3rem;
}
.extra > *:nth-child(2) {
width: 12.5rem;
}
.extra > *:nth-child(3) {
width: 11.3rem;
}
.grant {
padding-left: 2rem;
}
#contact {
min-height: 84rem;
}
}
@media screen and (min-width: 40em) { /*640px*/
#welcome-section {
min-height: 105rem;
}
html {
font-size: 68%;
}
#skills > .grid {
grid-template-columns: 1fr 4rem;
}
.certs {
grid-row: 3 / 5;
grid-column: 2;
writing-mode: vertical-lr;
letter-spacing: .1rem;
text-align: center;
justify-content: center;
padding: 0 !important;
margin-top: 0 !important;
justify-self: end;
width: min-content;
}
.certs > .button {
padding: 0 .5rem;
width: min-content;
max-width: none;
height: 52%;
}
#skills h2, .skills-desc, .skill-img {
grid-column: 1 / 3;
}
.skills-list {
grid-row: 3;
margin-right: -4rem !important;
}
.other-skills {
grid-row: 4;
margin-right: -4rem !important;
}
.extra {
background: none;
grid-column: 1 / -1;
display: grid;
gap: 2rem;
grid-template-columns: repeat(4, auto);
grid-template-rows: 1fr;
}
.grant {
padding-left: 0rem;
}
}
@media screen and (min-width: 47.5em) { /*760px*/
section {
padding-top: calc(var(--header-height) + 7.5rem);
padding-bottom: 7.5rem;
}
.nav {
height: calc(var(--header-height) + 1.5rem);
margin: auto;
padding: 0 2rem 0 4rem;
}
.hamburger {
display: none;
}
.nav-list li a:hover::after {
position: absolute;
content: "";
width: 100%;
height: 0.2rem;
left: 0;
top: 2rem;
background: white;
}
.grid > div:not(.projects-grid) {
padding-left: 4rem;
padding-right: 4rem;
}
#welcome-section {
min-height: 110rem;
}
#contact {
min-height: 90rem;
}
.other-skills {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
padding-left: 2rem;
padding-right: 2rem;
}
}
@media screen and (max-width: 47.5em) { /*760px*/
section {
padding-top: calc(var(--header-height) + 6rem);
padding-bottom: 6rem;
}
.nav-menu { /* Hidden Nav Menu */
position: fixed;
top: var(--header-height);
right: -100%;
max-width: 30rem;
width: 70%;
height: 100%;
padding: 2rem;
background: var(--darkgrey);
opacity: .8;
transition: .5s;
font-size: 1.5rem;
font-weight: 300;
}
.nav-list {
padding: 0;
display: block;
}
.nav-list li a {
display: block;
width: 100%;
padding: 1.5rem;
}
.nav-list li a:hover {
transform: translateY(.5rem);
}
.nav-list li {
border-bottom: .1rem dotted white;
margin: 0;
}
.nav-list li:last-child {
border-bottom: none;
}
}
@media screen and (min-width: 61.875em) { /*990px*/
#welcome-section {
grid-template-columns: 1fr 1.5fr;
}
.home-buttons {
gap: 3rem;
grid-template-columns: 1fr;
}
.button {
padding-left: 1.5rem;
margin: 0;
}
.desc {
padding-top: 3rem;
}
.me-img {
justify-self: right;
margin-top: -10rem;
margin-bottom: -2.3rem;
}
.social {
position: relative;
flex-direction: row;
gap: 3rem;
justify-self: start;
align-self: end;
margin-top: -8rem;
}
#about > .grid {
grid-template-columns: 1fr 1fr;
}
.about-desc {
grid-column: 1;
grid-row: 1;
padding-top: 10rem;
font-size: 1.7rem;
}
.about-desc:after{
background: white;
height: .1rem;
width: 40%;
min-width: 24rem;
content: "";
display: block;
margin: 3rem auto 0 auto;
}
#about h2 {
grid-column: 1;
grid-row: 1;
}
#skills > .grid {
grid-template-columns : 1fr 1fr 4rem;
}
#skills h2 {
grid-row: 1;
grid-column: 1 !important;
margin-right: -4rem !important;
}
.skills-desc {
grid-row: 1;
grid-column: 1 !important;
padding-top: 10rem;
font-size: 1.7rem;
margin-right: -4rem !important;
}
.skill-img {
grid-row: 1;
grid-column: 2 / -1 !important;
padding: 0 4rem;
margin-left: 4rem !important;
}
.skill-img figcaption {
font-size: 1.5rem;
position: relative;
top: .5rem;
}
.skills-list div {
flex-direction: column;
}
.skills-list {
grid-template-rows: 1fr;
grid-template-columns: repeat(8, 1fr);
justify-items: center;
grid-row: 2 !important;
grid-column: 1 / 3;
}
.other-skills {
grid-row: 3 !important;
grid-column: 1 / 3;
}
.certs {
grid-row: 2 / 4 !important;
grid-column: 3;
justify-self: end;
}
.certs > .button {
padding: 0 .5rem;
width: min-content;
max-width: none;
height: 52%;
}
#skills h2, .skills-desc, .skill-img {
grid-column: 1 / 3;
}
.skills-list {
grid-row: 3;
margin-right: -4rem !important;
}
.other-skills {
grid-row: 4;
margin-right: -4rem !important;
}
.extra {
gap: 3rem;
padding-top: 3rem;
}
.contact-desc {
font-size: 1.7rem;
}
}
@media screen and (min-width: 64em) { /*1024px*/
.projects-grid {
grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
}
html {
font-size: 72%;
}
}
@media screen and (min-width: 80em) { /*1280px*/
.projects-grid {
padding: 0 max(4rem, 5%);
}
.extra {
gap: 4rem;
padding-top: 4rem;
justify-content: end;
}
.grant {
gap: .6rem;
}
html {
font-size: 75%;
}
}
/* show hidden nav menu with js */
.show {
right: 0;
}
/* show hidden project description with js */
.open {
height: auto;
padding: 1rem 2.5rem;
bottom: 0;
}
Also see: Tab Triggers